回答編集履歴

3 ソースコード不具合修正

退会済みユーザー

退会済みユーザー

2016/09/06 22:35  投稿

こんな感じとかですか。レイアウトにBootstrapを使っていいんですよね?
**訂正(2016/09/06 22:24)**  
投稿の全件数が3の倍数じゃないときに、div.show_boxが閉じられないバグを修正。  
直したので、一応載せときます。(新しいjQueryだと動かないと思うので、この回答修正は無視してくださいな)  
```Javascript  
<script>  
jQuery(function(){  
 jQuery('.show_box:not(.show_box:first-of-type)').css('display','none');  
 jQuery('.more').nextAll('.more').css('display','none');  
 jQuery('.more').on('click', function() {  
   jQuery(this).css('display','none');  
   jQuery(this).next('.show_box').slideDown('fast');  
   jQuery(this).nextAll('.more:first').css('display','block');  
});  
});  
</script>  
```  
```PHP
<?php $counter = 0; ?>
<?php $column = 3; ?>
<?php $my_query = new WP_Query( 'category_name=event' ); ?>
<?php if ( $my_query->have_posts() ) :while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<?php if( $counter % $column == 0 ) : ?>
   <!-- show_box -->
   <div class="show_box row">
   <!-- show_box -->
   <div class="show_box row">
<?php endif; ?>
<!-- boxed-white -->
 <div class="col-xs-12 col-md-4">
 <div class="boxed-white">
     <p class="visual-img">
     <?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'list-thumbnail' ); } ?>
     </p>
     <h5 class="text-center"><a href="<?php the_permalink(); ?>">
     <?php if(mb_strlen($post->post_title, 'UTF-8')>16){
       $title= mb_substr($post->post_title, 0, 16, 'UTF-8');
       echo $title.'…';
     }else{
       echo $post->post_title;
     }
     ?>
     </a></h5>
     <hr class="boxed-grey-diagonal">
     <?php the_excerpt(); ?>
     <p class="event-more-box text-center"><a href="<?php the_permalink(); ?>">
     <i class="fa fa-angle-double-right fa-2x"></i> READ MORE | 詳細を見る</a></p>
 </div>
 </div>
<!-- /boxed-white -->
<?php if( $counter % $column == $column-1 ) : ?>
   </div>
   <!-- /show_box -->
<?php if( ($counter % $column == $column-1) || ($counter == ($my_query->post_count)-1) ) : ?>
   </div>
   <!-- /show_box -->
<?php endif; ?>
   <!-- もっと見るボタン -->
   <div class="more">
   <div class="col-md-12">
   <p class="box-more text-center">もっと見る</p>
   </div>
   </div>
   <!-- /もっと見るボタン -->
<?php if( ($counter % $column == $column-1) && ($counter != ($my_query->post_count)-1) ) : ?>
   <!-- もっと見るボタン -->
   <div class="more">
   <div class="col-md-12">
   <p class="box-more text-center">もっと見る</p>
   </div>
   </div>
   <!-- /もっと見るボタン -->
<?php endif; ?>
<?php $counter++; ?>
<?php endwhile; else: ?>
<p>記事はありません</p>
<?php endif; ?>
```
2 誤記訂正

退会済みユーザー

退会済みユーザー

2016/09/06 16:15  投稿

こんな感じとかですか。レイアウトにBootstrapを使っていいんですよね?
```PHP
<?php $counter = 0; ?>
<?php $column = 3; ?>
<?php $my_query = new WP_Query( 'category_name=idw-g1' ); ?>
<?php $my_query = new WP_Query( 'category_name=event' ); ?>
<?php if ( $my_query->have_posts() ) :while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<?php if( $counter % $column == 0 ) : ?>
   <!-- show_box -->
   <div class="show_box row">
<?php endif; ?>
<!-- boxed-white -->
 <div class="col-xs-12 col-md-4">
 <div class="boxed-white">
     <p class="visual-img">
     <?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'list-thumbnail' ); } ?>
     </p>
     <h5 class="text-center"><a href="<?php the_permalink(); ?>">
     <?php if(mb_strlen($post->post_title, 'UTF-8')>16){
       $title= mb_substr($post->post_title, 0, 16, 'UTF-8');
       echo $title.'…';
     }else{
       echo $post->post_title;
     }
     ?>
     </a></h5>
     <hr class="boxed-grey-diagonal">
     <?php the_excerpt(); ?>
     <p class="event-more-box text-center"><a href="<?php the_permalink(); ?>">
     <i class="fa fa-angle-double-right fa-2x"></i> READ MORE | 詳細を見る</a></p>
 </div>
 </div>
<!-- /boxed-white -->
<?php if( $counter % $column == $column-1 ) : ?>
   </div>
   <!-- /show_box -->
   <!-- もっと見るボタン -->
   <div class="more">
   <div class="col-md-12">
   <p class="box-more text-center">もっと見る</p>
   </div>
   </div>
   <!-- /もっと見るボタン -->
<?php endif; ?>
<?php $counter++; ?>
<?php endwhile; else: ?>
<p>記事はありません</p>
<?php endif; ?>
```
1 ソース記述漏れ訂正

退会済みユーザー

退会済みユーザー

2016/09/06 16:13  投稿

こんな感じとかですか。レイアウトにBootstrapを使っていいんですよね?
```PHP<?php $counter = 0; ?>
```PHP
<?php $counter = 0; ?>
<?php $column = 3; ?>
<?php $my_query = new WP_Query( 'category_name=idw-g1' ); ?>
<?php if ( $my_query->have_posts() ) :while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<?php if( $counter % $column == 0 ) : ?>
   <!-- show_box -->
   <div class="show_box row">
<?php endif; ?>
<!-- boxed-white -->
 <div class="col-xs-12 col-md-4">
 <div class="boxed-white">
     <p class="visual-img">
     <?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'list-thumbnail' ); } ?>
     </p>
     <h5 class="text-center"><a href="<?php the_permalink(); ?>">
     <?php if(mb_strlen($post->post_title, 'UTF-8')>16){
       $title= mb_substr($post->post_title, 0, 16, 'UTF-8');
       echo $title.'…';
     }else{
       echo $post->post_title;
     }
     ?>
     </a></h5>
     <hr class="boxed-grey-diagonal">
     <?php the_excerpt(); ?>
     <p class="event-more-box text-center"><a href="<?php the_permalink(); ?>">
     <i class="fa fa-angle-double-right fa-2x"></i> READ MORE | 詳細を見る</a></p>
 </div>
 </div>
<!-- /boxed-white -->
<?php if( $counter % $column == $column-1 ) : ?>
   </div>
   <!-- /show_box -->
   <!-- もっと見るボタン -->
   <div class="more">
   <div class="col-md-12">
   <p class="box-more text-center">もっと見る</p>
   </div>
   </div>
   <!-- /もっと見るボタン -->
<?php endif; ?>
<?php $counter++; ?>
<?php endwhile; else: ?>
<p>記事はありません</p>
<?php endif; ?>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る