iscle [イズクル] - あなたの生活に役立つネタを!

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

竹中文人
執筆者:
[最終更新日]2014/06/19
[カテゴリ]Wordpress

特定ページのヘッダー にだけコードを追加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; ?>

コードの入力方法

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

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