この記事にはプロモーションが含まれています。

【WordPress】headタグ内にソースコードを簡単に追加する方法

2024-05-21

WordPressを利用しているとheadタグにソースコードを追加する必要が出てくることがあります。

例えば、JavaScriptライブラリを新たに導入したいときなどです。

ケケンタ

「headタグにソースコードを追加する方法」はいくつかありますが、今回はその中でも最も確実で安全な方法であるfunctions.phpを使用する方法をご紹介します。

この記事で分かること

WordPressでfunctions.phpを使用してheadタグに任意のソースコードを追加する方法

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

WordPressでheadタグにソースコードを追加する主な方法

まず、WordPressでheadタグにソースコードを追加する主な方法は大きく分けて次の３つです。

WordPressでheadタグにソースコードを追加する方法【３つ】

header.php内に直接ソースコードを追加する
テーマの機能を使用する
functions.phpを使用する

今回ご紹介するのは、③のfunctions.phpを使用する方法です。

①と②を採用しない理由

①header.php内に直接ソースコードを追加する

テーマの更新によってカスタマイズ内容が消えてしまうため
子テーマのheader.phpを使用してテーマ更新による上書きを防止したとしても、今度はテーマの更新内容がサイトに反映されなくなってしまうため（子テーマの内容が優先されてしまうため）＝セキュリティリスクが高まる

②テーマの機能を使用する

テーマごとに機能の有無が異なり、汎用性が低いため

【解説】functions.phpを使用してheadタグへソースコードを追加する

functions.phpは親テーマと子テーマそれぞれに存在します。
今回ご紹介する方法では、子テーマのfunctions.phpを使用するようにしましょう。

子テーマのfunctions.phpに記述する処理

// head内にカスタム用のコードを追加する
function my_headinputtags() {
$headinputtag = <<<EOM

<!-- 「EOM」で挟まれている行内にheadに表示させたいソースコードを記述する -->

EOM;
echo $headinputtag;
}
add_action( 'wp_head', 'my_headinputtags', 99);

具体例

// head内にカスタム用のコードを追加する
function my_headinputtags() {
$headinputtag = <<<EOM

  <script src="https://kekenta-it-blog.com/wp-content/themes/sampleTheme/js/sample.js"></script>

EOM;
echo $headinputtag;
}
add_action( 'wp_head', 'my_headinputtags', 99);

ケケンタ

functions.phpに上記のようにコードを追加するだけで、「EOM」に挟まれた行のソースコードがheadタグ内に挿入されます。