【WordPress】CSS・JavaScript・画像にパスを通す方法

前回の記事ではテーマの有効化をし、ページの確認をするところまで終えました。

cssやjavascript、画像の読み込みができていない状態でしたね？

この記事ではパスの通しかたとテンプレートタグについて解説していきます。

テンプレートタグとは

ここからはテンプレートタグというものを使っていきます。

テンプレートタグというのはWordPress専用のPHP関数です。

WordPress のファイルには、便利な PHP 関数がたくさん定義されています。テンプレートタグとして知られる一部の関数は、特に WordPress テーマ用に定義されているものです。

関数リファレンス – WordPress Codex 日本語版

このテンプレートタグを使用することで、動的に値を取得したり出力することができます。

本記事ではCSSのファイルパス、Javascriptのファイルパス、画像のファイルパスを通すことが目標なので、ファイルパスを通すテンプレートタグを使用します。

get_template_directory_uri()関数を使用します。

get_template_directory_uri()は何を出力するのか？？

現状のコードが以下の通りです。

header.php

css

<link rel="stylesheet" href="css/style.css">

画像(複数枚)

<img src="img/dammy.png" alt="">

footer.php

JavaScript

<script src="js/script.js"></script>

これらのコードに正しくパスを通す必要があるので、get_template_directory_uri()を使っていきます。

get_template_directory_uri()の使い方

get_template_directory_uri()を入れる場所

<link rel="stylesheet" href="[ここにテンプレートタグ(get_template_directory_uri()) + /(スラッシュ)を入れる]css/style.css">

get_template_directory_uri()の後に/(スラッシュ)を入れましょう。

パスを通す実例

header.php

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

うまくcssが反映されない人もいると思うので以下にポイントをまとめました。うまくいかない時は確認してみましょう。

ページの確認

さらに、画像とjavascriptにもパスを通しましょう。

header.php

画像

<img src="<?php echo get_template_directory_uri(); ?>/img/dammy.png" alt="">

footer.php

javascript

<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

エディタの検索・置換機能で効率的にパスを通そう

今回のテーマではそんなにたくさんパスを通すこともなかったのですが、例えば画像が500枚あったらどうしますか？？

全ての画像に1つ1つget_template_directory_uri()/を加えていくのはかなり大変そうですね。

それに500枚もあれば何枚かは見落としてしまうかもしれません。

そんな時はエディタの検索機能・置換機能を使います（どのエディタでも使えるはず）。

解説のためvscodeを使用します。

vscode

検索・置換機能の使い方

シートカットキー

⌘ + ⌥ + F

ショートカットキーを使うと一瞬で検索・置換窓が出てきます。

上のボックスが検索窓、下のボックスが置換窓ですね。

置換したい箇所を検索にかける

検索窓にsrc="imgと入力します。

何件検索に引っかかったかが表示されます。今回は全6件検索に該当したようです。

次に置換窓にsrc="<?php echo get_template_directory_uri(); ?>/imgと入力し、以下画像赤枠内のアイコンを選択すると一括で置換されます。