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
[html]
<div id="page" class="site">
[/html]
部分にクラス container を追加。
[html]
<div id="content" class="site-content">
[/html]
部分にクラス row を追加。
index.php,single.php,page.php,archive.php
[html]
<div id="primary" class="content-area">
[/html]
部分にクラス col-sm-9 を追加。
side.php
[html]
<aside id="secondary" class="widget-area" role="complementary">
[/html]
部分にクラス col-sm-3 を追加。
style.cssの変更
style.cssをwordpress関連のスタイルだけ残すため、以下のコードに書き換え
[css]
/*————————————————————–
# Accessibility
————————————————————–*/
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0;
}
/*————————————————————–
# Alignments
————————————————————–*/
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*————————————————————–
# Media
————————————————————–*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
/*————————————————————–
## Captions
————————————————————–*/
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
}
/*————————————————————–
## Galleries
————————————————————–*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
[/css]
幅が広い画像、スマホ表示寺の画像がはみ出さないように、以下のコードを追加
[css]
img {
display: block;
height: auto;
max-width: 100%;
}
[/css]
スマホ表示寺の左右余白が大きいと感じたら、以下のコードを追加
[css]
.container{
padding-left:1%;
padding-right:1%;
}
.row{
padding-left:-1%;
padding-right:-1%;
}
div[class^="col-"] {
padding-left:1%;
padding-right:1%;
}
[/css]