[WordPress] ショートコードの使い方とオリジナルの独自ショートコードの定義

ショートコートとは

WordPressの便利機能の1つ ショートコード について、使い方をまとめます。ショートコードとは任意のコードの出力を、短い記述で記事中に埋め込むためのものです。

例えば記事中にYouTubeの動画を埋め込む場合、以下のようなショートコードで記述することが可能です。このショートコードは、Wordpress側で用意されている者です。


上記ショートコードは次のように表示されます。

ショートコードいろいろ

動画や画像、ドキュメントなど様々なコンテンツのショートコードが用意されています。上記URLから確認できます。

オリジナルのショートコードを定義

ショートコードは WordPress がもともと用意しているもののほかに、ユーザーが独自にオリジナルのショートコードを定義することも可能です。

functions.php 次のコードを記述します。

// ショートコード定義
// [my_short_code] と記事内に記述して利用する
add_shortcode('my_short_code', function() {
    return '<h2>my short code です。</h2>';
});

記事内に上記ショートコードを埋め込むことで、return値が出力されていることが確認できます。存在しないショートコードの場合、そのまま文字列で出力されます。

引数を取るショートコードの定義

ショートコードには引数を取るように定義することも可能です。例えば引数で指定した文字列を反転して出力するショートコードは次のようになります。

// ショートコード定義
add_shortcode('reverse', function($atts) {
    extract(shortcode_atts(array(
        'str' => '', // キーと初期値のペア
    ), $atts));
    return strrev($str);
});

引数は次のように指定します。

[reverse str="123456789"]

テーマ内の記事以外の場所で使う方法

ショートコードを [my_short_code] と書いて使えるのは記事内でのみです。テーマ内の任意の場所(index.php など)で使うには次のようにします。

<?php echo do_shortcode('[my_short_code]'); ?>
<?php echo do_shortcode('[reverse str="123456789"]'); ?>

do_shortcode 関数は、引数でショートコード実行し出力を取得します。引数で指定したショートコードが存在しない場合、引数の値がそのまま出力されます。

ショートコードを埋め込まず文字列のまま出力する方法

あまり需要はないかもしれませんが、ショートコードを文字列のまま出力するには2重の括弧 [] でくくって記述します。

例えば [my_short_code] というショートコードが定義されているが、”[my_short_code]” という文字列そのままで出力したい場合は次のようにします。

[[my_short_code]]

以上便利なショートコードの使い方でした。