BootstrapでWordPressテーマを作ろう！vol.2
テーマ開発に関連した説明を挟みましたが、再開します。前回Initializerで見た目のひな形を作り、ヘッダーとフッターをindex.phpから分割までを行いました。今回は投稿一覧となるindex.phpのカスタマイズについて説明します。
レスポンシブデザインに対応したBootstrapのグリッドシステムの仕組みと、投稿一覧のループという概念について触れていきます。
Bootstrapについてもう少し
前回「1からCSSを書かなくてもルールに沿ってHTMLを書いていけば大まかなレイアウトが作れ、細かい調整については自身でCSSを書き足すだけ、という大きなメリットがあります。」と説明しましたが、その大きなメリットがグリッドシステムです。
1.グリッドシステムって？
Excelなどの表計算ソフトを使ったことのある方なら飲み込みが早いかもしれませんね。セルを結合して使う感覚です。
Bootstrapの場合には12のブロックが横に均等に並んでいて、これをグリッドと呼んでいます。そして、12のブロックを適当な幅に結合してレイアウトするわけです。
グリッドに沿って文章や画像を配置していけば、スマートフォンやタブレットなどのデバイスに関係なく画面サイズに応じて（＝レスポンシブ）レイアウトを組み替えることができます。
グリッドを活用してレイアウトできる仕組みをグリッドシステムと言います。複雑なレイアウトでも簡単にレスポンシブになります。
どうやって動くのかもっと詳しく知りたい方は「Bootstrap テーマ」で検索してみるといっぱい出てきますし、下のリンクのような知識が蓄積されている製作会社のページにも素敵なサイト集がたくさん載っていますね。
2.グリッドシステムのオプション
Bootstrapのグリッドシステムにはあらかじめ画面幅に応じてレイアウトが切り替わるポイントを設定してあります。以下がその切り替えポイント、“ブレイクポイント”です。
それぞれおおよその各デバイスの画面幅に対応されるよう5段階で設定されています。
- Extra Smallは画面幅544px未満
- Smallは画面幅544px以上768px未満
- Mediumは画面幅768px以上992px未満
- Largeは画面幅992px以上1200px未満
- Extra Largeは画面幅1200px以上
そして、Bootstrapのグリッドシステムを使ったコーディングをする上で欠かせないのが、以下の3つのクラスです。
.container
.containerは「格納庫」を意味します。図のように.containerの中に.rowと.colが格納されています。また、上のブレイクポイントの表にもあるように、画面幅に応じて.containerの幅も5段階で変わります。
.row
.rowは行に与えるクラスです。コンテナを水平に分割して上下に並べます。図のように.rowの中に.colを定義してレイアウトを組み立てます。
.col
.colは列に与えるクラスです。.rowを縦に分割して左から右に並べます。ブログをやっていたり紙のデザインをしている人にはカラムで馴染みがあるかもしれません。
また、上の図で.col-**-4や.col-**-6などとなっていますね？
**はどのブレイクポイントで切り替えるかを決めます。例えば….col-md-4なら「画面幅992px以上(Medium=md)以上の時はグリッドを4個持つカラムを生成する」という意味になります。
.col-md-6についても図の下の行にあるようなイメージです。これらをコードにすると…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <body> <div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> </body> </html> |
このようになります。
投稿一覧の見栄えを整える
やっとindex.phpのカスタマイズです。ブログでよく見られるメインコンテンツとサイドバーの構成にしますので、index.phpのファイルをテキストエディターで開き、jumbotronのクラスがついたdivを削除してしまいましょう。そして、.containerの中身を以下のように変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="col-md-8"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> <div class="col-md-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> </div> </div> |
変更は4行目のクラスと、.col-md-4のクラスがついた3つのdivのうち、一つを削除しました。.col-mdということは「画面幅992px以上ではメインコンテンツとサイドバーが表示される」ということですね。また、この時ブレイクポイントの表から画面幅が768〜992pxの時はコンテナ幅は720pxで固定です。
サイトを確認したら大体こんな感じになったでしょうか。
投稿一覧を表示しよう！
メインコンテンツの部分に投稿一覧を表示します。メインコンテンツの部分は先ほど書き換えた.col-md-8ですね。この中身を書き換えていきます。
また、繰り返し表示されるようにループを作っていきますので、そのループの仕組みも説明します。
1.アイキャッチ入りの投稿一覧 – グリッドの入れ子構造
グリッドは複数階層の入れ子構造にできますので、これを利用してコンテンツの左側にはアイキャッチ画像、コンテンツの右側に投稿のタイトル、本文を表示してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="col-md-8"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post() ?> <div class="row"> <div class="col-xs-12 col-md-4"> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( array( 180,9999) ); ?></a> </div> <div class="col-xs-12 col-md-8"> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div> <?php the_excerpt(); ?> </div> </div> </div> <?php endwhile; ?> <?php else : ?> <div>投稿が見つかりませんでした。</div> <?php endif; ?> </div> |
スマートフォンで表示するときには、サムネイルを画面いっぱいに表示させるために、.col-xs-12を追加しています。そしてまた新しい関数が出てきましたね。次で説明します。
2.ループを理解しておきましょう
WordPressにはループという仕組みがあります。ループは記事を表示させるため、また何を表示させるかをコントロールするためにあります。基本的にブログ内に記事があるかをチェックし、もしあればその記事を表示、なければ「記事がみつかりません」と表示します。下のコードはどのようにループが動作するのかの説明です。
1 2 3 4 5 6 7 8 9 10 11 | <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post() ?> //ここからループ始まり <div class="row"> <div class="post"> ．．． </div> </div> <?php endwhile; ?> //ループ終わり。記事がある分だけコンテンツに表示。もし記事が全くなければ下の<?php else : ?>へ。 <?php else : ?> <div>投稿が見つかりませんでした。</div> <?php endif; ?> |
have_posts()関数で記事があるかどうかの判定をしthe_post()関数は投稿記事を取得して表示- 全部取得・表示されるとループが終わります
ひとまずメインコンテンツは少しブログのようになってきました。
テーマテストデータはサムネイル画像(WordPressではアイキャッチ画像)が少ないので、上の画像は少しコードと画像を足しています。
Bootstrapの説明と合わせて行ったので長くなってしまいましたが、今回はこの辺りで終わりにします。お疲れさまでした！
記事を書くにあたって参考にさせていただいたサイト
少し間が空いてしまいました。強力なBootstrapのグリッドシステムとブレークポイント、Wordpressのループの仕組みが今回のポイントでした。
このブログを開始した頃はまだ暑いくらいでしたが、だんだん風が冷たくなってきました。すでに風邪が一部で流行っているようなので、体温調節に気をつけたいですね。ねこま（@necomacustom）でした。