【WordPress】自己完結型ショートコードの書き方まとめ

ショートコードの書き方まとめ。

ショートコードの種類

• 自己完結型　[shortcode]
• 囲み型　[shortcode]ほにゃらら[/shortcode]

自己完結型のショートコード

基本形

「ショートコードのサンプルです」という文章を表示させる

functions.php

function sample_shortcode() {
  return "ショートコードのサンプルです";
}
add_shortcode('sample_text', 'sample_shortcode');

add_shortcode(‘ショートコード名’, ‘ショートコードの中身の関数’);

投稿画面

[sample_text]

属性を追加する

shortcode_attsについて

shortcode_attsを使う。

shortcode_atts( $pairs , $atts );

ショートコードの無効な属性値を除外する。属性が省略されている場合は、デフォルト値を設定する。

https://elearn.jp/wpman/function/shortcode_atts.html/comment-page-1

つまり、下のようなショートコードがあったとすると、

function shortcode_sample($atts) {
    extract(shortcode_atts(array(
      'food' => 'おにぎり',
      'color' => 'ピンク'),$atts));
    
    return "好きな食べ物は" . $food . "で、好きな色は" . $color . "です";
}
add_shortcode('sample', 'shortcode_sample');

array(
      'food' => 'おにぎり',
      'color' => 'ピンク'

では、デフォルト値を設定している。

ショートコードを呼び出す時に[sample]といった感じで引数が設定されていなかったり、引数に「food」や「color」以外のものが入っていたらそれを除外して、このデフォルト値を表示する。

デフォルトでは、「好きな食べ物はおにぎりで、好きな色はピンクです」と表示される。

これが、[sample food='ラーメン' color='赤']だと、「好きな食べ物はラーメンで、好きな色は赤です」と表示される。

extractについて

こんな感じでshortcode_atts()がextract()で囲われている。

extract(shortcode_atts(array(
      'food' => 'おにぎり',
      'color' => 'ピンク'),$atts));

extract — 配列からシンボルテーブルに変数をインポートする

各キーについて変数名として有効であるかどうか、 そして、シンボルテーブルの既存の変数と衝突しないかどうかを確認します。

https://www.php.net/manual/ja/function.extract.php

連想配列のキーを変数名、値を変数の値として、配列から変数を作成してくれるもの。

上の例だと、

$food = ‘おにぎり’
$color = ‘ピンク’

としてくれる。