wordpressテーマを自作するときもbootstrapが使えれば楽だなと思い、wordpress用のBootStrapの設定をメモ。
準備
wordpressテーマの準備
FTPソフトを使い、wp-content >> themesに任意の名前でフォルダを作成。
その中にとりあえずindex.php,style.css,functions.phpを作成。
BootStrapファイルの配置
解凍したBootStrapのフォルダを、フォルダごとテーマ(index.phpがある階層)が入ったディレクトリに入れる。
BootStrapファイルの読み込み
wordpress管理画面 >> 外観 >> テーマの編集 >> functions.php
WordPressのテーマにBootstrapのファイルを読み込むために以下を追記。
読み込むファイルはbootstrap.min.css,bootstrap.min.jsの２つ。
[php]
// Bootstrapの読み込み
function my_bootstrap_scripts() {
wp_enqueue_style( ‘bootstrap-css’, get_template_directory_uri() . ‘/bootstrap/css/bootstrap.min.css’);
wp_enqueue_script( ‘bootstrap-script’, get_template_directory_uri() . ‘/bootstrap/js/bootstrap.min.js’, array(), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_bootstrap_scripts’ );
[/php]
index.phpの中身
ブートストラップ(Bootstrap)まずは基本の使い方で記述したindex.htmlの内容をindex.phpに書く。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!– BootstrapのCSS読み込み –>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!– jQuery読み込み –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!– BootstrapのJS読み込み –>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
[/html]
index.phpをwordpress用に書き換える
head~/headの間
function.phpに書いた内容と重複する部分を削除する。
前項の内容から最低限の項目をwordpress関数に書き換える。
head直前とbody直前にwordpressのphpを追加する。
[html highlight=”7,12,16″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo(‘ name ‘); ?></title>
<!– jQuery読み込み –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!– 追加のCSSの読み込み –>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>
<body>
<h1>Hello, world!</h1>
<?php wp_footer(); ?>
</body>
</html>
[/html]
body~/bodyの間に大まかな要素を書く
[html] <body><!– ナビゲーションメニューの配置 –>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav><!– ナビゲーションメニューここまで –>
<!– ヘッダー部分の追加 –>
<header>
<div class="container">
<h1><a href="<?php bloginfo(‘url’) ?>"><?php bloginfo(‘ name ‘); ?></a></h1>
<h2><small><?php bloginfo( ‘description’ ); ?></small></h2>
</div>
</header><!– ヘッダーここまで –>
<!– セクション部分の追加 –>
<section>
</section><!– セクションここまで –>
<!– アーティクル部分の追加 –>
<article>
</article><!– アーティクルここまで –>
<!– サイドバー部分の追加 –>
<aside>
</aside><!– サイドバーここまで –>
<!– フッター部分の追加 –>
<footer>
</footer><!– フッターここまで –>
<?php wp_footer(); ?>
</body>
[/html]
jQueryが動かない場合
[html] <?php wp_head(); ?>
<?php wp_footer(); ?>
[/html] を正しい場所に配置したら直った
それでもjQueryが動かない場合
wordpress管理画面 >> 外観 >> テーマの編集 >> functions.php
function.php内を以下に書き換える
[html]
// jQuery の読み込み
function add_my_scripts() {
if(is_admin()) return; //管理画面にはスクリプトは追加しない
wp_deregister_script( ‘jquery’); //デフォルトの jQuery は読み込まない
//CDN から読み込む
wp_enqueue_script( ‘jquery’, ‘//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’, array(), ‘1.10.2’, false);
wp_enqueue_script( ‘jquery-mig’, ‘//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js’, array(), ‘1.2.1’, false);
}
add_action(‘wp_enqueue_scripts’, ‘add_my_scripts’);
[/html]
head~headまでの間
[html]
<?php
//以下は<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />の記述の代わり
if (isset($_SERVER[‘HTTP_USER_AGENT’]) && (strpos($_SERVER[‘HTTP_USER_AGENT’], ‘MSIE’) !== false))
header(‘X-UA-Compatible: IE=edge,chrome=1’);
?>
<!doctype html>
<html>
<head>
<meta charset="<?php bloginfo( ‘charset’ ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(‘|’, true, ‘right’); bloginfo(‘name’);?></title>
<!–bootstrap.min.cssの読み込み–>
<link href="<?php echo get_template_directory_uri(); ?>/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!– 追加のCSSの読み込み –>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<?php wp_head(); ?>
</head>
[/html]
footer下
[html]
<!–bootstrap.min.jsの読み込み–>
<script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.min.js"></script>
[/html]