ワードプレスのループ使用時のもっと見るボタンの設置位置

前提・実現したいこと

https://teratail.com/questions/46990

上記リンク先を参考にWordPressのカテゴリー一覧ページにループを使用し、「もっと見るボタン」を設置しています。
実現したいことは上記リンク先の質問者さんとほぼ同じで、

初期状態から「もっと見るボタン」をクリックすると、初期状態と同じだけの数の一覧が追加で表示され、
「もっと見る」という文字が「閉じる」に変わるというものです。

また、6つずつもっと見るボタンで表示をさせたいと思っています。

タイトル
□　□　□
□　□　□
もっと見る

　↓

タイトル
□　□　□
□　□　□
□　□　□
□　□　□
閉じる

しかし、作成したソースコードでは以下のような問題が発生しています。

発生している問題

本来であれば初期状態で隠したい6つの項目が表示されており、
初期状態で表示したい6つの項目が隠されて「もっと見るボタン」が表示されている状態です。

タイトル
もっと見る
□　□　□
□　□　□

　↓

タイトル
□　□　□
□　□　□
閉じる
□　□　□
□　□　□

該当のソースコード

PHP
1<?php get_header(); ?>
2
3<div id="works">
4  <div class="container">
5    <div class="row">
6      <div class="eight columns">
7        <div class="title clearfix">
8        <img class="face" src="<?php echo get_template_directory_uri(); ?>/images/face.jpg" alt="face">
9        <h1 class="other_h1">タイトル</span></h1>
10        </div>
11
12
13<?php $counter = 0; ?>
14<?php $column = 6; ?>
15
16<?php $my_query = new WP_Query( 'category_name=works' ); ?>
17<?php if ( $my_query->have_posts() ) :while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
18
19<?php if( $counter % $column == 0 ) : ?>
20<div class="show_box">
21        <div class="clearfix">
22<?php endif; ?>
23
24        <div class="works_box">
25            <a href="<?php the_permalink(); ?>">
26                <?php the_post_thumbnail('thumbnail'); ?>
27                <div class="works-box-inner">
28                    <div class="text-center">
29                        <h3><?php the_title(); ?></h3>
30                        <small><?php the_time('Y.m.d'); ?></small>
31                        <span class="button-readmore">Read More</span>
32                    </div>
33                </div>
34            </a>
35        </div>
36        
37<?php if( ($counter % $column == $column-1) || ($counter == ($my_query->post_count)-1) ) : ?>
38    </div>
39
40<?php endif; ?>
41<?php if( ($counter % $column == $column-1) && ($counter != ($my_query->post_count)-1) ) : ?>
42
43    <div class="button">
44      <p>もっと見る</p>
45    </div>
46</div>
47<?php endif; ?>
48
49<?php $counter++; ?>
50
51<?php endwhile; else: ?>
52<p>記事はありません</p>
53<?php endif; ?>
54
55
56</div>
57</div>
58
59      <div class="four columns">
60        <?php get_sidebar(); ?>
61      </div>
62    </div>
63  </div>
64</div>
65
66
67<?php get_footer();

javascript
1
2$(function() {
3    $('.button').prevAll().hide();
4    $('.button').click(function() {
5        if ($(this).prevAll().is(':hidden')) {
6            $(this).prevAll().slideDown();
7            $(this).text('閉じる').addClass('close');
8        }
9        else {
10            $(this).prevAll().slideUp();
11            $(this).text('もっと見る').removeClass('close');
12        }
13    });
14});
15

試したこと

https://teratail.com/questions/46990

上記リンク先のJavaScriptも試してみましたが、私自身が初心者で「閉じる」と「もっと見る」の入れ替えカスタマイズができなかったため、他のサイトを参考に作成しています。

補足情報（FW/ツールのバージョンなど）

WordPressを使用しています。
PHP7.2.6

行動規範の内容に同意します

回答1件

自己解決

自己解決しました！

PHP
1
2<?php get_header(); ?>
3
4<div id="works">
5  <div class="container">
6    <div class="row">
7      <div class="eight columns">
8        <div class="title clearfix">
9        <img class="face" src="<?php echo get_template_directory_uri(); ?>/images/face.jpg" alt="face">
10        <h1 class="other_h1">タイトル</h1>
11        </div>
12
13
14<?php $counter = 0; ?>
15<?php $column = 6; ?>
16
17<?php $my_query = new WP_Query( 'category_name=works' ); ?>
18<?php if ( $my_query->have_posts() ) :while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
19
20<?php if( $counter % $column == 0 ) : ?>
21<div class="show_box">
22        <div class="clearfix">
23<?php endif; ?>
24
25        <div class="works_box">
26            <a href="<?php the_permalink(); ?>">
27                <?php the_post_thumbnail('thumbnail'); ?>
28                <div class="works-box-inner">
29                    <div class="text-center">
30                        <h3><?php the_title(); ?></h3>
31                        <small><?php the_time('Y.m.d'); ?></small>
32                        <span class="button-readmore">Read More</span>
33                    </div>
34                </div>
35            </a>
36        </div>
37        
38<?php if( ($counter % $column == $column-1) || ($counter == ($my_query->post_count)-1) ) : ?>
39    </div>
40
41<?php endif; ?>
42<?php if( ($counter / $column > 1) && (($counter % $column == $column-1) || ($counter == ($my_query->post_count)-1) )) : ?>
43
44    <div class="button">
45      <p>もっと見る</p>
46    </div>
47</div>
48<?php endif; ?>
49
50<?php $counter++; ?>
51
52<?php endwhile; else: ?>
53<p>記事はありません</p>
54<?php endif; ?>
55
56
57</div>
58</div>
59
60      <div class="four columns">
61        <?php get_sidebar(); ?>
62      </div>
63    </div>
64  </div>
65</div>
66
67
68<?php get_footer();
69

ポイントは「もっと見るボタン」のif文でした。

PHP
1<?php if( ($counter % $column == $column-1) && ($counter != ($my_query->post_count)-1) ) : ?>

↑を↓に書き換えると思い通りの実装になりました。

PHP
1<?php if( ($counter / $column > 1) && (($counter % $column == $column-1) || ($counter == ($my_query->post_count)-1) )) : ?>

投稿2019/04/19 03:44

nonoysng

総合スコア12

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！