WordPress｜ショートコードの作成方法と引数の使い方

WordPressのショートコード作成方法と引数の使い方について解説します。

ショートコードを使うと投稿や固定ページ、ウィジェットなどでPHPを実行させることができます。

様々なショートコードが使えるようになるプラグインもありますが、自分の思ったような動作をしてくれないこともあるかと思います。

そのような場合はショートコードを自作してしまいましょう。

難しいイメージがあるかも知れませんが、簡単なものから順に試していけば大丈夫です。

1 WordPressのショートコード作成方法と使い方
2 ウィジェットでのショートコードの使い方
3 テンプレートでのショートコードの使い方
4 まとめ

WordPressのショートコード作成方法と使い方

WordPressのショートコードについて詳しくない方はメリットとデメリットを確認しておいてください。

WordPress｜ショートコードとは？メリットとデメリット

WordPressのショートコードとは何なのかをメリットやデメリットを交えながら解説します。

takalog.jp

それではショートコードの作り方と使い方を解説していきます。

文字列を返すショートコード

まずは決められた文字を返すだけのシンプルなショートコードを作成します。

function sampleFunc() {
    return 'おはよう';
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc() {

return 'おはよう';

}

add_shortcode('sample', 'sampleFunc');

1～3行目で「おはよう」という文字列を返す「sampleFunc」という関数を作成しています。

そして4行目で「add_shortcode」というショートコードを追加する関数を使って、「sample」という名前のショートコードが使われたら「sampleFunc」を実行するように設定しています。

add_shortcodeの第一引数はショートコードの名称、第二引数は呼び出す関数です。

上記をfunctions.phpに書いたら投稿画面で使ってみましょう。

[sample]

[sample]

保存して記事を確認しに行くと「おはよう」と表示されているはずです。

もし文字列を「おはよう」から「こんにちは」に変更したくなったら、返す文字列の部分だけ修正すればOKです。

function sampleFunc() {
    return 'こんにちは';
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc() {

return 'こんにちは';

}

add_shortcode('sample', 'sampleFunc');

こうするとショートコードを利用している箇所全てが「こんにちは」に変わってくれます。

変更の多そうな共通部分をショートコードにしておくと修正があった時に楽です。

HTMLを返すショートコード

続いてはHTMLコードを返すショートコードを作成します。

function sampleFunc() {
    return '<span style="color: red;">おはよう</span>';
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc() {

return '<span style="color: red;">おはよう</span>';

}

add_shortcode('sample', 'sampleFunc');

文字列を返す場合と同じ要領です。

[sample]

[sample]

文字色が赤のスタイルが適用された「おはよう」が表示されます。

初心者のやりがちなミス

文字列に「’（シングルクォーテーション）」や「”（ダブルクォーテーション）」が含まれている場合は注意してください。

全体を囲むクォーテーションと、中にあるクォーテーションが同じだとエラーになります。

例えば、下記はエラーになります。

function sampleFunc() {
    return "<span style="color: red;">おはよう</span>";
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc() {

return "<span style="color: red;">おはよう</span>";

}

add_shortcode('sample', 'sampleFunc');

ただし、中のクォーテーションの直前にバックスラッシュ（エンマーク）を入れてエスケープすれば問題ありません。

以下はエラーになりません。

function sampleFunc() {
    return "<span style=\"color: red;\">おはよう</span>";
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc() {

return "<span style=\"color: red;\">おはよう</span>";

}

add_shortcode('sample', 'sampleFunc');

Javascriptを返すショートコード

ショートコードはJavascriptも返せます。

function sampleFunc() {
    return '<script>alert("おはよう")</script>';
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc() {

return '<script>alert("おはよう")</script>';

}

add_shortcode('sample', 'sampleFunc');

[sample]

[sample]

記事を確認すると「おはよう」というアラートが表示されるはずです。

Google AdSenseのJavascriptコードをショートコードに設定しておくと便利です。

Wordpress｜記事中にアドセンス広告をショートコードで表示する方法

WordPressの記事中にグーグルアドセンス広告を表示するプラグインはいくつかあります。しかし、プラグインをたくさん入れ過ぎるとペ...

takalog.jp

WordPressの関数を使ったショートコード

WordPressには様々な関数が用意されていますが、それらをショートコードの中で使うこともできます。

function sampleFunc() {
    return get_bloginfo('name');
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc() {

return get_bloginfo('name');

}

add_shortcode('sample', 'sampleFunc');

上記は「get_bloginfo」を使ってブログ情報を取得しています。

get_bloginfoの第一引数には取得したい情報を表すキーワードを指定します。

[sample]

[sample]

get_bloginfoにnameが指定されているのでサイトのタイトルが表示されました。

引数のあるショートコード

これまでは固定された文字を返すだけでしたが、ショートコードに引数を渡して返す内容を変更することもできます。

function sampleFunc($atts) {
    extract(shortcode_atts(array(
        'num' => 0,
    ), $atts));
 
    return $num * 10;
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc($atts) {

extract(shortcode_atts(array(

'num' => 0,

), $atts));

return $num * 10;

}

add_shortcode('sample', 'sampleFunc');

上記は渡された値を10倍にして返すショートコードです。

1行目の「$atts」で引数を受け取ります。

そして、2～4行目ではshortcode_attsで引数の初期値を設定しつつ、extractでそれらを変数として利用できるように設定しています。

3行目の「’num’ => 0」は、numが変数名、0が初期値を表しています。

numという名前の引数が渡されなかったら値を0として扱うという意味です。

引数のあるショートコードの使い方は、ショートコード名の後ろにスペースを入れて変数名と値を指定します。

【その1】[sample num='100']

【その2】[sample num=100]

【その3】[sample]

【その1】[sample num='100']

【その2】[sample num=100]

【その3】[sample]

引数の値はクォーテーションで囲まなくても構いませんが、スペースを含む際には必要です。

【その3】のように引数を渡さない場合は設定された初期値が適用され、今回はnumを0として扱います。

表示内容を確認してみましょう。

【その1】と【その2】は100に10をかけた値1000が、【その3】は0に10をかけた値0が表示されています。

また、ショートコードの引数は好きな数だけ追加できます。

function sampleFunc($atts) {
    extract(shortcode_atts(array(
        'person' => '私',
        'power' => '戦闘力',
        'value' => 53,
    ), $atts));
 
    return $person . 'の' . $power . 'は' . $value . '万です。';
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc($atts) {

extract(shortcode_atts(array(

'person' => '私',

'power' => '戦闘力',

'value' => 53,

), $atts));

return $person . 'の' . $power . 'は' . $value . '万です。';

}

add_shortcode('sample', 'sampleFunc');

【その1】[sample]

【その2】[sample person='あなた' value='1']

【その1】[sample]

【その2】[sample person='あなた' value='1']

省略した引数には初期値が使われます。

囲み型のショートコード

ショートコードはHTMLのように文字列を囲んで使うことも可能です。

function sampleFunc($atts, $text) {
    extract(shortcode_atts(array(
        'color' => 'red',
    ), $atts));
 
    return '<span style="color: ' . $color . ';">' . $text . '</span>';
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc($atts, $text) {

extract(shortcode_atts(array(

'color' => 'red',

), $atts));

return '<span style="color: ' . $color . ';">' . $text . '</span>';

}

add_shortcode('sample', 'sampleFunc');

ショートコードで囲った文字列は1行目の第二引数「$text」に入ります。

囲まれた文字が無い場合「$text」は空文字になります。

【その1】[sample color='blue']おはよう[/sample]

【その2】[sample color='blue'][/sample]

【その1】[sample color='blue']おはよう[/sample]

【その2】[sample color='blue'][/sample]

ウィジェットでのショートコードの使い方

作成したショートコードはウィジェットで使うこともできます。

ウィジェットでショートコードを利用するにはfunctions.phpに以下の1行を追加します。

add_filter('widget_text', 'do_shortcode');

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

使い方は投稿本文と同じです。

function sampleFunc() {
    return 'こんばんは';
}
add_shortcode('sample', 'sampleFunc');

function sampleFunc() {

return 'こんばんは';

}

add_shortcode('sample', 'sampleFunc');

[sample]

[sample]

以下はカスタムHTMLとテキストのウィジェットで使用した例です。

テンプレートでのショートコードの使い方

テンプレートの中でもショートコードを使うことができます。

テンプレートでショートコードを利用するにはdo_shortcode関数を使って、引数にショートコードを渡します。

<?php echo do_shortcode('[sample]'); ?>

1	<?php echo do_shortcode('[sample]'); ?>

まとめ

WordPressのショートコード作成方法と引数の使い方について解説してきました。

ショートコードは引数を与えてやることで処理する内容を変更できるので便利です。

記事中だけでなくウィジェットやテンプレートでも使用することができるので、作ったショートコードは様々な場所で使い回すことが可能です。

ショートコードの作成方法と使い方をマスターして作業を単純化したり凝った内容のページを作成したりしてみてください。