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

Pocket

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

どう出力したいか

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

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

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

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

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

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

<?php
		if( have_posts() ) :
			while(have_posts()) : the_post();
			$counter++;

				if($post->ID == $first_post_id):
					$counter++;
?>

		<!--　1ページ目の記述  -->

<?php
				else :
					if($counter%2) ://カウンターが偶数の場合
						echo '<div class="clearfix">';
					endif;//開始タグ出力分岐終了
?>

		<!--　2ページ目の記述  -->

<?php
					if(!($counter%2)  ://カウンターが奇数の場合
						echo '</div>';
					endif;//終了タグ出力分岐終了
				endif;//最新記事・2記事目以降の分岐終了
			endwhile;
		endif;
?>

<?php

if( have_posts() ) :

while(have_posts()) : the_post();

$counter++;

if($post->ID == $first_post_id):

$counter++;

<?php

else :

if($counter%2) ://カウンターが偶数の場合

echo '<div class="clearfix">';

endif;//開始タグ出力分岐終了

<?php

if(!($counter%2) ://カウンターが奇数の場合

echo '</div>';

endif;//終了タグ出力分岐終了

endif;//最新記事・2記事目以降の分岐終了

endwhile;

endif;

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

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

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

$posts

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

$postsの配列で照合した例

<?php　　　$post_count = count($posts);//記事数をカウント
		if( have_posts() ) :
			while(have_posts()) : the_post();
			$counter++;

				if($post->ID == $first_post_id):
					$counter++;
?>

		<!--　1ページ目の記述  -->

<?php
				else :
					if($counter%2) ://カウンターが偶数の場合
						echo '<div class="clearfix">';
					endif;//開始タグ出力分岐終了
?>

		<!--　2ページ目の記述  -->

<?php
					if(!($counter%2) || $counter == $post_count) ://カウンターが奇数かカウントが合致した場合
						echo '</div>';
					endif;//終了タグ出力分岐終了
				endif;//最新記事・2記事目以降の分岐終了
			endwhile;
		endif;
?>

<?php　　　$post_count = count($posts);//記事数をカウント

if( have_posts() ) :

while(have_posts()) : the_post();

$counter++;

if($post->ID == $first_post_id):

$counter++;

<?php

else :

if($counter%2) ://カウンターが偶数の場合

echo '<div class="clearfix">';

endif;//開始タグ出力分岐終了

<?php

if(!($counter%2) || $counter == $post_count) ://カウンターが奇数かカウントが合致した場合

echo '</div>';

endif;//終了タグ出力分岐終了

endif;//最新記事・2記事目以降の分岐終了

endwhile;

endif;

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

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

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

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

最終記事のＩＤで照合した例

<?php　　　$last_posts = array_reverse($posts);//$postsの配列を逆にする
		$last_post = $last_posts[0];//0番目の記事を取得
		$last_post_id = $last_post->ID;//記事IDを取得
		if( have_posts() ) :
			while(have_posts()) : the_post();
			$counter++;

				if($post->ID == $first_post_id):
					$counter++;
?>

		<!--　1ページ目の記述  -->

<?php
				else :
					if($counter%2) ://カウンターが偶数の場合
						echo '<div class="clearfix">';
					endif;//開始タグ出力分岐終了
?>

		<!--　2ページ目の記述  -->

<?php
					if(!($counter%2) || $post->ID == $last_post_id) ://カウンターが奇数か最終記事かの場合実行
						echo '</div>';
					endif;//終了タグ出力分岐終了
				endif;//最新記事・2記事目以降の分岐終了
			endwhile;
		endif;
?>

<?php　　　$last_posts = array_reverse($posts);//$postsの配列を逆にする

$last_post = $last_posts[0];//0番目の記事を取得

$last_post_id = $last_post->ID;//記事IDを取得

if( have_posts() ) :

while(have_posts()) : the_post();

$counter++;

if($post->ID == $first_post_id):

$counter++;

<?php

else :

if($counter%2) ://カウンターが偶数の場合

echo '<div class="clearfix">';

endif;//開始タグ出力分岐終了

<?php

if(!($counter%2) || $post->ID == $last_post_id) ://カウンターが奇数か最終記事かの場合実行

echo '</div>';

endif;//終了タグ出力分岐終了

endif;//最新記事・2記事目以降の分岐終了

endwhile;

endif;

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

まとめ

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

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

参考になった本

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
プライム・ストラテジー株式会社 (著)

基礎からのWordPress　改訂版 (BASIC LESSON For Web Engineers)
高橋のり (著)

- 「メニューの子カテゴリをjqueryでフワッと表示する」へのコメント
- 2018年11月30日 9:34 PM
- とおりすがり
ありがとうございます。とても良い記事に感謝です。参考にさせて頂きました。
あと、post-typeではなくて、post_typeかもしれません。

このコメントに返信する
- 「メニューの子カテゴリをjqueryでフワッと表示する」へのコメント
- 2018年11月30日 10:09 PM
- ちくちく
コメントありがとうございます。
参考にになったようで何よりです！

あと、ご指摘ありがとうござます。
post_typeでしたね…早速修正しておきました。

このコメントに返信する

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