Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bootstrap を使って効率よく
WordPressオリジナルテーマを作る!
WordBench東京8月
Ticklecode.
Yoshinori Kobayashi
小林由憲(こばやしよしのり)
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
生まれは 奈良県 です。
2
アジェンダ
1.BootstrapでWordPressテーマを作るフロー
2.なぜ、Bootstrapを使うのか
3.HTMLファイルからWordPressテーマへ
4.まとめ
1.BootstrapでWordPressテーマを作るフロー
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></l...
2.なぜ、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と合わせて使うことを想定されている...
Bootswatch(ブートスォッチ) swatch:材料見本 という意味
http://bootswatch.com/
数多くのテーマやカラーバリエーションがある。
細かな部品もたくさんあるので、使いよい。
Masonry(メイソンリー) masonry:石工職、石工術 という意味
Bootstrapでは固定レイアウト。これを強化できる。
http://masonry.desandro.com/
http://getbootstrap.com/ex...
3.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-ite...
<?php
/* カスタムメニューの出力 */
$menu_prm = array(
‘theme_location' => 'primary',
'menu' => '',
'container' => false,
'container_c...
<?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...
4.まとめ
Bootstrapを使う理由
● クロスブラウザ、レスポンシブのことは既に検証済み!
● デザインはベストプラクティス
⇒使いやすく、見やすいようにあらかじめよく考えられている
● 拡張、強化するためのテーマや部品が豊富にある。
制作・テスト・...
HTMLファイルからWordPressのテーマを作成する際のポイント
● BootstrapのHTML構造、classを維持しながら テーマ化していく。
● 大きな変更点は、Bootstrapで制作するときに吸収しておく。
⇒ テーマ化してあと...
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

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

82,985 views

Published on

2014年8月
WordBench東京8月勉強会「制作現場を爆速にする妙技をシェアしあおう!!」
「Bootstrap を使って効率よくオリジナルテーマを作る!」というテーマで話しました。
自分でオリジナルテーマを作りたくても、制作に時間がかかりすぎることがあります。
テーマ制作に、Bootstrapを使う理由とオリジナルテーマを作るときのポイントをシェアしようと思います。

Published in: Internet

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

  1. 1. Bootstrap を使って効率よく WordPressオリジナルテーマを作る! WordBench東京8月 Ticklecode. Yoshinori Kobayashi
  2. 2. 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only 生まれは 奈良県 です。 2
  3. 3. アジェンダ 1.BootstrapでWordPressテーマを作るフロー 2.なぜ、Bootstrapを使うのか 3.HTMLファイルからWordPressテーマへ 4.まとめ
  4. 4. 1.BootstrapでWordPressテーマを作るフロー
  5. 5. Bootstrapで、HTMLファイルを作成する。 HTMLファイルの状態がもっとも修正しやすい。 ある程度、大きな変更点はこの段階で吸収してしまう。
  6. 6. HTMLを.phpとして分割する。 トップページ index.html header.php footer.php sidebar.phpindex.php
  7. 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. 8. 2.なぜ、Bootstrapを使うのか
  9. 9. クロスブラウザ http://getbootstrap.com/getting-started/ すでに対応済み、検証済み
  10. 10. レスポンシブ すでに対応済み、検証済み http://getbootstrap.com/css/#grid
  11. 11. デザインベストプラクティス 見やすく、使いやすいようにあらかじめ考慮されている http://getbootstrap.com/components/
  12. 12. 補足.Bootstrapの拡張、強化
  13. 13. Font Awesome(フォントアーサム) アイコンフォントの数 ・Bootstrap 200 個 ・Font Awesome 439 個 awesome:素晴らしい、印象的な という意味 Bootstrapと合わせて使うことを想定されている ので使いやすい。 http://fortawesome.github.io/Font-Awesome/
  14. 14. Bootswatch(ブートスォッチ) swatch:材料見本 という意味 http://bootswatch.com/ 数多くのテーマやカラーバリエーションがある。 細かな部品もたくさんあるので、使いよい。
  15. 15. Masonry(メイソンリー) masonry:石工職、石工術 という意味 Bootstrapでは固定レイアウト。これを強化できる。 http://masonry.desandro.com/ http://getbootstrap.com/examples/offcanvas/ WordPressは同梱済み(/wp- includes/js/masonry.min.js)
  16. 16. 3.HTMLファイルからWordPressテーマへ
  17. 17. WordPressのテンプレートタグをそのまま記載してもBootstrapが有効に 使えない。 WordPressテーマ化にする際の注意。 BootstrapのHTML構造、classを維持しながらテーマ化していく。
  18. 18. 例えば、グローバルメニューの場合 <?php wp_nav_menu(); ?> 管理画面であらかじめ設定されたメニューが表示される。 具体例⇒ デフォルトでHTMLが出力されるが、Boootstrap用にはなっていない。
  19. 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. 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. 21. <?php get_search_form(); ?> 上のタグで searchform.php に記載されているコードが表示される。 例えば、検索フォームの場合 searchform.php にBootstrapの検索フォームのコードを記載する。 具体例⇒
  22. 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. 23. 4.まとめ
  24. 24. Bootstrapを使う理由 ● クロスブラウザ、レスポンシブのことは既に検証済み! ● デザインはベストプラクティス ⇒使いやすく、見やすいようにあらかじめよく考えられている ● 拡張、強化するためのテーマや部品が豊富にある。 制作・テスト・確認の作業時間を圧倒的に短縮できる。 短縮した時間をさらなるリッチコンテンツの制作にまわせる。
  25. 25. HTMLファイルからWordPressのテーマを作成する際のポイント ● BootstrapのHTML構造、classを維持しながら テーマ化していく。 ● 大きな変更点は、Bootstrapで制作するときに吸収しておく。 ⇒ テーマ化してあとの変更は工数が大きくなくことが多い。
  26. 26. ご清聴ありがとうございました。

×