こんにちは、Ryohei（@ityryohei）です！

ショートコードは、関数を短い記述で呼び出すことができるWordpressの機能です。投稿や固定ページといったPHPのプログラムが実行できない場面でも定義した関数をブラケット（[]）で囲った短いコードを記述するだけで呼び出すことができます。

用途は多岐にわたっていて、記事の中に表示する広告コードを呼び出したり、求人を表示したり、別の記事へ誘導したりと様々です。

ショートコードはプラグインを利用することで簡単に作成することができますが、プラグインに頼らずに自作することも可能です。本記事ではショートコードを自作する方法から呼び出し方までご紹介しています。

ショートコードを作成する前に

ショートコードは関数を短い記述で呼び出すことができる便利な機能です。Wordpressでは、テーマ内で使用する関数はfunctions.phpにまとめられており、ショートコードで利用する関数もfunctions.phpに記述します。functions.phpのファイルは下記のディレクトリに置かれています。「wordpress」、「theme-name」となっている部分はご自身がワードプレスをインストールしたディレクトリ名に置き換えてくださいね。

/wordpress/wp-content/themes/theme-name/functions.php

functions.phpはテーマ内で呼び出される関数の集まりです。開いてみると、多くの記述があると思いますが、そのすべてが重要なコードになります。一文字でも消してしまうとサイトが表示されなくなる可能性がありますので、編集前にfunctions.phpを複製してバックアップを取っておくことをおすすめします。ファイル自体が存在しない場合もありますので、テーマ内に見当たらない場合は新規で作成しましょう。

バックアップの作成

//functions.phpをコピーして
/wordpress/wp-content/themes/theme-name/functions.php

//下記のバックアップファイルを作成
/wordpress/wp-content/themes/theme-name/functions.php.org

functions.php.orgはオリジナルのバックアップファイルとしておき、今後関数を追加する場合はコピー元のfunctions.phpに追記していきます。functions.phpを更新した後にサイトが表示されなくなった場合は、一旦バックアップファイルに戻して正常に表示される状態にして、その後でエラーの対応をするようにしましょう。

ショートコードの種類

WordPressのショートコードは2種類あります。「自己完結型ショートコード」と「囲み型ショートコード」と呼ばれています。

自己完結型ショートコード

自己完結型ショートコードは一つのコードを記述して関数を呼び出す記述方法です。関数を呼び出す際に属性等を指定することができます。

[shortcode_name]

囲み型ショートコード

囲み型ショートコードはHTMLのようにコンテンツを囲んで呼び出す記述方法です。関数にコンテンツを渡したい場合はこちらの方法を利用します。

[shortcode_name][/shortcode_name]

上記2種類のショートコードの使い方は後ほどご紹介するとして、まずは基本的なショートコードの使い方から解説していきます。

ショートコードの作成方法

では、早速ショートコードを作成していきましょう。ショートコードはfunctions.phpに下記の記述で追加することができます。

function function_name() {
  //ここに処理を記述
}
add_shortcode('shortcode_name', 'function_name');

function_nameは関数名、add_shortcode()はショートコードを追加する処理になります。上記のadd_shortcodeに指定する引数は（'ショートコード名', '関数名'）となります。ショートコード名、関数名には任意の名前を付けることができますので、管理しやすい名前をつけましょう。

ショートコードを呼び出す際は下記のように記述します。

[shortcode_name]

上記で、ショートコードの作成、呼び出しができるようになりました。試しに一つショートコードを作成して投稿内で呼び出してみましょう。

ショートコードの作成

functions.phpに関数とショートコードの追加処理を記述します。ここではHello!という文字列を返す関数を定義し、shortcode_helloというショートコード名を付けています。

function hello_func() {
  return 'Hello!';
}
add_shortcode('hello', 'hello_func');

ショートコードの呼び出し

functions.phpへ追記できましたら、投稿内で下記を記述してみましょう。呼び出し方法は簡単です。ショートコード名をブラケット（[]）で囲みます。

[hello]

実行結果

Hello!

投稿内にHello!という文字列が表示されたと思います。ショートコードを利用することで、投稿内でもPHPのプログラム実行できるようになります。

上記ではショートコードで単純に関数の処理を出力する方法をご紹介しました。もし、関数に値を渡して何らかの処理を実行したい場合は、自己完結型ショートコードに属性を指定することで解決します。

自己完結型ショートコードで属性を指定する

冒頭で自己完結型ショートコードには属性を指定できると説明しました。属性を指定することで関数に値を渡して何らかの処理を実行することが可能になります。

例えば、投稿IDを指定して特定の記事情報を出力する関数があるとして、その処理をショートコードで呼び出す場合は投稿IDが必要になります。試しに投稿IDをショートコードで指定してみましょう。

