wordpress 上的自定义分页设计答案

【问题标题】：Custom pagination design on wordpresswordpress 上的自定义分页设计
【发布时间】：2022-02-13 15:26:14
【问题描述】：

现在我正在做 wordpress 项目。我有自己的 css 和 html 格式的模板构建。实现还可以，但我正在努力将 WP 分页设计集成到我的模板中。

这是我的模板分页代码

<div class="page_wrap">
  <ul class="page_list">
    <li class="page_item_prev">
      <a href="column.html">
        <img src="static/images/common/icon_arrow_prev.svg" alt="<">
      </a>
    </li>
    <li class="page_item active">
      <a href="column.html">
        1
      </a>
    </li>
    <li class="page_item">
      <a href="column.html">
        2
      </a>
    </li>
    <li class="page_item">
      <a href="column.html">
        3
      </a>
    </li>
    <li class="dot">
      …
    </li>
    <li class="page_item">
      <a href="column.html">
        10
      </a>
    </li>
    <li class="page_item_next">
      <a href="column.html">
        <img src="static/images/common/icon_arrow_next.svg" alt="＞">
      </a>
    </li>
  </ul>
</div>

我的模板设计分页显示是这样的

这就是我实现 WP 分页的方式。我还构建了一个functions.php。

模板上的代码

<div class="page_wrap"> 
  <ul class="page_list"> 
    <?php list_pagination($loop); ?> 
  </ul>
</div>

functions.php 上的代码

function list_pagination($loop)
{
    global $wp_query;
    $big = 99999999;
    $paged = paginate_links(array(
        'base'      => str_replace($big, '%#%', get_pagenum_link($big)),
        'format'    => '?paged=%#%',
        'currenct'  => max(1, get_query_var('paged')),
        'prev_next' => true,
        'prev_text' => __('<img src="'.get_template_directory_uri().'/static/images/common/icon_arrow_prev.svg" alt="＞">'),
        'next_text' => __('<img src="'.get_template_directory_uri().'/static/images/common/icon_arrow_next.svg" alt="＞">'),
        'type'      => 'list',
        'total'     => $loop->max_num_pages
    ));
    echo $paged;
}

这样的结果

这是错误的。

我可以将 WP 分页代码调整为与我的设计相同吗？

请帮忙

【问题讨论】：

标签： php html css wordpress

【解决方案1】：

调整您的 CSS 以匹配 paginate_links() 函数生成的 HTML 代码。

上一个链接：<a class="prev page-numbers"></a>
页面链接：<a class="page-numbers"></a>
下一个链接：<a class="next page-numbers"></a>
当前页面：<span class="page-numbers current"></span>

将display: flex; 添加到<ul class="page_list"></ul>

可以在 Gist here 中找到更复杂的解决方案。

【讨论】：