WordPress ショートコードの作り方を勉強しておく

WordPressでショートコードの作り方を勉強しておくと、投稿ページや固定ページで頻繁に使用するコンテンツや、毎回同じ文章を使うなど、パターン化してる内容を短いショートコードだけで呼び出すだけの作業に短縮できます。

ショートコードの作り方は簡単な作り方から、やや複雑なPHPの知識が必要な作り方まで段階はあるものの、決して作り方を諦めてしまうほどの難しさではないので、是非ショートコードの作り方をゆっくりでもいいので勉強してみてください。

WordPressでショートコードの基本的な作り方

WordPressでショートコードの基本的な作り方から勉強しておくことにします。簡単な作り方から始めて、作り方を進化させながら勉強していくという流れです。

いくつかWordPressでショートコードを作成してみた結果、以下のPHPコードで書いた関数が基本的な作り方として勉強しやすいです。

function testfunc() {
　return "ショートコードで呼び出す内容";
}
add_shortcode('test', 'testfunc');

add_shortcode関数がショートコードタグ用のフックを追加します。

add_shortcodeの第一引数には、WordPressの投稿ページや固定ページなどで使うショートコードタグの名前を指定します。上のコードなら’test’です。

また、引数の’test’をショートコードタグとして使用したとき、作成したショートコードの関数が実行できるように、add_shortcodeの第二引数には実行する関数の関数名も指定します。上のPHPコードならtestfuncを指定してます。

そしてショートコードで実行する関数の作り方です。PHPのfunctionで関数名を書き、returnでショートコードで実行するコンテンツを作ります。

上のPHPコードの場合return “ショートコードで呼び出す内容”;が、コンテンツとして表示する部分です。

そしてショートコードタグでは[test]とadd_shortcodeの第一引数を使用することで、上の画像のようにショートコードで呼び出す内容を表示できます。

ショートコードを作るadd_shortcode関数

すでに登場してるadd_shortcode関数についても勉強しておきます。

add_shortcodeはWordPressでショートコードタグ用のフックを追加するWordPress関数です。

<?php add_shortcode( $tag , $func ); ?>

$tag(必須)

add_shortcodeの引数の$tagは投稿の本文から使用するショートコードタグの名前を文字列で指定します。

$func(必須)

add_shortcodeの引数$funcは関数名を指定します。$tagで指定したショートコードが見つかったときに実行するコールバック関数です。

そしてWordPressのadd_shortcode関数の引数を指定する順番は、( ショートコード名 , ショートコード関数名 )の順番で指定します。

ショートコードを呼び出す

作成したショートコードを呼び出すには、ショートコードタグを使用して呼び出します。呼び出すタグの作り方はショートコード名をブラケット（[]）で囲みます。

記事冒頭の説明で使用したショートコードの基本的な作り方を思い出してみます。

function testfunc() {
　return "ショートコードで呼び出す内容";
}
add_shortcode('test', 'testfunc')

呼び出すときにWordPress関数のadd_shortcodeの第一引数で指定した’test’をブラケットで囲み、[test]と作ります。

ショートコードというだけあって、短い記述だけで作成した関数を呼び出すことができるのでとても便利です。

WordPressでショートコードを作る場所

WordPressでショートコードを作る場所についても勉強しておきたいです。

私が知る範囲のショートコードを作る場所は2箇所です。

ショートコードを作る2箇所のうち、どちらの場所でショートコードを作りやすいかは人それぞれなので、作りやすい方の場所、または作成するショートコードの数などで決めるといいかと思います。

PHPを書くfunctions.phpにショートコード

WordPressに機能を追加するためにPHPを書くことができる場所、「functions.php」にショートコードを書きます。

WordPressでショートコードを作成したら「functions.php」に書きます。という説明が調べた限り圧倒的に多かったです。

基本的にはPHPを書くfunctions.phpでショートコードを書くようにするのが一般的なので無難です。

ショートコード用のPHPファイルを作る

使うショートコードが多くなるようなら、ショートコード用のファイルに保存するようにしてもいいと思います。

ショートコード用のPHPファイルに書く場合には、shortcodes.phpのように新しいファイルを作成して、テーマのfunctions.phpファイルと同じフォルダーに保存します。

そしてfunctions.php内に、次のコードを追加します。

include('shortcodes.php');

これで、ショートコード用のPHPファイル作成ができ、後々増えていくであろうショートコードだけをまとめて書く場所にするショートコード用のPHPファイルにできます。

自己完結型ショートコードの作り方

WordPressのショートコードには「自己完結型」と呼ばれる作り方があります。

「自己完結型」という固い表現をしているため、難しいショートコードの作り方をするのでは？と思いそうですが、今回の記事をここまで読んでいただけているということは、すでに「自己完結型」のショートコードの作り方を半分程度は理解できています。

単純な自己完結型ショートコードの場合

以下のショートコードは記事冒頭で基本的なショートコードの作り方をしたものです。

