wordpressにbootstrap導入の覚え書き

スターターテーマ _s(Underscores)にbootstrapを導入した際の覚え書き。

Bootstrapのインポート

functions.phpにコードを挿入
[php]function theme_name_scripts() {
wp_enqueue_style( ‘theme-name’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css’ );

}

wp_enqueue_script( ‘bootstrap’, ‘//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js’, "", "20160608", false );
if ( ! is_admin() ) {
wp_enqueue_script(
‘html5shiv-script’,
‘https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js’,
array(),
‘3.7.3’
);

wp_script_add_data(
‘html5shiv-script’,
‘conditional’,
‘lt IE 9’
);
}
if ( ! is_admin() ) {
wp_enqueue_script(
‘respond-script’,
‘https://oss.maxcdn.com/respond/1.4.2/respond.min.js’,
array(),
‘3.7.3’
);

wp_script_add_data(
‘respond-script’,
‘conditional’,
‘lt IE 9’
);
}
}
add_action( ‘wp_enqueue_scripts’, ‘theme_name_scripts’ );
[/php]

メインメニュー

wp-bootstrap-navwalkerをダウンロードし、テーマフォルダにアップロード
functions.phpにコードを追加
[php]
require get_template_directory() . ‘/wp-bootstrap-navwalker.php’;
[/php]
header.phpのメニューを表示したい場所に、以下のコードを挿入
[php]
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php wp_nav_menu( array(‘theme_location’ => ‘primary’,
‘menu_class’ => ‘nav navbar-nav’,
‘container_class’ => ‘navbar-collapse collapse’,
‘fallback_cb’ => ‘wp_bootstrap_navwalker::fallback’,
‘walker’ => new wp_bootstrap_navwalker()
) );?>
</div>
[/php]

グリッドシステムでのレスポンシブ化

header.php