ショートコードの作り方

投稿日 2013/10/28

WordPress 3.6 を使用。

ショートコードとは、一言でいえば記事中に埋め込めるプログラムのこと。

記事中に直接 PHP のコードを埋め込めるようになる Exec-PHP 等のプラグインもあるけど、標準でサポートされてる＆コードの使いまわしが容易なショートコードを使う方がずっとかしこい。

基本的には functions.php（Themify のテーマ使用時は custom-functions.php）にコードを記述して使用する。

詳しくはWordPress Codex 日本語版を参照。

1 自己完結型
- 1.1 作成方法
- 1.2 使用方法
2 囲み型
- 2.1 作成方法
- 2.2 使用方法
3 テンプレート内でショートコードを使う
4 ウィジェット内でショートコードを使う

自己完結型

[ショートコード] もしくは [ショートコード /] という記述がほかの文字列に置き換わって表示されるタイプ。

[ショートコード引数1=”値1″ 引数2=”値2″] のように引数を定義することも可能。

作成方法

例として、本文中に [mod_date] と書くと最終更新日を表示するショートコードを作成する。

add_shortcode('mod_date', 'get_modified_date');
function get_modified_date($atts) {
    extract(shortcode_atts(array(
        'format' => null,
        'class'  => 'mod-date'
    ), $atts));

    $modified_date;
    if (empty($format)) {
        $modified_date = get_the_modified_time(get_option('date_format'));
    } else {
        $modified_date = get_the_modified_time($format);
    }

    if (!empty($class)) {
        $class = ' class="' . $class . '" ';
    }

    return '<time datetime="' . get_the_modified_time('o-m-d') . '"' . $class . '>' . $modified_date . '</time>';
}

add_shortcode('mod_date', 'get_modified_date');

function get_modified_date($atts) {

extract(shortcode_atts(array(

'format' => null,

'class' => 'mod-date'

), $atts));

$modified_date;

if (empty($format)) {

$modified_date = get_the_modified_time(get_option('date_format'));

} else {

$modified_date = get_the_modified_time($format);

}

if (!empty($class)) {

$class = ' class="' . $class . '" ';

}

return '<time datetime="' . get_the_modified_time('o-m-d') . '"' . $class . '>' . $modified_date . '</time>';

}

1行目: ショートコードの定義。 [mod_date] というショートコードが書かれると get_modified_date という関数の戻り値に置き換えて表示する。
2行目以降: get_modified_date 関数の定義。この関数は引数を受け付ける。
3～6行目: このショートコードは format と class の2つの引数を受け付ける。; format 引数の初期値は null、 class 引数の初期値は mod-date。; format、 class の各引数の値を $format、 $class のローカル変数に格納する。; 以上のことをいっぺんに書いている。; 引数名（属性名）は必ず小文字に変換される。
8～13行目: format 引数がある場合は入力されたフォーマットを使用。; ない場合は設定画面で指定されている年月日フォーマットを使用。
15～17行目: class 属性の作成。; class 引数に明示的に null が指定された場合は class 属性自体を設定しない。
19行目: 最終的な出力文字列の作成。

使用方法

最終更新日が 2013年10月31日、デフォルトの日付フォーマットが Y/m/d だとして…

[mod_date] と入力した場合: <time datetime="2013-10-31" class="mod-date">2013/10/31</time> というタグが出力される。
[mod_date format="m.d.y"] と入力した場合: <time datetime="2013-10-31" class="mod-date">10.31.13</time> というタグが出力される。
[mod_date class="hoge"] と入力した場合: <time datetime="2013-10-31" class="hoge">2013/10/31</time> というタグが出力される。
[mod_date format="Ymd" class="hoge2"] と入力した場合: <time datetime="2013-10-31" class="hoge2">20131031</time> というタグが出力される。

囲み型

[ショートコード]文章[/ショートコード] という記述で使用するタイプ。囲まれた文章を引数として受け取り処理する。

[ショートコード引数1=”値1″]文章[/ショートコード] のように引数を定義することも可能。

作成方法

add_shortcode('unko', 'get_unko');
function get_unko($atts, $content = null) {
    return '<span class="unko">' . $content . '</span>';
}

add_shortcode('unko', 'get_unko');

function get_unko($atts, $content = null) {

return '' . $content . '';

}

1行目: ショートコードの定義。 [unko] というショートコードが書かれると get_unko という関数の戻り値に置き換えて表示する。
2行目: get_unko 関数の定義。この関数は引数を受け付ける。
3行目: ショートコードに囲まれた文章を で囲って返却する。

使用方法

[unko]かりんとう[/unko] と入力した場合: かりんとう というタグが出力される。

テンプレート内でショートコードを使う

特に設定などは不要。下記のように書けばOK。

<?php
    // 自己完結型の場合
    echo do_shortcode('[ショートコード 引数="値"]');
    // 囲み型の場合
    echo do_shortcode('[ショートコード]' . $変数など . '[/ショートコード]');
?>

<?php

// 自己完結型の場合

echo do_shortcode('[ショートコード引数="値"]');

// 囲み型の場合

echo do_shortcode('[ショートコード]' . $変数など . '[/ショートコード]');

ウィジェット内でショートコードを使う

functions.php（Themify のテーマ使用時は custom-functions.php）にコードを記述して機能を有効にする必要がある。

add_filter('widget_text', 'do_shortcode');

1	add_filter('widget_text', 'do_shortcode');

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31