とっちゃん@nyanco! です。
今回はWordPress（ワードプレス）の「CSS変数」のように使える「ショートコード」の定義の仕方のご紹介です。
簡単に「ショートコード」を設定できるプラグインもありますが、今回はプラグインは使わずに「functions.php」に記述する方法でのご紹介です。
「ショートコード」を「変数」的に使う
WordPressの投稿記事内で、何度も使用する文言だけど文言内容を変更する可能性があるので、「CSS変数（カスタムプロパティ）」みたいに一括管理できるようにする方法はないですかにゃ？
ニッチなニーズだと思いますが、そんな時に便利だったのがWordPressの「ショートコード」という機能です。
「ショートコード」って聞いたことあるけど難しくないのですかにゃ？？
「ショートコード」の定義を「functions.php」に記述するので、その点だけややハードルが高いですが、「ショートコード」を定義して自作すること自体はとても簡単だったりします。
「テンプレート」という機能でも近いことはできそうですが、無駄にファイルが増えることになるので「ショートコード」を使う方がスマートだと思います。
「ショートコード」定義方法
注意点：作業前に必ずバックアップを！
定義方法の前にまず注意点を。
「functions.php」は記述を間違うとサイトが真っ白になったり、最悪WordPressの管理画面にもアクセスできなくなるので、作業前に必ずFTPソフトなどで「functions.php」ファイルのバックアップを取っておくようにしてください。
普通に「テキスト」を出力するショートコード
それではまずはシンプルに「テキスト」を出力する「ショートコード」の定義です。
「functions.php」の任意の場所に下記コードを記述（コピペOK）します。
<?php //ショートコードで「テスト」と出力
function test_func() { return 'テスト'; }
add_shortcode('test', 'test_func'); ?>以下、簡単な解説です。
- 1行目 php構文スタート。「//」以下のコメントアウトで「何のためのコードか？」分かるようにメモしておくと後から見てもすぐに分かるので便利です。
- 2行目 「test_func」というユーザー定義関数の内容を定義しています（「test_func」は任意の文字列でOK）。「return」以降に「’」または「”」で囲って出力したい文字列（今回は「テスト」）を記述します。
- 3行目 「add_shortcode」関数の1つ目のパラメータに「ショートコード名（今回は「test」）」を、2つ目のパラメータに「実行する関数名（2行目で定義した「test_func」）」を指定しています。
たったこの3行だけで、投稿記事に [test] と書けば「テスト」と出力されるようになります！
「functions.php」の「return ‘テスト‘」部分を変更したら、 [test] と書いたところを全て一括で変更することができますにゃ〜
「htmlタグ」を出力するショートコード
ちなみに出力できるのは「文字列」だけですかにゃ？
「htmlタグ」も出力できたら色々できて最高ですにゃ〜
ズバリ、「htmlタグ」も出力できます！
しかも、下記のように「return」以降に普通にhtmlを記述するだけでOK！
<?php //ショートコードで「リンク付きの『テスト』」と出力
function test_func() { return '<a href="https://blog.nyanco.me/" target="_blank">テスト</a>'; }
add_shortcode('test', 'test_func'); ?>上記で、「https://blog.nyanco.me/」へのリンクがついた「テスト」という文字が出力されます。
注意点としては、htmlタグで「”」を使用するので「return」の後は「’」で囲む必要があります。
「カスタムフィールド」に「ショートコード」を使う方法
「ACF（Advanced Custom Fields）」などで作成した「カスタムフィールド」にも「ショートコード」を使いたい！と思っても、WordPressデフォルトでは使えない仕様となっています。
が、ちょっとしたことで「カスタムフィールド」でも「ショートコード」が使えるようになります！
▼詳しくは下記記事をどうぞ！
おわりに
本記事で紹介した「ショートコード」の使い方は非常にシンプルなものです。
「ショートコード」はもっともっと便利な使い方もできるとてもポテンシャルの高い機能であると思うので、また別記事で掘り下げていきたいですね。
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント