wordpress最新文章2列显示代码

wordpress最新文章2列(2排)显示的代码,需要配合css来完成。常见的最新文章调用代码如下:

<?php $rand_posts = get_posts('numberposts=8&orderby=date');foreach($rand_posts as $post) : ?>
<br /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php endforeach;?>

numberposts是需要提取的文章数,orderby是文章排序方式。

下面这个代码把文章分2列,无需依赖主题css,最新文章链接为蓝色,鼠标指针浮动在字体上显示红色。添加外边框。

wordpress最新文章2列显示代码-第1张-讯沃blog(www.77nn.net)

<style>
.relates {
    font-size: 16px;
    }
.relates ul{
	list-style: disc;
	margin-left: 1px;
	color: #bbb;
	margin-bottom: 30px;
	overflow: hidden;
}
.relates ul li {
    width: 50%;
    float: left;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.relates ul {margin-bottom: 18px;} /*此处自行调整,我设置的相关文章数是8,这里设置的18px刚好合适*/
.art_new_box a {
color: #00a67c;
}

.art_new_box a {
    outline: none;
    text-decoration: none;
}
.art_new_box a:hover{ color:#f00;}
.art_new_box {
background:#FFFFFF;
    float: left;
    margin: 0 0 10px 0;
    position: relative;
     border: 1px solid #DBDBDB; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    der-radius: 4px;
/*    width: 808px;*/
}
</style>
<div class="art_new_box">
<div class="relates"><ul> <?php query_posts('showposts=8'); ?>
<?php while (have_posts()) : the_post(); ?>
<li>&nbsp&nbsp&nbsp<i class="fa fa-minus"></i>&nbsp<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div>
</div>

这里是需要调用Font Awesome图标库的。

【本站资源无偿免费分享,如果资源对你有用,希望动动手指点点下面的广告吧!以维持服务器运行】
如需 WordPress 优化加速、主题修改、故障解决等服务,可联系我购买付费服务: 点此联系我 | 近期站内热门福利:

本文最后更新于7个月前 (03-01),若有错误或已失效,请在下方留言或联系QQ87200080

未经允许禁止转载
本文地址:https://www.77nn.net/2763.html
版权声明:本文为原创文章,版权归 讯沃blog 所有,未经允许,禁止任何单位或个人转载!

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝、微信、QQ扫一扫,即可进行扫码打赏哦

0
分享到:

评论0

4 + 9 =
没有账号? 忘记密码?

社交账号快速登录