photo by ecstaticist
作   人
作 時
気
iPhone&Android
                      制作 仕事術
                           発売日:2012.9.26
                                       刊

  Mighty
  Works
   監修


Amazon: http://www.amazon.co.jp/dp/4839940029/
Agenda


         入力
CSS


   body        id class 設定
 CSS                   変   手法
      ※   (signature) 署名、   意味
CSS
body_class (twentyeleven > header.php: line70)




                              Codex: http://codex.wordpress.org/Template_Tags/body_class
CSS
post_class (twentyeleven > content.php: line11)




                              Codex: http://codex.wordpress.org/Template_Tags/post_class
div .menu-{ menu name }-container

 ul #menu-{ menu name } .menu

    li.menu-item .current-menu-item

    li.menu-item

    li.menu-item




※Twenty Elevenの場合
wp_nav_menu (twentyeleven > header.php: line134)




                         Codex: http://codex.wordpress.org/Function_Reference/wp_nav_menu
container         ul をラップするHTMLタグ

container_class   コンテナに適用されるClass

container_id      コンテナに適用されるID




menu_class        メニューを構成する ul に適用するClass

menu_id           メニューを構成する ul に適用するID
aside .widget .{ widget name }


  h3 .widget-title


   ul

    li

    li



※Twenty Elevenの場合
※例外もある
register_sidebar (twentyeleven > function.php: line390)




                         Codex: http://codex.wordpress.org/Function_Reference/register_sidebar
before_widget   ウィジェットの前のテキスト

after_widget    ウィジェットの後のテキスト

before_title    タイトルの前のテキスト

after_title     タイトルの後のテキスト
入力
入力


画像 配置

画像

        適用
strong, em, del, ul, ol, li, address, pre,
h1, h2, h3, h4, h5, h6, p
table, thead, tbody, tfoot, tr, th, td
dl, dt, dd
画像
画像 配置
 配置:左




   img .alignleft   float: left
画像 配置
 配置:右



   float: right   img .alignright
画像 配置
 配置:中央




         img .aligncenter
画像
画像
     div .wp-caption .align{alignment}




                     img




              p .wp-caption-text
ビジュアルエディターには下記のclassが付加される。

.mceContentBody
.content
.post-type-post
.wp-editor

このうち「post-type-{xxx}」には
投稿タイプ名が適用される
add_editor_style (twentyeleven > function.php: line83)


                add_editor_style( 'editor-style.css' );




                                 Codex: http://codex.wordpress.org/Function_Reference/add_editor_style
         codex: http://codex.wordpress.org/Function_Reference/add_editor_style
Bad themes
Good themes
Good themes
少   工夫 、管理   。
少   工夫 、使   。
管理   、使
WordPressのテーマ編集時に覚えておきたいID名やClass名

WordPressのテーマ編集時に覚えておきたいID名やClass名