WordPressでショートコード(short code)を利用する方法を解説【無料申し込みCTAボタンのショートコードを作成】
最終更新日：
Word Pressでは、ショートコードという機能があります。今回作成したのは、ショートコードを利用したCTAボタンです。
簡単に説明すると、ワードプレスの編集画面で、1分で無料申し込みしてみると入力すると、以下のような申し込みボタンが自動生成できるような機能です。
目次 (PRも含まれます）
ショートコードを利用するメリット
ショートコードを利用するメリットは、以下の通りです。
- 複雑な処理を、記事編集画面でやろうとすると、
<a href="https://hoge.com" target="_blank"> 1分で無料登録してみる</a>のように書かなくてはならないので、時間がかかる。一方ショートカードを利用すると、簡単にCTAボタンのスタイリングを適応できる - 外注する際に、HTMLを理解していない人にショートコードを利用してもらうことができる
ショートコードの実装方法
ショートコードの実装方法としては、以下の通りです。
functions.phpにショートコードを実装する方法を記入style.cssにリンクのCSSを作成する
functions.php にショートコードを実装する方法を記入
functions.phpに以下のようにコードを実装します。
- 実行する処理の関数を記述
- ショートコードとして呼び出すときの名前と、関数名を指定するadd_shortcode関数を記述
という流れになります。
該当するfunctions.phpのソースコードがこちらです。
//CTAのショートコード
function cta_func( $atts) { //1
extract(shortcode_atts(array(
'url' => "未入力です",
'text' => "未入力です"
), $atts));
return "<a href='$url' class='cta' target="_blank">$text</a>";
}
add_shortcode('cta', 'cta_func'); //2extract関数は、配列から変数を定義する関数です。サンプルコードはこちらとなります。
<?php
/* $var_array はwddx_deserializeから返された配列と仮定します */
$size = "large";
$var_array = array("color" => "blue",
"size" => "medium",
"shape" => "sphere");
extract($var_array, EXTR_PREFIX_SAME, "wddx");
echo "$color, $size, $shape, $wddx_size\n";
?>
「shortcode_atts」はユーザーがショートコードで指定した属性($atts)を、予め定義した属性($defaults_array)と結合し、必要に応じてデフォルト値をセットするWordpressの関数です。
add_shortcode関数で呼び出し名と実行関数を記述します。
add_shortcode('cta', 'cta_func');
CSSの指定
style.cssに以下のように指定します。
/* cta */
a.cta {
background-color: rgb(44, 182, 150);
font-weight: bold;
max-width: 100%;
display: block;
text-align: center;
padding: 20px;
border-radius: 10px;
color: #ffffff !important;
margin: 40px 20px;
}
a.cta:hover {
opacity: 0.5;
transition: 0.5s;
}WordPressのエディタから呼び出し
最後にWordPressのエディタから呼び出します。
これで、add_short_codes関数で定義した呼び出し名から関数が実行されます。
