プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【wordpress】 BootStrapを使ってwordpressテーマを自作する方法1

  • 2017年5月13日
  • 2017年7月1日
  • wordpress
  • 2036view
  • 1件

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の2つ。
[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では動くのにwordpress上で動かない現象が起きたが、
[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]