0°

添加特色图片功能-WordPress主题开发

来源于:

http://www.nafanlong.com/2473.html

在主题的 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('//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;
}

调用方法:

 echo post_thumbnail_src(); ?>

<img src="" alt="" class="thumbnail" />

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

<h3>相关文章h3>
<ul class="related_img">

$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="" title="" target="_blank">
		<img src="" alt="" class="thumbnail" />
		a>
		div>
		<div class="r_title"><a href="" title="" target="_blank" rel="bookmark"> the_title(); ?>a>div>
		li>
	
		$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="" title="" target="_blank">
		<img src="" alt="" class="thumbnail" />
		a>
		div>
		<div class="r_title"><a href="" title="" target="_blank" rel="bookmark"> the_title(); ?>a>div>
	li>
	 $i++;
	} wp_reset_query();
}
if ( $i  == 0 )  echo '
没有相关文章!
';
?>
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}

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

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

随机图片:请制作10张图片,放在现用主题文件夹下的 images/pic/ 目录,图片为jpg格式,并且使用数字 1-10命名,比如 1.jpg;

如果你不想用随机图片,请将 倒数第5行 前面的“//”去掉,然后给 倒数第79行 前面添加“//”注销,并且在现用主题的 /images/ 目录下添加一张名字为 default_thumb.jpg 的默认图片,这样,就会显示默认图片。

WordPress代码实现相关文章的几种方法

023

仅供参考

以下来源于:

https://zhidao.baidu.com/question/2079666978763112708.html

方法/步骤

第一步,添加主题对特色图像功能的支持

将下面代码主题functions.php文件中:

// 添加特色图像功能
add_theme_support('post-thumbnails');
set_post_thumbnail_size(130, 100, true); // 图片宽度与高度,图片的长宽可以自行修改。

第二步,添加特色图像调用代码

if (has_post_thumbnail()) {
// 显示特色图像
the_post_thumbnail();
} else {
// 设置特色图像
$attachments = get_posts(array(
'post_type' => 'attachment',
'post_mime_type'=>'image',
'posts_per_page' => 0,
'post_parent' => $post->ID,
'order'=>'ASC'
));
if ($attachments) {
foreach ($attachments as $attachment) {
set_post_thumbnail($post->ID, $attachment->ID);
break;
}
// 显示特色图像
the_post_thumbnail();
}
} ?>

代码说明,如果未手动设置特色图像,那么会自动调用第一个图片附件的“缩略图”作为特色图像,并显示它。

获取文章缩略图url地址:

来源于:

https://www.boke8.net/wordpress-wp_get_attachment_image_src.html

 
$getThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()),full);
echo $getThumbnail[0];
?>

官方示例:

 
    $attachment_id = 8; // 附件ID     $image_attributes = wp_get_attachment_image_src( $attachment_id ); // 返回一个数组if( $image_attributes ) {
?> 
    "" width="" height="">
 } ?>

获取上一篇文章的链接与特色图像:

"ID ); ?>">
			 echo get_the_post_thumbnail( $prev_post->ID, '', '' ); ?>
a>

获取上一篇文章的特色图片链接(完整):$prev_post

$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($prev_post->ID), 'full');
echo $full_image_url[0];
?>

获取下一篇文章的链接与特色图像:

"ID ); ?>">
			 echo get_the_post_thumbnail( $next_post->ID, '', '' ); ?>
		a> 

获取下一篇文章的特色图像链接(完整):$next_post

$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($next_post->ID), 'full');
echo $full_image_url[0];
?>

WordPress获取特色图像的链接地址

来源于:https://www.cnblogs.com/hxqseo/p/5027663.html

为什么要获取WordPress的特色图像呢?

这主要是因为,我们已经写好了静态模板文件,只有获取WordPress特色图像地址插入进去就可以了,非常方便。

还有就是有的时候,我们需要设置图片的宽度为100%,高度自动。这样通过 the_post_thumbnail() 这个方法就无法实现了。

好了,看下面的方法:

获取特色图像:小

$thumbnail_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail');
echo $thumbnail_image_url[0];
?>

 

获取特色图像:中

$medium_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium');
echo $medium_image_url[0];
?>

 

获取特色图像:大

$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo $large_image_url[0];
?>

 

获取特色图像:完整

$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
echo $full_image_url[0];
?>

 

获取特色图像:指定100X100

$array_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array(100,100));
echo $array_image_url[0];
?>

 

本文参考:http://xiedexu.cn/get_post_thumbnail_uri.htm

0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论