• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发10:修改trans主题首页模板的分页

    WP主题开发10:修改trans主题首页模板的分页

    作者: 分类:wordpress CMS主题制作 点击: 367 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      wordpress主题trans的首页模板的左侧文章列表,在上一节中,我们已经做了修改,实现了从wordpress的数据库中调用。但是,wordpress网站的文章肯定有很多很多,这时,如果把所有的文章都显示在同一个页面,这好像不太好,也不利于用户的浏览。所以,wordpress网站的后台可以设置每个页面显示多少篇文章,默认情况下,是每个页面显示10篇,剩下的文章列表,会以分页的形式显示。

      在trans主题的静态模板中,我们没有做分页效果,所以,在本节中,我们不仅要添加分页的功能,还要添加分页的展示效果的CSS样式。那么,怎样给trans主题首页左侧的文章列表添加分页效果呢

      第一步:添加分页按钮的父标签。

      为了整个页面的布局合理,我们给分页按钮添加一个父标签,代码如下:

      < div class="left_page"></div>

      第二步:添加分页代码。

      从wordpress4.1版本开始,wordpress就为我们提供了一个非常好用的分页函数——the_posts_pagination(),而不再需要wordpress主题开发者们自己创建自定义的分页函数了,这也就是那么多人都在使用wordpress做网站的原因吧。

      好了,不多说,我们直接在上面添加的父标签里添加如下PHP代码:

      <?php
      the_posts_pagination( array(
      'mid_size' => 3, //当前页码数的 两边 显示3个页码。
      'prev_text' =>'<', //上一页
      'next_text' =>'>', //下一南
      ) );
      ?>

      从上面的代码中,我们可以看出,the_posts_pagination()函数只有一个参数,这个参数是一个array数组。这个数组里可以包含有多个元素,这些元素的值我们都是可以修改的,如:我们可以把'prev_text' =>'<' 改成 'prev_text' =>'上一页';'next_text' =>'>' 改成 'next_text' =>'下一页'。

      这时,我们再看trans主题首页的左侧底部,就可以看到分页数了,就是不太美观,如下图:

      WP主题开发10:修改trans主题首页模板的分页

      第三步:给分页添加css样式。

      从上图中,我们可以看出,这个分页按钮实在是太难看了。为了让它变得美观,我们需要为它添加CSS样式代码。代码如下:

      /*分页*/
      .left_page{ float:left; padding:15px; background: #fff; width:100%; box-sizing:border-box; }
      .left_page h2{ display:none; }
      .left_page .nav-links a{ display:inline-block; padding:2px 5px; border:1px solid #ccc; }
      .left_page .nav-links .current{ display:inline-block; padding:2px 5px; border:1px solid #ccc; background:#3571cc; color:#fff; }
      .left_page .nav-links a:hover{ background:#3571cc; color:#fff; }

      添加上这些CSS样式代码后,我们再到trans主题网站的首页看一下,这时的分页按钮就好看多了,如下图:

      WP主题开发10:修改trans主题首页模板的分页

      当前页面的页码显示为蓝底白字,鼠标光标移到哪真页码上,这个页码也会显示为蓝底白字,这样,在用户浏览时,会更加的友好。

      好了,通过上面的操作,我们为wordpress主题trans的首页左侧添加了文章列表的分页效果。不做的时候,是不是觉得很难?但是,一旦做起来,是不是又觉得特别的简单?就是这样的感觉了,使用wordpress的好处,就在这里了,它很多事情都为我们想了,我们只需要把它拿来用就行了 。



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:码不停蹄
    本文地址:http://wanlimm.com/77202006188244.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.