こんにちは！ウェブサバイバー運営のYeah-Manです！さて、今回はWordPressのショートコード機能のご紹介です！
ショートコードといえばこちらの記事でも紹介していますが、WordPressの基本機能でさまざまなWordPressプラグインでも活用されている便利機能です！

今回はこのショートコード機能を使って、サイト内の関連記事を埋め込む方法を紹介して、実際に手を動かしながら紹介して行きたいと思います！
それでは早速いってみましょう！

WordPressのショートコードとは

端的にいうとWordPressのショートコードとは、『functions.php』にまとめておいた処理を、エディタへ『[](ブラケット)で囲う決められた書式』で記入することで、その処理を色なところで使えるようにする便利機能です。
エディタの途中で『このデータ呼び出したいなぁ』なんて時などに使ったりします。
このショートコードですが、様々なプラグインでも使われているので見たことがある人も多いかと思います。
当サイトでも『MW WP FORM』など一部プラグインを紹介していますが、MW WP FORMを使ったことがある人なら馴染み深いですかね。
MW WP FORMを例にとると以下のように書きます。

[mwform_text name=”テキストフィールド” placeholder=”” value=”{post_title}”]

[](ブラケット)の開始タグすぐにショートコード名を入力、上記の書き方のようにして記述する処理側(functions.php側)で引数として受け取ることができます。また、上記以外でも以下のような『囲み式』のものなどがあります。

[shortcodename]ここに内容を入力[/shortcodename]

本記事では筆者が書き慣れている都合から、最初に紹介したMW WP FORMの形で進めたいと思いますので、
早速本題『記事内の好きなところにサイト内関連記事を埋め込む』サンプルを作ってみたいと思います！

functions.phpに処理を書き、記事内で呼び出す

なるべく伝わりやすいよう、ここでは2段階に分けて解説しますね！解説順は以下です。

1. 一番シンプルにショートコードを書いて呼び出す
2. 引数を使ってみる

それでは行ってみましょう！

一番シンプルにショートコードを書いて呼び出す

とりあえず呼び出してみましょう。functions.phpへ以下を記述します。

//「こんにちは！」と出力
function display_hello() {
    return "こんにちは！";
}
add_shortcode('hello', 'display_hello');

次に投稿のビジュアルエディタ内に以下を挿入してください。場所はビジュアルエディタ内であればどこでも構いません。

[hello]

functions.phpへの記述、ビジュアルエディタへのショートコードの挿入の2点が完了したら、そのまま下書き保存するか公開しましょう。
プレビュー、もしくは記事詳細画面を確認するとショートコードを埋め込んだ箇所へ『こんにちは！』と出力されているはずです。

解説：ショートコードの登録方法

それではfunctions.phpへ埋め込んだソースコードを見てみましょう。シンプルな形です。
4行目の『add_shortcode()』というWordPressのフックへ、第一引数に『ショートコード名』第二引数にフックとして挟み込む関数を登録しています。
こんな感じで『1つのショートコードにつき、1add_shortcode』で順次登録していくことができます。
次は引数を使ってみましょう！

引数を使ってみる

引数ですがちょっと突っ込んだ話を理解しておく必要があります。
まずは一旦functions.phpに以下を記述してください！

function display_hello2($atts) {

  extract(shortcode_atts(array(
    'greet' => 'こんにちは！',
    'who' => 'ウェブサバイバーさん！',
  ), $atts));
  $outpu = "<p>" . $greet . "、" . $who . "さん";
  return $output;
}
add_shortcode('hello_2', 'display_hello2');

で、呼び出してみましょう。呼び出し元では一回このまま呼び出します。

[hello_2]

普通に呼び出せているのが確認できたと思います。では次に呼び出し元からに引数を設定してあげます。
呼び出し元を以下のように変更してください。

[hello_2 greet="こんばんは！"]

すると『こんにちは！』の箇所が『こんばんは！』になることが確認できると思います！もちろん『greet=”こんばんは！”』の後ろに『who=”ほにゃららさん”』と続けて書いてあげることで、『ウェブサバイバーさん！』箇所も変更することが可能です。

こんな形で引数を通じ、値を渡してあげることができることを覚えておきましょう！

もし他にも項目を足したければ以下の部分に好きな名前をつけて渡せる配列の箱を足してあげればできますので、ご利用ください！

function display_hello2($atts) {

  extract(shortcode_atts(array(
    'greet' => 'こんにちは！',
    'who' => 'ウェブサバイバーさん！',
    'any_english_name' => 'ここに好きな値',
  ), $atts));
  $outpu = "<p>" . $greet . "、" . $who . "さん";
  return $output;
}
add_shortcode('hello_2', 'display_hello2');

記事IDを渡したら、その記事を取得してくる処理を書く

さて、基本を抑えたらここからが実践です。ショートコードの引数に記事IDを渡したら、そのID分記事を取得してくる処理を書いてみましょう！
以下の記述をfunctions.phpに記述してください。

function get_with_read_posts_arr($atts) {
  extract(shortcode_atts(array(
    'post_id' => '',
  ), $atts));

  $output = '';
  if ($post_id) {
  	$output = '<a href="' . get_the_permalink($post_id) . '">' . get_the_title($post_id).  '</a>';
  }
  return $output;
}
add_shortcode('get_with_read_posts', 'get_with_read_posts_arr');

上記が記述できたら、次に呼び出してみましょう。呼び出し元では呼び出したい記事のIDを入力します。

[get_with_read_posts post_id="66"]

リンク付きの記事リンクが出力されていればOKです！

複数の投稿IDから、複数の記事分、リンク付きテキストを出力する

function get_with_read_posts_multiple_arr($atts) {
  extract(shortcode_atts(array(
    'post_id' => '',
  ), $atts));


  $output = '';
  $post_ids = mb_split(",",$post_id);

  if ($post_ids && is_array($post_ids)) {
    foreach ($post_ids as $post_id) {
      $output .= '' . get_the_title($post_id).  '
';  
    }
  }
  return $output;
}
add_shortcode('get_with_read_posts_multiple', 'get_with_read_posts_multiple_arr');

上記が記述できたら、次に呼び出してみましょう。呼び出し元では呼び出したい記事のIDを『,(カンマ区切り)』入力します。

[get_with_read_posts post_id="66,104"]

出力されましたか？
以下はウェブサバイバーでの出力結果です。投稿IDが66と104の記事はどちらもMW WP FORMの記事です。これでMW WP FORMの記事を別で書いた時はそちらの記事へ『関連記事』として表示してあげることができるようになりますね！

基本機能だけどあなどれない！

ここまでシンプルなショートコードの実装方法と、ちょっとした発展系までご紹介してきましたがいかがでしょう？
基本機能ですが、使いこなせればとても便利な機能ですので、ぜひみなさんもオリジナルのショートコードを作成してみてくださいね！
以上Yeah-Manでしたー！