前提・実現したいこと
スライドショーを二段組で表示させたいです。
以下、実現したい配置を数字で表現してます。
番号は小さい順から新着記事にしたいです。
135
246
添付画像が理想の形です。
もしわかる方いましたら何卒ご教示願いたいです!
よろしくお願いいたします!
難しい
swiper-slideクラスのかたまり(縦2記事)を3つ表示させたいが、、、
そのロジックが全くわからないです。
エラー
・表示される記事がすべておなじになってしまう
・表示数も2 2 2にならない
・表示数が1 2 3になる
front-page.php
php
1<div class="swiper-container Infomation__Blog__Item__Box"> 2 <div class="swiper-wrapper"> 3 <?php 4 $args = array( 5 'post_type' => 'post', 6 'posts_per_page' => 3, 7 ); ?> 8 <?php 9 $my_query = new WP_Query($args); 10 if ($my_query->have_posts()): $separate = 6; $index = 0; while ( $my_query->have_posts() ) : $my_query->the_post();?> 11 <? if ( ( $count % $separate ) === 0 ) { // $count を $separate で割った余りが 0 の場合 12 $index++; // 現在のブロックをプラス1 13 $count = 0; // ブロック内の記事数リセット 14 } ?> 15 <?php 16 $entries[$index][$count] = $args; // $argsを配列に入れる 17 $count++; // ブロック内の記事数をプラス1 18 ?> 19 <div class="swiper-slide"> 20 <div class="Infomation__Blog__Slide"> 21 <?php foreach ( $entries as $entry ) : ?> 22 <a href="<?php the_permalink(); ?>" class="Infomation__Blog__Link"> 23 <?php foreach ( $entry as $detail ) : ?> 24 <div class="Infomation__Blog__Item"> 25 <div class="Infomation__Blog__Item__Left"> 26 <img src="<?= get_template_directory_uri(); ?>/resources/images/Pages/Infomation-Blog-Item-One-Img.png" class="Infomation-Blog-Item-Img"> 27 </div> 28 <div class="Infomation__Blog__Item__Right"> 29 <h4 class="Infomation-Blog-Item-Title"> 30 <?php the_title(); ?> 31 </h4> 32 <p class="Infomation-Blog-Item-Date"> 33 日時:<?php the_time('Y.m.d'); ?> 34 </p> 35 <p class="Infomation-Blog-Item-Text"> 36 <?php echo mb_substr(strip_tags($post-> post_content),0,80) . '...'; ?> 37 </p> 38 <p class="Infomation-Blog-Item-SP-Text"> 39 <?php echo mb_substr(strip_tags($post-> post_content),0,54) . '...'; ?> 40 </p> 41 </div> 42 </div> 43 <?php endforeach; ?> 44 </a> 45 <?php endforeach; ?> 46 </div> 47 </div> 48 <?php endwhile; ?> 49 <?php endif; ?> 50 <?php wp_reset_postdata(); ?> 51 </div> 52 <div class="swiper-button-prev"> 53 <div class="Infomation__Blog__NextBtn__Box"> 54 <img src="<?= get_template_directory_uri(); ?>/resources/images/Pages/Infomation-Event-NextBtn.png" class="Infomation-Blog-NextBtn"> 55 </div> 56 </div> 57 <div class="swiper-button-next"> 58 <div class="Infomation__Blog__NextBtn__Box"> 59 <img src="<?= get_template_directory_uri(); ?>/resources/images/Pages/Infomation-Event-NextBtn.png" class="Infomation-Blog-NextBtn"> 60 </div> 61 </div> 62</div>
回答1件
あなたの回答
tips
プレビュー