More Related Content
Similar to WordPressのCSSを 理解しよう！
Similar to WordPressのCSSを 理解しよう！ (20)
WordPressのCSSを 理解しよう！
- 4. 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 ...">
- 5. 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 ...">
- 7. 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) ...">
- 8. クラス名の活用例
• 指定カテゴリーの背景を変えたい
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; }
- 10. 必須 CSS
• 投稿データを表示するために必須の CSS に
ついて、 CodeX に書かれています
http://wpdocs.sourceforge.jp/CSS
• 上記内容を守らないと、編集時に指定した
内容が反映されない
- 11. 編集はビジュアルエディターだけ
で
• 可能な限りビジュアルエディターだけで編
集し、 HTML を直接触らない。
• そのほうが、自分がラク→お客さんもラク
。
• デザインが文字を制限すべきではないので
、背景画像を指定する場合はリピート画像
を使う。
• よく使う特殊な見せ方は、 TinyMCE
Template プラグインを使ってテンプレート
から貼り付ける。
- 12. editor-style.css を追加しよう
• editor-style.css は、記事編集時の表示を変
更するための CSS ファイル。
• style.css に書いた記事表示用 CSS と同じ内
容を editor-style.css に書くことで、編集と
表示の見た目を合わせる目的。
• 見た目を合わせると表示イメージを掴みや
すいので、お客さんの苦手意識を下げられ
る。
