0

初心者です。ワードプレスでホームページを作成していて、
現在、投稿のアーカイブページでページネーションの設定を
行ってます。
他のページのボタンを押しても、1ページ目が表示されます。
解決方法が分かる方お願いいたします。

PHPわかりませんので、詳しく説明していただけますと幸いです。

下記がコードになります。

PHP

<?php the_posts_pagination(
 
    array(  
        'mid_size'      => 2, // 現在ページの左右に表示するページ番号の数
        'prev_next'     => false, // 「前へ」「次へ」のリンクを表示する場合はtrue
        'type'          => 'list', // 戻り値の指定 (plain/list)
        'prev_text'     => __( '前へ'), // 「前へ」リンクのテキスト
        'next_text'     => __( '次へ'), // 「次へ」リンクのテキスト
        'paged' => get_query_var('paged') //これを加えました★) ); 
    )
); ?>

CSS

.pagination {
  display: flex;
}

h2.screen-reader-text {
  display: none;
}

ul.page-numbers {
  display: flex;

  li {
    width: 3.75vw;
    height: 3.75vw;
    border: 1px solid #1b224c;
    text-align: center;
    line-height: 3.90625vw;
    margin-right: 1.484375vw;
    
  }
   li:last-child {
  margin-right: 0vw;
}

  span.page-numbers.current {
    font-size: 1.6rem;
    text-decoration: none;
    font-weight: bold;
    color: #FFF; /* 現在のページの文字色 */
    background: #1b224c; /* 現在のページの背景色 */ 
    padding: 1.3vw 1.4vw 1.3vw 1.4vw;
  }

  li:nth-of-type(4) {
    border: none;
  }
}

span.page-numbers.current {
  font-size: 1.6rem;
  text-decoration: none;
  color: #1b224c;
  font-weight: bold;
}

a.page-numbers {
  font-size: 1.6rem;
  text-decoration: none;
  color: #1b224c;
  font-weight: bold;
}
.pagination {
  display: flex;
  margin: 0 auto;
  width: 25.46875vw;
  padding-bottom: 3.515625vw;
}

コード自体はネットにあったものに、'paged' => get_query_var('paged') //これを加えました★) );
これを他のサイトから拾いました(これを入れると治ることもあるようですが治りません。)

また、2ページめに移動したときに、4のカッコが付きません。
どのようにしたら良いのでしょうか、教えていただけると幸いです。

急いでますので、他のサイトでも質問する予定です。

画像の説明をここに入力

画像の説明をここに入力

1
  • パラメータ:'paged'は、 the_posts_pagination()やpaginate_links()関数のパラメータではないのでは、現在のページを指定するなら'current'では
    – yyz
    2022年3月29日 0:37

1 件の回答 1

1

プラグイン(WP-PageNavi)を追加して1からやることにしました。

  <div class="pagination">
    <div class="list-box">
        <ul>
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $the_query = new WP_Query( array(
            'post_status'    => 'publish',
            'post_type'      => 'post', // ページの種類(例、page、post、カスタム投稿タイプ)
            'paged'          => $paged,
            'posts_per_page' => 10, // 表示件数
            'orderby'        => 'date',
            'order'          => 'DESC'
        ) );
        if ($the_query->have_posts()) :
            while ($the_query->have_posts()) : $the_query->the_post();
            ?>
                <?php // ブログの一覧を表示する start ?>
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <article class="blog-list__list-item">
                        <a href="<?php the_permalink(); ?>" class="blog-item">
                            <?php // アイキャッチを表示させる start ?>    
                            <div class="blog-item__thumbnail-second">
                                <?php if(has_post_thumbnail()): ?>
                                <img class="blog-item__thumbnail-image-second" src="<?php the_post_thumbnail_url('large'); ?>">
                                <?php endif; ?>
                            </div>
                            <?php // アイキャッチを表示させる end ?>
                            <div class="blog-item__content">
                                <?php // タイトルを表示させる start ?>
                                <h3 class="blog-item__title"><?php the_title(); ?></h3>
                                <?php // タイトルを表示させる end ?>
                                <?php // 抜粋を表示させる start ?>
                                <h3 class="blog-item__read"><?php the_excerpt(); ?></h3>
                                <?php // 抜粋を表示させる end ?>
                                <div class="blog-item__button">
                                    <span class="blog-item__button-more">記事を読む</span>
                                </div>
                            </div>
                        </a>
                    </article>
                    <?php break; ?>
                    <?php endwhile; ?>
                    <?php while (have_posts()) : the_post(); ?>

                    <article class="blog-list__list-item">
                        <a href="<?php the_permalink(); ?>" class="blog-item">
                            <?php // アイキャッチを表示させる start ?>    
                            <div class="blog-item__thumbnail">
                                <?php if(has_post_thumbnail()): ?>
                                <img class="blog-item__thumbnail-image" src="<?php the_post_thumbnail_url('large'); ?>">
                                <?php endif; ?>
                            </div>
                            <?php // アイキャッチを表示させる end ?>
                            <div class="blog-item__content">
                                <?php // タイトルを表示させる start ?>
                                <h3 class="blog-item__title"><?php the_title(); ?></h3>
                                <?php // タイトルを表示させる end ?>
                                <?php // 抜粋を表示させる start ?>
                                <h3 class="blog-item__read"><?php the_excerpt(); ?></h3>
                                <?php // 抜粋を表示させる end ?>
                                <div class="blog-item__button">
                                    <span class="blog-item__button-more">記事を読む</span>
                                </div>
                            </div>
                        </a>
                    </article>
                    <?php endwhile; ?>
<?php endif; ?>

                <?php // ブログの一覧を表示する end ?>
                <?php break; ?>
            <?php
            endwhile;
        else:
            echo '<div><p>ありません。</p></div>';
        endif;
        ?>
        </ul>
    </div>

これで出来ました。
一旦位置から違うネットで拾ったコードを使いやり直し、

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<!-- 最初の投稿のレイアウト -->

<!-- 1件表示してbreakでループを抜ける -->
<?php break; ?>
<?php endwhile; ?>

<!-- 2件目からループが始まるはず -->
<?php while (have_posts()) : the_post(); ?>

<!-- 2件目以降の投稿のレイアウト -->

<?php endwhile; ?>
<?php endif: ?>

このようにすることで出来ました。

<?php break; ?>

を最後に追加してループを止めることで完成です。
ご協力くださった、皆様ありがとうございました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。