WordPressショートコードの書き方いろいろ

004_wordpress_shortcode

投稿記事内や固定ページのコンテンツ内でちょっとしたPHPのコードが書きたいなぁ…
そんな時はWordPressの「ショートコード」という機能が便利です。

1.どんなふうに書くの?

テーマ内の「functions.php」ファイルでショートコードを定義して、
投稿記事や固定ページの編集画面の本文内でショートコードを記述します。

1.1 基本的な書き方

一番簡単でベーシックな書き方。

functions.php

function basic_like() {
    $name = 'あわわ';
    $animal = 'ネコ';
    
    return $name . 'さんは' . $animal . 'が好き。';
}
add_shortcode('basic', 'basic_like');

記事本文内

[basic]

「add_shortcode()」というのがショートコードを定義するためのWordPressの関数で、
第1引数にショートコード名、第2引数に実行する関数名を指定します。
関数名は他の関数(WordPressにもともとあるものや、プラグインで使用しているものなど)と
衝突しないように、一意な名前をつけるようにしましょう。

ページを表示すると、ショートコードを記述した部分には
以下のように表示されます。

表示結果

あわわさんはネコが好き。

戻り値をHTMLで書くこともできるので、
毎回記事内で書いている内容などをショートコードにしておけば
更新の効率も上がりますね!

1.2 ショートコードで挟む

文章をショートコードで挟んでいろいろやる場合の書き方。

functions.php

function strong_like($atts, $content = null) {
    return '<strong>' . $content . '</strong>';
}
add_shortcode('strong', 'strong_like');

記事本文内

[strong]あわわさんはネコが好き![/strong]

表示結果

あわわさんはネコが好き!

第2引数である「$contents」に挟んだ文字列が格納されて、指定した関数が実行されます。
class指定のあるタグ等で囲みたい場合には、いちいち書くよりもショートコードの方が楽かもしれませんね。
ところで第一引数の「$attr」は何?と思ったかもしれませんが、それは次の項で。

1.3 ショートコードで引数を指定する。

ショートコードを実行するときに、その時々で違う値を、引数として渡したい場合があります。
そんな場合の書き方。

functions.php

function what_like($atts) {
    extract(shortcode_atts(array(
        'name' => 'ななし',
        'animal' => 'イヌ'
    ), $atts));
    
    return $name . 'さんは' . $animal . 'が好き?';
}
add_shortcode('what', 'what_like');

記事本文内

[what name="あわわ" animal="ネコ"]

表示結果

あわわさんはネコが好き?

第1引数の「$atts」にショートコードで指定した引数の値が格納されていて、
関数の冒頭(以下の部分)でPHPの変数に格納しています。

extract(shortcode_atts(array(
    ‘name’ => ‘ななし’,
    ‘animal’ => ‘イヌ’
), $atts));

「extract()」はPHPの関数で、連想配列のキー値を変数名にした変数に値が格納されます。
つまりこの記述以降は、変数「$name」「$animal」として、
ショートコードで指定した値を扱うことができるのです!
ちなみになんにも指定しないと、デフォルト値である「ななし」「イヌ」が変数に格納されます。

記事本文内

[what]

表示結果

ななしさんはイヌが好き?

以上がショートコードの基本的な書き方です。
PHPが書けるので、覚えてしまえばいろいろ応用ができそうですね!

2.投稿記事記事(固定ページ)本文にしか書けないの?

ショートコードが書けるのは、実は投稿記事や固定ページだけではないんです!

2.1 テーマ内に書く

テーマ内でショートコードを書きたい場合には、以下のように記述します。

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

「do_shortcode()」というのは、ショートコードを実行するためのWordPressの関数です。
引数で渡された文字列内に記述されているショートコードを実行します。

2.2 ウィジェット(サイドバー)に書く

ウィジェット(サイドバー)にショートコードを書きたい場合は、
functions.phpファイル内に、以下の記述を追記します。

add_filter('widget_text', 'do_shortcode');

テーマやウィジェット内でも書けるのであれば、
ショートコードを書けない場所はない!と言っても過言ではないでしょう!

参考

今回の記事を書くにあたって、以下のページを参考にさせていただきました。

ありがとうございました!

コメント

Back to Top