WordPress

WordPressで画像のパス(参照先URL)をキャッシュ対策付きで書く

自分のコピペ用で残しますが、もしこの記事にたどり着いて参考になった方は活用ください。

コード

<img src="<?php echo get_template_directory_uri(); ?>/images/ファイル名.jpg?<?php echo date("YmdHis");?>" alt="" />

説明

  • get_template_directory_uri();はテーマ直下の階層までのディレクトリを出力するWordPressの関数です。
  • /images/のところは画像を格納しているディレクトリに書き換えてください。
  • ?<?php echo date("YmdHis");の先頭の「?」は、キャッシュ対策のため、URLのパラメーターをつける意味です。画像を変更しても、ブラウザのキャッシュの機能で画像が記録されていて、画像が変わったようにサイト閲覧者に見えないということが起こり得るので、それを避けるため、毎回ファイル名が変わるようにブラウザに見せるということをしています。もちろん、これをすることで画像読み込み時間は毎回かかることになるので、不要ならここの部分は消してください。
  • <?php echo date("YmdHis")?>はPHPにより、そのときの日付が出力されます。
  • alt=""は、画像自体で説明している内容があれば、""の中にその言葉を書きます。とくに説明するものがなく、装飾である場合は空のままにします。alt属性は必須なので、削除してはいけません。

alt属性に関する詳しい説明はこちらのページを参照ください。

まとめ

img要素に参照先URLを記述する際のコピペ用でした。

著者のイメージ画像

株式会社BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月に独立後、2024年4月に株式会社BringFlowerを設立。SEOコンサルを活動の軸に据えつつ、AIライティングツールの開発と運営を自ら行う。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。