フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

WEB

WordPressの記事をfloatで並べたらカラム落ちでズレた!カラム落ちを回避する方法。

2016年02月17日

Pocket

最新記事を大きく・・・まではよかったが

とても・・・ズレてます

前回、最新の投稿を大きく表示するところまでは良かったのですが、記事が増えてくる毎に予期していなかった問題が発生しました。

ページネーションも使える!wordpressでoffsetを使わず最新記事だけ大きく表示する方法
ページネーションも使える!wordpressでoffsetを使わず最新記事だけ大きく表示する方法

ブログを巡回していると最新記事だけ大きくなっていて、2件目以降はアーカイブ形式に表示されるトップページをよく見ますよね。 通常のループ処理だ...

投稿の並びを単純にfloatのカラム落ちを利用していたのですが、これだと見出しの行数の増減で縦幅が変わった際に下段が右に寄ってしまうのです。

下段が右に寄る!

ズレを回避する方法

このズレを回避する方法は思いついただけで3通りあります。

1.記事をラップしている要素のhightを余裕を持った数値に設定する。
2.見出し部分にoverflow:hiddenを書いて強引に隠す。
3.リキッドレイアウトのプラグインを導入する。
4.行毎にclearfixでラップする。
1と2は少し単純すぎるのと3は少し大仰な気もするし今更感もある。
ということで後学のためにもなるので4で実践してみました。

条件を用意して適切にタグを出力する

どう出力したいか

まずどういう出力をしたいかというとこんな感じです。

出力目標

最初は単純にカウンタを設置して偶数に開始タグ、奇数に終了タグを書けばいいのかと考えましたが実はそうではありませんでした。

奇数・偶数だけの処理だと発生する問題

・1ページ目の最新記事が大枠になるので、1ページ目に並べる最初の記事は2個目になること。
・終わりの記事数が奇数になった場合終了タグが出力されないこと。
トップページ トップページ

トップページの並びの問題

これはシンプル。
2ページ目以降をデフォルトと考えたほうが楽なので、最新記事にカウントを1つ足してあげて2記事目を奇数にすれば1ページ目・2ページ目以降も共に偶数になります。

終わりの記事に終了タグを出力する問題

こちらが少し厄介でした。

まず最初に思いついたのが$postsに格納された配列数とカウンターを照合させる方法でした。

$posts
表示するページに出力する分の記事が全て格納されたグローバル変数。

$postsの配列で照合した例

ちなみに1行目のcount();は格納している数をカウントする関数です。

がしかし、さっき1ページ目の最新記事でカウンターに1を足しているので数が合わなくなります・・・
なのでカウンターで合わせるのは諦めました

最終記事のIDを取得して照合する

というわけでやや遠回りにはなりますが、最新記事を大きくした時と同じように、最終記事のIDを取得してそれで分岐してあげることにしました。

最終記事のIDで照合した例

$postsは最新記事から順番に並んでいるので、array_reverse()で配列を逆にすれば先頭が最終記事になります。
そのIDを参照すればどのページでも正常に終了タグの出力が可能になります。

まとめ

やや力技感のある対応でしたが、正常に処理されているので良しとしましょう。

前回に引き続きページ表示絡みのトラブル対応でしたが、おかげでグローバル変数の使い方の理解が少し進んだように思います。
あとはPHPの演算子や簡単な関数くらいサラッっと出てくるくらいのレベルになれたら楽になるなぁとか・・・まだまだ先は長いですね。

このカテゴリで良く読まれている記事
関連記事

COMMENT