scss 有助于快速添加分页样式并提供“wp_link_pages”标记。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 有助于快速添加分页样式并提供“wp_link_pages”标记。相关的知识,希望对你有一定的参考价值。

<?php 

$defaults = array(
	'before'    => '<nav class="navigation pagination" role="navigation"><ul class="page-numbers"><li>',
	'after'     => '</li></ul>',
	'separator' => '</li><li>',
	'pagelink'  => '<span>%</span>',
	'echo'      => 1
);

wp_link_pages( $defaults );
<?php

$args = array(
    'type' => 'list',
    'prev_text' => '<span aria-hidden="true"><i class="fa fa-angle-left"></i></span>',
    'next_text' => '<span aria-hidden="true"><i class="fa fa-angle-right"></i></span>',
);

the_posts_pagination( $args );
// change variables with your own variables/colors
.navigation {
  text-align: center;
  margin: 40px 0 0;

  .screen-reader-text {
    display: none;
  }

  .page-numbers {
    margin: 0;

    .fa {
      font-size: 18px;
      position: relative;
      top: 2px;
    }

    .label{
      width: 85px;

      span{
        display: inline-block;
        vertical-align: middle;
      }

      .fa-angle-left{
        margin-right: 5px;
      }

      .fa-angle-right{
        margin-left: 5px;
      }
    }

    > li {

      > a,
      > span {
        padding: $padding-base-vertical 0;
        min-width: 43px;
        text-align: center;
        margin-left: 10px;
        margin-top: 10px;

        &:hover,
        &.current {
          background-color: $link-hover-color;
          border-color: $link-hover-color;
          color: #fff;
        }
      }

      > span {
        background-color: $link-hover-color;
        border-color: $link-hover-color;
        color: #fff;
      }
    }
  }

}

以上是关于scss 有助于快速添加分页样式并提供“wp_link_pages”标记。的主要内容,如果未能解决你的问题,请参考以下文章

scss 通过在项目上添加分配给它的网格顺序和类来调试SCSS网格布局(如Singularity)

在使用 mpdf 库生成的 pdf 中添加分页符

如何添加分页符以增加页面锚定图像?

向我的mysql查询添加分页[重复]

如何在我的搜索结果页上添加分页?

如何在面向协议的网络中添加分页页面