ショートコードといえば、WordPressに備わっている非常に便利な機能ですよね。記事で使う各パーツをショートコード化することで、複雑なものでも簡単に呼び出すことができます。
今回は、ショートコードの基本知識と具体的な作成方法について解説していきます。
WordPressのショートコードの基本
ショートコードとは、以下のように「[」と「]」で囲まれたコードを指します。WordPressには、このコードをエディターに書き込むことで様々な処理を実現できる機能が備わっています。
この短いコード1つで、カードリンクや目次など様々なコンテンツを呼び出せるので、使いまわしたいパーツがある時に非常に便利です。それでは、ショートコードの基本的な仕様をみていきましょう。
- 基本的な使い方
- ショートコードは2種類
- パラメータを指定可能
基本的な使い方
ショートコードは、エディターに短いコードを記入するだけで利用できます。ブロックエディターとクラシックエディターの両方で利用できるため、非常に汎用性が高いですね。
 |
 |
| クラシックエディター | ブロックエディター |
ただし、登録されていないショートコードは利用できないため、テーマを変更したり、プラグインを無効化した時に使えなくなる可能性があります。
ショートコードは2種類
ショートコードには、以下の2種類の型が存在します。大きな違いとしては、ショートコードの間に本文を挟めるかどうかです。
| 自己完結型 | [my_shortcode] 1つのコードで完結する |
| 囲み型 | [my_shortcode]テキスト[/my_shortcode] 開始タグと終了タグの2つが必要（間に本文の内容を挟める） |
テーマやプラグインで実装されているショートコードは、自己完結型が多いです。吹き出しのように、本文の一部をショートコード内で実行したい時は、囲み型を利用することが多いですね。
パラメータを指定可能
ショートコードには、以下のようにパラメータを指定できます。（パラメータは登録時に定義します）
このパラメータはショートコードの内部処理で利用できます。パラメータにURLを入力して、そのURLに応じたコンテンツを表示する、みたいな使い方ができるわけです。
パラメータは1つのショートコードに複数指定できますし、囲み型にも利用できます。
ショートコードの作成方法
ショートコードを作成する方法について解説します。ショートコードの登録には、add_shortcode()を利用します。（基本的には、functions.phpで利用します。）
add_shortcode( $tag, $callback )| $tag | ショートコードの登録名（[]の中の名称をココ） |
| $callback | 呼び出す関数（ショートコードで実行したい処理をココ） |
具体的な使い方を実例とともにみていきましょう。
簡単なショートコードを作る
まずは最も簡単なショートコードの作り方をご紹介します。以下は、エディターに[my_shortcode]と入力したら「これはショートコードのサンプルです。」とテキストが表示されるショートコードです。
// [my_shortcode]のショートコードを登録
add_shortcode( 'my_shortcode', function(){
return 'これはショートコードのサンプルです。';
} );
// エディターに[my_shortcode]を入力すると以下を表示
// これはショートコードのサンプルです。上記をfunctions.phpに記載した後、エディターに[my_shortcode]と入力して表示をご確認ください。表示されていたらOKです。
パラメータ付きのショートコードを作る
次は、パラメータを指定できるショートコードを自作してみましょう。パラメータを設定する時は、add_shortcode()のコールバック関数に第一引数（$atts）を指定します。この引数には配列形式で各パラメータが格納されているので、こちらを利用していきます。
以下は、ショートコードに「first_name」と「last_name」の2つのパラメータを指定すると、性と名を表示できるサンプルになります。
// [my_shortcode]のショートコードを登録
add_shortcode( 'my_shortcode', function( $atts ){
$atts = shortcode_atts( array(
'first_name' => '',
'last_name' => ''
), $atts );
return '私の名前は' . $atts['last_name'] . $atts['first_name'] . 'です。';
} );
// エディターに[my_shortcode first_name="太郎" last_name="山田"]を入力すると以下を表示
// 私の名前は山田太郎です。実際にこのショートコードを登録して、エディターで使ってみてください。各パラメータを書き換えても反映されるはずです。
また、上記で利用している「shortcode_atts()」は、各パラメータの初期値を設定するために使います。初期値を設定することで、パラメータが省略された時の処理を決めれるので、セットで覚えておきましょう。
囲み型ショートコードを作る
囲み型のショートコードを作る時は、add_shortcode()のコールバック関数に第二引数（$content）まで指定します。この引数（$content）には、囲まれたテキストが格納されているので、任意のHTMLタグで囲んであげましょう。
// [my_shortcode]のショートコードを登録
add_shortcode( 'my_shortcode', function( $atts, $content ){
return '<div style="color:red;">' . $content . '</div>';
} );
// エディターに[my_shortcode]赤いテキスト[/my_shortcode]を入力すると以下を表示
// <div style="color:red;">赤いテキスト</div>/上記は、囲まれたテキストの文字色が赤くなるショートコードですので、一度エディターに入力して反映されるか試してみてください。
なお、こちらも自己完結型と同じようにパラメータを利用できます。以下は「color」のパラメータを追加して、囲み型ショートコードの色を変更できるようにしたものです。
// colorのパラメータ付き囲み型ショートコードの登録
add_shortcode( 'my_shortcode', function( $atts, $content ){
$atts = shortcode_atts( array(
'color' => 'red'
), $atts );
return '<div style="color:' . $atts['color'] . ';">' . $content . '</div>';
} );
// [my_shortcode color="blue"]青いテキスト[/my_shortcode]と入力すると
// <div style="color:blue;">青いテキスト</div>PHPファイルから実行する方法
ショートコードは、基本的にエディターに入力して利用しますが、PHPファイルで呼び出すこともできます。
その時は、ショートコードを呼び出せるdo_shortcode()を利用しましょう。以下は、do_shortcode()でショートコードを呼び出すサンプルです。
// 自己完結型
echo do_shortcode( '[my_shortcode id="358"]' );
// 囲み型
echo do_shortcode( '[my_shortcode color="blue"]青いテキスト[/my_shortcode]' );もし上記でうまく表示されない時は「echo」しているか、[]を忘れていないかなどご確認ください。
まとめ
今回は、WordPressでショートコードの基本仕様から作成方法まで解説しました。既存のテーマにショートコードを追加したい場合は、子テーマのfunctions.phpに記入するか、以下のプラグインをご利用ください。
2020/02/28 情報を更新いたしました。 WordPressの「functions.php」ファイルは記述を間違えるとエラーが出てしまったりして、初心者にとってあまり触りたくないファイルですよね。また、テーマの色々な独自の機能を追加していると、テーマのアップデート時にうっかり消えてしまう...
こちらは、管理画面上からfunctions.phpにPHPの追記ができるプラグインですので、ぜひ合わせて使ってみてください。
コメント