MENU

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

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

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

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

目次

テンプレートタグとは

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

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

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

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

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

例)

サイトのタイトルを出力

記事のタイトルや本文を記事ごとに出力

ファイルパスの取得

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

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

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

確かめてみます。

<?php echo 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が反映されない人もいると思うので以下にポイントをまとめました。うまくいかない時は確認してみましょう。

ポイント
  • エディタのオートコンプリート機能を使って打ち間違えないようにする
  • echoを忘れずにつける
  • phpタグの閉じタグの直後に/(スラッシュ)を忘れずにつける

ページの確認

cssが正しく適用されているかページを確認します。

get_template_directory_uri()を追加したのに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と入力し、以下画像赤枠内のアイコンを選択すると一括で置換されます。

これですべての画像パスが正しく設定されました。

画像だけではなく、cssやjavascriptも複数の読み込みが必要な場合もあるので積極的に検索・置換の機能を使っていくといいと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

スーパーうさぎアルバイター。
コーディングのお勉強してます。

コメント

コメントする

目次