
WordPressの画像パスをショートコードでかんたんに。
開発環境と本番環境ではURLが違うので、本番用にパスを書き換えなきゃいけないのが地味にめんどくさいけど間違えたら致命的な大事な作業。
かんたんにショートコード作っちゃいましょ!
ショートコード用.phpを作る
オリジナルテーマ使っててfunction.php内がそんなにとっちらかってない、とかいう場合はあまり関係ないかもしれないですが
既存テーマを使っていて、あんまりfunction.phpを触りたくない場合におすすめなのがそれ用のphpを作ってfunction.phpに読み込みだけする方法。
CSSでいう@import的な。
今回は「shortcodes.php」とします。
shortcodes.php
function imgPath() {
return get_template_directory_uri(); // ショートコードで吐き出したい内容
}
add_shortcode('imgPath', 'imgPath');
function.php
// shortcodes.phpを読み込む
require get_template_directory() . '/shortcodes.php'; //ファイルの場所を指定
テンプレート.phpもしくは記事内
テンプレート.php
<img src="<?php echo do_shortcode('[imgPath]')?>/画像ディレクトリ/画像名" alt="">
記事内
<img src="[imgPath]/画像ディレクトリ/画像名" alt="">
子テーマを使っている場合
この場合、「get_template…」の部分が少し変わります。
このままだと親テーマのディレクトリを見に行っちゃうので。
子テーマから自身を指定
get_stylesheet_directory_uri() ➛ https:// あり
get_stylesheet_directory() ➛https:// なし
子テーマから親テーマを指定
get_template_directory_uri() ➛ https:// あり
get_template_directory() ➛https:// なし
以上!
快適なショートコードライフを!
(オリジナルテーマ作るの楽しくて既存テーマの編集方法がなかなか覚えられない)