特定ページのヘッダーにだけコードを追加する方法(WordPress)

特定ページのヘッダーにだけコードを追加する方法(WordPress)
(YouTube, AdSense, Play 公認エキスパート)
2021年01月22日 in Wordpress
記事内にPR・広告が含まれる場合があります

WordPressを利用していて、特定のページにだけ任意のJavaScriptやCSSのコードを追加したい時ってありませんか?例えばお問い合わせフォームを利用するためのコードや、写真のスライドを行うJQueryのコードなどです。

WordPressの場合、「header.php」に追加すると全てのページのヘッダーに表示されてしまいます。特定のページにだけ使用するコードが、必要のないページのヘッダーにまで表示されるのは、サイト表示スピードなどの観点からも好ましくありません。今回は、特定ページのヘッダーにだけ任意のコードを追加する方法をご紹介致します。

カスタムフィールドを利用する

『CSS & JavaScript Toolbox』というJavaScriptやCSSを埋め込むことができるプラグインは存在するのですが、個人的に使い勝手が悪く(使用方法がよく分からず)カスタムフィールドを利用して実現することにしました。

簡単にカスタムフィールドが管理できるように、今回は『Custom Field Template(カスタムフィールドテンプレート)』というメジャーなプラグインを利用します。もし利用していない方は、プラグインの新規追加から『Custom Field Template』を検索してインストールしましょう!
新規インストール

広 告

プラグインの設定

管理画面での設定は超簡単です!下記のコードを[設定]>[カスタムフィールドテンプレート]の[カスタムフィールドテンプレートオプション]の[テンプレートコンテンツ:]に追加してください。

[script1]
type = textarea
rows = 8
cols = 50

cft2
※タイトルはお好きなテキストでOK!

「header.php」の設定

「header.php」の「headタグ」内に下記のコードを追加してください。任意のコードが入力された場合のみ、ヘッダーにコードを表示させます。

<?php if(post_custom('script1')): ?>
	<?php echo post_custom('script1'); ?>
<?php endif; ?>

コードの入力方法

特定のページに任意のコードを表示させたい場合は、投稿ページにあるカスタムフィールドテンプレートに入力します。
コードの入力方法

入力した時のみヘッダーにコードが表示されます。複数行のコードでも問題なく表示されるので、このカスタムフィールドのみで対応可能です!一度設定するだけなので是非お試しください。

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。