WordPressでJSとCSSを特定のページだけに読みこませる方法

wordpressのスピードをあげることが目的

ひとつの記事に対して、jsを利用したい場合、
wordpressの共通header.phpを利用して、jsを読みこませると、必要のないページでも、jsを読み込むことになります。
これは、関係のないページの表示スピードを下げる原因になりますので、避けたいところです。

そこで、個別のページだけに、jsとCSSを読みこませる方法をご紹介します。

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

個別のページに独自の読み込みを行う場合は、カスタムフィールドを利用すると便利です。
そのカスタムフィールドを便利に利用する為のプラグインを利用します。

Custom Field Template（カスタムフィールドテンプレート）

実際の利用方法

管理画面のサイドメニュー [設定] > [カスタムフィールドテンプレート]を開きます。

管理画面の設定

テンプレートタイトル:

custumTag

custumTag

テンプレートコンテンツ:

[custumTag]
type = textarea
rows = 30
cols = 100

[custumTag]

type = textarea

rows = 30

cols = 100

と入れます。
数字は、表示したい横幅と高さに合わせて、適宜変更してください。

↓こんな感じです

テンプレートへの記述追加

header.phpなどのテンプレートに


<!-- 記事にjs追加 -->
<?php if(get_post_meta($post->ID,'custumTag',true)): ?>
<?php echo post_custom( 'custumTag' ); ?>
<?php endif; ?>

<?php if(get_post_meta($post->ID,'custumTag',true)): ?>

<?php echo post_custom( 'custumTag' ); ?>

<?php endif; ?>

を追加します。
custumTagがある場合は、custumTagを表示してください。という指示です。

記事を書く

記事の投稿の時に、カスタムテンプレート部分から、custumTagを読み込みます。

custumTagの中に、必要なjsやcssを書き込めばOKです。

例えば、


<script type="text/javascript">
ここにjsを。
</script>
<style>
ここにcssを。
</style>

ここにjsを。

</script>

<style>

ここにcssを。

</style>

↓こんな感じに入力していきます
これで、wordpressのブログ記事、一つ一つにJSとcssを入れることができます。
カスタムフィールドを利用すると、記事のカスタマイズの自由度があがりますので、是非利用してみてください。