【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がごちゃごちゃせず、ショートカットの記述だけまとめることができるのでわかりやすく、整理整頓できます。

ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。