BootstrapでWordPressテーマを作ろう！vol.1
Bootstrapを使ったWordpressのテーマについて説明していきます。HTMLとCSSのテンプレートを使って文書構造や見栄えについて手間をかけずにオリジナルテーマ最初の一歩を踏み出すのが今回の概要です。Wordpressの動き方や、どのようにWordPressの機能を設定していくのかを一緒に見ていきましょう。
PHPの知識はあるに越したことはありませんが、さしあたって必要ではありません。
今やBootstrapを使ったテーマは数多くあり、日本でもHabakiriやHonoka、Liquid Pressなど綺麗なテーマは人気です。
それらをカスタマイズしてお気に入りのページに仕上げることもでき、Wordpressの機能を勉強できますが、どんな風にそれらのテーマができているのかを勉強するには自分で手を動かしてみる方が良さそうです（手作り感が好きな人にはより愛着が湧くのではないかと思います）。
Bootstrapについてざっくりと
元々はTwitter社内で作られていたものです。
デザインを作る負担を軽くしたい、もしくはCSSが苦手なエンジニア/デザイナー向けのCSSフレームワーク（使い回し可能なテンプレートがたくさんある）で、例えばこんなボタンが
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!-- Standard button --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link</button> |
こうやって書くだけ（もしくはコピペ）で作れてしまいます。
- スタンダードになりつつあるレスポンシブデザインに対応していること
- 見やすく使いやすいようにあらかじめ考慮されていること
- 様々なデバイスに対応していること
から、1からCSSを書かなくてもルールに沿ってHTMLを書いていけば大まかなレイアウトが作れ、細かい調整については自身でCSSを書き足すだけ、という大きなメリットがあります。
HTMLもテンプレートで用意します
今回はBootstrapがセットになったHTML構造を提供しているテンプレートも使います。
CSSだけでなく、HTMLも1から書かずにサクサクいきましょう。
業界的（？）にはこのテンプレートはボイラープレートというようで、その一つがInitializerです。
Initializerのダウンロード
Initializerのページにアクセス。1-Pre-configrationのBootstrapをクリック。
すると、2-Fine tuningが現れます。内容はそのままで「Download it!」
解凍してフォルダの内容を確認します。
index.htmlをブラウザで表示すると
このような「Hello,World!」の画面が表示されれば、下準備は完了です。
テーマ作成に入る前に…
ちょっと待って！とここにしか入れられそうなタイミングがなかったので、Wordpressの動き方や構造についてまたまた簡単に説明します。今はざっくりこんな感じで頭に入っていればいいです。
WordPressのテーマはどの様に動くか
Twenty Fifteenのテーマを覗いてみる(wp-content >themes >twentyfifteen)と、たくさんのファイルが並んでいるのが確認できます。
実はトップページには幾つかのテンプレートファイルが使われているんですね(index.phpにはheader.php, sidebar.php, footer.phpが使用されています)。
どの様に分割されているのか
では、その幾つかのファイルはどの様に分割されているのでしょうか？
index.phpは上の図の様にheader.php・sidebar.php・footer.phpと分かれています。最低限index.phpとstyle.cssさえあればWordpressは動きますが、この様に分割させ、あるいはPHPのテンプレートファイルを増やすことによってページの機能を拡張していきます。
index.phpとstyle.cssの作成
ざっくりとWordpressの動きと構造を説明しました。これからテーマのコーディングに入ります。
全くの初心者だと、なんとかデザインカンプ作って、コーディングしてとやっていくと気の遠くなるような時間がかかります。
勉強していくともっと速い作成方法がありますが、これでも相当の負担を軽減できるはずです。
1.themesフォルダにInitializerを格納
ダウンロードしたInitializerをコピーして、前回MAMPのhtdocsに設置したWordpressのthemesフォルダ（アプリケーション>MAMP>htdocs>mysite>wp-content>themes）にペーストします。
せっかくなので、フォルダ名を'my_theme'に変更しておきましょうか。
2.index.phpとstyle.cssを作成
次に、Wordpressに「このフォルダはテーマですよ」と教えるためのstyle.cssを作成します。
1 2 3 4 5 6 7 8 9 10 | /* Theme Name: initializr Theme URI: http://wordpress.local/ Author: necomacustom Author URI: http://wordpress.local/ Description: Version: 0.1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ |
これをテキストエディタ等にコピペして、style.cssと名前をつけてmy_themeフォルダに保存します。上記はそれぞれ何のことかというと
Theme Nameはテーマの名前Theme URIは使っているテーマのWebページAuthor URIは作者のWebページAuthorは作者の名前Descriptionはテーマの説明LicenseはGNUライセンスの明示
のことです（GNUに関する平易な説明はこちらが良さそうです）。
最初のうちはファイルの場所がわかりづらいので、それぞれ作成したファイルの場所を図にするとこの様になっています。
style.cssの保存が完了したら、WordPressの管理画面へアクセスし、テーマを有効化しましょう。
他のテーマと比べると何も表示されていませんが、880×660pxのscreenshot.pngを作成してmy_themeフォルダ、index.phpやstyle.cssと同じ場所に置けば表示されます。
コンテンツからheader.phpとfooter.phpを分離
有効化したものの、確認するとレイアウトが崩れていますので、これからファイルを分割したり、HTMLを読み込む機能をつけて整えていきます。
index.htmlからヘッダー部分とフッター部分を切り離します。ヘッダー部分は<div class="jumbotron">より前まで、フッター部分は<footer>から残りの部分です。
新規ファイルに上記のそれぞれを切り取り＆ペーストしてヘッダー部分をheader.php、フッター部分をfooter.phpと名前をつけてmy_themeフォルダに保存します。
ファイルは閉じずに、機能のための関数をそれぞれ入れていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!doctype html> l<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> body { padding-top: 50px; padding-bottom: 20px; } </style> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> <?php wp_head(); ?> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div><!--/.navbar-collapse --> </div> </nav> |
新たにheader.phpの25行目に各種プラグイン・ウィジェット、ダッシュボードを正常に動作させるための関数、wp_head()関数を入れます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <footer> <p>© Company 2015</p> </footer> </div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/main.js"></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X','auto');ga('send','pageview'); </script> <?php wp_footer(); ?> </body> </html> |
同じくfooter.phpにも関数wp_footer()関数を入れます。
一方index.htmlはというと…
ヘッダーとフッターを切り取ったおかげで6行ほどしか残っていないと思います。そのままindex.phpにしてもWordpressは動きません。ここで先ほど切り取ったヘッダーとフッターを呼び出します。
1 2 3 4 5 6 7 8 9 | <?php get_header(); ?> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> ... </div> <div class="container"> <!-- Example row of columns --> <div class="row"> ... </div> </div> <hr> <?php get_footer(); ?> |
最初の行と最後の行にヘッダーとフッターをそれぞれ呼び出すためのget_header()関数とget_footer()関数を追加します。またこの時点でindex.htmlをindex.phpに名前を変更します。「名前をつけて保存」を選択しindex.htmlをindex.phpに変更するだけですね。
これでindex.phpを開いてヘッダーとフッターを呼ぶことができるようになりました！
スタイルシートとJavaScriptの呼び出し
もうindex.phpを開いた人はわかると思いますが、レイアウトが崩れています。CSSとJavaScriptのファイルがWordpressに読み込まれていないのが原因です。
header.phpとfooter.phpに書いてあるCSSのhrefとJavaScriptのsrcに新しい関数を追加して、WordpressがCSSとJavaScriptのファイルを読み込んでくれるようにしましょう。
get_template_directory_uri()関数、テンプレートを格納したディレクトリを呼び出す関数です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css"> <style> body { padding-top: 50px; padding-bottom: 20px; } </style> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/main.css"> <script src="<?php echo get_template_directory_uri(); ?>/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> <?php wp_head(); ?> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div><!--/.navbar-collapse --> </div> </nav> |
header.phpの14、21、22、24行のhrefと/cssの間、srcと/jsの間に<?php echo get_template_directory_uri(); ?>を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <footer> <p>© Company 2015</p> </footer> </div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="<?php echo get_template_directory_uri(); ?>/js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="<?php echo get_template_directory_uri(); ?>/js/vendor/bootstrap.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X','auto');ga('send','pageview'); </script> <?php wp_footer(); ?> </body> </html> |
footer.phpの5,7,9行目のsrcと/jsの間にheader.phpと同じく<?php echo get_template_directory_uri(); ?>を追加します。
Google Analyticsのコードにある’UA-XXXXX-X'は必要に応じて変更してお使いください。
これでindex.htmlをブラウザで開いた時と同じ画面がWordpressでも見られるはずです！
ここでひと区切りとします。お疲れ様でした！！
参考にしていた文献
Web関係のトレンドを幅広く押さえられていますStocker.jp：なつきさん。
Yoshinori.Kobayashiさん。このスライドは2014年8月のWordbenchでのもののようです。
WPD-Purpleという寄稿名ですが、日本のWordpress界では有名なメガネこと大串さん。
CSS Nite Shift9でBoilerplateを使った実演があり、Wordpressと一緒に検索して出てきた日本語ページがこの記事であり、ここのテーマの発端。
最初の記事をあげた次の日、サーバーのエラーを解消している際に文章のバックアップを誤って削除してしまいました。
前回より以前にテストのように書いた文章は消えてしまったのですが、却って過去を引きずらない感じで清々しいかなとすら感じています。
PC全般に言えますが、バックアップは大事です。PHPファイルは思ったよりデリケートな部分があるので特に気をつけましょうね。
もう少し簡潔に記事を書けるようになりたいな…ねこま（@necomacustom）でした。