【WordPress】yStandardカスタマイズ、headにコードを挿入する

2020年8月2日

今回は、プラグインを使わずにhtmlのhead内にコードを挿入する、というのを紹介したいと思います。
使用テーマはyStandard v4です。

WordPressでブログやサイトを運営していると、head内に○○のコードを貼るという機会が結構あると思います。Webフォントだったり、アドセンス関係だったり、アナリティクスだったり…でもプラグインは使いたくない。そんなときには以下の方法を試してみてください。

Google Analyticsのコード

Google Analyticsについては、[カスタマイズ]→[SEO]→Google Analyticsで設定します。トラッキングIDをコピーして貼り付けるだけです。

子テーマを使ってheadにコードを挿入する

それでは、Google Analytics以外のコードをheadに挿入する方法を見ていきましょう。

親テーマからheader.phpをコピーして、子テーマとして利用します。

<head>から</head>までがheadの内容です。ここにGoogle FontsなどのWebフォントや、その他head内に貼っていくださいといわれるコードを貼り付けます。

よく言われるのが</head>の直前ですね。ここでは</head>の直前にWebフォントのコードを挿入してみました。<link rel=”stylesheet”~>のコードです。

【WordPress】yStandardカスタマイズ、子テーマの使い方
今回は、WordPressの子テーマを使ったカスタマイズについて紹介したいと思います。使用するテーマはyStandard v4です。 子テーマとは まず最初に、…
seguimiii.com

functions.phpで編集する方法

yStandardのheader.phpを子テーマで使えばいいのでは?と思いつく前に検索をかけて覚えた方法がこちら。functions.phpを編集するやり方です。

メリットとしては、どんなテーマを使っていても共通であるということですかね。

参考ページ
WordPressのヘッダーまたはフッターにコードを追加する方法について


上記画像の記述を子テーマのfunctions.phpに追加します。

青緑色のheadireruyoの2箇所は任意に変更可能。わかりやすいファンクション名にしてください。この2箇所は同じ名前にします。

ピンク色の部分に挿入したいコードを貼り付けます。

コードを追加する場合は、必ず<?phpよりも上に記述してください。

/* ヘッダーにウェブフォントとか追加するためのコード */
add_action('wp_head', 'headireruyo');
function headireruyo(){
?>
/* ここにコードを貼り付け(/**/ごと消してね) */
<?php
};

いかがだったでしょうか。

いずれの方法でも、編集後に実際のページでChromeの検証から</head>までの間に挿入したコードがあるか確認するといいと思います。

たまーに表示させるフォントを変えたくなる時があるんですよね、英数字とか。

yStandard v4でheadにコードを挿入する、参考になれば幸いです。