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

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

LINK

ショートコード作成の基本

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

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

自己完結型のショートコードとは？
- 自己完結型
- 囲み型
自己完結型のショートコードの基本
自己完結型のショートコードに属性を追加する
- コードの解説
属性を追加する応用編
- 属性を複数にする
- 消費税を計算して出力
まとめ

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

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

自己完結型

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

[shortcode]

囲み型

一方、囲み方は開始のショートコードと終わりのショートコードでコンテンツを囲みます。囲み方の書き方は下記になります。

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

htmlのdivタグなどと似ていますね。

囲み型の記事もチェック

LINK

ショートコードの囲み型を作成

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

では自己完結型の簡単なコードを作成していきましょう。前回、ショートコードの基本でやったものが自己完結型でしたので、こちらでも同じコードでやっていきます。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 – WordPress Codex 日本語版

使い方

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

以下WordPress Codex 日本語版より引用。

$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' );