WordPressのショートコード「自己完結型」を作成

先日、ショートコードの基本の記事を書きました。

まだショートコード自体ががよくわかっていない方は是非こちらの記事から読んでみてくださいね。

今回は、基本の続きで「自己完結型」のショートコードを作成していきます。

Contents

自己完結型のショートコードとは？
- 自己完結型
- 囲み型
自己完結型のショートコードの基本
自己完結型のショートコードに属性を追加する
- コードの解説
まとめ

自己完結型のショートコードとは？

ショートコードには自己完結型と囲み型の2つのタイプがあります。

自己完結型

自己完結型はショートコードを一度だけ書いて完結するものになります。閉じるショートコードは不要です。自己完結型の書き方は下記になります。

[shortcode]

囲み型

一方、囲み方は開始のショートコードと終わりのショートコードでコンテンツを囲みます。囲み方の書き方は下記になります。HTMLのdivタグなどと似ていますね。

[shortcode]コンテンツ[/shortcode]

自己完結型のショートコードの基本

では自己完結型の簡単なコードを作成していきましょう。前回、ショートコードの基本でやったものが自己完結型でしたので、こちらでも同じコードでやっていきます。functions.phpに下記のコードを追加します。

function.php

//ショートコードで「hello shortcode!」と出力
function hello_func() {
    return "hello shortcode!";
}
add_shortcode('hello', 'hello_func');

ショートコードは作成できましたので次に投稿入力画面でショートコードを入力します。

ショートコード

[hello]

出力

hello shortcode!

サイトで投稿を確認して「hello shortcode!」と表示されていればOKです。

自己完結型のショートコードに属性を追加する

ここからが楽しくなっていくところです。先ほどのショートコードでは「hello shortcode!」としか出力できません。これでは不便なのでユーザーがショートコードに属性を入力して、その値を出力するようにしたいと思います。

function.php

//ショートコードでユーザーが入力した属性の値を出力
function userword_func( $atts ) {
    $atts = shortcode_atts(
        array(
            'word' => '値が入力されていません',
        ), $atts, 'userword' );
    return $atts['word'];
}
add_shortcode( 'userword', 'userword_func' );

ショートコードが作成できました。詳細は後ほど解説しますので投稿入力画面でショートコードを入力します。

ショートコード

[userword word=テスト]

出力

テスト

サイトで「テスト」と出力されていればOKです。また、「word=◯◯◯」の部分を変えてみて、属性の値が正しく出力されるかも確認しましょう。

コードの解説

shortcode_atts

$atts = shortcode_atts(

3行目に出てくるshortcode_attsを簡単に説明すると、ユーザーが属性に値を指定していればそれを出力して、属性の値が未入力だった場合はあらかじめ指定したデフォルトの値を出力する、という指定ができます。

使い方

shortcode_atts( $pairs , $atts, $shortcode );

項目	形式	必須/任意	初期値	説明
$pairs	配列	必須	なし	サポートするすべての属性の名前とデフォルト値。
$atts	配列	必須	なし	ユーザーがショートコードタグに指定した属性。
$shortcode	文字列	任意	なし	shortcode_atts_{$shortcode} フィルターに使われるショートコード名。これを指定すると、他のコードが属性をフィルターするために shortcode_atts_{$shortcode} フィルターを使用できます。このパラメータはオプションですが、互換性を最大にするため常に含めるべきです。

今回は下記のようにしました。

array(
    'word' => '値が入力されていません',
), $atts, 'userword' );

属性名を「word」
「word」のデフォルト値を「値が入力されていません」

これでユーザーが属性を入力して入ればその値を、入力していなければ「値が入力されていません」と出力します。属性を追加する応用編さらにもう少し応用したものを作成したいと思います。属性を複数にする先ほどまでは1つの属性でしたが、複数にすることも可能です。

function.php

//ショートコードでユーザーが入力した複数の属性の値を出力
function multiple_userword_func( $atts ) {
    $atts = shortcode_atts(
        array(
            'word1' => 'word1の値が入力されていません',
            'word2' => 'word2の値が入力されていません',
        ), $atts, 'multiple' );
    return $atts['word1'] . $atts['word2'];
}
add_shortcode( 'multiple', 'multiple_userword_func' );

ショートコード

[multiple word1=今日は word2=晴れ]

出力

今日は晴れ

消費税を計算して出力数値を計算したり、判別することも可能です。

function.php

//ショートコードでユーザーが入力した属性の値を税込にして出力
function tax_func( $atts ) {
    $atts = shortcode_atts(
        array(
            'price' => '金額が入力されていません',
        ), $atts, 'tax' );
    if(ctype_digit($atts['price'])):
        return $atts['price'] * 1.1;
    else:
        return $atts['price'];
    endif;
}
add_shortcode( 'tax', 'tax_func' );

ショートコード