Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Download as PPTX, PDF58 likes96,160 views
2014年8月 WordBench東京8月勉強会「制作現場を爆速にする妙技をシェアしあおう！！」 「Bootstrap を使って効率よくオリジナルテーマを作る！」というテーマで話しました。 自分でオリジナルテーマを作りたくても、制作に時間がかかりすぎることがあります。 テーマ制作に、Bootstrapを使う理由とオリジナルテーマを作るときのポイントをシェアしようと思います。
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
- 2. 小林由憲（こばやしよしのり） Twitter: @AsbyuKobayashi ブログ: In Advance Only 生まれは 奈良県 です。 2
- 7. HTMLコードをテンプレートタグに置き換える。 <ul class="nav navbar-nav navbar-right"> <li><a href="#">HOME</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">SKILLS</a></li> <li><a href="#">WORK&PLAY</a></li> <li><a href="#">CONTACT</a></li> </ul> <?php wp_nav_menu($menu_prm); ?> ■グローバルメニューの場合 WordPressから動的に変更して出力するものは、テンプレートタグに置き換えていく。
- 13. Font Awesome（フォントアーサム） アイコンフォントの数 ・Bootstrap 200 個 ・Font Awesome 439 個 awesome:素晴らしい、印象的な という意味 Bootstrapと合わせて使うことを想定されている ので使いやすい。 http://fortawesome.github.io/Font-Awesome/
- 19. <div class="menu-mainmenu-container"> <ul id="menu-mainmenu" class="menu"> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu- item-30"><a href="http://localhost/wp/">HOME</a></li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current- menu-item page_item page-item-2 current_page_item current_page_parent menu-item-31"><a href="http://localhost/wp/blog/">BLOG</a></li> <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu- item-35"><a href="http://localhost/wp/about/">ABOUT</a></li> ： ★ Bootstrapが有効になる出力 ☆デフォルトのWordPressでのHTML出力 <ul id="menu-mainmenu" class="nav navbar-nav navbar-right"> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item- 30"><a href="http://localhost/wp/">HOME</a></li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current- menu-item page_item page-item-2 current_page_item current_page_parent menu-item-31"><a href="http://localhost/wp/blog/">BLOG</a></li> <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item- 35"><a href="http://localhost/wp/about/">ABOUT</a></li> ：
- 20. <?php /* カスタムメニューの出力 */ $menu_prm = array( ‘theme_location' => 'primary', 'menu' => '', 'container' => false, 'container_class' => '', 'container_id' => '', 'menu_class' => 'nav navbar-nav navbar-right', 'menu_id' => '', 'echo' => true, ‘fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu($menu_prm); ?> wp_nav_menu タグの出力を変更する。 <ul id="menu-mainmenu" class="nav navbar-nav navbar-right"> <li id="menu-item-30" class="menu-item menu-item-type- post_type menu-item-object-page menu-item-30"><a href="http://localhost/wp/">HOME</a></li> <li id="menu-item-31" class="menu-item menu-item-type- post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item current_page_parent menu-item- 31"><a href="http://localhost/wp/blog/">BLOG</a></li> : header.php xxx.html http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/w p_nav_menu
- 21. <?php get_search_form(); ?> 上のタグで searchform.php に記載されているコードが表示される。 例えば、検索フォームの場合 searchform.php にBootstrapの検索フォームのコードを記載する。 具体例⇒
- 22. <form class="navbar-form navbar-left" role="search" action="<?php echo home_url('/'); ?>"> <div class="form-group"> <label for ="s"></label> <input type="text" value="" name="s" id="s" class="form-control" placeholder="Search in the Web Site"> </div> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon- search"></span></button> </form> searchform.php にBootstrapの検索フォームを上書きして、修正 http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%8 3%B3%E3%82%B9/get_search_form WordPressで検索フォームを動かすには以下の条件がある。 ～WordPress Codex より ～ ブログのホームページに GET を投げることに注意してください。入力テキストフィールドの名前は s にして、上述の 例のように label を必ず含めてください。
- 23. ４．まとめ
- 24. Bootstrapを使う理由 ● クロスブラウザ、レスポンシブのことは既に検証済み！ ● デザインはベストプラクティス ⇒使いやすく、見やすいようにあらかじめよく考えられている ● 拡張、強化するためのテーマや部品が豊富にある。 制作・テスト・確認の作業時間を圧倒的に短縮できる。 短縮した時間をさらなるリッチコンテンツの制作にまわせる。
- 25. HTMLファイルからWordPressのテーマを作成する際のポイント ● BootstrapのHTML構造、classを維持しながら テーマ化していく。 ● 大きな変更点は、Bootstrapで制作するときに吸収しておく。 ⇒ テーマ化してあとの変更は工数が大きくなくことが多い。
- 26. ご清聴ありがとうございました。