記事が増えると２列以上になるリスト【wordpress】
wordpressの記事をカテゴリーごとにflexボックスに入れて表示したとき、一方は多くて一方が少なかったら多い方に高さがあってしまって不格好です。
そんなときは列数を増やそう！
→
でも意外と簡単。
css3のcolumnsプロパティを使います。さすがCSS3！！！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
global $post; $args = ループの詳細; $myPosts = get_posts($args); if ($myPosts) : $post_num = $field->count; if ($post_num > 10) { $post_num_sho = ceil($post_num / 10); ?> <ol style="-moz-columns: 12em <?php echo $post_num_sho; ?>; -webkit-columns: 12em <?php echo $post_num_sho; ?>; -o-columns: 12em <?php echo $post_num_sho; ?>; -ms-columns: 12em <?php echo $post_num_sho; ?>;"> <?php } ?> <?php foreach ($myPosts as $post) : setup_postdata($post); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; </ol> endif; wp_reset_postdata(); |
数字は適宜変更してください。
うちの小説ページでは10より記事数が多かったら記事数を10で割り、その商で列数を決めています。
columnsの12emというのは大体１行12文字でっていう指定です。pxで指定もいいけど、レスポンシブになるように文字数で指定してる。ちなみにこの幅指定がないと横幅いっぱい使った２列になる。
それにしても$post_num_shoって、商を求めるからこんな名前にしたんだけどもっといい変数名思いつかなかったのか私……。変数名がいつもダサい。
まとめ
columnsプロパティの列数を記事数で求めたスタイルをolに指定する。
しかし、flexボックスでずらーっとターム一覧表示するサイトなんて他にあるのかな。