ショートコードを作成する方法と使い方

ショートコードは用意したとあるコードを、短いコードで呼び出すことができるWordPressの機能の一つです。

複雑なコードでも短い記述で呼び出すことができるので、作業の効率性や記事のデザイン性をあげたりすることができるのがショートコードのメリットです。
よく使うパーツを簡単な記述で表示させたり、投稿や固定ページの編集画面で何かしらPHPを使った処理を加えたい時などにもショートコードが活躍します。

使用するには呼び出すためのコードの記述や処理内容のコードを用意する必要があるので、作成・使い方をメモしていきます。

ショートコードの使いどころ

WordPressでは投稿の編集画面ではPHPコードは使用できません。何かしらPHPコードを使って表示させたいものがあったとしてコードを入力してもテキストとして表示されてしまいます。
編集画面上でテンプレートタグなど何かしらPHPコードを使いたいと思った時にはショートコードが便利です。

またPHPコードを使用しなくとも、特定のコンテンツを短いコードで出力させたい場合にもショートコードが役立ちます。
一部決まったデザインで表示させたい場合や、定型分など使い回したいパーツもあるかもしれません。その時にショートコードが使えれば、いちいち入力したり他の記事からコピペしたりする手間を省けます。

定型文を挿入する、ブログカードを作る、決まった広告バナーを記事内に入れるなど、ショートコードはアイディア次第でさまざまな用途に利用できます。

ショートコードの作成が必要なのは、基本的には記事編集の際に何かしらの処理が必要になった時だと思います。
テンプレートファイルのみに特定の処理を追加する場合は、関数を作っておけばそのまま呼び出せるのでわざわざショートコードとして登録しなくてもいいと思います。

WordPressでよくある the_title() といったテンプレートタグもわざわざショートコードにはしていません。
多少の違いだとも思いますが、 <?php do_shortcode('[shorcode]'); ?> と書くより <?php function(); ?> とした方が手間も少ないです。また処理コードを作る際に add_shortcode('shortcode_name', 'function'); と書く手間も省けます。

記事を書くときに、同じパーツを使用したい・何かしら動的にコンテンツを取得したいといった場合などにショートコードを利用するのがおすすめです。

ショートコードの基本の使い方

ショートコードを使うためには、呼び出すコードを登録して使用したい箇所で呼び出します。

ショートコードの登録

まずショートコードの登録が必要です。コードはfunctions.phpに処理内容を作っていきます。

function function_name() {
  // 処理内容
}
add_shortcode('shortcode_name', 'function_name');

add_shortcode() でショートコードを登録し、呼び出せるようになります。

add_shortcode($tag , $callback);
add_shortcode('ショートコード名', 'コールバック関数')

add_shortcode() – Function | Developer.WordPress.org

ショートコードを利用する時の書き方

作成したコードを使用したいところに、ショートコードを入力します。投稿編集画面ではブロック項目に「ショートコード」というものがあるのでこちらを選択。

ブロックが表示されたら、大カッコ([])の中に、ショートコードを登録したときに設定したショートコード名を入れます。

ショートコードの書き方は二通り。 [shortcode_name] のみで完結させるものと、多くのhtmlタグのように [shortcode_name]テキスト[/shortcode_name] という形があります。

ショートコードはパラメータを設定することができます。
囲み型の場合はパラメーターの他、囲まれたテキストも値として受け渡されます。

[shortcode_name param=""]
[shortcode_name param1="" param2=""]
[shortcode_name param=""]テキスト[/shortcode_name]

テンプレートファイルで使用する場合は do_shortcode() というテンプレートタグを利用します。

<?php echo do_shortcode('[shortcode_name]'); ?>

ウィジェットでショートコードを使用したい場合は、functions.php に以下のコードを追加します。

add_filter('widget_text', 'do_shortcode');

ショートコードの作り方

もう少し詳しくショートコードの作り方を記していきたいと思います。

単純にテキストを表示させたい場合は以下のような形。

function shortcode_sample01() {
  return 'hello world';
}
add_shortcode('shortcode_name01', 'shortcode_sample01');

【ショートコードの記述】

[shortcode_name01]

HTMLタグも記述できます。

function shortcode_sample02() {
  return '<p>hello</p>';
}
add_shortcode('shortcode_name02', 'shortcode_sample02');

WordPressの出力テンプレートタグを使用する場合は以下のように書きます。

function shortcode_sample03() {
  ob_start();
  the_title();
  return ob_get_clean();
}
add_shortcode('shortcode_name03', 'shortcode_sample03');

パラメーターを利用する場合。

function shortcode_sample04($atts) {
  extract(shortcode_atts(array(
    'name'=>"",
    'intro'=>"",
  ),$atts));

  $output ='
    <div class="editor_box">
      <p class="editor_name">この記事を書いた人 : '. $name .'</p>
      <p class="editor_intro">'. $intro .' </p>
    </div>';
  return $output;
}
add_shortcode('shortcode_name04', 'shortcode_sample04');

【ショートコードの記述】

[shortcode_name04 name="komari" intro="この記事はこんな人のために書きました。"]

$atts は呼び出す時に使用する属性の連想配列が入ります。これを定めておくことで、ショートコードを書いた際に値の受け渡しができます。

【extractについて参考】PHP | extract関数の使い方(連想配列に含まれるキー毎に変数を作成) | Let’sプログラミング

ショートコードは入れ子にすることもできます。

ショートコードが簡単に設定できるプラグイン

PHPコードを書くのはハードルが高いという人はプラグインが用意されているのでそちらを利用しましょう。

WP Shortcodes Plugin — Shortcodes Ultimate

「WP Shortcodes Plugin」には50種類以上のショートコードが用意されています。すでに出力するコードは用意されているので一からコードを書かずともショートコードを利用できます。

Arconix Shortcodes

ボタンやボックス、タブやアコーディオンなどを表示するショートコードが利用できます。

Post Snippets – Custom WordPress Code Snippets Customizer

「Post Snippets」はスニペットを作成・管理するプラグインで、独自のショートコードを作成することができます。ショートコードで出力する内容は自分で設定したい場合におすすめです。

カテゴリー : WordPress

TOPへ