web-dev-qa-db-ja.com

ブートストラップ用のコメントページネーションのカスタマイズ

Bootstrapをサポートするようにコメントのページ区切りをカスタマイズしたいのですが、テーマファイルにこれらの行がありますが、Bootstrapのページ区切りスタイルを表示するにはさらにカスタマイズが必要です。

<?php the_comments_pagination( array(
    'prev_text' => '<i class="fa fa-arrow-right" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Previous', 'twentyseventeen' ) . '</span>',
    'next_text' => '<span class="screen-reader-text">' . __( 'Next', 'twentyseventeen' ) . '</span><i class="fa fa-arrow-left" aria-hidden="true"></i>',
) );
commentstwitter-bootstrappaginate-linkscomments-templatepaginate-comments-links
1
Farhad Sakhaei

これをスニペットに置き換えてください。

    <?php
      $pages = paginate_comments_links(['echo' => false, 'type' => 'array']);

      if( is_array( $pages ) ) {
        $output = '';
        foreach ($pages as $page) {
          $page = "\n<li>$page</li>\n";
          if (strpos($page, ' current') !== false) 
            $page = str_replace([' current', '<li>'], ['', '<li class="active">'], $page);
          $output .= $page;
        }
        ?>
        <nav aria-label="Comment navigation">
            <ul class="pagination">
                <?=$output?>
            </ul>
        </nav>
    <?php
      }
    ?>

このコードはコメントを配列として取得します。これにより、Bootstrap用にフォーマットされた番号なしリストとして各コメントをカスタマイズできます。

また、Bootstrapが現在のページをマークするために使用するcurrentのactive WPクラスも置き換えます。

このコードが機能するためには、ヘッダにbootstrap.cssファイルも追加する必要があります。

1
Ismaelj