O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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で制作するときに吸収しておく。
⇒ テーマ化してあと...
ご清聴ありがとうございました。
Próximos SlideShares
Carregando em…5
×

58

Compartilhar

Baixar para ler offline

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

Baixar para ler offline

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

Livros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

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

    Jul. 24, 2018
  • ToruShibatani

    Jan. 14, 2017
  • JunIeda

    Nov. 23, 2016
  • chiemuraoka

    Sep. 19, 2016
  • yasunorinoumi

    Jul. 2, 2016
  • yoshinkc

    Mar. 11, 2016
  • mrmr86

    Feb. 15, 2016
  • ShinichiHirao

    Jan. 31, 2016
  • yutakiyama

    Jan. 7, 2016
  • kyosukeharaki

    Dec. 30, 2015
  • masayanz

    Oct. 31, 2015
  • hatayan1126

    Aug. 21, 2015
  • yutanatsume5

    Aug. 19, 2015
  • miku3939

    Jul. 23, 2015
  • mokztk

    Jul. 21, 2015
  • YukoYonekura

    Jul. 8, 2015
  • kurobuti

    Jun. 25, 2015
  • Garyuten

    Jun. 14, 2015
  • eyelash711

    Jun. 12, 2015
  • noriji822

    Jun. 11, 2015

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

Vistos

Vistos totais

96.123

No Slideshare

0

De incorporações

0

Número de incorporações

66.703

Ações

Baixados

98

Compartilhados

0

Comentários

0

Curtir

58

×