WordPress ショートコードの使い方

公開:2014-11-17 / 制作・開発 /
更新:2016-07-27
icatch_wordpress

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

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

ショートコードって何?

その昔、WordPressのような便利なものがなかった時代、コーポレートサイトのトップページに表示させる「お知らせ」などは表示だけではなく、管理画面を含めてスクラッチで開発する必要がありました。

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

 

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

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

 

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

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

 

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

 

 

と記述すれば、

 

 

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

 

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

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

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

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

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

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

 

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

 

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

 

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

ショートコードの使い方

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

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

 

手順は2つです。

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

 

 

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

 

[tel]

 

shortcode

 

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

fin

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

 

ソース内容の解説

それでは解説です。

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

 

 

 

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

 

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

 

 

と記述してください。

 

おまけ

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

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

 


コメント一覧

  • RIO

    こちらの記事は、わかりやすいです!
    経験の豊かさがにじみ出ていて、ほんと、信用できます。
    ありがとうございます。がんばります!

  • mislead

    ありがとうございます!
    これからもWeb業界に貢献できるような記事を書いていきたいと思います。

コメントを残す

*

© yukio iizuka All Rights Reserved...