arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

BootstrapでWordPressテーマを作ろう!vol.1

Bootstrapを使ったWordpressのテーマについて説明していきます。HTMLとCSSのテンプレートを使って文書構造や見栄えについて手間をかけずにオリジナルテーマ最初の一歩を踏み出すのが今回の概要です。Wordpressの動き方や、どのようにWordPressの機能を設定していくのかを一緒に見ていきましょう。

PHPの知識はあるに越したことはありませんが、さしあたって必要ではありません。

今やBootstrapを使ったテーマは数多くあり、日本でもHabakiriHonokaLiquid Pressなど綺麗なテーマは人気です。
それらをカスタマイズしてお気に入りのページに仕上げることもでき、Wordpressの機能を勉強できますが、どんな風にそれらのテーマができているのかを勉強するには自分で手を動かしてみる方が良さそうです(手作り感が好きな人にはより愛着が湧くのではないかと思います)。

Bootstrapについてざっくりと

bootstrap_header
元々はTwitter社内で作られていたものです。
デザインを作る負担を軽くしたい、もしくはCSSが苦手なエンジニア/デザイナー向けのCSSフレームワーク(使い回し可能なテンプレートがたくさんある)で、例えばこんなボタンが
eg-btn

こうやって書くだけ(もしくはコピペ)で作れてしまいます。

  • スタンダードになりつつあるレスポンシブデザインに対応していること
  • 見やすく使いやすいようにあらかじめ考慮されていること
  • 様々なデバイスに対応していること

から、1からCSSを書かなくてもルールに沿ってHTMLを書いていけば大まかなレイアウトが作れ、細かい調整については自身でCSSを書き足すだけ、という大きなメリットがあります。

HTMLもテンプレートで用意します

今回はBootstrapがセットになったHTML構造を提供しているテンプレートも使います。
CSSだけでなく、HTMLも1から書かずにサクサクいきましょう。
業界的(?)にはこのテンプレートはボイラープレートというようで、その一つがInitializerです。

Initializerのダウンロード

Initializerのページにアクセス。1-Pre-configrationのBootstrapをクリック。
pre-config
すると、2-Fine tuningが現れます。内容はそのままで「Download it!」
fine-tuning
解凍してフォルダの内容を確認します。
initializer-1
index.htmlをブラウザで表示すると
jumbotron
このような「Hello,World!」の画面が表示されれば、下準備は完了です。

テーマ作成に入る前に…

ちょっと待って!とここにしか入れられそうなタイミングがなかったので、Wordpressの動き方や構造についてまたまた簡単に説明します。今はざっくりこんな感じで頭に入っていればいいです。

WordPressのテーマはどの様に動くか

Twenty Fifteenのテーマを覗いてみる(wp-content >themes >twentyfifteen)と、たくさんのファイルが並んでいるのが確認できます。
実はトップページには幾つかのテンプレートファイルが使われているんですね(index.phpにはheader.php, sidebar.php, footer.phpが使用されています)。

どの様に分割されているのか

では、その幾つかのファイルはどの様に分割されているのでしょうか?
index
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を作成します。

これをテキストエディタ等にコピペして、style.cssと名前をつけてmy_themeフォルダに保存します。上記はそれぞれ何のことかというと

  • Theme Nameはテーマの名前
  • Theme URIは使っているテーマのWebページ
  • Author URIは作者のWebページ
  • Authorは作者の名前
  • Descriptionはテーマの説明
  • LicenseはGNUライセンスの明示

のことです(GNUに関する平易な説明はこちらが良さそうです)。
最初のうちはファイルの場所がわかりづらいので、それぞれ作成したファイルの場所を図にするとこの様になっています。
directry-map-01
style.cssの保存が完了したら、WordPressの管理画面へアクセスし、テーマを有効化しましょう。
theme-select
他のテーマと比べると何も表示されていませんが、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フォルダに保存します。
ファイルは閉じずに、機能のための関数をそれぞれ入れていきます。

新たにheader.phpの25行目に各種プラグイン・ウィジェット、ダッシュボードを正常に動作させるための関数、wp_head()関数を入れます。

同じくfooter.phpにも関数wp_footer()関数を入れます。

一方index.htmlはというと…

ヘッダーとフッターを切り取ったおかげで6行ほどしか残っていないと思います。そのままindex.phpにしてもWordpressは動きません。ここで先ほど切り取ったヘッダーとフッターを呼び出します。

最初の行と最後の行にヘッダーとフッターをそれぞれ呼び出すためのget_header()関数とget_footer()関数を追加します。またこの時点でindex.htmlをindex.phpに名前を変更します。「名前をつけて保存」を選択しindex.htmlindex.phpに変更するだけですね。
これでindex.phpを開いてヘッダーとフッターを呼ぶことができるようになりました!

スタイルシートとJavaScriptの呼び出し

もうindex.phpを開いた人はわかると思いますが、レイアウトが崩れています。CSSとJavaScriptのファイルがWordpressに読み込まれていないのが原因です。
header.phpとfooter.phpに書いてあるCSSのhrefとJavaScriptのsrcに新しい関数を追加して、WordpressがCSSとJavaScriptのファイルを読み込んでくれるようにしましょう。
get_template_directory_uri()関数、テンプレートを格納したディレクトリを呼び出す関数です。

header.phpの14、21、22、24行のhrefと/cssの間、srcと/jsの間に<?php echo get_template_directory_uri(); ?>を追加します。

footer.phpの5,7,9行目のsrcと/jsの間にheader.phpと同じく<?php echo get_template_directory_uri(); ?>を追加します。
Google Analyticsのコードにある’UA-XXXXX-X'は必要に応じて変更してお使いください。
これでindex.htmlをブラウザで開いた時と同じ画面がWordpressでも見られるはずです!
ここでひと区切りとします。お疲れ様でした!!
jumbotron

参考にしていた文献

Web関係のトレンドを幅広く押さえられていますStocker.jp:なつきさん。

Yoshinori.Kobayashiさん。このスライドは2014年8月のWordbenchでのもののようです。

WPD-Purpleという寄稿名ですが、日本のWordpress界では有名なメガネこと大串さん。
CSS Nite Shift9でBoilerplateを使った実演があり、Wordpressと一緒に検索して出てきた日本語ページがこの記事であり、ここのテーマの発端。


最初の記事をあげた次の日、サーバーのエラーを解消している際に文章のバックアップを誤って削除してしまいました。
前回より以前にテストのように書いた文章は消えてしまったのですが、却って過去を引きずらない感じで清々しいかなとすら感じています。
PC全般に言えますが、バックアップは大事です。PHPファイルは思ったよりデリケートな部分があるので特に気をつけましょうね。

もう少し簡潔に記事を書けるようになりたいな…ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP