WordPressの記事を3カラムずつ表示させる方法

WordPressでWebサイトを作成していて、記事一覧のページ(ArticleやCategory)で横一列に記事を並べて表示したいという場合があると思います。そんな時にどうやればいいのかという、ところを紹介してみようと思います。やり方は、今日紹介するより良い物もあるかも知れないので、極めて行きたい方は、色々試行錯誤してみると良いかも知れませんね!
  1. $posts配列を分割してしまう方法
  2. WordPressのループってなんだ
  3. WordPressのループを使って3件ずつ記事を表示させる

$posts配列を分割してしまう方法

$posts自身をブン回すというのは、推奨されていないとかセキュアじゃないとかいう感じの事を風の噂で聞いたので、仕事はWordPressのループを使ってやるようにしていますが、個人でやってるものに関しては未だにグローバル変数をブン回しています。と前おきした上で、$postsであれば、phpの関数のgettypeで型を調べた結果配列なので、array_chunkを利用することができます。この関数は、指定したサイズ毎に配列グループを精製するので、こういう事をやるのに非常に便利な関数となっております。array_chunk($posts, 3)の結果をforeach等で回して結果を取得すれば、好きなように分割することができます。ただ、foreachでキー配列と値の配列を回さないといけないので、ループは2回書かなければならなくなります。

WordPressのループってなんだ

WordPressの関数を使って入力された記事のデータ取得、方法を公式が体系化したものでかつ、制作者間で定着した常識だと思っています。さっきのは$postsがコード上に出てきますが、こちらはWordPressの定義した何処でも呼べるデータ変数$postsを一切表に出さず、記事データの取得、表示が行えます。取得の為に利用しなきゃいけない関数は以下の通り。
関数名 パラメータ 説明
have_posts なし 記事データに中身があるかどうかを調べて真偽値を返す
the_post なし 記事データのループのカウントを進める。記事の配列データを参照する場所を変えるのか、記事の配列データをSQLしなおしてるのかは謎だけど、多分何かが行われている…。query.phpの$wp_queryはどんなクラスでどんなメソッドが入ってるのかはまた今度調べたい。

WordPressのループを使って3件ずつ記事を表示させる

横一列に記事を並べて表示したいという要望のHTML構造を考えるとき、行1行に3列のデータを表示させるということを考えます。言い換えると、行の役割を持たせたsectionタグを用意して、中に記事のラッパー的役割を持たせたarticleタグを用意するということを考えます。となると、articleタグは考えずに、sectionタグの開閉のみに注力すると良いと思います。ループの外でまずsectionを書いておいて、2の倍数毎にsectionを閉じて、sectionを開始すればいいです。言ってることをプログラム化するとこうなります。 WordPressでやるならこうなります。 3で割り切りたいなら

おわりに

これを書いてる途中、GistにYour account has been flagged.というエラーメッセージが表示されました。ここで書いたスニペットが表示できなくなるっぽいので、とりあえずGithubにメールしておきました。プレビュー中にGist書いてたらそうなったということでここに報告しておきます…。以上、テクノブレイブ開発1Gでした…。
料金表ナビゲーション 料金表ナビゲーション

おすすめ記事