Embed Size (px)
Citation preview
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: ... ; }
