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.2

テーマ開発に関連した説明を挟みましたが、再開します。前回Initializerで見た目のひな形を作り、ヘッダーとフッターをindex.phpから分割までを行いました。今回は投稿一覧となるindex.phpのカスタマイズについて説明します。
レスポンシブデザインに対応したBootstrapのグリッドシステムの仕組みと、投稿一覧のループという概念について触れていきます。

Bootstrapについてもう少し

前回「1からCSSを書かなくてもルールに沿ってHTMLを書いていけば大まかなレイアウトが作れ、細かい調整については自身でCSSを書き足すだけ、という大きなメリットがあります。」と説明しましたが、その大きなメリットがグリッドシステムです。

1.グリッドシステムって?

Excelなどの表計算ソフトを使ったことのある方なら飲み込みが早いかもしれませんね。セルを結合して使う感覚です。
Bootstrapの場合には12のブロックが横に均等に並んでいて、これをグリッドと呼んでいます。そして、12のブロックを適当な幅に結合してレイアウトするわけです。
grid
グリッドに沿って文章や画像を配置していけば、スマートフォンやタブレットなどのデバイスに関係なく画面サイズに応じて(=レスポンシブ)レイアウトを組み替えることができます。
グリッドを活用してレイアウトできる仕組みをグリッドシステムと言います。複雑なレイアウトでも簡単にレスポンシブになります。
frame-resp
どうやって動くのかもっと詳しく知りたい方は「Bootstrap テーマ」で検索してみるといっぱい出てきますし、下のリンクのような知識が蓄積されている製作会社のページにも素敵なサイト集がたくさん載っていますね。

2.グリッドシステムのオプション

Bootstrapのグリッドシステムにはあらかじめ画面幅に応じてレイアウトが切り替わるポイントを設定してあります。以下がその切り替えポイント、“ブレイクポイント”です。
break-point.png

それぞれおおよその各デバイスの画面幅に対応されるよう5段階で設定されています。

  • Extra Smallは画面幅544px未満
  • Smallは画面幅544px以上768px未満
  • Mediumは画面幅768px以上992px未満
  • Largeは画面幅992px以上1200px未満
  • Extra Largeは画面幅1200px以上

そして、Bootstrapのグリッドシステムを使ったコーディングをする上で欠かせないのが、以下の3つのクラスです。
gridoption

.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個持つカラムを生成する」という意味になります。
row-col
.col-md-6についても図の下の行にあるようなイメージです。これらをコードにすると…

このようになります。

投稿一覧の見栄えを整える

やっとindex.phpのカスタマイズです。ブログでよく見られるメインコンテンツとサイドバーの構成にしますので、index.phpのファイルをテキストエディターで開き、jumbotronのクラスがついたdivを削除してしまいましょう。そして、.containerの中身を以下のように変更します。

変更は4行目のクラスと、.col-md-4のクラスがついた3つのdivのうち、一つを削除しました。.col-mdということは「画面幅992px以上ではメインコンテンツとサイドバーが表示される」ということですね。また、この時ブレイクポイントの表から画面幅が768〜992pxの時はコンテナ幅は720pxで固定です。

col-md-8サイトを確認したら大体こんな感じになったでしょうか。

投稿一覧を表示しよう!

メインコンテンツの部分に投稿一覧を表示します。メインコンテンツの部分は先ほど書き換えた.col-md-8ですね。この中身を書き換えていきます。
また、繰り返し表示されるようにループを作っていきますので、そのループの仕組みも説明します。

1.アイキャッチ入りの投稿一覧 – グリッドの入れ子構造

グリッドは複数階層の入れ子構造にできますので、これを利用してコンテンツの左側にはアイキャッチ画像、コンテンツの右側に投稿のタイトル、本文を表示してみます。

スマートフォンで表示するときには、サムネイルを画面いっぱいに表示させるために、.col-xs-12を追加しています。そしてまた新しい関数が出てきましたね。次で説明します。

2.ループを理解しておきましょう

WordPressにはループという仕組みがあります。ループは記事を表示させるため、また何を表示させるかをコントロールするためにあります。基本的にブログ内に記事があるかをチェックし、もしあればその記事を表示、なければ「記事がみつかりません」と表示します。下のコードはどのようにループが動作するのかの説明です。

  • have_posts()関数で記事があるかどうかの判定をし
  • the_post()関数は投稿記事を取得して表示
  • 全部取得・表示されるとループが終わります

ひとまずメインコンテンツは少しブログのようになってきました。
loop-testテーマテストデータはサムネイル画像(WordPressではアイキャッチ画像)が少ないので、上の画像は少しコードと画像を足しています。
Bootstrapの説明と合わせて行ったので長くなってしまいましたが、今回はこの辺りで終わりにします。お疲れさまでした!

記事を書くにあたって参考にさせていただいたサイト



少し間が空いてしまいました。強力なBootstrapのグリッドシステムとブレークポイント、Wordpressのループの仕組みが今回のポイントでした。
このブログを開始した頃はまだ暑いくらいでしたが、だんだん風が冷たくなってきました。すでに風邪が一部で流行っているようなので、体温調節に気をつけたいですね。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP