Giraffyで作成したオリジナルテーマでは、全ページ共通して読み込んでいるのは、style.css ですが、他にも各ページ毎に違うcssファイルを読み込ませています。
ページ毎のcssファイルは、テーマフォルダにcssフォルダを作成して準備しました。
- home.css
- blog.css
- page.css
それぞれ、名前のとおりhome用、Blog用、その他ページ用として作成されています。
これを、条件分岐タグを使用して header.php で使用するcssファイルを切り替える…という技(？)のメモです。
どのページにcssを読み込ませるかを整理&下準備
今回用意したのは3種類。
- TOPページ用にhome.css
- Blogページ用にblog.css と page.css
- 上記以外のページにpage.css
こんな風に読み込ませたいと思います。
まずは、条件分岐を使う前に、blog.css を読み込むときに page.css をインポートするように設定しておきます。
blog.cssの先頭行に以下を追加します。
1 2 | /* page.css をインポートします */ @import url("page.css"); |
これで、下準備はOK。
blog.css に page.css をインポートしたことで、cssファイルを読み込ませる条件は以下のようになりました。
- TOPページ用にhome.css
- Blogページ用にblog.css
- 上記以外のページにpage.css
header.php に cssファイルをリンクする
WordPressでは、cssファイルはデフォルトではテーマフォルダの直下にある style.css ということになっているので、共通するスタイルを style.css というファイル名で作成して、テーマフォルダの直下 ( themes/giraffy/style.css ) に配置しました。
style.css を header.php に読み込ませる:
1 | <link href="<?php bloginfo(‘stylesheet_url’); ?>" rel="stylesheet" type="text/css" /> |
これで、共通用のcssファイルの読み込みは完了です。
次に、3種類のcssファイルを読み込ませます。
3種類の cssファイルを header.php に読み込ませる:
1 2 3 | <link href="<?php bloginfo(‘template_directory’); ?>/css/home.css" rel="stylesheet" type="text/css" /> <link href="<?php bloginfo(‘template_directory’); ?>/css/blog.css" rel="stylesheet" type="text/css" /> <link href="<?php bloginfo(‘template_directory’); ?>/css/page.css" rel="stylesheet" type="text/css" /> |
1 | <?php bloginfo('template_directory'); ?> |
は、使用中テーマファイルディレクトリのURLを出力するためのテンプレートタグです。
これでOKではありません。
このままだと、全ページに3つのcssが読み込まれてしまうので、この3つを条件タグを使用して分岐させます。
条件タグは以下のように準備されています。
(WordPress Codex 日本語版 から一部抜粋)
- is_home()
- メインページ(ブログのホームページ)が表示されている場合。
※管理画面の「表示設定」で固定ページをフロントページに設定した場合、このタグは投稿ページのトップページに適用されます - is_front_page()
- サイトのフロントページが表示されている場合。これは、投稿の場合とページの場合があります。管理画面の「設定 > 表示設定 -> トップページの表示」で、「最新の投稿」が選択されているか、「固定ページ (以下を選択)」で現在のページが表示されている場合。
- is_page()
- ページ(投稿ではない)が表示されている場合。
今回はこの3つの条件タグを使用します。
条件タグを使って、読み込ませるcssファイルを変更する
いよいよ、cssファイルを各ページ毎に分岐させます。
その前に、いまのページ構成をしっかり整理します。
Giraffyでは、TOPページをフロントページに固定して、投稿ページをBlog(ページテーマ)に固定しています。
この時点で、WordPress側では以下のような解釈をすると思われます。
- TOPページ —> is_front_page()
- Blogページ —> is_home() と is_page()ではない(投稿ページ)
- その他ページ(固定) —> is_page()
Blogページが少々厄介なのですが、BlogとしてのTOPページは is_home() ですが、単一記事のページやカテゴリーページは is_home() にはなりません。
そのため、Blogページは is_home() であり、かつ、is_page() ではないという条件になります。
※『◎◎ではない』ということを表現するには、先頭に”!”を入れる必要があります。(例) !is_page()
それらをふまえて、3つのcssファイルの読み込み部分をこのように記述しました。
3種類の cssファイルを条件分岐する:
1 2 3 4 5 6 7 8 9 10 11 12 | <link href="<?php bloginfo(‘template_directory’); ?>/css/<?php if (is_front_page()) { // フロントページだった場合 echo ‘home’; } elseif (is_home() || !is_page()) { // 投稿ページのトップページ、かつ固定ページ以外のページだった場合 echo ‘blog’; } else { // 上記以外の場合 echo ‘page’; } ?>.css" rel="stylesheet" type="text/css" /> |
条件タグで分岐させて、条件に合致した場合、該当する cssファイルの名前の部分を echo しています。
今回は作ったテーマも簡単で、表示パターンが3種類しかなかったのでこのように比較的単純な分岐になりました。
このように、分岐タグは「ここだけこうしたい！」といった要望に応えてくれます。
一度使ってコツを覚えると、いろんなところに応用できます。
[...] http://giraffy.jp/blog/2009/10/19/wordpress/344/ [...]