回答編集履歴

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; ?>

```