ショートコードを作成する
WordPressでは、特定のキーワードを投稿本文に記載すると、様々な処理(あらかじめ用意しておいた文章の挿入や画像ギャラリーの表示など)を実行することができる「ショートコード」と呼ばれる機能があります。
※ショートコードの例(標準で用意されている画像ギャラリー用のショートコードです)
ショートコードは標準でいくつか用意されていますが、そのほかに自分でショートコードを作成する機能も用意されています。本レシピでは、ショートコードを作成する方法や例を紹介します。
目次
基本的なショートコード
基本的なショートコードの登録
ショートコードはfunctions.phpなどに記載して登録します。基本的なショートコードは下記のような形式で登録できます。
|
1 2 3 4 |
function ショートコード用の関数名() { return 表示する内容; } add_shortcode( 'ショートコード名', 'ショートコード用の関数名' ); |
基本的なショートコードの使用
ショートコードは投稿画面のエディタ内で使用します。基本的なショートコードは下記のような形式で入力することで使用できます。
|
1 |
[ショートコード名] |
例1: 「こんにちは！」と表示するショートコード
例として、「こんにちは！」と出力するだけのショートコードを紹介します。下記の内容をfunctions.phpに記載してください。
|
1 2 3 4 |
function shortcode_hello() { return 'こんにちは！'; } add_shortcode( 'hello', 'shortcode_hello' ); |
記載後に投稿画面で「[hello]」と入力すると、下記のような結果になります。
'こんにちは！' の部分は好きな内容に変更することができます。「毎回同じ定型文を投稿に含めないといけないけど、長い文章なので用意するのが面倒」といったケースなどで使用できます。
例2: HTMLタグを出力するショートコード
ショートコードでは例1のようなテキストだけではなくHTMLタグも出力できるので、例えば「お問い合わせはこちら」というリンクを挿入するショートコードを作ることなどができます。
|
1 2 3 4 |
function shortcode_contact() { return '<a href="http://example.com/contact">お問い合わせはこちら</a>'; } add_shortcode( 'contact', 'shortcode_contact' ); |
属性付きのショートコード
HTMLであれば <img src="画像URL"> とすれば指定したURLの画像を表示できるのと似たような形で、ショートコードでも下記のような形式で属性(ショートコードを処理する側に渡したいデータ)を指定できます。
|
1 |
[ショートコード名 属性名="値"] |
属性は、定型文の一部分のみ別のメッセージに変更したい場合など(例えば「○○さんこんにちは！」という定型文を用意して、○○の部分は変えられるようにしたいなど)で使われます。
属性付きのショートコードの登録
属性付きのショートコードはおおむね下記のような形式で登録できます。(属性名1、属性名2の部分は必要な属性の数の分だけ増減させてください)
|
1 2 3 4 5 6 7 8 9 |
function ショートコード用の関数名( $atts ) { $atts = shortcode_atts( array( '属性名1' => '属性名1の初期値', '属性名2' => '属性名2の初期値', ), $atts ); return 表示する内容; } add_shortcode( 'ショートコード名', 'ショートコード用の関数名' ); |
属性は、「$atts」という部分に格納されます。例えば [test a="1" b="2"] という形でショートコードが使用された場合、$atts['a'] にaの値(1)、$atts['b'] にbの値(2)が入っています。
例3: 「○○さんこんにちは！」と表示するショートコード
例1をベースに、「○○さんこんにちは！」と出力するショートコードを作成します(○○の部分は「name」という名前の属性として渡す形)。下記の内容をfunctions.phpに記載してください。
|
1 2 3 4 5 6 7 8 |
function shortcode_hello2( $atts ) { $atts = shortcode_atts( array( 'name' => '名無しさん', ), $atts ); return $atts['name'] . 'さんこんにちは！'; } add_shortcode( 'hello2', 'shortcode_hello2' ); |
※ return $atts['name'] . 'さんこんにちは！'; のように、文字と文字をつなげる場合は「.」(半角のドット)を使います。
記載後に投稿画面で「[hello2 name="太郎"]」と入力すると、下記のような結果になります。
「[hello2 name="花子"]」と入力した場合は「太郎さんこんにちは！」ではなく「花子さんこんにちは！」に変更することができ、「[hello2]」と入力した場合は「名無しさんこんにちは！」に変更することができます。(「名無し」は初期値)
内容付きのショートコード
HTMLであれば <strong>強調したい文字</strong> とすればタグ内の内容を強調できるのと似たような形で、ショートコードでも下記のような形式で内容を指定できます。
|
1 |
[ショートコード名]内容[/ショートコード名] |
属性も合わせて使用する場合は下記のようになります。
|
1 |
[ショートコード名 属性名="値"]内容[/ショートコード名] |
内容も属性と同じように、定型文の一部分のみ別のメッセージに変更したい場合など(例えば「○○さんこんにちは！」という定型文を用意して、○○の部分は変えられるようにしたいなど)で使われます。内容には別のショートコードを含めることなどもできます。
内容付きのショートコードの登録
内容付きのショートコードはおおむね下記のような形式で登録できます。(下記の「$atts = 」の行から4行分は、属性を使わない場合は省略できます)
|
1 2 3 4 5 6 7 8 9 |
function ショートコード用の関数名( $atts, $content = null ) { $atts = shortcode_atts( array( '属性名1' => '属性名1の初期値', '属性名2' => '属性名2の初期値', ), $atts ); return 表示する内容; } add_shortcode( 'ショートコード名', 'ショートコード用の関数名' ); |
内容のデータは「$content」という部分に格納されます。例えば [test]こんにちは[/test] という形でショートコードが使用された場合、$content に「こんにちは」が入っています。
例4: 警告メッセージを表示するショートコード
「<div class="warning">警告内容</div>」というHTMLを出力するショートコードを作成します(ショートコードの内容部分が警告内容になるようにする形)。下記の内容をfunctions.phpに記載してください。
|
1 2 3 4 |
function shortcode_warning( $atts, $content = null ) { return '<div class="warning">' . do_shortcode( $content ) . '</div>'; } add_shortcode( 'warning', 'shortcode_warning' ); |
※ 「do_shortcode( $content )」の部分は「$content」だけでもよいですが、上記のようにしておくとショートコードの中でショートコードを使う場合(入れ子)にも対応できます。
記載後に投稿画面で「[warning]この投稿は古い内容です。現在はあまりおすすめできません[/warning]」と入力すると、下記のような結果になります。(※この例は、warningというクラスにCSSでスタイルを付けている前提を想定したものです)
