WordPressでインクルード元のテンプレートから外部CSSやJSを指定する
Posted: 2011.04.20 / Category: WordPress / Tag: テンプレートカスタマイズ
Wordpressでは基本的に共通のheaderファイルを使用するため、ページごとにcssを切り替えたい場合「is_home」や「is_single」などを駆使して条件分岐で外部cssやjsの切り替えを行うと思います。
数個のテンプレートだったらこれだけでも良いのですが、カテゴリーIDごとやページ数ごとにも切り替えたい場合、分岐が多くなりすぎて管理が大変そうです。
そこでインクルードもとのテンプレートで外部cssやjsを指定する方法をご紹介いたします。
Sponsored Link
条件分岐（if文）でCSS&JSを切り替える場合
categoryテンプレートに「category.css」「category.js」を、pageテンプレートに「page.css」「page.js」を読み込む場合、if文での切り替えはこんな感じになると思います。
header.php
<head>
<title>ブログ</title>
<?php if(is_page()): ?>
<link href="<?php bloginfo("template_directory") ?>/css/page.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="<?php bloginfo("template_directory") ?>/js/page.js"></script>
<?php elseif(is_category()): ?>
<link href="<?php bloginfo("template_directory") ?>/css/category.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="<?php bloginfo("template_directory") ?>/js/category.js"></script>
<?php endif; ?>
<?php wp_head(); ?>
</head>
2つくらいだったら全然問題ないですね。
では同じ条件でインクルード元のテンプレートで指定してみます。
インクルード元のテンプレートで指定する場合
「page」「category」テンプレートには「wp_enqueue_style」「wp_enqueue_script」というwpタグを追加します。
これは「wp_head()」の前にする必要があるので「header.php」の前に記述します。
page.php
<?php
wp_enqueue_style("pagecss", get_bloginfo('template_directory').'/css/page.css' );
wp_enqueue_script("pagejs",get_bloginfo("template_directory")."/js/page.js");
?>
<?php get_header(); ?>
<h1>ページ</h1>
<?php get_footer(); ?>
category.php
<?php
wp_enqueue_style("pagecss", get_bloginfo('template_directory').'/css/category.css' );
wp_enqueue_script("pagejs",get_bloginfo("template_directory")."/js/category.js");
?>
<?php get_header(); ?>
<h1>カテゴリー</h1>
<?php get_footer(); ?>
「wp_enqueue_style」「wp_enqueue_script」は第一引数にハンドル名、第二引数にファイルまでのパスを記述します。
同じファイルなら同一のハンドル名にしておくと二重の読み込みを防止することもできます。
header.php
header.phpの条件分岐部分を削除します。
指定したcss&jsは「wp_head()」に入りますので、これは残しておきます。
header.php
<head> <title>ブログ</title> <?php wp_head(); ?> </head>
どうでしょう、ちょっと見やすくなった気がしませんか。
