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

 2017.09.28  2017.12.07

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

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

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

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

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

function.phpに以下のような関数を書きます。

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

add_shortcodeの説明

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

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

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

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

function.php

ショートコード

HTML出力結果

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

shortcode_attsの説明

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

shortcode_attsのパラメーター

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

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

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

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

function.php

ショートコード

HTML出力結果

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

ショートコード

HTML出力結果

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

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

ショートコード

HTML出力結果

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

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

function.php

ショートコード

HTML出力結果

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

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