ショートコードを作成する

WordPressでは、特定のキーワードを投稿本文に記載すると、様々な処理(あらかじめ用意しておいた文章の挿入や画像ギャラリーの表示など)を実行することができる「ショートコード」と呼ばれる機能があります。

※ショートコードの例(標準で用意されている画像ギャラリー用のショートコードです)

ショートコードは標準でいくつか用意されていますが、そのほかに自分でショートコードを作成する機能も用意されています。本レシピでは、ショートコードを作成する方法や例を紹介します。

基本的なショートコード

基本的なショートコードの登録

ショートコードはfunctions.phpなどに記載して登録します。基本的なショートコードは下記のような形式で登録できます。

基本的なショートコードの使用

ショートコードは投稿画面のエディタ内で使用します。基本的なショートコードは下記のような形式で入力することで使用できます。

例1: 「こんにちは!」と表示するショートコード

例として、「こんにちは!」と出力するだけのショートコードを紹介します。下記の内容をfunctions.phpに記載してください。

記載後に投稿画面で「[hello]」と入力すると、下記のような結果になります。

'こんにちは!' の部分は好きな内容に変更することができます。「毎回同じ定型文を投稿に含めないといけないけど、長い文章なので用意するのが面倒」といったケースなどで使用できます。

例2: HTMLタグを出力するショートコード

ショートコードでは例1のようなテキストだけではなくHTMLタグも出力できるので、例えば「お問い合わせはこちら」というリンクを挿入するショートコードを作ることなどができます。

属性付きのショートコード

HTMLであれば <img src="画像URL"> とすれば指定したURLの画像を表示できるのと似たような形で、ショートコードでも下記のような形式で属性(ショートコードを処理する側に渡したいデータ)を指定できます。

属性は、定型文の一部分のみ別のメッセージに変更したい場合など(例えば「○○さんこんにちは!」という定型文を用意して、○○の部分は変えられるようにしたいなど)で使われます。

属性付きのショートコードの登録

属性付きのショートコードはおおむね下記のような形式で登録できます。(属性名1、属性名2の部分は必要な属性の数の分だけ増減させてください)

属性は、「$atts」という部分に格納されます。例えば [test a="1" b="2"] という形でショートコードが使用された場合、$atts['a'] にaの値(1)、$atts['b'] にbの値(2)が入っています。

例3: 「○○さんこんにちは!」と表示するショートコード

例1をベースに、「○○さんこんにちは!」と出力するショートコードを作成します(○○の部分は「name」という名前の属性として渡す形)。下記の内容をfunctions.phpに記載してください。

return $atts['name'] . 'さんこんにちは!'; のように、文字と文字をつなげる場合は「.」(半角のドット)を使います。

記載後に投稿画面で「[hello2 name="太郎"]」と入力すると、下記のような結果になります。

[hello2 name="花子"]」と入力した場合は「太郎さんこんにちは!」ではなく「花子さんこんにちは!」に変更することができ、「[hello2]」と入力した場合は「名無しさんこんにちは!」に変更することができます。(「名無し」は初期値)

内容付きのショートコード

HTMLであれば <strong>強調したい文字</strong> とすればタグ内の内容を強調できるのと似たような形で、ショートコードでも下記のような形式で内容を指定できます。

属性も合わせて使用する場合は下記のようになります。

内容も属性と同じように、定型文の一部分のみ別のメッセージに変更したい場合など(例えば「○○さんこんにちは!」という定型文を用意して、○○の部分は変えられるようにしたいなど)で使われます。内容には別のショートコードを含めることなどもできます。

内容付きのショートコードの登録

内容付きのショートコードはおおむね下記のような形式で登録できます。(下記の「$atts = 」の行から4行分は、属性を使わない場合は省略できます)

内容のデータは「$content」という部分に格納されます。例えば  [test]こんにちは[/test] という形でショートコードが使用された場合、$content に「こんにちは」が入っています。

例4: 警告メッセージを表示するショートコード

<div class="warning">警告内容</div>」というHTMLを出力するショートコードを作成します(ショートコードの内容部分が警告内容になるようにする形)。下記の内容をfunctions.phpに記載してください。

※ 「do_shortcode( $content )」の部分は「$content」だけでもよいですが、上記のようにしておくとショートコードの中でショートコードを使う場合(入れ子)にも対応できます。

記載後に投稿画面で「[warning]この投稿は古い内容です。現在はあまりおすすめできません[/warning]」と入力すると、下記のような結果になります。(※この例は、warningというクラスにCSSでスタイルを付けている前提を想定したものです)

コメント

内容の誤りなどがありましたら下記からご連絡をお願いします。頂いたコメントは基本的に公開されることはありません(必要な場合は個別に返信させて頂きます)。

CAPTCHA