[サイト作り] [WordPress head内] ページテンプレートごとにCSSを読み込む

ページでWPウェブを構築する際に便利そうなので備忘録

ページごとにテンプレートを変更して、それぞれに応じたCSSを使用する

例えば、以下の構成で作る場合

「page.php」 デフォルトのページテンプr-ト
「page.css」 page.phpのレイアウト用CSS

「nosidebar.php」 サイドバーを外したテンプr-ト
「nosidebar.css」 nosidebar.phpのレイアウト用CSS

「nopost.php」 アーカイブリストなどを表示するだけの投稿の無いページテンプレ
「nopost.css」 nopost.phpのレイアウト用CSS

「bbs.php」 ゲストブックのテンプレート
「bbs.css」 bbs.phpのレイアウト用CSS

上記のファイルを作成し、それぞれのPHPファイルに

<?php
/*
Template Name: nosidebar
*/
?>

php get_header(); の上に、上のコードを入れページテンプレートに名前を付ける。

ページ作成の際に、使用するページテンウレートを選択して保存

header.phpのスタイルシートの箇所に、次のコードを追加。

<?php
if ( is_page_template('page.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/page.css" />
<?php } ?>

<?php
if ( is_page_template('nosidebar.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/nosidebar.css" />
<?php } ?>

<?php
if ( is_page_template('nopost.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/nopost.css" />
<?php } ?>

<?php
if ( is_page_template('bbs.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/bbs.css" />
<?php } ?>

指定したページにアクセスした時のhead内の表示例

<link rel="stylesheet" type="text/css" href="ドメイン/ディレクトリ/nosidebar.css" />

あとは、それぞれのテンプレートのレイアウトとスタイル付けを行う。

Did you like this? Share it:

PR

『カレー好きのあなたに!送料無料!1000円コミコミお試しセット讃岐カレーうどん4玉セット【smtb...』を見る [楽天] http://a.r10.to/hCYv2Y <

関連してるかも

  • 2009年9月21日 -- [WordPress head内] wp_head();のWordPressバージョンを消す
    meta name="generator" content="WordPress x.x.x" を消すには、head内に直接コードが書かれていればそこを消すだけですが wp_head();から吐き出されるWordPressバージョンを消すには functions.phpに、次のコードを追加する。 ...
  • 2009年9月22日 -- [WordPress] 本文をカラムでレイアウト
    ページで、WPウェブを構築する時に、使いようによっては便利そうなので備忘録。 投稿やページの本文内をカラム付けし、本文をレイアウトできる。 文章を3列にしたり、上段と下段をフルwidthで、間を2列にしたり などなど (divとCSSで出来る事ではあるのですが) single.php, page.phpを開き、エントリー部分に、次のコードを追加する。 その際、本文を表示させる the_...
  • 2009年9月19日 -- [WordPress] テンプレートをカテゴリーごとに変更(単一ページ)
    シングルページのテンプレートを、カテゴリーごとに変更したい時 用例 ・category-Aは、両サイドバーにする ・category-Bは、サイドバーをなくす ・category-Cは、文章だけなのでエントリー幅を見やすく ・逆にcategory-Dは、画像が多いのでエントリー幅を広く などと、色々と遊べそうです。 1、single.phpを開く 2、以下のコードを書き保存 ...
  • 2009年9月18日 -- [WordPress] テンプレートをカテゴリーごとに変更(カテゴリーページ)
    カテゴリーページのテンプレートを、カテゴリーごとに変更したい時 用例 ・category-Aは、両サイドバーにする ・category-Bは、サイドバーをなくす ・category-Cは、記事一覧をタイトルのみにする などと、色々と遊べそうです。 1、category.phpを開く category.phpが無い人は新規に作成 2、以下のコードを書き保存 カテゴリーID5の時は...
  • 2009年9月14日 -- [WordPress] bodyを、ページごとにbody id="xxx"に変更
    トップページや、シングルページごとに"body id"を振り分ける。 WPブログではあまりページごとにスタイル変更する必要もないですが WPウェブを構築する場合は、ページごとにスタイルを変更できるとなにかと便利です? もっと、シンプルに出来るとは思うのですが、phpをよく理解してないのでこれが限界です。 変更箇所 header.phpの<body> 変更後 トップページ body ...
  • 2009年9月12日 -- [wordPress] category_description カテゴリーページにカテゴリ説明表示
    カテゴリー管理で入力した、カテゴリーの説明を、カテゴリーアーカイブページにアクセスしたときに表示させる。 archive.php(category.php)を開き、説明を表示させたいとこにコードを ...
  • 2009年11月1日 -- [WordPress] カテゴリーリストを2列にする。
    幅広なサイドバーやフッターにカテゴリーリストを表示する時に2列にすると見た目的に 参考:英語サイト 10 WordPress Hacks to Make your Life even Easier 「Breaking Categories into Columns」の部分 スタイルシートに .right {float:left; width:140px;} .le...
  • 2009年10月1日 -- [WordPress] トップページの新着記事のタイトルなどを変更
    トップページの記事一覧の新着投稿のポストタイトルのスタイルを変更 ソース: 英語サイトのどこか(忘れました・・・) index.phpを開いて、div class post と div class entry の間に次のコードを入れる。(ポストタイトルの部分) ...
  • 2009年9月29日 -- [WordPress] バナーなどをランダム表示
    ヘッダー画像をランダム表示するハックを応用して、ページのリロード時にバナーなどをランダム表示 参考ハック How to: Display a random header image バナーを表示させたい場所に次のコードを貼る バナー A バナー B バナー C バナー D バナー E バナー F バナー G ran...
  • 2009年9月29日 -- [WordPress] シングルページにパンくずリスト
    このブログはパンくずを置くたけの広さがないので今後のための備忘録 サブカテゴリーを設置してないなら次のコードで十分です。 single.phpのリストを表示させたい場所に ...