同じ文言をよく使うときに便利なショートコードを自作してみよう

記事の中で同じ定型文をいつも使うという場合、毎回同じことを記入するのって面倒ですよね。さらにこの定型文を変更したくなったときに変換が厄介です。

こういう場合に活用していただきたいのがショートコードという機能です。ショートコードというのは、記事の中などに[ショートコード名]みたいな形で角カッコでショートコード名を入れて入力すると、ページを表示したときにショートコードがテキストなどに変換されるというものです。

WordPressのお問合せフォームで有名な「Contact Form 7」というプラグインでも、問合せフォームの挿入をショートコードで行っていますね。ここでは、functions.phpファイルを編集して、自分だけのオリジナル・ショートコードを作成する方法についてお話していきます。

ここでは、functions.phpファイルの編集を行いますが、今回、初めて編集するという方ははじめに下記をお読みください。

2017.11.03

テーマのための関数 (functions.php)を編集するときの注意事項

「外観」>「テーマの編集」から編集できるテンプレートのほとんどは、ページのテンプレートかページをデザインするスタイルシートのファイルになっています。ただし、「function.php」というファイルだけは、テーマの機能的な情報が記載してあるファイルなの...

それでは、さっそくfunctions.phpを編集していきたいと思います。「外観」＞「テーマの編集」から「テーマのための関数(functions.php)」を開きます。

ショートコードの基本は次の通りです。

function 関数名Func() {
    return "出力したいテキスト";
}
add_shortcode('ショートコード名', '関数名Func');

「出力したいテキスト」の部分には実際に出力させたい文言などを入力します。「関数名」のところは、半角英数字とアンダーバー「_」のみで記入します。最初の文字は必ずアルファベットで始めてくださいね。「ショートコード名」の部分は日本語にしても大丈夫です。ショートコードとして分かりやすい名前を登録しましょう。このコードをfunctions.phpに追加するだけでショートコードの作成は完了です。

いきなり自分で作成するのが不安という方は下記のサンプルで試してみてください。

function TestFunc() {
    return "おめでとう！ショートコード成功です。";
}
add_shortcode('テスト', 'TestFunc');

このコードをfunctions.phpに追加して更新後、記事の中に[テスト]という形でショートコードを貼り付けて表示してみてください。「おめでとう！ショートコード成功です。」と表示されれば成功です。

ついでに私が初期のころにしてきたショートコード作成の失敗例もご紹介します。みなさんは、同じような落とし穴にはまらないように気をつけてくださいね。

ショートコードの失敗例

次のようなショートコードを作成してしまうとエラーになってしまい、ページが真っ白になります。コピペ厳禁です。

失敗例１

function Test-Func() {
    return "おめでとう！ショートコード成功です。";
}
add_shortcode('テスト', 'Test-Func');

何が間違いか分かりますか？

関数名は半角英数字かアンダーバー「_」しか使ってはいけないのにハイフン「-」を使っている例です。これを貼り付けてしまうと、

Parse error: syntax error, unexpected ‘-‘, expecting・・・
みたいなエラーメッセージが表示されてしまいます。

失敗例２

function TestFunc() {
    return "<img src="https://cotodama.co/wp-content/uploads/2017/10/sample_img.png"/>";
}
add_shortcode('テスト', 'TestFunc');

今度は、ショートコードで画像を表示させてみようとしてエラーになってしまった例です。これは何が間違いでしょうか？

この部分です。

return "<img src="https://cotodama.co/wp-content/uploads/2017/10/sample_img.png"/>";

ダブルクオーテーション「”」のカッコの中にダブルクオーテーションが入ってしまっているため、同じカッコの入れ子構造がエラーの原因です。このようにimgタグをショートコードで使いたい場合、シングルクォーテーションを使って次のように記入します。

function TestFunc() {
    return '<img src="https://cotodama.co/wp-content/uploads/2017/10/sample_img.png"/>';
}
add_shortcode('テスト', 'TestFunc');

もしくは、

function TestFunc() {
    return "<img src='https://cotodama.co/wp-content/uploads/2017/10/sample_img.png'/>";
}
add_shortcode('テスト', 'TestFunc');

このように記入します。

この間違いをしてしまうと
Parse error: syntax error, unexpected ‘function’ (T_FUNCTION) in・・・
といったエラーが表示されます。

以上がショートコードの作成方法のお話でした。ショートコードにはいろいろ応用があります。これからも随時追加していきますのでお楽しみに。

WordPressとデザインが学べるWebメディア