Zenn
🔖

wordPressのコメントのページネーションのコード

2023/09/15に公開
PHP
WordPress
tech

wordPressのページネーションですが、ページが無いときは、要素が消えます。
そのためボタンを常に表示するデザインが、できないのです。
今回ページの先頭、前、次、ページの最後の４つのボタンが常に表示される形のページネーションのコードを書くことができました。
といっても私が自分で書いたのではなく、ChatGPTとマイクロソフトのBingのお世話になって書きました。
ChatGPTだけでは、上手く行かなかったです。
Bingで検索して、コメントのページネーションのコードがあるページを教えてもらうことができ、さらにページの先頭と最後のコードの書き方も教えてもらえたので、完成することができました。

私が見つけたベースになるコードを、ChatGPTに伝えました。
そして、ボタンの動作や文字などの仕様も箇条書きで伝えました。

そうしたら一日試行錯誤して何度も作り直したのに、見本のコード付きでChatGPTに書いてもらったら、数分で完成しました。

一からコードをChatGPTに書いてもらうことは難しく、見本や関連するコードを提示できたら、早くプログラムを完成させることができると実感しました。

今回のコードです。

comments.phpに、設置しました。

        <?php
         if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>

    <nav class="navigation comment-navigation" role="navigation">
        <h3 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'あなたが使っているテーマの名前' ); ?></h3>

        <?php 
        $current_page = get_query_var( 'cpage' ) ? intval( get_query_var( 'cpage' ) ) : 1;
        $pages = get_comment_pages_count();

        // コメントの先頭へのリンク
        $first_link = add_query_arg( 'cpage', 1, get_permalink( get_the_ID() ) );
        if ($current_page != 1) {
            echo '<a href="' . esc_url($first_link) . '">|<</a>';
        } else {
            echo '<span>|<</span>';
        }

        // コメント前へのリンク
        if ($current_page > 1) {
            echo '<div class="nav-previous">';
            previous_comments_link( '＜前' );
            echo '</div>';
        } else {
            echo '<span>＜前</span>';
        }

        // コメント次へのリンク
        if ($current_page < $pages) {
            echo '<div class="nav-next">';
            next_comments_link( '次＞' );
            echo '</div>';
        } else {
            echo '<span>次＞</span>';
        }

        // 最後のページへのリンク
        $last_link = add_query_arg( 'cpage', $pages, get_permalink( get_the_ID() ) );
        if ($current_page != $pages) {
            echo '<a href="' . esc_url($last_link) . '">>|</a>';
        } else {
            echo '<span>>|</span>';
        }
        ?>

    </nav><!-- .comment-navigation -->

<?php endif; // Check for comment navigation ?>

リンクがない場合は、代わりに<span>タグを使用してボタンのスタイルを適用し、クリックできないようにしています。

CSSです。子テーマのstyle.cssなどに追加してください。

.comment-navigation a {
    background-color: #e0e0e0; /* 薄い灰色 */
    color: blue; /* 青色 */
    padding: 5px 10px;
    margin: 0 5px;
    display: inline-block;
    text-decoration: none;
    border-radius: 3px;
}

.comment-navigation span {
    background-color: gray; /* 灰色 */
    color: black; /* 黒色 */
    padding: 5px 10px;
    margin: 0 5px;
    display: inline-block;
    border-radius: 3px;

}

.comment-navigation div {
    display: inline-block;

}

.comment-navigation {
    text-align: center; /* テキストとして中央寄せ */
    width: 100%; /* 全幅を取る */
    box-sizing: border-box; /* paddingやborderを含めた全幅を100%にする */
}

.comment-navigation a, .comment-navigation span {
    padding: 10px 30px; /* 上下10px、左右20pxのパディングを設定 */
    font-size: 16px; /* フォントサイズを16pxに設定 */
    border-radius: 5px; /* 角を丸くする */
}

ボタンのサイズ調整は、下記のpaddingとfont-sizeのところを調整するとできます。

    padding: 10px 30px; /* 上下10px、左右20pxのパディングを設定 */
    font-size: 16px; /* フォントサイズを16pxに設定 */

今回参考にした記事

https://developer.wordpress.org/themes/template-files-section/partial-and-miscellaneous-template-files/comment-template/#comment-pagination

Discussion