WordPress知識メモ｜ショートコードを新たに追加する方法

お馴染みのContact Form7などでは、
[contact-form-7 id=”99999″ title=”Form 1″]
みたいに、
ショートコードと呼ばれるもので固定ページ等に書く。
要するに、ソースコードの媒介。

このような、ショートコードそのものを機能として追加開発する場合のメモ。

ショートコードの基本

まず、functions.phpに下記コードを記述する。

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

この中で、「shortcode1」という文字があるが、内部的なメソッド名なので、利用者にとっては関係のない文字。

その後、投稿画面等で

[displaySC]

と記述する。
そうすると、この例では「ショートコードのサンプルです」と表示されることになる。

引数を使った応用例

dtやddタグを繰り返すのが面倒なことがある。
このようなとき、ショートコードを活用することで非常に見やすくなる。
functions.phpに下記コードを記述する。

function shortcode2($atts) {
    extract(shortcode_atts(array(
        'dt' => 'タイトル',
        'dd' => '内容',
    ), $atts));
    return '<dt class="scdt">' . $dt . '</dt><dd class="scdd">' . $dd . '</dd>';
}
add_shortcode('repeatDTDD', 'shortcode2');

ここでは、dtタグには「.scdt」クラス、ddタグには「.scdd」クラスを指定しており、
CSSで加工できるようにしている。

その後、投稿画面等で

<dl>
[repeatDTDD dt="タイトル1" dd="内容1"]
[repeatDTDD dt="タイトル2" dd="内容2"]
[repeatDTDD dt="タイトル3" dd="内容3"]
・・・
</dl>

と記述する。