1.
Bootstrap を使って効率よく
WordPressオリジナルテーマを作る！
WordBench東京８月
Ticklecode.
Yoshinori Kobayashi

2.
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
生まれは 奈良県 です。
2

3.
アジェンダ
１．BootstrapでWordPressテーマを作るフロー
２．なぜ、Bootstrapを使うのか
３．HTMLファイルからWordPressテーマへ
４．まとめ

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

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

6.
HTMLを.phpとして分割する。
トップページ
index.html
header.php
footer.php
sidebar.phpindex.php

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

8.
２．なぜ、Bootstrapを使うのか

9.
クロスブラウザ
http://getbootstrap.com/getting-started/
すでに対応済み、検証済み

10.
レスポンシブ
すでに対応済み、検証済み
http://getbootstrap.com/css/#grid

11.
デザインベストプラクティス
見やすく、使いやすいようにあらかじめ考慮されている
http://getbootstrap.com/components/

12.
補足．Bootstrapの拡張、強化

13.
Font Awesome（フォントアーサム）
アイコンフォントの数
・Bootstrap 200 個
・Font Awesome 439 個
awesome:素晴らしい、印象的な という意味
Bootstrapと合わせて使うことを想定されている
ので使いやすい。
http://fortawesome.github.io/Font-Awesome/

14.
Bootswatch（ブートスォッチ） swatch：材料見本 という意味
http://bootswatch.com/
数多くのテーマやカラーバリエーションがある。
細かな部品もたくさんあるので、使いよい。

15.
Masonry（メイソンリー） masonry：石工職、石工術 という意味
Bootstrapでは固定レイアウト。これを強化できる。
http://masonry.desandro.com/
http://getbootstrap.com/examples/offcanvas/
WordPressは同梱済み（/wp-
includes/js/masonry.min.js）

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

17.
WordPressのテンプレートタグをそのまま記載してもBootstrapが有効に
使えない。
WordPressテーマ化にする際の注意。
BootstrapのHTML構造、classを維持しながらテーマ化していく。

18.
例えば、グローバルメニューの場合
<?php wp_nav_menu(); ?>
管理画面であらかじめ設定されたメニューが表示される。
具体例⇒
デフォルトでHTMLが出力されるが、Boootstrap用にはなっていない。

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.
ご清聴ありがとうございました。