ボタンのカスタムショートコードを作る

ボタンのカスタムショートコードの作り方を解説します。

ボタンのカスタムショートコード

[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関数が実行され、指定したリンクとテキストでボタンが表示されます。