当前位置:首页>WordPress建站>基础教程>WordPress添加相关文章功能(标题/缩略图样式)

WordPress添加相关文章功能(标题/缩略图样式)

WordPress 主题 CoreNext

本文将教会你如何为WordPress添加相关文章功能,并提供了标题列表样式和缩略图样式。相关文章的获取思路是:Tags标签相关>同分类下文章,也就是说,先获取标签相同的文章,如果还达不到数量,就调用该分类下的文章补足。获取方法貌似最初来自Willin Kan 大师,倡萌再次修改。

1.添加标题列表样式的相关文章

wpdaxue.com-201211117

将下面的代码添加到 single.php 要显示相关文章的位置即可:

<h3>相关文章</h3>
<ul class="related_posts">
<?php
$post_num = 8;
$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),
		'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="bookmark" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
	<?php
		$exclude_id .= ',' . $post->ID; $i ++;
	} wp_reset_query();
}
if ( $i < $post_num ) {
	$cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ',';
	$args = array(
		'category__in' => explode(',', $cats),
		'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="bookmark" href="<?php the_permalink(); ?>"  title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
	<?php $i++;
	} wp_reset_query();
}
if ( $i  == 0 )  echo '<li>没有相关文章!</li>';
?>
</ul>

PS:第四行$post_num = 8;表示显示8篇文章,请根据自己的需要修改。

显示样式需要自己写css,可以参考一下下面的:

.related_posts{margin-top:5px;}
.related_posts li{margin-left:20px;color:#444;list-style:circle;font-size:14px;line-height:26px;padding:0 0 0 5px}

2.添加含缩略图的相关文章

wpdaxue.com-201211116

倡萌只是根据上面的代码改了一下,添加了缩略图。

1)在主题的 functions.php 的最后一个 ?> 前添加下面的代码:

//添加特色缩略图支持
if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');

//输出缩略图地址 From wpdaxue.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/pic/'.$random.'.jpg';
			//如果日志中没有图片,则显示默认图片
			//echo '/images/default_thumb.jpg';
		}
	};
	echo $post_thumbnail_src;
}

PS:上面的代码主要是获取图片链接,获取的顺序是:

自定义字段为 thumb 的图片>特色缩略图>文章第一张图片>随机图片/默认图片;

随机图片:请制作10张图片,放在现用主题文件夹下的 images/pic/ 目录,图片为jpg格式,并且使用数字 1-10命名,比如 1.jpg;如果你不想用随机图片,请将 倒数第5行 前面的“//”去掉,然后给 倒数第7、9行 前面添加“//”注销,并且在现用主题的 /images/ 目录下添加一张名字为 default_thumb.jpg 的默认图片,这样,就会显示默认图片。

2)将下面的代码添加到 single.php 要显示相关文章的位置:

<h3>相关文章</h3>
<ul class="related_img">
<?php
$post_num = 4;
$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),
		'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 class="related_box"  >
		<div class="r_pic">
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank">
		<img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" />
		</a>
		</div>
		<div class="r_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div>
		</li>
	<?php
		$exclude_id .= ',' . $post->ID; $i ++;
	} wp_reset_query();
}
if ( $i < $post_num ) {
	$cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ',';
	$args = array(
		'category__in' => explode(',', $cats),
		'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 class="related_box"  >
		<div class="r_pic">
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank">
		<img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" />
		</a>
		</div>
		<div class="r_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div>
	</li>
	<?php $i++;
	} wp_reset_query();
}
if ( $i  == 0 )  echo '<div class="r_title">没有相关文章!</div>';
?>
</ul>

PS:第四行$post_num = 4; 表示调用4篇文章,请根据自己需要修改。

css样式自己写,也可参考一下:

