wordpress文章分页美化效果

wordpress文章分页美化效果

作者:明星 |  时间:2013-05-21 |  浏览:3261 |  评论已关闭 条评论

上一篇文章《wordpress文章分页方法》已经很清楚的告诉大家如何为自己的wordpress博客添加单篇文章的分页,今天就说说如何美化wordpress文章分页。

今天是在818酷图网上进行wordpress文章的分页,主要是818酷图网是一个美女图片网站,每一篇文章都有多张图片,所以这就需要为单篇文章添加分页了。一下就是今天添加的代码:

<?php wp_link_pages(array(‘before’ => ‘<div>分页阅读:’, ‘after’ => ”, ‘next_or_number’ => ‘next’, ‘previouspagelink’ => ‘上一页’, ‘nextpagelink’ => “”)); ?> <?php wp_link_pages(array(‘before’ => ”, ‘after’ => ”, ‘next_or_number’ => ‘number’, ‘link_before’ =>’<span>’, ‘link_after’=>’</span>’)); ?> <?php wp_link_pages(array(‘before’ => ”, ‘after’ => ‘</div>’, ‘next_or_number’ => ‘next’, ‘previouspagelink’ => ”, ‘nextpagelink’ => “下一页”)); ?>

美化CSS。

直接把下面这些代码,放到主题文件 style.css 最后面。

/**页面分页**/
.fenye{text-align:center;margin:0px auto 10px;font-weight:bold}
.fenye span{background-color:#DDDDDD;color:#fff;font-weight: bold;margin:0px 1px;padding:1px 6px;display:inline-block;text-decoration:none;border:1px solid #e0e0e0;}
.fenye a{text-decoration:none;}
.fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none;}
.fenye a:hover span{background-color:#DDDDDD;color: #fff;}

感觉还是蛮好看的,分页后的效果如图:

分页效果图

相关推荐
更多

评论已关闭。