製品のグリッド レイアウトを持つ Web ストアに取り組んでいます。
グリッドのデフォルトは、横に 5 項目、下に 4 項目: 20 項目です。
CSS を使用すると、項目<li>
が均等に配置されるように調整されます。ただし、5 の倍数未満の場合、正当化された間隔ではその行に配置する項目が 5 未満になるため、間隔が歪んでしまい、空白が追加されます。参照: http://jsfiddle.net/DmgeF/1/
これで、 を使用してページごとにリッスンする製品の数がわかります$count_page = $wp_query->post_count
。1 ページに最大 200 個のアイテムをリストできます。
<li>
私の考えは、間隔を均等にするために 1、2、3、または 4 つの余分な<li>
sが必要な場合は、最後の行にダミー要素を追加することです。
私が試してみました:
// GET MULTIPLES OF 5
$array_main = array_fill(1, 40, null);
array_walk($array_main, function(&$item, $key){ $item = $key * 5; });
// GET $array_main MINUS OTHERS
$minus_1 = $minus_2 = $minus_3 = $minus_4 = array();
foreach($array_main as $key => $value) {
$minus_1[$key] = $value - 1 ;
$minus_2[$key] = $value - 2 ;
$minus_3[$key] = $value - 3 ;
$minus_4[$key] = $value - 4 ;
}
その結果、項目数からmissingのn<li>
値を引いた結果になります。
私が理解するのに苦労しているのは、<li>
必要な行方不明の数を計算する方法です。
何かのようなもの:
if($count_page IS A VALUE OF $minus_1) { echo '<li></li>'; }
if($count_page IS A VALUE OF $minus_2) { echo '<li></li><li></li>'; }
if($count_page IS A VALUE OF $minus_3) { echo '<li></li><li></li><li></li>'; }
if($count_page IS A VALUE OF $minus_4) { echo '<li></li><li></li><li></li><li></li>'; }