【WordPress】ショートコードの基本形

WordPressでオリジナルのショートコードを作りたい場合の基本形について、忘れがちなので備忘録もかねて記載します。

WordPressショートコードの作成

function.phpなどに以下を追加します。

function ext_short_code($atts) {
    extract(shortcode_atts(array(
        'kw-google' => null, //デフォルトはnull
        'kw-yahoo' => 'fugafuga' //デフォルトは'fugafuga'
    ), $atts));
    $html = '<ul>';
    $html .= '<li><a href="https://www.google.com/search?q='.$kw-google.'">Google</a></li>';
    $html .= '<li><a href="https://search.yahoo.co.jp/search?p='.$kw-yahoo.'">Google</a></li>';
    $html .= '</ul>';

    return $html;
}
add_shortcode('search-link', 'ext_short_code');

（とりあえず出力されるHTMLは何の役にも立ちませんが。。。）

ショートコードの処理関数を作り、add_shortcode()関数を使って登録します。

add_shortcode()の第一引数がショートコード名になり、投稿編集画面にて角カッコを使って呼び出すことができます。

[search-link kw-google='hogehoge' kw-yahoo='']

ショートコードから渡される引数は、shortcode_atts()関数を通すことでユーザー指定の値とデフォルト値を結合した配列を取り出すことができます。

extract(shortcode_atts(array(
    'kw-google' => null, //デフォルトはnull
    'kw-yahoo' => 'fugafuga' //デフォルトは'fugafuga'
), $atts));

関数内でHTMLなどのコードを作ってreturnで返してあげれば、ショートコードを入力した場所にコードが反映されます。

また、phpからショートコードを呼び出すには do_shortcode() 関数を使用します。

do_shortcodeの第一引数にショートコードの文字列をそのまま渡せばOKですし、変数の組み合わせも可能です。

$html = do_shortcode('[search-link kw-google="'.$kw_g.'" kw-yahoo="'.$kw_y.'"]');
echo $html;

結果はhtmlの文字列などで返ってくるため、内容をechoで表示します。