get_template_directory_uri();って長くね?

get_template_directory_uri();って長くね?

どうもこんにちは忙しくてスタッフブログに逃げてきました塚本です!
気分転換は大事ですよね…!?

今日は闇カスタムの話をします。
※ あまり参考にはなりません。

WordPressの関数たち

WordPressには様々な関数があります。
グローバル変数にも様々な値g

WordPressの有り難い関数たちはコチラのリファレンスからご覧になれます。

個人的にWordPressでなにかを作っててよく使うものとしては、

  • home_url
  • get_template_directory_uri
  • get_template_directory
  • the_permalink
  • esc_url
  • is_single
  • is_archive

…。
あまり使ってないので思い浮かびませんでした^^;

get_template_directory_uri();

get_template_directory_uriはテーマディレクトリのパスを出力する関数です。

使用例としてはこんな感じですかね。

<img src="<?php echo get_template_directory_uri(); ?>/assets/img/hoge/fuga.jpg">

頻出というか必須だと思われます。
WordPressやるなら誰もがこれを使うと思うんですが、めっちゃ長いですよね(笑)

以前はget_template_direcotry_uriって打つとWordPressやってる感じがするので真面目にそうしてました。

例えば、墾田永年私財法とかスリジャヤワルダナプラコッテとか王政復古の大号令とか
めっちゃ長いけどなんか良いっていう、get_template_directory_uriもそれに入ると個人的に思っています。

get_template_directory_uriを魔改造

長いし、いちいち打つのに飽きてきてしまったので魔改造を施しました。

imdir

function imdir( $file_name = NULL )
{
    if( $file_name ){
        $url = esc_url( get_template_directory_uri().'/assets/img/'.slug().'/'.$file_name );
        $path = get_template_directory().'/assets/img/'.slug().'/'.$file_name;
        
        return $url.'?v='.date( "YmdHis", filemtime( $path ));    
    }
    else{
        return esc_url( get_template_directory_uri().'/assets/img' );    
    }
}

こんな感じにget_template_directory_uriを改造してみました。
関数の名前はimgurっぽい感じで、’image directory’を略してみました。

slug

function slug(){
    global $post;
    return $post->post_name;
}

imdirの中にでてくるslugも一応自作関数です。
現在のページのスラッグを返します。

こういう感じで使うときもあります。

<article class="<?php echo slug(); ?>">
    <section>
        ~
    </section>
</article>

使用用途・動機


僕はWordPressやるときにテーマのディレクトリ構造をこんな風にしています。

page-hoge.phpで使う画像は/assets/img/hoge以下に置くようにしています。

なので、画像を挿入するときは自ずとこのようにコーディングすることになります。

<img src="<?php echo get_template_directory_uri(); ?>/assets/img/hoge/fuga.jpg">

そこで、いちいち毎回打つのがめんどうになってきてimdirという闇の関数をつくることにしました。

Usage

引数なしの場合

php

<img src="<?php echo imdir(); ?>/hoge/fuga.jpg">

html 出力結果

<img src="https://example.jp/wp-content/themes/theme_name/assets/img/hoge/fuga.jpg">

引数ありの場合(page-hoge.phpで使用を想定)

php

<img src="<?php echo imdir('fuga.jpg'); ?>">

html 出力結果

<img src="https://example.jp/wp-content/themes/theme_name/assets/img/hoge/fuga.jpg?v=202004141530">

引数には、画像の名前を入れることをルールとしています。

page-hoge.phpimdir('fuga.jpg')とやると、
/assets/img/hoge/fuga.jpgを返すようにしているからです。

これはディレクトリ構造を先程の画像で示したようにしていると有効です。

また、キャッシュバスティングにも一応対応させておきました。

まとめ

get_template_directory_uriっぽくて、キャッシュ対策もできますが
こういった闇実装はひとりのときに限ってやってくださいね