【WordPress】画像パスをショートコードで便利に

固定ページにコーディングしたデータをカスタムHTMLにコピペする時、画像で、「サイトのURL/wp-content/themes/テーマ/画像までのディレクトリ/画像名」って入力するの、めっちゃめんどくないですか？
「src=”https://・・・なんだっけ？」ってなりませんか？
編集ページじゃなくてphpだったら<?php echo get_template_directory_uri(); ?>とか書けるのに・・・めんどくさー！！！

はい。めんどくさいときはショートコードが便利。
エディタの編集のビジュアルでもテキストでも段落でもカスタムHTMLでも使える（どこでも使える？）「ブラケット[]」で囲んで短く記述できるステキなshortcode。
編集画面でphpは記述できないけど、phpのコードをショートコードで記述できる仕様にしてしまえば、どこでも表示できる！置ける！なんて便利なんだー！！
記事一覧とかもいいよね〜

今回は画像パスのショートコードです。
yukipanはよく忘れるのでコピペでいけるようにメモしときます。

functions.php

function imgPathcode() {
  return get_template_directory_uri();
}
add_shortcode('imgPath', 'imgPathcode');

HTML（WordPressの編集で記載）

<img src="[imgPath]/assets/images/画像名" alt="">

かるく解説

<img src="サイトURL/wp-content/themes/テーマ/assets/images/画像名" alt="">

固定ページの編集→カスタムHTMLに「<img src=”[imgPath]/assets/images/画像名” alt=””>」と入力すると、「[imgPath]」が「サイトURL/wp-content/themes/テーマ名/」までの表示になります。
functions.phpで「ショートコードの”imgPath”は、”get_template_directory_uri()”の代わりですよ〜」と記述しているのです。

functions.phpのショートコードの内容は

function imgPathcode() {

imgpathcodeって名前の関数です。

return get_template_directory_uri();

”get_template_directory_uri()”っていうのを返しますよ〜

add_shortcode('imgPath', 'imgPathcode');

”[imgPath]”っていうショートコードを記述したら”imgPathcode”の関数が発動しますよ〜
＝”get_template_directory_uri()”の値が表示されますよ〜（返ってくる）

get_template_directory_uri() = テーマ名までのURL（ディレクトリ）

いや〜、あの長ったらしいURLをいちいち書かなくていいからコードが短く済んでステキ。
shortcodeにできるものはどんどんショートコードにしてしまいましょう。

おまけ：shortcode.phpを別で作るとわかりやすい

function.phpに

// ショートコード記述
require get_template_directory() . '/functions/shortcode.php';

って記述して、「shortcode.php」を別で作ると、functions.phpがごちゃごちゃせず、ショートカットの記述だけまとめることができるのでわかりやすく、整理整頓できます。