.related_posts{margin-top:5px;}
.related_img{width:600px;height:210px;}
.related_box{float:left;overflow:hidden;margin-top:5px;width:148px;border-right:1px #eee solid}
.related_box:hover{background:#f9f9f9}
.related_box .r_title{width:auto;height:72px;font-weight:400;font-size:14px;margin:0 10px;overflow:hidden;}
.related_box .r_pic{margin:6px}
.related_box .r_pic img{width:130px;height:100px;border:1px  solid #e1e1e1;background:#fff;padding:2px}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
欢迎关注WordPress大学公众号 WPDAXUE
基础教程

WordPress添加友情链接页面(自动获取favicon.ico图标)

2012-11-6 6:04:00

基础教程

WordPress拼音链接插件:Pinyin Permalink(中文链接转拼音)

2012-11-8 6:24:00

54 条回复 A文章作者 M管理员
  1. 刹那

    麻烦能不能改一个 先获取同分类下文章,同分类文章不够的再获取tags相同文章,我是个三把刀不知道怎么替换

  2. ffbbyyy

    你好,我想请问下,怎么随机显示同分类或者tag下的相关文章,按照上面代码加上后设置4个相关文章,但是相关文章显示的是相邻的4篇文章,谢谢

    • ffbbyyy

      我把’orderby’ => ‘comment_date’,改成’orderby’ => ‘rand’,也不起作用啊

    • ffbbyyy

      错了,不是相邻的文章,是最新的4篇文章

    • 倡萌

      代码默认就是调用相同标签的文章,确保你的确为文章添加标签

    • ffbbyyy

      把’orderby’ => ‘comment_date’,改成’orderby’ => ‘rand’,已经能随机调文章了,刚没清缓存,另外请教下,我使用的是dux1.8主题,文章设置了外链缩略图,但是随机显示相关文章的时候,图片调用的是文章里的第一张图片,我想显示成设置的外链缩略图怎么修改?上面教程的获取图片链接顺序是:
      自定义字段为 thumb 的图片>特色缩略图>文章第一张图片>随机图片/默认图片;

    • 倡萌

      你好,不熟悉你说的这个主题,请联系主题作者咨询,谢谢

    • ffbbyyy

      dux里面functions-theme.php是这些

      add_theme_support( ‘post-formats’, array( ‘aside’ ) );

      // post thumbnail
      if (function_exists(‘add_theme_support’)) {
      add_theme_support(‘post-thumbnails’);
      set_post_thumbnail_size(220, 150, true );
      }

      和下面这段,我看不懂

      function _get_post_thumbnail($size = ‘thumbnail’, $class = ‘thumb’) {
      global $post;

      $thumb_default = get_stylesheet_directory_uri() . ‘/img/thumbnail.png’;

      $issrc = _hui(‘thumbnail_src’);

      $html = ”;
      if (has_post_thumbnail()) {

      /*$domsxe = simplexml_load_string(get_the_post_thumbnail());
      $src = $domsxe->attributes()->src;

      $src_array = wp_get_attachment_image_src(_get_attachment_id_from_src($src), $size);
      $html = sprintf(”, $src_array[0], $class);*/
      // print_r($domsxe);

      $domsxe = get_the_post_thumbnail();
      preg_match_all(‘//sim’, $domsxe, $strResult, PREG_PATTERN_ORDER);
      $images = $strResult[1];
      foreach($images as $src){
      if( $issrc ){
      $html = sprintf(”, $thumb_default, $src);
      }else{
      $html = sprintf(”, $src, $post->post_title._get_delimiter().get_bloginfo(‘name’));
      }
      break;
      }

      } else {

      $_de = ‘ data-thumb=”default”‘;

      if( _hui(‘thumblink_s’) ){
      $thumblink = get_post_meta($post->ID, ‘thumblink’, true);
      if( !empty($thumblink) ){
      $thumb_default = $thumblink;
      $_de = ”;
      }
      }

      if( $issrc ){
      $html = sprintf(”, $thumb_default, $class);
      }else{
      $html = sprintf(”, $thumb_default, $class, $post->post_title._get_delimiter().get_bloginfo(‘name’));
      }

      }

      return $html;
      }

    • 专业找错别字

      总算打出来了 是 if( $thumb_s ) echo '<a href="'.get_permalink().'">'._get_post_thumbnail('full').'</a>';

  3. 7u79

    有可以通过文章标题匹配相关文章的代码吗

    • 倡萌

      没有这方面的,还是建议你通过标签来获取相关文章吧

    • 倡萌

      那得搞数据分析了(丧)

  4. 280436616

    我想把这段代码放在首页,做成cms豆腐块的样子。
    求回复!!

    • 倡萌

      要修改主题,自己学习下基本的知识吧:http://www.wpdaxue.com/series/mastering-wp_query/

  5. 280436616

    萌哥!可不可以指定调用某一分类ID下的文章。
    比如我想要这段代码指定调用分类ID:1 下面的文章。这样可以实现吗?

    • HDM

      可以,百度一下就有方法

  6. 280436616

    大神,css放在哪个文件里面。

    • 倡萌

      一般可以添加到主题根目录下的 style.css 文件的末尾

  7. tianyou

    page页面的相关文章、相关页面调用,怎么样弄精准

  8. 寻梦
    function post_thumbnail_src(){
        global $post;
    	$post_thumbnail_src = '';
    	ob_start();
    	ob_end_clean();
    	$output = preg_match_all('//i', $post->post_content, $matches);
    	$post_thumbnail_src = $matches [1] [0];   //获取该图片 src
    	echo $post_thumbnail_src;
    }
    

    这是输出文章第一张图的的代码吧 有问题啊 我文章中好几张图片 有的输出的不是第一张 ➡

    • 寻梦

      研究了下 发现是第一张图片不是指的文章中的第一张,而是多张图在上传的时候第一个传好的图片被定义为了第一张 ➡ ➡ 没办法 设特色图当封面吧

    • 寻梦

      发现如果你文章中的图片尺寸很大的话,获得的特色图片的尺寸就很大,会严重影响加载速度,百度了下获取特色图片的函数wp_get_attachment_image_src(),拿倡萌的那段代码来说$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),’full’);看最后,是full,尺寸最大的,有点坑爹哦,倡萌应该备注下,其中full可以修改的,可以为thumbnail, medium, large or full(分别代表最小的缩略图、中等、大和原始尺寸)

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索