css - wordpress函数中的分页代码

Question

我在 wordpress 函数文件中使用此代码进行分页

function bk_pagination($pages = '', $range = 2)
{  
     $showitems = ($range * 2)+1;  

     global $paged;
     if(empty($paged)) $paged = 1;

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   

     if(1 != $pages)
     {
         echo "<nav aria-label='Page navigation example'><ul class='pagination justify-content-center'>";
         if($paged > 1 && $showitems < $pages) echo "<li class='page-item' ><a class='page-link' href='".get_pagenum_link($paged - 1)."'>قبلی</a></li>";

         for ($i=1; $i <= $pages; $i++) 
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) 
             {
                 echo ($paged == $i)? "<li class='page-item'>".$i."</li>":"<a class='page-link' href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
             }
         }

         if ($paged < $pages && $showitems < $pages) echo "<li class='page-item'><a class='page-link' href='".get_pagenum_link($paged + 1)."'>بعدی</a></li>";  
         echo "</ul></nav>\n";
     }
}

如图所示:

enter image description here

我如何才能像其他人一样设计 5 号？？？？？

Answer 1

那是因为这一行:

echo ($paged == $i)? "<li class='page-item'>".$i."</li>":"<a class='page-link' href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";

我猜测当前页面在<li> 的元素中而其他页面将在一个元素中。

注意 <li>和 <a>有不同的类别。

这里有两种方法:

1. 复制'page-link'的样式并应用到'page-item'

2. 这两个元素必须具有相同的类，以便它们具有相同的样式:

echo ($paged == $i)? "<li class='page-item page-link active'>".$i."</li>":"<a class='page-link inactive' href='".get_pagenum_link($i)."'>".$i."</a>";