More Related Content
Similar to Bootstrapを使って効率よくWordPressオリジナルテーマを作る (20)
More from Yoshinori Kobayashi (20)
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
- 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から動的に変更して出力するものは、テンプレートタグに置き換えていく。
- 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
- 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 を必ず含めてください。