wordpress でショートコードから別のショートコードを呼び出す方法について

wordpress であらかじめプログラムとして組み込まれた定型文を大括弧 ([ ]) で囲われた短いコード (ショートコード) で呼び出すことが可能な機能があります。

ショートコードは wordpress 本体やプラグイン、テーマで用意されているものもあれば、自前で作成することも可能になっており、ブログ エントリ作成の効率化に役立ちます。

ショートコードについて、ショートコード内から別のショートコードを呼び出すことも可能になっていますが、やり方に戸惑ったため、備忘録としてまとめました。

ショートコード内から別のショートコードを呼び出す方法について

do_shortcode () を利用して、ショートコード内から呼び出される文字列をショートコードとして認識させることで可能となります。

逆に do_shortcode () を利用しない場合、返される文字列はショートコードとして扱われません。

サンプル コード

<?php

function func() {
  $content = do_shortcode('[呼び出すショートコード名]');
  return $content;
}
add_shortcode('ショートコード名', 'func');

利用シーン

格闘ゲームのコマンド入力について、wordpress の投稿編集画面で [2][3][6] とショートコードを記述したら と表示できるようにするために、ショートコード内から別のショートコード (Font Awesome プラグインで利用できるショートコード) を呼び出す必要がありました。

ちなみに格闘ゲームのコマンドの矢印と数字の関係性は以下の画像のとおりとなっています。

やったこと

• Font Awesome プラグインのインストール
• wordpress テーマ配下にあるファイルの編集
  • style.css
  • functions.php

style.css

スタイルシートの中では、 を対応した数字ごとに回転させるようにするための設定を追加しています。

.rotate1 {
display: inline-block;
transform: rotate(-45deg) rotateY(180deg);
}
.rotate2 {
display: inline-block;
transform: rotate(90deg);
}
.rotate3 {
display: inline-block;
transform: rotate(45deg);
}
.rotate4 {
display: inline-block;
transform: rotateY(180deg);
}
.rotate5 {
display: inline-block;
transform: rotate(0deg);
}
.rotate6 {
display: inline-block;
transform: rotate(0deg);
}
.rotate7 {
display: inline-block;
transform: rotate(45deg) rotateY(180deg);
}
.rotate8 {
display: inline-block;
transform: rotate(-90deg);
}
.rotate9 {
display: inline-block;
transform: rotate(-45deg);
}
.command {
display: inline-block;
}

functions.php

数字ごとにショートコードを作成しており、そのショートコードの中で Font Awesome プラグインで利用できるショートコード を呼び出す + 上記で追加したスタイルシートの内容を反映するように記述しています。

なお、[5] については、ニュートラルの意味となるので を呼び出すようにしています。

function arrow1() {
$content = do_shortcode('[icon name="arrow-right" prefix="fas" class="rotate1"]');
return $content;
}
add_shortcode('1', 'arrow1');

function arrow2() {
$content = do_shortcode('[icon name="arrow-right" prefix="fas" class="rotate2"]');
return $content;
}
add_shortcode('2', 'arrow2');

function arrow3() {
$content = do_shortcode('[icon name="arrow-right" prefix="fas" class="rotate3"]');
return $content;
}
add_shortcode('3', 'arrow3');

function arrow4() {
$content = do_shortcode('[icon name="arrow-right" prefix="fas" class="rotate4"]');
return $content;
}
add_shortcode('4', 'arrow4');

function arrow5() {
$content = do_shortcode('[icon name="n" prefix="fas" class="rotate5"]');
return $content;
}
add_shortcode('5', 'arrow5');

function arrow6() {
$content = do_shortcode('[icon name="arrow-right" prefix="fas" class="rotate6"]');
return $content;
}
add_shortcode('6', 'arrow6');

function arrow7() {
$content = do_shortcode('[icon name="arrow-right" prefix="fas" class="rotate7"]');
return $content;
}
add_shortcode('7', 'arrow7');

function arrow8() {
$content = do_shortcode('[icon name="arrow-right" prefix="fas" class="rotate8"]');
return $content;
}
add_shortcode('8', 'arrow8');

function arrow9() {
$content = do_shortcode('[icon name="arrow-right" prefix="fas" class="rotate9"]');
return $content;
}
add_shortcode('9', 'arrow9');

ショートコードでの出力結果

関連サイト

• do_shortcode() – Function | Developer.WordPress.org
  https://developer.wordpress.org/reference/functions/do_shortcode/
• Font Awesome - WordPress プラグイン | WordPress.org 日本語
  https://ja.wordpress.org/plugins/font-awesome/
• Font Awesome
  https://fontawesome.com/