WordPressでショートコードを作る

2020.05.13
未分類

WordPress内でショートコードを使う場面として、プラグインを利用する際にそこで発行されたショートコードを固定ページなどに記述して使用される方も多いと思います。今回はそのショートコードを自作して利用する方法を解説していきます。

1. ショートコードの基本
2. 固定ページ投稿でホームURLを表示させる

ショートコードの基本

ショートコードを作成するにはお馴染みfunctions.phpにコードを追加することでオリジナルのショートコードを作成することが可能です。下記に簡単なコードを作成しました。

/*-----------------------------------
 ショートコード
-----------------------------------*/
function sc_hello_func() {
  return 'こんにちは！';
}
add_shortcode( 'sc_hello', 'sc_hello_func' );

sc_hello_funcで関数を作成してadd_shortcodeにセットしてます。sc_helloのパラメータは実際ショートコードにする際の文字列になりますので固定ページなどに記述するときは[sc_hello]となります。
これで [sc_hello] は公開側に出力された際には「こんにちは！」と表示されます。

固定ページ投稿でホームURLを表示させる

テスト環境などでHTMLでページを作成し、固定ページに登録する際に本番環境とパスが異なることがあります。
「/」を使ったサイトルートパスでテストも本番もそのまま表示が変わりがなければ問題ありませんが、そうではない場合再度リンクを変更しなければならないときにショートコードを使って回避する方法もあります。

1	`home_url('/')`

WordPressのURLを出力する際にhome_url(‘/’)をよく利用しますが、こちらはテンプレートでは使えるものの、固定ページの投稿では使えません。
これをショートコードを使って投稿でも使えるようにします。

/*-----------------------------------
 ショートコード
-----------------------------------*/
function sc_home_url() {
  return esc_url( home_url('/') );
}
add_shortcode('home_url', 'sc_home_url');

はい、上記コードをfunctions.phpに追記すれば、投稿エリアに[home_url]と記述するだけでWordPressのホームのURLが表示されます。

<a href="[home_url]company/">企業情報</a>
<a href="[home_url]company/message/">ごあいさつ</a>
<a href="[home_url]company/history/">沿革</a>

投稿エリアにこんな感じで記述すれば公開側ではフルパスでリンクが生成されているはずです。

上記コードで最初return esc_url( home_url(‘/’) );でなく、echo esc_url( home_url(‘/’) );と書いたのですが、そしたら表示がおかしくなりました。
おそらくthe_post()されるときにechoが働いているからだと思いますので、ショートコードを作成するときはreturnで返していくというのが正しいのでしょう。
それでは！