【WordPress】便利なショートコードの基本的な書き方と使い方

 

※当ブログのリンクには一部広告が含まれています。

ショートコードは、functions.phpに書いたプログラム（関数）をブラケット[ ]で囲った短いコードで呼び出す機能です。投稿画面とテンプレート両方で呼び出すことができます。

ショートコードには「自己完結型ショートコード」と「囲み型ショートコード」の2種類があります。

「自己完結型ショートコード」は[myshortcode]とひとつのショートコードを書くだけで内容が出力されるタイプ。 「囲み型ショートコード」は[myshortcode]コンテンツ[/myshortcode]というように、コンテンツを挟んで出力するタイプです。

ショートコード API

【この記事を書いた人】

Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細

自己完結型ショートコードの基本的な書き方

まずは、一番基本的な機能の「テキストの呼び出し」を実行してみます。

サンプル「お仕事募集中です！」というテキストを投稿画面からショートコードで表示させる

functions.phpに以下の関数を書きます。

functions.php
1
2
3
4
function txt_func() {
    return "お仕事募集中です！";
}
add_shortcode('work_txt', 'txt_func');

投稿画面で以下のショートコードを記述すると、「お仕事募集中です！」というテキストが表示されます。

ショートコード
1
[work_txt]

add_shortcodeの説明

functions.php
1
2
3
4
function txt_func() {
    //ここにショートコードの中身を書く！
}
add_shortcode('work_txt', 'txt_func');

ショートコードを登録して使える状態にするのがこの「add_shortcode」というWPの関数です。「txt_func」が新たに作成した関数で、「add_shortcode」で「work_txt」というショートコードを登録します。

add_shortcode()

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

ショートコードに属性を追加することができます。class名や任意の数字などを指定した結果が出力されます。

サンプル ショートコードの属性に商品の値段を入力して、消費税8％が加算された数字を出力する

functions.php

functions.php
1
2
3
4
5
6
7
8
9
function price_func( $atts ) {
        $atts = shortcode_atts(
                array(
                        'price' => '100',
                ), $atts, 'total' );
 
        return $atts['price'] * 1.08;
}
add_shortcode( 'total', 'price_func' );

ショートコード

ショートコード
1
[total price=150]

HTML出力結果

出力結果
1
162

属性を指定しなかった場合、デフォルト値の100が出力されます。

shortcode_attsの説明

1
2
3
4
shortcode_atts(
     array(
          'price' => '100',
     ), $atts, 'total' );

「shortcode_atts」はユーザーがショートコードで指定した属性($atts)を、予め定義した属性($defaults_array)と結合し、必要に応じてデフォルト値をセットするWordPressの関数です。

shortcode_attsのパラメーター

使用例
shortcode_atts( $pairs , $atts, $shortcode );
$pairs
（配列） （必須） サポートするすべての属性の名前とデフォルト値
初期値： なし
$atts
（配列） （必須） ユーザーがショートコードタグに指定した属性
初期値： なし
$shortcode
（文字列） （オプション） shortcode_atts_{$shortcode} フィルターに使われるショートコード名です。これを指定すると、他のコードが属性をフィルターするために shortcode_atts_{$shortcode} フィルターを使用できます。
初期値： なし

shortcode_atts

囲み型ショートコードの基本的な書き方

サンプル 以下のようなドットの罫線で囲まれたコンテンツを出力する
（CSSは省略）

ここにコンテンツが入ります。

functions.php

functions.php
1
2
3
4
function box_func( $atts, $content = null ) {
    return '<div class="dot-box"><p>' . $content . '</p></div>';
}
add_shortcode('dot', 'box_func');

ショートコード

ショートコード
1
[dot]ここにコンテンツが入ります。[/dot]

HTML出力結果

出力結果
1
<div class="dot-box"><p>ここにコンテンツが入ります。</p></div>

$contentはエスケープやエンコードされないので、HTMLを含めることができます。後からHTMLをちょっと追加したいという場合でも大丈夫ですね。

ショートコード

ショートコード
1
[dot]<a href="http://example.com/">ここにコンテンツが入ります。</a>[/dot]

HTML出力結果

出力結果
1
<div class="dot-box"><p><a href="http://example.com/">ここにコンテンツが入ります。</a></p></div>

囲み型ショートコードに属性を追加する

ショートコードにclass属性を指定する場合のコードです。

functions.php
1
2
3
4
5
6
7
8
function caption_func( $atts, $content = null ) {
    extract( shortcode_atts( array(
       'class' => 'caption-txt',
       ), $atts ) );
   
    return '<p class="' . esc_attr($class) . '">' . $content . '</p>';
}
add_shortcode('mycaption', 'caption_func');

ショートコード

ショートコード
1
[mycaption class="headline"]テキスト[/mycaption]

HTML出力結果

出力結果
1
<p class="headline">テキスト</p>

class属性を書かずに[mycaption]テキスト[/mycaption]と書くと、functions.phpで指定したデフォルトのクラス「caption-txt」が適用されます。

extractは、連想配列のキーを変数名、値を変数の値として、配列から変数を作成するPHP関数です。 上記の例だと、配列のキー「class」が変数名「$class」に、「caption-txt」が値として処理されます。

extract（PHPマニュアル）

extractを使ったショートコード例は以下の記事でも説明しています。

ショートコードで投稿IDやスラッグから記事の内部リンクを作成する

参考記事【WordPress】ショートコードで投稿IDやスラッグから記事の内部リンクを作成する

囲み型ショートコードの中で他のショートコードの実行を許可したい場合は、「do_shortcode()」を使います。
下記は、囲み型ショートコード[myoption]の中に自己完結型ショートコード[mycontent]の内容を出力させる例です。

functions.php

functions.php
1
2
3
function caption_shortcode( $atts, $content = null ) {
    return '<p class="caption">' . do_shortcode($content) . '</p>';
}

ショートコード

ショートコード
1
[mycaption]テキスト：[mycontent][/mycaption]

HTML出力結果

出力結果
1
<p class="caption">テキスト：mycontentの内容</p>

テンプレートでカスタムフィールドの値を呼び出す

テンプレートでは以下のように記述します。

PHP
1
<?php echo do_shortcode('[ショートコード]'); ?>
ショートコード関連記事