北极寒流 » 网络资源 » 免插件实现仿无觅相关文章图文模式功能(增强版) - 2014.06.25

免插件实现仿无觅相关文章图文模式功能(增强版)

免插件实现仿无觅相关文章图文模式功能,没啥多说的,代码来自devework。本方法实现的相关文章原理是通过获取该文章tag(标签),如果相关tag不足,再找到同一分类的文章,这些文章即为“相关文章”。而图片的话,采用的是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
$post_num = 5; // 數量設定.
$exclude_id = $post->ID; // 單獨使用要開此行 //zww: edit
$posttags = get_the_tags(); $i = 0;
if ( $posttags ) {
    $tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ','; //zww: edit
    $args = array(
        'post_status' => 'publish',
        'tag__in' => explode(',', $tags), // 只選 tags 的文章. //zww: edit
        '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();//edit by Jeff at DeveWork.com
        $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 href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    <?php the_title(); ?></a></p>
    </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(); //edit by Jeff at DeveWork.com
     $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 href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    <?php the_title(); ?></a></p>
    </li>
    <?php $i++;
    } wp_reset_query();
}
if ( $i  == 0 )  echo '<li>没有相关文章!</li>';
?>
</ul>
</div>
二、Css文件定义
/* 相关文章 */
.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;
}

搞定收工!

资料来源:http://devework.com/wumi-relatedposts-plue.html

25

免插件实现仿无觅相关文章图文模式功能(增强版)

分享到:

最受欢迎的