必要ページにだけヘッダー情報をロードする

ヘッダ画像

CGIなどで追加するヘッダー情報を指定ページのみに出力

以前にメールフォームプロCGIのWordPressでの設置方法を書きました。
前回までの内容ではCGIでプログラムに必要なスクリプトの読み込みをヘッダテンプレート内に記述するため、例えばフォームが必要なのはお問い合わせのページだけだったとしても、トップページその他不必要なページにまで書き出してしまいます。

表示速度やクローラビリティを考えるとヘッダ内はシンプルにしたいものです。

プログラムに必要な記述を整理する

メールフォームプロCGIには以下のCSSとjsが必要です。

<link rel="stylesheet" href="http://example.com/cgi/mailformpro/commons/mailform.css" type="text/css" />
<script type="text/javascript" src="http://example.com/cgi/mailformpro/commons/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mfp.lang.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mfp.extensions.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mailform.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://example.com/cgi/mailformpro/postcodes/get.cgi" id="mfp2zip" charset="UTF-8"></script>

これをheader.phpに書き加えると、当然すべてのページに出力されてしまいます。

必要なページのみにロードする

これにはいろんな方法があるのですが、今回は直感的に分かりやすくheader.phpに記述はしますが、これをif文を使って指定ページにのみ出力してしたいと思います。

<?php if(is_page(array('form','392'))): ?>
<link rel="stylesheet" href="http://example.com/cgi/mailformpro/commons/mailform.css" type="text/css" />
<script type="text/javascript" src="http://example.com/cgi/mailformpro/commons/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mfp.lang.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mfp.extensions.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mailform.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://example.com/cgi/mailformpro/postcodes/get.cgi" id="mfp2zip" charset="UTF-8"></script>
<?php endif; ?>

一番最初の(‘form’,’392′)はページスラッグformとページID=392のときに以下を読み込むという指示になります。スラッグとIDどちらでも指定できます。

ちなみにWordPressではjquery.jsは大抵読み込んでいると思われますので、その場合は不要です。ただ、このメールフォームプロはjsの読み込む順番が異なるとうまく動作しない場合おあるようなので、その際はとりあえずjquery先に読み込むようにしてみてください。

プラグインの場合は自身でスクリプトをロードするのでこの方法ではダメですが、自分でhead内に記述するものやCGIをで使う場合はこの方法でOKだと思います。

これでhead内が随分スッキリしました。

このif文によるヘッダの制御はいろんな場面で使えますので、機会があればまた具体例を紹介したいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です



関連記事

WordPressのログインユーザー名は丸見え!? 知っていますか?WordPressのログインユーザー名はだだ漏れだという事実を...ダッシュボード乗っ取り防止のためのセ...

絶対に分かる!WordPressの子テーマ作成 WordPressでは子テーマという機能があります。既存のテーマを作成すれば、カスタマイズする際に変更したい部分だけを子...

WordPressのRSSフィード WordPressではコンテンツの更新情報を知らせるために標準でRSSを出力します。その出力方法は...http://e...

「トップに戻る」ボタンでスマホでのユーザビリティアップ! ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビューンとページの初め...