Bootstrap を使って効率よく　 WordPress オリジナルテーマを作る！

WordBench 東京８月

Ticklecode.Yoshinori Kobayashi

小林由憲（こばやしよしのり）

Twitter: @AsbyuKobayashi

ブログ : In Advance Only

生まれは　奈良県　です。

2

アジェンダ

１． Bootstrap で WordPress テーマを作るフロー

２．なぜ、 Bootstrap を使うのか

３． HTML ファイルから WordPress テーマへ

４．まとめ

１． Bootstrap で WordPress テーマを作るフローhttp://getbootstrap.com/

Bootstrap で、 HTML ファイルを作成する。

HTML ファイルの状態がもっとも修正しやすい。ある程度、大きな変更点はこの段階で吸収してしまう。

HTML を .php として分割する。

トップページindex.html

header.php

footer.php

sidebar.phpindex.php

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 から動的に変更して出力するものは、テンプレートタグに置き換えていく。

２．なぜ、 Bootstrap を使うのか

クロスブラウザhttp://getbootstrap.com/getting-started/

すでに対応済み、検証済み

レスポンシブ

すでに対応済み、検証済み

http://getbootstrap.com/css/#grid

デザインベストプラクティス

見やすく、使いやすいようにあらかじめ考慮されているhttp://getbootstrap.com/components/

補足． Bootstrap の拡張、強化

Font Awesome （フォントオーサム）

アイコンフォントの数・ Bootstrap 200 個・ Font Awesome 439 個

awesome: 素晴らしい、印象的な という意味

Bootstrap と合わせて使うことを想定されているので使いやすい。

http://fortawesome.github.io/Font-Awesome/

Bootswatch （ブートスォッチ） swatch ：材料見本　という意味

http://bootswatch.com/

数多くのテーマやカラーバリエーションがある。

細かな部品もたくさんあるので、使いよい。

Masonry （メイソンリー） masonry ：石工職、石工術　という意味

Bootstrap では固定レイアウト。これを強化できる。

http://masonry.desandro.com/

http://getbootstrap.com/examples/offcanvas/ WordPress は同梱済み（ /wp-includes/js/masonry.min.js ）

３． HTML ファイルから WordPress テーマへ

WordPress のテンプレートタグをそのまま記載してもBootstrap が有効に使えない。

WordPress テーマ化にする際の注意。

Bootstrap の HTML 構造、 class を維持しながらテーマ化していく。

例えば、グローバルメニューの場合

<?php wp_nav_menu(); ?>

管理画面であらかじめ設定されたメニューが表示される。

具体例⇒

デフォルトで HTML が出力されるが、 Boootstrap 用にはなっていない。

<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>　　：

<?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.phpxxx.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/wp_nav_menu

<?php get_search_form(); ?>

上のタグで searchform.php  に記載されているコードが表示される。

例えば、検索フォームの場合

searchform.php  に Bootstrap の検索フォームのコードを記載する。

具体例⇒

<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%83%B3%E3%82%B9/get_search_form

WordPress で検索フォームを動かすには以下の条件がある。

～ WordPress Codex より ～ブログのホームページに GET を投げることに注意してください。入力テキストフィールドの名前は s にして、上述の例のように label を必ず含めてください。

４．まとめ

Bootstrap を使う理由

● 　クロスブラウザ、レスポンシブのことは既に検証済み！

● 　デザインはベストプラクティス

⇒ 使いやすく、見やすいようにあらかじめよく考えられている

● 　拡張、強化するためのテーマや部品が豊富にある。

制作・テスト・確認の作業時間を圧倒的に短縮できる。短縮した時間をさらなるリッチコンテンツの制作にまわせる。

HTML ファイルから WordPress のテーマを作成する際のポイント

● 　 Bootstrap の HTML 構造、 class を維持しながら テーマ化していく。

● 　大きな変更点は、 Bootstrap で制作するときに吸収しておく。

⇒ 　テーマ化してあとの変更は工数が大きくなくことが多い。

ご清聴ありがとうございました。