第25回WordBench大阪勉強会に参加して(1/18)


今回はWordPressのCSS基礎編ということで、どういう書き方がいいのかってのをセミナー形式だけでなく手も動かそうということ。手を動かすのは、、、プログラマー系の私には、出来るのか?むぅ..という感じだけれど、たまには外注ばっかりでノータッチなデザイン・レイアウト系を実践するってのも現状を知る上では大事かなと思って参加。

プログラム

WordPressでのCSS使用法・使用例(深沢幸治郎氏 – @witch_doktor )

やや中級者向けかなって思いましたが、body_classとか後の実践にとても役立ちました!!
しかしclassって大量に使われてるんだなぁと思いました…

WordPress独自のclassは、CodeXからコピーしてアレンジを!

editor-style.cssのススメ

エディタで作成しても実際のサイトがずれてしまう事がある
ウェブサイトとエディタの見た目を一緒にしませんか?という考え

functions.phpに add_editor_style();を入れ
style.cssをコピーして、本文に関係するところだけ残す。
editor-style.cssにリネームしてアップロード

body_class()

bodyタグにテンプレート属性に応じたclassをつけてくれる

singleページで、属するカスタム分類(ターム)を判断するclassを吐き出さない

post_class()

任意のHTMLタグにテンプレート属性に応じたclassをつけてくれる

Twenty Fourteenは、post_class, body_classは入っている

body_class→header.phpのbodyタグ
post_class→content.php…

例(フリーペーパーのアーカイブサイト)

雑誌のコーナーをカテゴリで分類
雑誌の号数をカスタムで分類
コーナー数も号数も100を超える… if文で分けるのは非現実的(面倒)

属性ごとにサイドバーの色を変えられる

問題点(body_class, post_classに依存したCSS)

数が多くなってしまい、CSSセレクタの汎用性が失われるからほどほどにね

WordPressのメニューCSSってどうなってるの?(額賀順子氏 – @nukaga )

JetPackのCSSスタイルシートエディタ―

カスタムメニューを使うには?

wp nag menuを使うのだ〜
超基本は、メニューをいれたいところに「」を入れる

$argsってなによ!?

引数のこと
つまりここに何かを入れるのだよってこと。
wp_nav_menu(◯◯);
ってことなのだ。

<?php  wp_nav_menu( array('theme_location'=>'front') ); ?>

とか

詳細は、codexを見よ〜

一つのメニューだけ変更したい!

表示オプションの「CSSクラス」をチェック

メニューにcssクラスを追加するところが出てきて、そこに記載した上で
その追加したクラスをstyle.cssに書いてデザインをいじればよい

実践

  1. 固定ページを1ページだけ背景色を変えてみよう
  2. 固定ページのタイトルを1ページだけ文字色を変えてみよう
  3. メニューの一項目だけ文字色を変えてみよう
  4. 時間のある人は.cssアコーディオンメニューを実装してみよう

* 「4」は時間足りず。

まず準備!

  • MAMPにWordPres3.8をインストール(手持ちマシン)
    *MAMPについては、第14回WordBench大阪勉強会のメモを見て下さいな
    この第14回はサイト移転実践をやったのでした。
  • Twenty Fourteen のテーマを使う
  • 固定ページ(サンプル1,サンプル2,サンプル3を作成)
  • メニュー(テスト)を作成し、サンプル1,サンプル2, サンプル3を追加
  • ウィジェットでカスタムメニューを追加し、メニュー(テスト)を選択

これでカスタムメニューが左サイドメニューに出てきます。

1. 固定ページを1ページだけ背景色を変えてみよう(サンプル1)

サンプル1

bodyにはpage-id番号が付いているけれど、サイト移転したときにidかわるので
固定class名が使えるようにしてみようと思った。
結果として、「スラッグ」を入れてみる

※後で、スラッグに日本語がはいる場合、page-URLエンコード文字になり、CSS違反になる
そのためWordPressとしてはそのclassは入らないようになった経緯があるという突っ込みが
入った。なるほど〜。ですのでスラッグ以外、すなわち日本語が入らない要素を考えないとだめですね〜。

「body_class 固定ページ」
で検索した検索結果1位のサイトのコードをfunctions.phpの末尾にコピー
(参照:http://kachibito.net/wp-code/add-postpage-name-to-body-class)

  • 表示オプション スラッグを有効にする
  • スラッグを入れる sample1
  • functions.phpに
function page_name_in_body_class( $classes ){
    if( is_page() )
    {
        global $post;
        array_push( $classes, "page-{$post->post_name}" );
    }
    return $classes;
}
add_filter( 'body_class', 'page_name_in_body_class' );

※post_name がスラッグかどうかについては、get_postで検索した時の上位(今日は1位)に出てくるcodexに書かれている

page-sample1がクラス名に入る

※スラッグには、ページタイトルが最初から入っているようなので注意
(管理画面に表示したときに、スラッグにタイトルが入る)
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_post

style.css 末尾に

.page-sample1 .site {background-color:#00ff00;} 

※bodyにpage-sample1というクラスがあるが、その内側にあるid=”page”なdivに、classs=”site”が入っており
そこに対してbackground-colorがあるため、打ち消されていた。従って上記のように、siteに書かれたbackgroupd-colorを打ち消す必要があった。

Google Chromeなら右クリックして「要素の検証」とか、FirefoxならFirebugプラグインをいれてどのclassが有効になっているか確認しよう。

要素の検証

CSS打ち消し

body
┗ page-sample1 (color指定)
  ┗ site(color指定)

siteの方が優先されるため、.page-sample1でcolor指定しても有効にならないのだ。
だから、.page-sample1 .site のように、page-sample1内のsiteに対してcolor指定することで、既存の指定を打ち消すこととなる。

2. 固定ページのタイトルを1ページだけ文字色を変えてみよう(サンプル2)

サンプル2

  • サンプル2にスラッグを入れる sample2
  • style.css 末尾に
.page-sample1 .entry-title {color:#0000ff;}

こちらもentry-titleクラスでcolor指定がされているので、これを打ち消すように設定

3. メニューの一項目だけ文字色を変えてみよう

サンプル3

サンプル3
カスタムメニュー:テストをWidgetに追加
外観→メニュー
表示オプション・cssクラスを有効にする
クラスを設定する:sample3
style.css 末尾に

.sample3 a {color:#ff0000;} 

2014年1月18日 木谷

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中