ボタンのカスタムショートコードの作り方を解説します。
ボタンのカスタムショートコード
[btn link="https://www.example.com"]クリック[/btn]
投稿画面でブロック挿入ツールからショートコードを選択します。次に、上記のショートコードを記述します。
functions.phpに記述するコード
function my_shortcode($attrs, $content = '') {
return '<div class="entry-btn"><a class="btn" href="' . $attrs['link'] .'">' . $content . '</a></div>';
}
add_shortcode('btn', 'my_shortcode');
functions.phpに上記のコードを記述します。
コードの解説
my_shortcodeという名前の関数を定義
function my_shortcode($attrs, $content = '') {
-
my_shortcodeという名前の関数を定義しています。この関数は、$attrsと$contentという二つのパラメータを受け取ります。これらのパラメータは、ショートコードが展開される際に、どのような内容が表示されるかを制御するために使用されます。
-
$attrsはショートコードに指定された属性を格納する連想配列です。例えば、ショートコード[btn link="https://www.example.com"]クリック[/btn]の場合、$attrs配列にはlink⇒https://www.example.comというキーと値のペアが含まれます。これにより、link属性に設定されたURLにアクセスすることができます。
-
$contentはショートコード内のコンテンツ（今回の例では「クリック」）を表します。デフォルトでは空の文字列です。
$attrs['link']と$content : ショートコードのキー要素の理解
return '<div class="entry-btn"><a class="btn" href="' . $attrs['link'] .'">' . $content . '</a></div>';
- 関数はHTMLの構造を文字列として返します。
-
$attrs['link']：これは$attrs配列からlinkキーに対応する値を取り出します。ショートコードに[btn link="https://example.com"]のように記述されていれば、https://example.comがこの部分に代入されます。
-
$content: これはショートコードの開始タグと終了タグの間のコンテンツを表します。例えば、ショートコード[btn link="https://www.example.com"]クリック[/btn]の場合、「クリック」が$contentに代入され、ページに表示されます。
add_shortcode 関数
add_shortcode('btn', 'my_shortcode');
add_shortcode 関数は、第一引数にショートコードの名前（この場合btn）と、第二引数にこのショートコードが呼ばれたときに実行する関数（my_shortcode）をWordPressに登録します。これにより、投稿やページ内で[btn]というショートコードを使用すると、my_shortcode関数が実行され、指定したリンクとテキストでボタンが表示されます。