Downloaded 12 times
WordPressのCSSを 理解しよう！
- 1. WordPress の CSS を 理解しよう！ 第20 回・ WordBench 神戸 @bren_boss 作成
- 2. テーマから出力され る class 名について 参考：TwentyTwelve 、 bren テーマ
- 3. body クラス header.php にある <body<?php body_class(); ?>> で、状況に応じてクラス名が追加されます。
- 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 ...">
- 6. post クラス content.php にある <articleid="post-<?php the_ID(); ?>" <?php post_class(); ?>> で、状況に応じてクラス名が追加されます。
- 7. post クラスの出力例 • 共通 <articleclass="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; }
- 9.
- 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 に書くことで、編集と 表示の見た目を合わせる目的。 • 見た目を合わせると表示イメージを掴みや すいので、お客さんの苦手意識を下げられ る。
- 13.
- 14. ダッシュボードでクラス名を追加 する • 操作手順 ダッシュボード→外観→メニュー→表示オプ ション→ CSS クラス→クラス名を付ける （ sample ） • 付けたクラス名で CSS を書く .nav-menu li.sample a { background-image: ... ; } .nav-menu li.sample a:hover { background- image: ... ; }