【解決】WordPressカスタマイズで「」が見つからない時の探し方

ユーザー

WordPressのカスタマイズで「``タグの手前にコードを貼り付けてください」って書いてあるのに、header.phpの中をいくら探しても見つからない...。どこに書けばいいの？

このような疑問や悩みを解決します。

こんにちは、セイタです。

ブログの表示速度を高速化したり、アナリティクスなどの解析タグを導入しようとした際、「`` の直前にコードを挿入してください」という解説記事によく出会います。

しかし、いざWordPressのテーマエディターで `header.php` を開いてみても、お目当ての `` が見当たらず、手が止まってしまった経験はありませんか？

結論から言うと、そんな時は `header.php` ではなく『footer.php』を確認してみてください。

システムエンジニアとして数々のコードを触ってきた経験からも、WordPressのテーマ構造によっては `` がフッター側に配置されているケースが多々あります。

本記事では、カスタマイズ時に `` が見つからない場合の具体的な探し方と、ページの読み込みを最適化するテクニックを解説します。

\ 当サイトも使ってるWPテーマ『AFFINGER7』/

当サイト限定特典付き

WordPressのカスタマイズで `` が見つからない時の対処法

利用している有料テーマによって多少ファイル構成は異なりますが、今回は当ブログでも愛用している「AFFINGER」シリーズを例に解説します。

どのWordPressテーマであっても、基本的にはこれから紹介する手順で簡単に見つけることができます。

手順①：外観の「テーマエディター」から `footer.php` を開く

WordPress管理画面の「外観」＞「テーマエディター（※環境によってはテーマファイルエディター）」を開きます。

画面右側にPHPファイルの一覧（テーマファイル）がずらりと並ぶので、その中から**『footer.php（フッター）』**をクリックして選択します。

手順②：`footer.php` の最下部で `` を確認する

`footer.php` を開いたら、コードの一番下（文末付近）を確認してみてください。

このように、ファイルの最終行の近くに `` がしっかりと記述されているのが確認できます。

`header.php` の中に見当たらなかった場合は、大体のテーマでこの `footer.php` の文末に配置されていますので、この手順で探してみてください。

なぜテーマによって `` の位置が違うのか？

ネット上の解説記事では「`header.php` の中にある `` の前に書け」と案内されていることが多いため、違う場所にあると混乱してしまいますよね。

これには主に2つの理由（構造の違い）が考えられます。

いずれにせよ、ブラウザが最終的に読み込むHTML構造として、タグが正しく閉じられていれば問題ありません。迷わず `footer.php` 側に記述して大丈夫です。

【実践】`` 手前にコードを挿入してサイトを快適化する例

無事に `` タグを見つけたら、そこに任意のJavaScriptや外部読み込みコードを配置します。

例えば、PageSpeed Insightsの改善案などで「レンダリングを妨げるリソース（Font Awesomeなど）」の読み込み遅延を求められた際、プラグイン（Async JavaScript等）ではうまく非同期化できないケースがあります。

そんな時は、以下のサンプルコードのように `` の直前に記述することで、ページの表示速度（体感速度）を大きく落とさずにアイコンフォント等を読み込ませることが可能です。

<script type="text/javascript">
var mycss=function(){// mycss関数を定義。{}内の処理を実行。
  var l=document.createElement("link");// link要素をlに代入。
  l.rel="stylesheet";// lにrel="stylesheet"属性を付与。
  l.href="

";// lにhref属性を付与。
  var s=document.getElementsByTagName("link")[0];// HTML内の最初のlink要素名をsへ代入
  s.parentNode.insertBefore(l,s);// sの直前にlを出力
};
window.addEventListener("DOMContentLoaded",mycss);// DOMの構築が終わったらmycss関数を実行
</script>

※参考元：HODALOG様のコードを引用させていただいています。

赤字で示したURLの部分には、ご自身が読み込ませたいCDNコード（Font Awesome等のパス）をそれぞれ書き換えて貼り付けてください。

もし「元々どこに書いてあったか分からなくなった」という場合、Font AwesomeのCDNは通常 `header.php` 内の `` の前に記述されていることが多いので、あわせてチェックしてみてください。

まとめ：焦らずファイルを探して、スムーズにカスタマイズを完了させよう

WordPressをカスタマイズしていると、解説記事のとおりにいかなくて焦る場面に何度も遭遇します。

しかし、「`header.php` にない時は `footer.php` の下を探す」という引き出しを一つ持っておくだけで、無駄なタイムロスを防ぐことができます。

当ブログでは、こうしたWordPress運営でつまずきやすい細かいカスタマイズの解決法も随時発信していますので、また困った時はいつでも参考にしてくださいね！