关注安徽站长创业、网站优化、网站推广及搜索引擎优化(SEO)的自媒体平台,分享最新的seo和网站优化知识
  • SEO
  • 网页优化
  • wordpress文章页面添加带缩略图的”相关推荐“

wordpress文章页面添加带缩略图的”相关推荐“

发布:雷都SEO2017-8-8 17:32分类: 网页优化 标签: wordpress 相关推荐

有很多主题都有这种读者读完一篇文章,下面出现推荐或者喜欢的文章之类的,这是为了更方便读者阅读其它文章,也增加了文章互联的效果!

其实原理也很简单,就是调用了wordpress的当前分类的文章函数。研究了一下,然后在别的主题或百度上也总结了一个很简单使用方法,只需要将下面代码放在文章页面的对应位置就可以很方便调用了。

<div id="related-posts">
    <div class="caption">猜你也喜欢的:</div>
    <div class="related" class="clearfix">
        <ul>
        <?php
        $post_num = 5; // 數量設定.
            $exclude_id = $post->ID; // 單獨使用要開此行 
            $posttags = get_the_tags(); $i = 0;
          if ( $posttags ) {
        $tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ','; 
                    $args = array(
                    'post_status' => 'publish',
                    'tag__in' => explode(',', $tags), // 只選 tags 的文章. 
                    'post__not_in' => explode(',', $exclude_id), // 排除已出現過的文章.
                    'caller_get_posts' => 1,
                    'orderby' => 'comment_date', // 依評論日期排序.
                    'posts_per_page' => $post_num,
                        );
                    query_posts($args);
                    while( have_posts() ) { the_post(); 
                            ?>
                <li><a rel="nofollow" href="http://seo.leidu.net/go?url=<?php echo the_permalink(); ?>" title="<?php the_title(); ?>" ><img src="<?php if ( get_post_meta($post->ID, 'thumbnail1', true) ) { echo get_post_meta($post->ID, 'thumbnail1', true);}
elseif ( has_post_thumbnail() ){$thumbnail1_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail1');echo $thumbnail1_url[0];}else{echo catch_first_image();} ?>" alt="<?php the_title(); ?>" width="120" height="120" ></a>
            <a rel="nofollow" href="http://seo.leidu.net/go?url=<?php echo the_permalink(); ?>" ><?php the_title(); ?></a></li>
            <?php
            $exclude_id .= ',' . $post->ID; $i ++;
                    } wp_reset_query();
                        }
                    if ( $i < $post_num ) { // 如果 tags 文章數量不足, 再取 category 補足.
                    $cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ',';
                    $args = array(
                    'category__in' => explode(',', $cats), // 只選 category 的文章.
                    'post__not_in' => explode(',', $exclude_id),
                    'caller_get_posts' => 1,
                    'orderby' => 'comment_date',
                    'posts_per_page' => $post_num - $i,
                                    );
                    query_posts($args);
                    while( have_posts() ) { the_post(); 
                            ?>
                    <li><a rel="nofollow" href="http://seo.leidu.net/go?url=<?php echo the_permalink(); ?>" title="<?php the_title(); ?>" ><img src="<?php if ( get_post_meta($post->ID, 'thumbnail1', true) ) { echo get_post_meta($post->ID, 'thumbnail1', true);}
elseif ( has_post_thumbnail() ){$thumbnail1_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail1');echo $thumbnail1_url[0];}else{echo catch_first_image();} ?>" alt="<?php the_title(); ?>" width="120" height="120" ></a>
        <a rel="nofollow" href="http://seo.leidu.net/go?url=<?php echo the_permalink(); ?>" ><?php the_title(); ?></a></li>
        <?php 
            $i++;
            } wp_reset_query();
                    }
                if ( $i  == 0 )  echo '<li>没有相关文章!</li>';
                    ?>
                        </ul>
                    </div>
                </div>

<!-- release post end -->

对应的CSS代码如下:

 /** related post thumbnail **/
#related-posts{border-radius:5px;border-top:3px #dfdfdf solid;background:#fff;clear:both;}
.caption{color:#0C0C0B;font-size: 14px;font-weight:bold;padding-top: 10px;margin-bottom: 10px;margin-left:10px;}
.related {white-space:normal;margin:0 auto;overflow: hidden;border-left: 1px solid #DFDFDF;margin-left:20px;}
.related li{float: left;width: 120px;height:180px;list-style:none;border-right:1px solid #dfdfdf;padding:4px;_padding:2px;text-align: left;}
.related a{float: left;width: 126px;text-overflow: ellipsis;-o-text-overflow: ellipsis;}
.related a:hover{white-space: normal;}
.related li:hover{background:#F6F6F6;}
.related img{height:120px;width:120px;border:0;padding:0;}

使用方法,估计我不用多说,将对应的函数放在single.php文件中,CSS 代码放在style.css文件中就OK了。

还有一种方便方法是把上面的php函数代码放在单独一个文件中,如likeposts.php,然后在想要调用的页面添加调用代码:  

<?php include('includes/likeposts.php');?>

likeposts.php文件下载链接: http://pan.baidu.com/s/1mimOJxu 密码: 2ks3

转载请注明:本文《wordpress文章页面添加带缩略图的”相关推荐“》链接: http://seo.leidu.net/post-165.html

百度已收录

已有 0/1443 人参与

发表评论:

欢迎分享合肥SEO自媒体seo.leidu.net

合肥网站SEO

欢迎使用手机扫描访问本站,还可以关注微信哦~