function testfunc() {
　return "ショートコードで呼び出す内容";
}
add_shortcode('test', 'testfunc')

WordPressで関数をショートコードタグで呼び出す場合には[test]のようにブラケットで挟むということを先述しましたが、このときのブラケットで挟んでショートコードを呼び出す場合が「自己完結型」になります。

なんで型があるんだ？と思うかもしれませんが「自己完結型」とは別に「囲み型」というショートコードの作り方もあるため、自己完結型はショートコードの型の種類と理解しておくと良いかと思います。

囲み型は後述します。

自己完結型ショートコードで属性を使う作り方

せっかくWordPressのショートコードで自己完結型の作り方を勉強してるので、自己完結型ショートコードに属性を使う作り方も勉強しておこうと思います。

function short_funk4( $atts ) {
　$atts = shortcode_atts(
　　array(
　　　'word' => 'デフォルトの値',
　　), $atts, 'user' );
　return $atts['word'];
}
add_shortcode( 'shotesfor', 'short_funk4' );

少し複雑なPHPの書き方に進化しましたが、「$atts」という変数とWordPress関数の「shortcode_atts」をコードに加えています。

「$atts」という変数は、ショードコードで指定した引数を配列として格納することができます。

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

簡単に言うと、ショートコードを利用する際に「属性」を使い任意の値を渡すことができ、その値はデフォルト値を設定しておくことができる。という感じです。

このような作り方をしたショートコードの呼び出し方は、自己完結型のショートコードタグに属性を指定してショートコードを呼出します。

add_shortcodeの第一引数でセットしたタグ名の後に、半角スペースを空けて、=の後でコンテンツを書き呼び出します。

もし属性を書かないショートコードタグにした場合

変数$attsに格納したデフォルトの内容が呼び出され表示されます。

囲み型ショートコードの作り方

次は自己完結型のショートコードの作り方でチラッと登場したショートコード「囲み型」の作り方です。

囲み型は開始のショートコードと終わりのショートコードでコンテンツを囲むので「囲み型」と言うようですね。

そして囲み型のショートコードで実行する関数の作り方はというと以下のようにします。

function shortc_func5( $atts, $content = null ) {
　return $content;
}
add_shortcode('shortfive', 'shortc_func5');

一番覚えやすそうなショートコード囲み型の作り方を先に登場させてみました。

$attsでコードに入力された引数を取得し、$content = nullで囲み型ショートコードが使われたときコンテンツを取得します。

retunの$contentで受け取るコンテンツ部分が、例えば投稿ページで以下のショートコードを囲み型で使用した場合

表示するコンテンツを作らないと何も表示されません。これはデフォルトでは空の状態だからです。

なので以下のように囲み型ショートコードを使用し表示させます。

囲み型ショートコードでHTMLを表示

次は囲み型ショートコードでHTMLを表示させる作り方です。

function shortc_funk2( $atts, $content = null ) {
　return '<div>' . $content . '</div>';
}
add_shortcode( 'shotestwo', 'shortc_funk2' );

シングルクォートでHTMLタグを囲み、変数$contentはドットで挟んで連結させる作り方にします。

そして投稿編集などでショートコードタグを以下のように囲み型で書きます。

そうすると指定した関数が実行されて、HTMLタグとHTMLタグに囲まれたコンテンツを囲み型のショートコードで出力できます。

ショートコードでクラスを指定する作り方

先に囲み型ショートコードでHTMLを表示する作り方を紹介しましたが、記事を書きながら思ったことがあります。「クラス名の変更が自由にできない…」

ショートコードの作り方を勉強しながらなので苦戦しましたが、ショートコードタグを使用するときにクラス名を任意でつけられるようにする作り方をやってみました。

function shortc_func6( $atts, $content = null ) {
　extract( shortcode_atts( array(
　　'class' => 'def-class',
　　), $atts ) );
　return '<div class="' . esc_attr($class) . '">' . $content . '</div>';
}
add_shortcode('shortsix', 'shortc_func6');

extractを使うことで連想配列に含むキーを変数名にして、値はその変数の値にした新しい変数を作成します。

上のコードで配列のキーの「class」が変数「$class」になります。

こうすることで囲み型ショートコードの開始タグでクラス名を入力した値が「$class」の値になります。

もし上のショートコードタグのように、囲み型ショートコードの開始タグに値(クラス名)を入力しなかった場合は、デフォルトの値を出力できるように定義しています。

まとめ

WordPressでショートコードの作り方を勉強しましたが、自分の使いたいと思ったことを関数で作成する作業はそれなりに時間がかかるかもしれません、

ですが一度関数を作成してしまえば、ショートコードで呼び出すだけなので、長い目で見ればとても作業効率の時短が実現します。

ショートコードの呼び出しすら時短させたい場合は「AddQuicktag」にショートコードを登録していつでもワンクリックで呼び出せるようにしてしまえば、さらに効率良くなるでしょう。