[post post_id="2018"]

これでショートコードに属性を指定することができました。属性名は「post_id」、値は「2018」となっています。

ショートコードで実行する関数も作成しましょう。

function post_func($atts){
  return 'POST ID = ' . $atts['post_id'];
}
add_shortcode('post', 'post_func');

上記を実行すると下記の実行結果が得られます。

POST ID = 2018

属性で指定した値が出力されているかと思います。もし、複数の属性をしていしたい場合は下記のように記述します。

//ショートコード
[post post_id="2018" post_id2="2019"]

//関数
function post_func($atts){
  return 'POST ID = ' . $atts['post_id'] . ' POST ID2 = ' . $atts['post_id2'];
}
add_shortcode('post', 'post_func');

//実行結果
POST ID = 2018 POST ID2 = 2019

これで複数の属性に設定された値を関数に渡すことができました。もし、属性にデフォルト値を設定しておきたい場合は、shortcode_atts()を利用することでデフォルト値を設定することができます。

function post_func($atts){

  $a = shortcode_atts( array(
    'post_id' => '2018',
    'post_id2' => '2019',
  ), $atts, 'post');

  return 'POST ID = ' . $a['post_id'] . ' POST ID2 = ' . $a['post_id2'];
}
add_shortcode('post', 'post_func');

この状態で属性を指定せずにショートコードを記述してみましょう。

[post]

下記の実行結果が出力されます。

POST ID = 2018 POST ID2 = 2019

shortcode_atts()で指定したデフォルト値が出力されました。デフォルト値は属性の指定がなかった場合に設定される値です。こちらを設定しておくことで、引数がない場合でもデフォルト値で処理が実行されます。よく取得する投稿情報をデフォルト値に設定しておくと、運用が簡単になりそうですね。

上記で自己完結型ショートコードに属性を指定して関数に値を渡すことができるようになりました。

次は、囲み型ショートコードでコンテンツを指定してみましょう。

囲み型ショートコードでコンテンツを指定する

囲み型ショートコードは、投稿内でショートコードを利用する際にコンテンツを指定する場合に利用します。具体的には下記のように記述します。

[shortcode_name]ここにコンテンツ[/shortcode_name]

HTMLの開始タグ、閉じタグと同じように書くことができます。関数は下記のようにしましょう。

function hello_func($atts, $content = null) {
  return  $content;
}
add_shortcode('hello', 'hello_func');

上記をショートコードでコンテンツを指定して呼び出してみます。

[hello]Hello![/hello]

実行結果は下記になります。

Hello!

開始タグ、閉じタグの間のコンテンツが表示されました。上記はテキストを指定しただけですが、コンテンツにはHTMLタグを指定することも可能です。

[hello]<h1>Hello!</h1>[/hello]

実行結果は下記になります。

<h1>Hello!</h1>

もちろん、関数の中にHTMLを含めることも可能です。

function hello_func($atts, $content = null) {
  return  '<h1>' . $content . '</h1>';
}
add_shortcode('hello', 'hello_func');

囲み型ショートコードはコンテンツを指定することができるとお話しましたが、自己完結型ショートコードのように属性を設定することも可能です。

//ショートコード
[hello text-color="red"]Hello![/hello]

//関数
function hello_func($atts, $content = null) {

  $a = shortcode_atts( array(
    'text-color' => 'black',
  ), $atts, 'hello');

  return '<h1 class="' . $a['text-color']. '">' . $content . '</h1>';
}
add_shortcode('hello', 'hello_func');

//実行結果
<h1 class="red">Hello!</h1>

上記ではshortcode_atts()を利用して、属性の指定がない場合はblackというclassを、指定があれば指定された値を設定するようにしています。

テンプレート内でショートコードを利用する

ショートコートは投稿画面や固定ページといった直接PHPが実行できない場合に利用するものですが、テンプレート内で実行することも可能です。テンプレート内では下記のように記述します。

//自己完結型ショートコード
<?php
  echo do_shortcode('[shortcode_name]');
?>

//囲み型ショートコード
<?php
  $content = 'ここにコンテンツ';
  echo do_shortcode('[shortcode_name]' . $content . '[/shortcode_name]');
?>

ショートコードを利用すれば、投稿する中で毎回似たような記述をする部分を簡素化することができます。自己完結型ショートコードと囲み型ショートコードを使い分けて色々お試しいただければと思います。

もし、ショートコードの使い方をより詳しく知りたい方は、下記のWordpressリファレンスがとても参考になりますので、ご覧ください。

add shortcode

以上、Wordpressのショートコードの使い方のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら