在分页中更改class=“页码”

时间:2016-11-23 作者:Tom

我正在使用以下代码(from here) 要对链接分页,请执行以下操作:

function custom_pagination() {
    global $wp_query;
    $big = 999999999; // need an unlikely integer
    $pages = paginate_links( array(
            \'base\' => str_replace( $big, \'%#%\', esc_url( get_pagenum_link( $big ) ) ),
            \'format\' => \'?paged=%#%\',
            \'current\' => max( 1, get_query_var(\'paged\') ),
            \'total\' => $wp_query->max_num_pages,
            \'prev_next\' => false,
            \'type\'  => \'array\',
            \'prev_next\'   => TRUE,
            \'prev_text\'    => __(\'«\'),
            \'next_text\'    => __(\'»\'),
        ) );
        if( is_array( $pages ) ) {
            $paged = ( get_query_var(\'paged\') == 0 ) ? 1 : get_query_var(\'paged\');
            echo \'<ul class="pagination">\';
            foreach ( $pages as $page ) {
                    echo "<li>$page</li>";
            }
           echo \'</ul>\';
        }
}
此的输出使用echo custom_pagination();:

<ul class="pagination">
    <li class="page-item">
        <a class="page-numbers" href="example.com/page/1">1</a>          
    </li>
</ul>
如何将输出更改为此?:

<ul class="pagination">
    <li class="page-item">
        <a class="page-link" href="example.com/page/1">1</a>          
    </li>
</ul>
我正在尝试制作一个引导主题,但我似乎无法取代page-numbers 使用引导程序初始化page-link

5 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

这个paginate_links() 功能,位于wp-includes/general-template.php, 不允许HTML的某些部分(例如page-numbers 类)进行定制。

由于类的生成方式,简单的字符串替换将不起作用,这在paginate_links():

    $page_links[] = \'<a class="prev page-numbers" href="\' . esc_url( apply_filters( \'paginate_links\', $link ) ) . \'">\' . $args[\'prev_text\'] . \'</a>\';
endif;
for ( $n = 1; $n <= $total; $n++ ) :
    if ( $n == $current ) :
        $page_links[] = "<span class=\'page-numbers current\'>" . $args[\'before_page_number\'] . number_format_i18n( $n ) . $args[\'after_page_number\'] . "</span>";
这是您的custom_pagination() 函数,它使用DOMXpath查找具有page-numbers 类,然后执行字符串替换以将类更改为page-link. 为了更好地与引导程序兼容current 类也替换为active. 最后class="mynewclass" 已添加到<li> 其中包含当前项。

function wpse247219_custom_pagination() {
    global $wp_query;
    $big = 999999999; // need an unlikely integer
    $pages = paginate_links( array(
        \'base\' => str_replace( $big, \'%#%\', esc_url( get_pagenum_link( $big ) ) ),
        \'format\' => \'?paged=%#%\',
        \'current\' => max( 1, get_query_var(\'paged\') ),
        \'total\' => $wp_query->max_num_pages,
        \'prev_next\' => false,
        \'type\'  => \'array\',
        \'prev_next\'   => true,
        \'prev_text\'    => __( \'«\', \'text-domain\' ),
        \'next_text\'    => __( \'»\', \'text-domain\'),
    ) );
    $output = \'\';

    if ( is_array( $pages ) ) {
        $paged = ( get_query_var(\'paged\') == 0 ) ? 1 : get_query_var( \'paged\' );

        $output .=  \'<ul class="pagination">\';
        foreach ( $pages as $page ) {
            $output .= "<li>$page</li>";
        }
        $output .= \'</ul>\';

        // Create an instance of DOMDocument 
        $dom = new \\DOMDocument();

        // Populate $dom with $output, making sure to handle UTF-8, otherwise
        // problems will occur with UTF-8 characters.
        $dom->loadHTML( mb_convert_encoding( $output, \'HTML-ENTITIES\', \'UTF-8\' ) );

        // Create an instance of DOMXpath and all elements with the class \'page-numbers\' 
        $xpath = new \\DOMXpath( $dom );

        // http://stackoverflow.com/a/26126336/3059883
        $page_numbers = $xpath->query( "//*[contains(concat(\' \', normalize-space(@class), \' \'), \' page-numbers \')]" );

        // Iterate over the $page_numbers node...
        foreach ( $page_numbers as $page_numbers_item ) {

            // Add class="mynewclass" to the <li> when its child contains the current item.
            $page_numbers_item_classes = explode( \' \', $page_numbers_item->attributes->item(0)->value );
            if ( in_array( \'current\', $page_numbers_item_classes ) ) {          
                $list_item_attr_class = $dom->createAttribute( \'class\' );
                $list_item_attr_class->value = \'mynewclass\';
                $page_numbers_item->parentNode->appendChild( $list_item_attr_class );
            }

            // Replace the class \'current\' with \'active\'
            $page_numbers_item->attributes->item(0)->value = str_replace( 
                            \'current\',
                            \'active\',
                            $page_numbers_item->attributes->item(0)->value );

            // Replace the class \'page-numbers\' with \'page-link\'
            $page_numbers_item->attributes->item(0)->value = str_replace( 
                            \'page-numbers\',
                            \'page-link\',
                            $page_numbers_item->attributes->item(0)->value );
        }

        // Save the updated HTML and output it.
        $output = $dom->saveHTML();
    }

    return $output;
}

Usage:

echo wpse247219_custom_pagination();

Generated HTML:

<ul class="pagination">
    <li class="mynewclass"><span class="page-link active">1</span></li>
    <li><a class="page-link" href="http://localhost/page/2/">2</a></li>
    <li><a class="page-link" href="http://localhost/page/3/">3</a></li>
    <li><span class="page-link dots">…</span></li>
    <li><a class="page-link" href="http://localhost/page/5/">5</a></li>
    <li><a class="next page-link" href="http://localhost/page/2/">»</a></li>
</ul>

SO网友:Mickael Bertainchant

今天就开始吧,兼容wordpress 5.5.1和bootstrap 4:

        <?php
            $pagination = paginate_links( array(
              \'base\' => str_replace( 999999999, \'%#%\', esc_url( get_pagenum_link( 999999999 ) ) ),
              \'format\' => \'?paged=%#%\',
              \'current\' => max( 1, get_query_var(\'paged\') ),
              \'total\' => $query_accueil->max_num_pages,
              \'prev_text\' => \'<i class="fas fa-angle-double-left"></i>\',
              \'next_text\' => \'<i class="fas fa-angle-double-right"></i>\',
              \'type\' => \'array\'
            ) );
        ?>
        <?php if ( ! empty( $pagination ) ) : ?>
          <nav aria-label="page navigation">
            <ul class="pagination">
              <?php foreach ( $pagination as $key => $page_link ) : ?>
                <li class="page-item
                  <?php
                      $link = htmlspecialchars($page_link);
                      $link = str_replace( \' current\', \'\', $link);
                      if ( strpos( $page_link, \'current\' ) !== false ) { echo \' active\'; }
                  ?>
                ">
                  <?php
                    if ( $link ) {
                      $link = str_replace( \'page-numbers\', \'page-link\', $link);
                    }
                    echo htmlspecialchars_decode($link);
                  ?>
                </li>
              <?php endforeach ?>
            </ul>
          </nav>
        <?php endif ?>

SO网友:socki03

通过跟踪,似乎没有办法通过paginate_links 作用所以基于custom_pagination 函数,下面是我如何重写它的:

function custom_pagination() {
    global $wp_query;

    // No idea why this line was in the if statement originally...
    $paged = ( get_query_var(\'paged\') ? get_query_var(\'paged\') : 1 );

    $big = 999999999; // need an unlikely integer

    $pages = paginate_links( array(
        \'base\' => str_replace( $big, \'%#%\', esc_url( get_pagenum_link( $big ) ) ),
        \'format\' => \'?paged=%#%\',
        \'current\' => $paged,
        \'total\' => $wp_query->max_num_pages,
        \'prev_next\' => false,
        \'type\'  => \'array\',
        \'prev_next\'   => TRUE,
        \'prev_text\'    => __(\'«\'),
        \'next_text\'    => __(\'»\'),
    ) );

    if( is_array( $pages ) ) {

        echo \'<ul class="pagination">\' .
                 str_replace( \'class="page-numbers"\', \'class="page-link"\', implode( \'\', $pages ) .
             \'</ul>\';

    }
}
没有对此进行测试,如果您有任何问题,请告诉我。

SO网友:iWebbers

在最后一行代码中,您忘记了结尾)。下面是正确的一行:

echo \'<ul class="pagination">\' . str_replace( \'class="page-numbers"\', \'class="page-link"\' ), implode( \'\', $pages ) . \'</ul>\';

SO网友:Qaisar Feroz

使用jQuery的更简单解决方案

jQuery(document).ready(function ($) {

    $(".pagination .page-item .page-numbers").addClass("page-link");
    $(".pagination .page-item .page-link").removeClass("page-numbers");

});
同样的方法也可以用于其他类,如current

相关推荐

change pagination url

目前,我的分页页面URL为:http://www.example.com/category_name/page/2但我需要将此URL结构更改为:http://www.example.com/category_name/?page=2等有什么解决方案吗?