【WordPress】PHP初心者にもわかるショートコードの作成方法！
皆さんは記事を作成する際にWordpressのショートコード機能を利用していますか？うまく利用すると生産性が上がるうえに間違えの予防などの効果もあるため、是非活用していきたいところです。
この記事では、ショートコードについての説明や作り方の解説をしていきます。また、関連する便利なプラグインの紹介も行っています。
プログラミングの知識がない方にもわかるように心掛けたのでチェックしてみてください(自分で作成をする場合は多少のPHPの知識が必要になります)。
Wordpressの「ショートコード」とは
ショートコード(Shortcode)とは、記事内でPHPの関数を呼び出すための機能です。投稿や固定ページで使用できます。記事内には、実際に表示する文章やHTMLコードを記述することはできるのですが、PHPコードを直接呼び出すことはできません。
そこで、Wordpressが提供しているショートコードという機能を利用することでこれを解決することができます。この機能にはデフォルトで用意されているものもありますし、自分で作成することもできます。
使い方
Wordpressに最初から用意されているもの以外にも、プラグインとして提供されているものもあるので利用したことのある方は多いかもしれません。使ったことがない人はここでしっかり使い方を押さえておきましょう。この章では、デフォルトで用意されているものを例にして使い方を説明していきます。
デフォルトで用意されているショートコード一覧
使い方の説明に入る前に、Wordpressに用意してあるものを紹介しておきます。これらは自分で特別な設定をしなくてもそのまま利用することができます。以下に名前と簡単な説明を表形式でまとめました。
| 名称 | 説明 |
| audio | オーディオファイルを読み込んで再生する |
| caption | 囲んだコンテンツにキャプションをつける |
| embed | 埋め込みコンテンツ(oEmbed)を記述する |
| gallery | ギャラリーを表示する |
| playlist | オーディオや動画ファイルを表示する |
| video | 動画ファイルを読み込んで再生する |
投稿編集ページでの呼び出し方
ショートコードは、投稿編集ページで[audio src="audio.mp3"]や[ caption ]…[ / caption ]のように記述することで使用することができます。audioのように単一で使用するものとcaptionのように文字列を囲んで使うタイプのものがあります。また、その両方をユーザーが選べるように作られたものも存在します。
これらの詳細な使い方(指定できる引数など)はWordpressのドキュメントをご確認ください。また、デフォルトや自作でない場合の具体的な使用方法は各プラグインのドキュメントを参照してください。
作成方法
使用方法がわかったところで、次に自分で開発する方法を説明していきます。
PHPを用いて開発
WordpressはPHPで作られているので、同じようにPHPで作成する必要があります。使用できるバージョンは各環境に依存するので、自身の環境を確認してみてください。利用しているサーバーの管理画面などで確認ができます。
ちなみに、現在のWordpressではPHP5.6以上が必要になっています。
functions.phpに記述
通常、functions.phpという名前のファイルに専用の関数を記述します。functions.phpは管理画面で「外観 > テーマの編集」から編集するか、サーバー内のファイルを直接編集することができます。
ファイルは各テーマのディレクトリ内に置かれています。具体的な場所(パス)は/path/to/DocumentRoot/wp-content/themes/{theme_name}/functions.phpです。/path/toは適宜自分の環境に合わせて置き換えてください。また、{theme_name}の部分には使用しているテーマ名が入ります(親テーマと子テーマがある場合には、子テーマ名となります)。
具体例で学ぶ作り方
Wordpressでは、ショートコードが使用されると対応する関数が一つ呼び出されます。この関数の返り値として文字列を受け取り、記述されていた場所に代わりに返り値の文字列が埋め込まれます。
そのため、どんな文字列に置き換わって欲しいかを関数として定義することになります。
最も単純な例
まずは、簡単なサンプルを作るところから始めてみます。
ここでは、[hello]と書いたら”Hello!!”という文章を出力するようなショートコードを作成することにします。この場合のPHPのコードは以下のようなものになります。
function sayHello() {
return "Hello!!";
}
add_shortcode("hello", "sayHello");
このコードは大きく二つの部分に分かれています。それは、
- 具体的な処理内容
- 実際に使えるように登録する処理
の二つです。
前半部分のsayHelloという関数が具体的な処理内容で、後半のadd_shortcodeという関数を呼んでいる箇所が[hello]というショートコードでsayHello関数を呼び出せるように登録している部分になります。
add_shortcodeはWordpressに予め用意されている関数で、第一引数にショートコードとして呼び出す際に使用したい名前を渡し、第二引数にはその際に実行する関数名を渡します。
引数を渡せるように拡張してみる
ショートコードに引数を渡す場合は、第一引数に配列を受け取るような関数を作成します。先ほどの例を拡張してみることにしましょう。
名前を引数として貰って、[hello name=”Alice”]と呼んだら”Hello Alice!!”と返すようなショートコードに変更することにします。
function sayHello($attributes) {
extract(shortcode_atts([
'name'=>"World",
], $attributes));
return "Hello ".$name."!!";
}
add_shortcode("hello", "sayHello");
sayHelloが引数を一つとるように変わりました。ここで、$attributesは連想配列で、ユーザーがショートコードを使う際に記述した引数(属性)名とその値の組が格納されています。["name" => "Alice"]といった具合の配列です。
注意するべきなのは、ユーザーは[hello]のように引数を与えずに使用することもできるということです。この場合は$attributesは空の配列となります。
Wordpressのshortcode_atts関数は、第一引数にサポートする引数名とその初期値のペアを定義した連想配列を受け取り、第二引数には$attributesを受け取ります。そして、ユーザーが引数を指定していればその値を、指定していなければ初期値を値として持つような連想配列に変換します。例えば、前者なら["name" => "Alice"]のような値、後者なら["name" => "World"]のような値が得られます(nameが指定されなければ、”Hello World!!”と返すようなショートコードにしました)。
extract関数はPHPにもともと用意されている関数で、連想配列をもとに変数を定義します。この例だとshortcode_atts関数の返り値を受け取るため、$nameという変数が定義されます。$nameはユーザーがショートコードの引数nameに指定した文字列か、初期値の”World”という文字列を値として持ちます。
文字列を囲えるようにしてみる
ショートコードには、単一で使う他にも文字列を囲い込むことで利用できるものがありました。
そこで、[hello name=”Alice”]Nice to meet you.[/hello]という風に使用したら”Hello Alice. Nice to meet you.”という文字列に変えるようなショートコードを作成してみましょう。もちろん、囲い込む文章を変えればその文章がHello {name}の後ろに続くようにします。
function sayHello($attributes, $content) {
extract(shortcode_atts([
'name'=>"World",
], $attributes));
return "Hello ".$name.". ".$content;
}
add_shortcode("hello", "sayHello");
第二引数として$contentが追加されました。この変数には、ショートコードで囲い込んだ文字列がそのまま格納されています。簡単に変更できましたね。
便利なプラグイン
ショートコードを利用するうえで、活用すると便利なプラグインをいくつか紹介しておきます。何でもかんでも入れれば良いという訳ではないと思うので、必要であればインストールしてみてください。
Shortcodes Ultimateは、予め様々なショートコードを用意してくれている便利なプラグインです。インストールすることで、50種類以上の便利な機能をすぐに利用することができるようになります。
アップデートも頻繁に行われており、ユーザー数や評価も非常に高くて人気があります。自作を考えている方は、その前にこのプラグインに用意されていないか確認してみると良いかもしれません。
ショートコードを作成したら、すぐに呼び出せるようにAddQuicktagを利用すると良いです。
設定画面から登録しておくと、投稿編集画面で簡単にショートコードの呼び出しができるようになります。たくさん作り過ぎてしまった場合や、いちいち名前を覚えておくのは大変だという方は使ってみてください。
Post Snippetsを利用すると、functions.phpを編集しなくてもショートコードを定義することができるようになります。ファイルを編集するのが不安な方はこちらを利用してみてください。
利用できるコードの一覧がひと目で確認できるのも良い点だと思います。
この記事では、Wordpressのショートコードの使い方と作成方法を説明しました。
是非自作に挑戦して執筆を楽にしてみてください。
