now i'm doing wordpress project. i have my own template build with css and html format. the implementation is ok but i'm struggling to integrate WP pagination design to my template.
here's my template pagination code
<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>
my template design pagination display like this
and this is how i'm implementing WP pagination. i also build a functions.php.
code on the template
<div class="page_wrap">
<ul class="page_list">
<?php list_pagination($loop); ?>
</ul>
</div>
code on 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;
}
result like this
and this is wrong.
can i adjust the WP pagination code to follow same as my design?
please help
Adjust your CSS to match the HTML code produced by the paginate_links()
function.
<a class="prev page-numbers"></a>
<a class="page-numbers"></a>
<a class="next page-numbers"></a>
<span class="page-numbers current"></span>
Add display: flex;
to <ul class="page_list"></ul>
A more complex solution can be found in the Gist here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.