WordPressのShortCode(ショートコード)を使いこなす

WordPressの投稿画面や固定ページなどに直接PHPのコードを書きたいことってありますよね。テンプレートファイルだったら素直にPHPのコードが記述できますが、投稿画面となるとそうは行きません。

投稿画面に直接PHPを記述できるプラグイン「Exec-PHP」というものがありますが、セキュリティ的にも芳しくありません。そこでShortcode(ショートコード)の出番です! あらかじめ決められた手続きをショートコードとしてfunctions.phpに記述しておき、投稿画面や固定ページから呼び出しましょう。

ショートコードの3つの書き方

さて、それではショートコードの具体的な書き方を紹介します。
ショートコードって何って?って思っていらっしゃる方が多いかと思いますが、実は身近なところでショートコードって使われているんですよ。それが、超有名プラグインである「Contact form 7」でお問い合わせフォームを表示するときに使われているコードです。

Contact form 7を使うとこんなコードを書く場面がでてきますよね。これがショートコードなんです。functions.phpに自分で好きな処理を書くことで、ショートコードを自由自在に使いこなすことができますよ。

ショートコードの書き方は大きく3つに分けられます。

・1つ目 「 [test] 」と普通にショートコードのみを書く方法
・2つ目 「 [test num=’100′] 」 とパラメータを渡して書く方法
・3つ目 「 [test]ここに文字列[/test] 」 とショートコードで文字を囲んで書く方法

以上3つが代表的なショートコードの書き方です。

まず最初に一番シンプルな1つ目の書き方を紹介します。

まず、functions.phpに↓のように関数を書きます。

shortcode_test()と関数を定義し、add_shortcode関数で自作したショートコードを登録します。これだけでショートコードが使えるようになります。今回の例では [test] というショートコードを定義しました。

[test] と投稿画面や固定ページに書くと「ショートコードです」と表示されます。

それでは2つ目のショートコードにパラメータを渡して書く方法を紹介します。

functions.phpに以下のように書きます。

最初の例とは異なり、関数に引数として$attsを渡してあります。その関数に対して「shortcode_atts」と「extract」という2つの関数で何やら処理を行っています。これはショートコードの引数として設定した文字列をショートコード内の変数として扱えるようにしている箇所です。今回の例では1つの引数をショートコード内の変数 $num という変数で扱えるようにしています。

shortcode_atts関数の中にある
'num' => 5,
の箇所は引数のデフォルトの数値を設定しています。

[[count num="1000"]]と投稿画面や固定ページに書くと「あなたは1000番目の訪問者です。」と表示されます。

さて3つ目のショートコードを文字列で囲む書き方です。

ショートコードを定義する関数の第2引数「$content」を追加しました。この$contentにショートコードで囲まれた文字列が渡されます。

[quote]引用の中身です。[/quote]と投稿画面や固定ページに書くと「ここから【引用の中身です。】ここまでが引用」と表示されます。

以上がショートコードの書き方の紹介でした。

ちなみに自作したショートコードをテンプレートファイルから実行したい場合は、do_shortcode関数を使うとできます。

このように書くことで[test]のショートコードを実行できます。

ついでにこの記事を書くときにわかったのですが、ショートコードを実行するのではなく、ショートコードのコードそのものを記事の中に書きたい場合は「[」や「]」を続けて書くと書けるようになります。

[[test]]

こんな具合です。

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

関連記事


この記事をかいた人

ドレッド Webクリエイター、ライター

Web制作やライティングなどインターネットを使って自由に暮らしているドレッドです。このブログではWeb制作やライティングでお役に立ちそうな知識から、ドレッドのプライベートな出来事まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

WordPress | Posted on 2015/07/05 15:10

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です