各ページCSS振り分けコードの記述

SaCSS V12で予定していたネタです。といっても、以前ブログで書こうと考えていた内容を整理しただけだったりします。 Wordpress2.8になってbodyタグにCSSが表示されるようになりましたが、 <body class=“page-id-3 parent-page-id-0 page-template-default”> とか付けられても見た目が悪く、カスタマイズ上あつかいにも困ったので、bodyにIDを振るコードを設置しようと考えてみました。 使用目的から各ページでのCSS振り分けだけできれば良いと思いましたので、下記条件を設定しています。
  • トップページと記事、ページにより振り分け
  • カテゴリーと親ページについては1階層のみさかのぼって表示
  • トップページはhomeに固定
  • カテゴリーはカテゴリースラッグを取得
  • ページはページスラッグを取得
  • ※そのために、スラッグには半角英数を記述すること
header.phpに書かれているコードを下記コードと差し替える
  1. <body  <?php body_class(); ?>>
  1. <?php if ( is_home() ): ?>
  2.     <body id="home">
  3. <?php elseif( is_page() ): ?>
  4.     <?php $parent_slug = get_page_uri($post->post_parent); ?>
  5.     <body id="<?php echo $parent_slug ;?>">
  6. <?php else: ?>
  7.     <?php
  8.        $cat = get_the_category();
  9.        $catslug2 = $cat&#91;0]->category_nicename;
  10.     ?>
  11.     <body id="<?php echo $catslug2; ?>">
  12. <?php endif; ?>
ただしこのソースコードは簡易的なもので、コンテンツの構成によっては下記のような改良する必要があります。
  • 階層が深いサイトには階層をさかのぼるようコードを追加する
  • カテゴリーを複数選択しないようにする
  • アーカイブなど別途選択するページは振り分け用コードを追加する
  • バージョンにより動かない可能性がある
このコードを応用すると、各ページに画像を振り分けて表示させることも可能です。以上を踏まえて興味ある方は使ってみてください。

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


*