时间戳

首页 > 解决方案 > WooCommerce：将类名添加到分页项

php - WooCommerce：将类名添加到分页项

问题描述

要使用 Boostrap 4 类，我想在 WooCommerce 分页中添加一些类名。不幸的是，我找不到这样做的方法。

我已经检查了pagination.php. 它给了我以下代码：

$total   = isset( $total ) ? $total : wc_get_loop_prop( 'total_pages' );
$current = isset( $current ) ? $current : wc_get_loop_prop( 'current_page' );
$base    = isset( $base ) ? $base : esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) );
$format  = isset( $format ) ? $format : '';

if ( $total <= 1 ) {
    return;
}
?>
<nav class="woocommerce-pagination">
    <?php
        echo paginate_links( apply_filters( 'woocommerce_pagination_args', array( // WPCS: XSS ok.
            'base'         => $base,
            'format'       => $format,
            'add_args'     => false,
            'current'      => max( 1, $current ),
            'total'        => $total,
            'prev_text'    => '&larr;',
            'next_text'    => '&rarr;',
            'type'         => 'list',
            'end_size'     => 3,
            'mid_size'     => 3,
        ) ) );
    ?>
</nav>

但输出是这样的：

<nav class="woocommerce-pagination">
    <ul class="page-numbers">
        <li><span aria-current="page" class="page-numbers current">1</span></li>
        <li><a class="page-numbers" href="/link/">2</a></li>
        <li><a class="page-numbers" href="/link/">3</a></li>
        <li><a class="page-numbers" href="/link/">4</a></li>
        <li><a class="page-numbers" href="/link/">5</a></li>
        <li><a class="next page-numbers" href="/link/">&rarr;</a></li>
    </ul>
</nav>

如您所见，该类page-numbers不是paginate_links数组的一部分。所以我想我无法在文件中更改它。

有什么钩子可以用来向<ul>,<li>和<a>元素添加类吗？

这是我尝试复制的结构（引导程序 4）：

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

标签： phpwordpresstwitter-bootstrapwoocommercebootstrap-4

解决方案

检索存档帖子页面的分页链接。

要编辑的模板文件

  • 此模板可以通过将其复制到yourtheme/woocommerce/loop/pagination.php.

因此，要获得所需的结果，您可以应用以下内容

代替

<nav class="woocommerce-pagination">
    <?php
    echo paginate_links(
        apply_filters(
            'woocommerce_pagination_args',
            array( // WPCS: XSS ok.
                'base'      => $base,
                'format'    => $format,
                'add_args'  => false,
                'current'   => max( 1, $current ),
                'total'     => $total,
                'prev_text' => '&larr;',
                'next_text' => '&rarr;',
                'type'      => 'list',
                'end_size'  => 3,
                'mid_size'  => 3,
            )
        )
    );
    ?>
</nav>

和

<nav aria-label="Page navigation example">
    <?php
    $paginate_links =  paginate_links(
        apply_filters( 'woocommerce_pagination_args',
            array(
                'base'         => $base,
                'format'       => $format,
                'add_args'     => false,            
                'current'      => max( 1, $current ),
                'total'        => $total,
                'prev_text'    => '&larr;',
                'next_text'    => '&rarr;',
                'type'         => 'array',
                'end_size'     => 3,
                'mid_size'     => 3,
            ) 
        )
    );

         
    if ( is_array( $paginate_links ) ) {
    ?>
        <ul class="pagination">
        <?php 
        foreach ($paginate_links as $paginate_link) {
        ?>
            
            <li class="page-item">
                <?php
                $paginate_link = str_replace( 'page-numbers', 'page-link', $paginate_link );
                echo wp_kses_post($paginate_link)
                ?>
            </li>
                
        <?php
        }
        ?>  
        </ul>
    <?php
    }
    ?>
</nav>

结果：

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><span class="page-link current">1</span></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="next page-link" href="#">→&lt;/a></li>
    </ul>
</nav>

推荐阅读