Bootstrap3.1.1

Bootstrap3.3.5でテーマを作るための基本設定

Bootstrap Framework for WordPress

Pocket

Bootstrap3でフレームワークを作成

WordPressのオリジナルテーマの枠組み(フレームワーク)をBootstrap3で作成します。レスポンシブでフラットなオリジナルテーマが簡単に作成できます。

オリジナルテーマの有効化

オリジナルテーマ用のフォルダを作成し、さらにその中にスタイルシート style.css とテンプレートファイル index.php を作成するとオリジナルテーマとしてWordPressが認識します。
まずは最小の構成単位であるスタイルシート style.css とテンプレートファイル index.php を作成し有効化させましょう。

オリジナルテーマ用のフォルダを作成する

wp-content > themes の中に新規フォルダ 例:mytheme を作成します。

style.css を作成する

最初に必須であるテーマ名をはじめ、作者やバージョン名のみを記載したスタイルシートを作成します。
作成後 wp-content > themes の中に作成された新規フォルダ 例:mytheme の中にアップロードします。

style.css作成例

/*
Theme Name: Travel Bootstrap
Theme URI: http://wordpresscollege.org/bootstrap/
Author: KOMATSUBARA, Masato
Author URI: https://plus.google.com/116247090380673156258/
Description: WordPress Travel Themes Made From Bootstrap
Version: 0.1.0
*/
Theme Name: テーマの名称 必須
Theme URI: テーマのウェブページ 任意
Author: 作者の名前 任意
Author URI: 作者のウェブページ 任意
Description: テーマの説明 任意
Version: テーマのバージョン 任意

index.php を作成する

オリジナルテーマをWordPressに認識させるために必要なテンプレートファイルは必ずしも index.php である必要はありませんが、中身は空白で構いませんので index.php を作成し wp-content > themes の中に作成された新規フォルダ 例:mytheme の中にアップロードします。

オリジナルテーマの有効化

テーマを有効化する

テーマを有効化する

ダッシュボードの 外観 > テーマ へ移動します。アップロードしたオリジナルテーマが認識されていますので 有効化 しましょう。オリジナルテーマが有効化されましたが、ファイルを準備しただけなので何も表示されません。

テーマのサムネイル画像を表示する

テーマ選択画面でテーマのサムネイル画像を表示したい場合は、横幅 880px 縦 660px のPNG画像を準備して screenshot.png という名称でテーマのディレクトリ(フォルダ)の中にアップロードします(style.css と同じ階層です)。

Bootstrap3 オリジナルテーマの基本設定

functions.php の作成 – jQueryを読み込む

Bootstrap3 を使用するには jQuery が必要です。WordPress にはデフォルトで jQuery が用意されていて、必要なときに読み込まれます。下記の設定ではデフォルトの jQuery を無効にして、コンテンツデリバリネットワーク(CDN)から読み込むように設定します。設定は header.phpfunctions.php で行えます。
wp-content > themes の中に作成された新規フォルダ 例:mytheme の中に functions.php を作成します。

functions.php の記入例

<?php

/* 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.11.4/jquery.min.js', array(), '1.11.4', 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_print_scripts', 'add_my_scripts');

header.php の作成 – Bootstrap のCSSを読み込む

Bootstrap3 を使用するには Bootstrap の cssが必要です。下記の設定ではコンテンツデリバリネットワーク(CDN)から読み込むように設定します。設定は header.php で行います。
bootstrap.min.css の読み込みやアイコンフォントのCSS font-awesome.min.css の読み込みと同時に <?php wp_head(); ?> の記載も行います。
<?php wp_head(); ?> は、テーマ作成時に必ず記入すべきテンプレートタグです。管理バーの表示やメタタグの出力などを行います。

wp-content > themes > 例:mytheme の中に header.php を作成します。

header.php の記入例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php wp_title('|', true, 'right'); bloginfo('name');?></title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>>

footer.php の作成 – Bootstrap のJavaScriptを読み込む

Bootstrap3 を使用するには Bootstrap の JavaScriptが必要です。下記の設定ではコンテンツデリバリネットワーク(CDN)から読み込むように設定します。設定は footer.php で行います。
JavaScript bootstrap.min.js の読み込みと同時に <?php wp_footer(); ?> の記載も行います。
<?php wp_footer(); ?> は、テーマ作成時に必ず記入すべきテンプレートタグです。Javascriptライブラリの読み込みなど、WordPressが自動的にHTMLを書き出すためのテンプレートタグです。

wp-content > themes > 例:mytheme の中に footer.php を作成します。

footer.php の記入例

<div id="footer">
<div class="container text-center">
<small>Copyright © hotelsNAVI.net All Rights Reserved.</small>
</div>
</div><!-- end of #footer -->
<!--[if lt IE 9]>
//IE8以下のHTML5とレスポンシブ対応
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js" type="text/javascript"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" type="text/javascript"></script>
<![endif]-->
<!--bootstrap minified JavaScriptの読み込み-->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<?php wp_footer(); ?>
</body>
</html>

index.php でheader.php と footer.php を読み込む

index.php にheader.php と footer.php を呼び出すためのテンプレートタグを記入します。

index.php の記入例

<?php get_header(); ?>
<pre class="text-center"><?php echo "index"; ?></pre>
<?php get_footer(); ?>

テーマの表示の確認

テーマに管理バーが表示されているか、およびフッタの文字が真ん中揃いになっているかどうかを確認します。
確認ができたら、記載した各テンプレートタグとCDNからCSSファイルが読み込まれていることの証拠です。

表示例

テーマの表示の確認