PHPコードを直接本文へ書いた方が簡単なので、本文内でPHPを使えるようにして呼び出せば簡単なのにと思うところですが、WordPressでは推奨されていませんし、phpのバージョン７に対応できるプラグインも減ってきているので、ここはひとつ勉強もかねてショートコードで！！というのが今回のテーマです。
コードと簡単な解説、おまけでカスタマイズ方法などを紹介します。テーマのfunctions.phpへ挿入することで動作しますが、環境によってはコンフリクト（競合）が起こって画面真っ白・・・なんてこともあるかもしれませんので使うかどうかは自己責任でお願いしますね。
アイキャッチ画像をショートコードで本文へ呼び出す方法
コードと一緒に簡単な解説を付けておきますのでサイトに合わせていろいろ調整してみてください
コード
/**********************アイキャッチ画像をeyecatchショートコードで呼び出す**********************/
function getImage() {
if(has_post_thumbnail()) {
$thumb_id = get_post_thumbnail_id(get_the_ID());
$img = wp_get_attachment_image_src( $thumb_id, 'thumbnail' );
$img_src = $img[0];//画像のパス
$img_width = $img[1];//画像の幅
$img_height = $img[2];//画像の高さ
}else{
$img_src = esc_url ( get_template_directory_uri() ).'thumb.png';
}
$view_img = '<img src="'.$img_src.'" alt="【WordPress】ショートコードを使って本文内へアイキャッチ画像やタイトルを表示する方法|Knowledge Base">';
return $view_img;
}
add_shortcode('eyecatch', 'getImage');コードの解説
１行目の「function getImage()」でgetImageという命令をしますよ！と宣言して、最終行の「add_shortcode(‘eyecatch‘, ‘getImage‘);」で「eyecatch」という名前のショートコードが書かれている箇所では実行してね！！というのが大きな流れです。
そして、「$view_img = ．．．．．;」で何を表現するのかを指定して、「return $view_img;」で指定した画像の表示を実行してね！！としているのです。
途中「.$img_src.」という変数が使われていますが、上の数行でその設定がされています。
「if(has_post_thumbnail())」で投稿本文に画像があったらその下の数行を、なかったら「else」の後ろにあるテーマディレクトリの「thumb.png」という名前の画像を表示しなさい！！と大きく判断しています。
さらに、画像のサイズなどを条件設定しているんですね。流れが分かってくると今回のコード以外でも理解できるようになりますから今回は大変勉強になりました。
ただ、知ってることと書けることは違う・・・そのうち何も見ずにやりたいことをコードで表現できるようになりたいなんて思う今日この頃です。
他の画像サイズを引っ張り出すには
上のコードではサムネイル画像サイズ（小さい画像）が表示されますが、設定を変えれば大きなサイズの画像も引っ張り出すことができます。
WordPressのサイトへ画像をアップロードすると様々なサイズが自動で作成されるのはご存じですよね？作成されるのは
- thumbnail・・・通常のサムネイルサイズ
- medium・・・通常の「中」サイズ
- large・・・通常の「大サイズ」
- full・・・アップロードしたままのサイズ
の４つ。また、画像系のプラグインなどによってさらにいろいろな大きさのものが作成されます。
例えばthumb320といったサイズがあったりします。FTPでアップロードした画像のフォルダを見てみると、WordPressのメディア設定をしていないサイズが作成されているのを確認できます。そのときに作られた画像サイズを呼び出すこともできます。大抵は「thumb〇〇（〇〇は横幅）」で指定できます。
こうした画像を引っ張り出すには上のコードの中で「$img = wp_get_attachment_image_src( $thumb_id, ‘thumbnail‘ );」の赤字の部分を表示したい画像サイズに書き換えるだけです。
サイズをfullにしてしまえばショートコードの前後の文字列は上下に表示されますが、その他のサイズでは回り込んでしまいますね。改行を２つ以上して自動整形機能で自動解除することもできますが、<div>～</div>の間にショートコードを入れることで確実に改行させることができますし、<div align=”center”>～</div>のように位置を指定すれば画像の場所が指定できます。
もちろんCSSを使って画像の位置を指定してもいいですね。
いろいろなサイズを引っ張るコードを作ろう
ちなみに当サイトでは２つのコードを作っています。
１つ目はフルサイズの画像を引っ張るコード
[eyecatch]というショートコードを入れれば表示できます。
そして２つ目は「中」サイズの画像を表示するコード
[eyecatchmid]というショートコードを入れれば表示されます。
作り方は上のコード解説で、phpを動かすためにつけた名前とショートコード、画像のサイズを変えるだけなんですね。
複数の画像が挿入できるようにしておき、
などのプラグインを使ってボタン化しておけば、アイキャッチ画像と同じ画像で思った通りの大きさのものがパッと挿入できます。
このショートコードについてはアイキャッチが設定していたら、それをショートコードを使って投稿の中で使う方法のサイトを参考にさせていただきました。
投稿タイトルをショートコードで投稿本文内へ表示する
上のコードの流れが分かれば簡単にできそうということで、自身で作成してみました。
コード
/**********************タイトルをshowtitleショートコードで呼び出す**********************/
function func_showTitle() {
return "【" . get_the_title() . "】";
}
add_shortcode('showtitle', 'func_showTitle');コードの解説
流れは画像のときと一緒、「func_showTitle」という名前の命令をs[howtitle]というショートコードが書かれた場所で実行せい！！っていうコードですね。
投稿タイトルにはもともと「get_the_title()」というphpコードが存在するのでそれを使って「return “【” . get_the_title() . “】”;」という形で表示しなさいとしているだけです。
上のコードだとタイトルの前後に【】（括弧）がつくようにしていますが、変更しても、除いても大丈夫です（”はそのままにしておかないと構文エラーになります。）。
こういう１行の関数でデータを引っ張り出せるものであれば、この書き方だけ知ってれば簡単ですね。
おまけ functions.phpへコピペすれば・・・をやったら不具合が起きて操作できなくなるのは？
ネット上ではWordPressのfunctions.phpへ追記するコードがたくさん紹介されていますね。「コピペすれば・・・」と書かれているものも多数あります。その言葉通り何も知らないままコピペしたら、不具合が起きて操作できなくなったという話をよく聞きます。
中にはそのサイトを名指しで「コピペすればいいと書いてあったからやったのにサイトが壊れた、〇〇というページはカス（ちょっと酷めに書いてみました）」なんていう記事を逆切れ気味に書かれている人がいますね。
でも実際にはコードが紹介されているサイト（テストサイトなども含む）で動作した話であって、決してすべての環境で試した紹介記事ではありません。紹介される方が注意を促すことも必要かもしれませんが、わけのわからない方がわけのわからないまま実行しないというのが大切だと思います。
もしも不具合が起こったら、WordPressの動作を制御しているコードの中に同じものがあったりしていることがほとんどですから、function名を変更したりして自身のサイトでも動作するようにする必要はあると思います。
よって今回紹介させていただいたコードもあくまでも私のサイトでは競合が起きなかったコードですから、そのままコピペして動作することを保証するものではないことを承知の上使用してくださいね（冒頭にも書かせていただいてます）。
