梓悦生活

  • 🍟首页
  • 🍪免费资源
  • 🍓Wordpress
  • 🍋琐碎生活
  • 🍘关于
关注周围的人或事,体验人生历程
  1. 首页
  2. Wordpress
  3. 正文

WordPress 添加相关文章代码

2017/03/21 2054点热度 0人点赞 0条评论

由于博主用的是牧风的简洁主题,后来发现需要美化一下,有些功能还是需要的,就譬如这个相关文章。

本文主要给大家分享 标题+缩略图 样式的相关文章代码。

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

将下面的代码添加到 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>

第四行$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.添加含缩略图的相关文章

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;
}

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

自定义字段为 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>

第四行$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}
标签: wordpress
最后更新:2017/03/21

Meteor

关注周围的人或事,体验人生历程!

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

最新 热点 随机
最新 热点 随机
Vultr 推出免费云主机,用于鼓励全球创新 一键网络重装系统 – 魔改版(适用于Linux / Windows) Debian/Ubuntu SSH端口一键修改脚本及关闭防火墙 [云监控探针]支持节点管理和监控的ServerStatus 宝塔面板7.7.0版本及以下解锁付费插件开心版方法 宝塔面板版本降级至7.7.0方法
一键网络重装系统 – 魔改版(适用于Linux / Windows)MyNodeQuery一款简洁好用的云监控探针宝塔面板如何取消绑定或强制登录宝塔账号宝塔面板版本降级至7.7.0方法宝塔面板7.7.0版本及以下解锁付费插件开心版方法Debian/Ubuntu SSH端口一键修改脚本及关闭防火墙
#库巴导购#美的立式饮水机MYR927S-W 新浪SAE免费空间绑定域名+伪静态设置实用方法 #库巴导购#三星10.1英寸上网本 如何恢复WordPress到旧版本 WordPress标签tags页面调用方法 【库巴微福利】八件SKG电器大奖等你拿!
最近评论
Meteor 发布于 2 周前(03月09日) 是的,要求的配置也要高很多,不一定所有服务器都适用
夏日博客 发布于 3 周前(03月04日) 高版本的win系统越来越不好装了。
侠客书 发布于 4 个月前(11月29日) 具体改了些什么?
rtyu 发布于 6 个月前(10月07日) 来过,留个印迹~
Adoncn 发布于 1 年前(01月10日) 不错!!!不错!!!
标签聚合
Linux技巧 VPS wordpress 技巧 活动 虚拟主机 Linux 域名解析
友情链接
  • Anders Norén
  • Appurse
  • CSS参考手册
  • DeeTeam-迪提姆
  • Fatesinger
  • FreeSSL
  • gandi
  • Internetbs
  • Kevan's Blog
  • LogoMaker

COPYRIGHT © 2023 梓悦生活. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang