仿无觅实现文章底部_相关图文调用

作者: 鲁智深 分类: wordpress 发布时间: 2013-04-06 22:58

经常逛博客的朋友应该不难发现,文章底部都会推荐文章“如:你也可能感兴趣”。互联网就是这样一个非常好的灵感只要几个知名网站使用了,下面的大大小小的网站就跟风。如图:

感兴趣图文

博主非常不喜欢用第三方代码实现文章的“感兴趣图文”,现在互联网用的最多就是“无觅”插件实现以上调用,但插件影响网站打开速度,所以博主就寻思怎么用代码实现。(ps:不要看见代码就头晕)

下面就来分享一下“感兴趣图文”调用方法

首先在要实现的地方插入如下代码(ps:博主用的是wordpress)

    <!--可能喜欢-->
    <div id="loveshipu">
<h4>猜你会喜欢的特产...</h4>
<?php
$post_num = 10; // 设置调用条数
$args = array(
      'post_password' => '',
          'post_status' => 'publish', // 只选公开的文章.
          'post__not_in' => array($post->ID),//排除当前文章
          'caller_get_posts' => 1, // 排除置頂文章.
          'orderby' => 'comment_count', // 依評論數排序.
          'posts_per_page' => $post_num
);
        $query_posts = new WP_Query();
        $query_posts->query($args);
        while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>">
<img src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>" /></a>
<p>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a>
</p>
</li>
<?php } wp_reset_query();?>
</div>
    <!--可能喜欢-->

然后在打开stlye.css插入以下样式

#loveshipu {
    background: none repeat scroll 0 0 #F9F9EE;
    border: 1px solid #D6D9AC;
    float: left;
    margin-left: 3px;
    width: 621px;
}
#loveshipu h4 {
    border-bottom: 1px solid #D6D9AC;
    color: #3A0004;
    font-size: 14px;
    font-weight: normal;
    height: 32px;
    line-height: 2.3em;
    margin-bottom: 15px;
    margin-left: 10px;
    width: 600px;
}
#loveshipu li {
    border: 1px solid #E4D8D8;
    color: #655C59;
    display: inline-block;
    list-style: none outside none;
    margin-bottom: 20px;
    margin-left: 5px;
    min-height: 50px;
    padding: 8px;
    vertical-align: top;
    width: 124px;
}
#loveshipu li a {
    color: #3A0004;
    text-decoration: none;
}
#loveshipu li img {
    margin-bottom: 5px;
    width: 124px;
}
#loveshipu li p {
    font-size: 12px;
    line-height: 1.4em;
    margin: 0 0 3px;
    width: 124px;}

演示地址(看底部):http://www.taoskill.com/jiaohuaji/229.html

注意:代码可以转换,大小也可以修改css实现,不懂话留言。

相关文章

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

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