WordPress纯代码高仿 无觅相关文章 图文模式功能

WordPress纯代码高仿 无觅相关文章 图文模式功能

无觅的相关文章插件确实是一个不错的插件,Jeff的阳台到现在还在使用它(貌似产生了依赖性)。但到了devework.com,为了体现轻度、代码化的主题制作理念。所以在网络上找了些资料,结合自己不怎么样的技术,折腾出了个高仿无觅相关文章图文模式功能。具体效果见文章下方的“亲,意犹未尽?来看更多:”部分,是不是感觉还挺像呢?下面就分享一下折腾的成果。

首先说明,本方法实现的相关文章原理是通过获取该文章分类,找到同一分类的文章,这些文章即为“相关文章”。而图片的话,采用的是timthumb 截图(好处是节约空间,提高加载速度),默认的话是截取文章的第一张图片,文章没有图片的话就使用随机图片。

你要准备的东西

1、下载相关文件: timthumb.php 【点击下载】,放到主题根目录下。timthumb是一个PHP截图插件,具体功能请自行谷歌。

2、找十张图片作为随机图片,格式要一样(建议jpg格式,下面的代码默认为此),大小弄成你需要的大小(下面代码默认是114×114)。放入主题的images文件夹中(一般都有吧?)

3、在你的主题根目录下新建一个文件夹为cache,文件夹的权限设置为777

折腾教程

一、在你的主题需要显示效果文章的地方加入以下代码:

<div class="same_cat_posts">
    <h3>相关文章:</h3>
    <ul class="same_cat_posts_ul">
    <?php foreach(get_the_category() as $category){$cat = $category->cat_ID;}query_posts('cat=' . $cat . '&orderby=rand&showposts=5'); //控制相关文章排序为随机,显示5篇相关文章
    while (have_posts()) : the_post();$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');?><li>
    <?php if ( has_post_thumbnail() ) { ?><a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo $thumbnail[0]; ?>" alt="<?php the_title(); ?>" /></a>
    <?php } else { ?>
    <a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
    <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=114&w=114&zc=1" alt="<?php the_title(); ?>" 
    class="thumbnail"/></a>
    <?php } ?><p class="same_cat_posts_tittle"><a itemprop="relatedLink" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    <?php the_title(); ?></a></p></li><?php endwhile; wp_reset_query(); ?>
    </ul>
</div>

你需要修改的地方:第4行相关文章形式的数量,代码的是5篇。第9行的114×114该成你需要的。

二、添加以下css代码到你的主题的style.css样式文件中:

/* Devework.com 相关文章 */
.same_cat_posts a {color: #555; text-decoration: none}
.same_cat_posts {width:670px; height: 160px; margin: 25px 0px 5px 0px; }
.same_cat_posts h3 {margin-bottom: 10px; font-weight: bolder; font-size: 16px;border-bottom:2px solid #08A5E0;padding-bottom:12px}
.same_cat_posts ul {list-style: none; margin-left: -43px}
.same_cat_posts ul li {float: left; padding: 5px; border-right: 1px solid #CCC;height: 168px;overflow:hidden}
.same_cat_posts ul li:hover {background: #C3E99E}
.same_cat_posts ul li img {width: 113px; height: 113px; padding: 2px; border: 1px solid #CCCCCC}
.same_cat_posts ul li .same_cat_posts_tittle { margin-left: 2px; width: 113px;font-size:12px}

你需要修改的地方:基本上有数字的地方都要修改。

三、在主题的funtions.php的最后一个 ?> 前添加下面的代码:

//添加特色缩略图支持 devework.com
if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); 
//输出缩略图地址 devework.com
function post_thumbnail_src(){
    global $post;
    if( $values = get_post_custom_values("thumb") ) {   //输出自定义域图片地址
        $values = get_post_custom_values("thumb");
        $post_thumbnail_src = $values [0];
    } elseif( has_post_thumbnail() ){    //如果有特色缩略图,则输出缩略图地址
        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
        $post_thumbnail_src = $thumbnail_src [0];
    } else {
        $post_thumbnail_src = '';
        ob_start();
        ob_end_clean();
        $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
        $post_thumbnail_src = $matches [1] [0];   //获取该图片 src
        if(empty($post_thumbnail_src)){ //如果日志中没有图片,则显示随机图片
            $random = mt_rand(1, 10);
            echo get_bloginfo('template_url');
            echo '/images/'.$random.'.jpg';
            //如果日志中没有图片,则显示默认图片
            //echo '/images/default_thumb.jpg';
        }
    };
    echo $post_thumbnail_src;
}

如果你大概看的懂的话,第4、5行的输出自定义域图片地址的代码可能对你没必要,可以删除。不懂的话就不要删除啦。

保存,刷新,搞定!

再来一句:效果见下面。

参考:天空团 & Kayo

相关文章:《WordPress 代码实现相关文章(列表模式)功能

评分:
当前平均分 4.83 (88%) - 6 个投票
云左主机 广告
10 条 评论
  1. 请教一下 你的第二步骤 “找十张图片作为随机图片” 这里, 作用是什么? 我用了代码,可是没有缩略图能显示出来,全都是文章特色图片里面的大图

    12月前 回复
    • 如果没有特色文章才显示随机图片

      12月前 回复
  2. :oops: 终于找到这个文章的最完整的步骤了~ 珍藏了~~~
    wumii有段时间收录各家网站的文章然后在自己平台发布,似乎还开放搜索引擎收录,导致文章都比源站权重高……后来被喷了,现在收敛不少~~得收藏一下~以后得回归一下~就和评论框一样~~

    3年前 回复
  3. 请问博主一个问题,我在第三段代码插入到funtions.php里时就报错,这个怎么都解决不了,请问是什么问题。我的qq2621497764,谢谢你了

    4年前 回复
    • 记住是要在functions.php的最后一个 ?> 前面添加代码!报错信息是什么??

      4年前 回复
      • Fatal error: Cannot redeclare post_thumbnail_src() (previously declared in /home/luwanxic/domains/luwanxi.com/public_html/wp-content/themes/OrchidV2.0/functions.php:61) in /home/luwanxic/domains/luwanxi.com/public_html/wp-content/themes/OrchidV2.0/functions.php on line 839

        这是报错信息。试了好几次还是不行

        4年前 回复
      • 我现在没有放第三段代码,可以显示相关文章,但是只能显示分类里的文章,如果这个分类里只有一篇文章就不显示了,囧。比如这篇文章:http://www.luwanxi.com/1355.html

        4年前 回复
        • 对呀,是这样的啊!建议不要这篇文章的代码,见http://devework.com/wumi-relatedposts-plue.html

          4年前 回复
          • 博主,你的意思是直接这样就行了,不用添加第三段代码到functions.php了?

            4年前 回复
            • 不是啊。。。 :?: 当然需要啦

              4年前 回复
发表评论