ショートコードの具体的な利用方法とその使い方 WordPress

WordPressにはショートコードと呼ばれる機能があります。

これは、結構便利なので紹介してみたいと思います。

ショートコードって何？

CMSという言葉が認知されるちょっと前までは、「管理画面からテキスト入力したものをDBに保存し、それをそのままHTMLに吐き出せばOK」といったレベルでした。

 

ところが、企業内でWebに精通した部署（Web広報、ウェブマーケティング）を立ち上げるような大きな企業と仕事すると、

• フォントサイズを大きくしたい
• 色を赤くしたい
• 画像を挿入したい

 

なんていう要望が発生し、それに答えるために「独自タグ」という形で実装することがありました。

（新サービスのプレスリリースなんかを打つこともあったので、結構リッチにすることもあった気がします）

 

「独自タグ」というのは、HTMLとかPHPとはまったく別でオリジナルで定義するタグのことで、例えばフォントカラーを赤くタグとして{%red%}を定義したとすると、

 

 

と記述すれば、

 

 

と同じ表示にすることを可能にさせるものです。

 

HTMLタグを使えるようにすればいいのにって話ですが、DBにデータを保存する以上、SQLインジェクション対策は不可欠ですよね。

なので、セキュリティを担保しつつHTMLタグを使えるようにする方法として考えられたのです。

ショートコード使うメリットは？

WordPressは先に説明したフォントサイズや、カラーの話であれば、テキスト選択してボタン押すだけで実装できるとおり、もっと簡単につかえるようになっています。

ただ、以下のようなケースで使えたらどうでしょうか？

• サイト内に複数の問い合わせ先の電話番号、メールアドレスがサイト内に複数あり、頻繁に変更される（キャンペーンが多い場合など）
• アフィリエイトのバナーを記事内に入れていて、過去の記事も含めて一括で変更したい
• 特定のテーマを扱う記事に、定型的に入れている注釈がある（レンタルサーバの記事を扱うときは必ず、過去に記載した「レンタルサーバの選び方」というリンクと説明テキストを入れている）

 

全ページに適用させたい場合は、header.php、footer.phpといったテンプレートファイルに記述すれば良いですが、特定の記事・特定の箇所のみに適用し、運用の中で更新する可能性がある場合には、大幅に作業工数を削減することが出来ます。

 

記事数が少ないときは手作業でも問題ないでしょうが、記事数が増えてくるとちょっと大変ですよね。

 

なお、ショートコードは投稿・固定ページだけではなく、テンプレートファイルにも使うことが出来るので、適用する箇所に漏れがなければ一括で変更することが出来ます。

ショートコードの使い方

では、ショートコードの使い方です。

ここでは、投稿ページに電話番号を表示するショートコードを例に説明します。

 

手順は２つです。

まず、WordPressのfunction.phpに以下の記述をして、サーバにアップロード。

 

 

次に、管理画面から、記事投稿で以下のショートコードを入れます。

 

[tel]

 

 

最後に、投稿した記事を確認すると

このとおり表示されてると思います。

 

ソース内容の解説

それでは解説です。

function.phpに記述したソースですが

 

 

WordPress側で「add_shortcode」という関数が用意されており、第二引数（telNumber）で指定した関数を、第一引数（tel）で呼び出せるようにする物です。

 

ちなみに、テンプレートファイルに記述するときは、書き方が異なっており、

 

 

と記述してください。

 

おまけ

PHPがよくわからないという方は、「Post Snippets」というプラグインを使えば同じことが出来ます。

筆者はまだ利用していませんが、わかりやすそうな画面だったので迷わずに使えるかと思います。