WordPressのCSSを理解しよう！

WordPress の CSS
を
理解しよう！

第 20 回・ WordBench 神戸
@bren_boss 作成

テーマから出力され
る class 名について

参考： TwentyTwelve 、 bren テーマ

body クラス
header.php にある

<body <?php body_class(); ?>>

で、状況に応じてクラス名が追加されます。

body クラスの出力例（一般）
• 固定ページ（ page.php ）を表示する場合
<body class="page page-id-(id) ...">
• 投稿一覧（ category.php ）を表示する場合
<body class="archive category category-(slug)
category-(id) ...">
• 投稿（ single.php ）を表示する場合
<body class="single single-post ...">
• ホームページ（ home.php ）を表示する場
合
<body class="home ...">

body クラスの出力例（その他）
• カスタムポスト一覧（ archive-(post-
type).php ）を表示する場合
<body class="archive post-type-archive post-
type-archive-(post-type) ...">
• カスタムポストページ（ single-(post-
type).php ）を表示する場合
<body class="single single-(post-type) ...">
• ログイン後の場合
<body class="logged-in ...">

post クラス
content.php にある

<article id="post-<?php the_ID(); ?>" <?php
post_class(); ?>>

で、状況に応じてクラス名が追加されます。

post クラスの出力例
• 共通
<article class="post-(id) hentry ...">
• 固定ページを表示する場合
<article class="page type-page ...">
• 投稿を表示する場合
<article class="post type-post category-(slug)
tag-(slug) ...">
• カスタム投稿を表示する場合
<article class="post (slug) type-(slug) ...">

クラス名の活用例
• 指定カテゴリーの背景を変えたい
body.category-(slug) { background: #F00 ; }
• ホームのみサイドバーを隠したい
body.home .sidebar-1 { display: none ; }
• カテゴリーごとにタイトルの色を変えたい
article.category-aaa h1.title { color: #F00; }
article.category-bbb h1.title { color: #00F; }

投稿データ用 CSS
という考え方

必須 CSS
• 投稿データを表示するために必須の CSS に
ついて、 CodeX に書かれています
http://wpdocs.sourceforge.jp/CSS
• 上記内容を守らないと、編集時に指定した
内容が反映されない

編集はビジュアルエディターだけ
で
• 可能な限りビジュアルエディターだけで編
集し、 HTML を直接触らない。
• そのほうが、自分がラク→お客さんもラク
。
• デザインが文字を制限すべきではないので
、背景画像を指定する場合はリピート画像
を使う。
• よく使う特殊な見せ方は、 TinyMCE
Template プラグインを使ってテンプレート
から貼り付ける。

editor-style.css を追加しよう
• editor-style.css は、記事編集時の表示を変
更するための CSS ファイル。
• style.css に書いた記事表示用 CSS と同じ内
容を editor-style.css に書くことで、編集と
表示の見た目を合わせる目的。
• 見た目を合わせると表示イメージを掴みや
すいので、お客さんの苦手意識を下げられ
る。

ナビゲーションで画
像を使う時に
クラス名で困ってい
ませんか？
wp_nav_menu 関数が出力
するクラス名

ダッシュボードでクラス名を追加
する
• 操作手順
ダッシュボード→外観→メニュー→表示オプ
ション→ CSS クラス→クラス名を付ける
（ sample ）
• 付けたクラス名で CSS を書く
.nav-menu li.sample a { background-image: ... ;
}
.nav-menu li.sample a:hover { background-
image: ... ; }

WordPressのCSSを理解しよう！

More Related Content

What's hot (20)

Similar to WordPressのCSSを理解しよう！ (20)

More from BREN (10)