在WordPress的图片上添加文字

有时候我们可以看到一些博客或者网站的图片上显示当前文章的标题或者是其他信息,尤其是一些文章的缩略图,不仅可以很直观的知道此文章的标题或者大概信息,不仅增加了博客的专业感,也增强了访客的体验.关于演示,大家可以看看本文的英文原文和WordPress一些插件的页面,比如WordPress SEO by Yoast的页面,你可以很清楚看到头部的图片的效果.

那么,如何添加呢,下面就是添加文字的PHP和CSS代码:

添加分类名称到图片

<div class="post-thumb">
<span class="new-wrapper">

<?php
//Display post thumbnail

if ( has_post_thumbnail()) : the_post_thumbnail('thumbnail'); endif;

?>

<span>
<?php
// Get the Name of First Category

$category = get_the_category();
echo $category[0]->cat_name;

?>

</span>
</span>
 </div>

在css文件中添加css代码

.new-wrapper span {
	background-color: Black;
	color:white;
	font-size: 12px;
	position:absolute;
	bottom:0px;
	left:0px;
	padding-left:10px;
	padding: 10px;
	-moz-opacity:.80;
	filter:alpha(opacity=80);
	opacity:.80;
	width:180px;
	display: block;
}

.new-wrapper {
float:left;
position:relative;
width: 180px;
overflow:hidden;
}

上述代码要求图片的大小为180×180像素,如果不是这个大小,需要重新生成该大小的图片.

添加文章标题到图片

<div class="single-featured-image">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if ( has_post_thumbnail()) : the_post_thumbnail('full'); endif; ?>
</div>

CSS代码

.single-featured-image {
	position:relative;
	width: 600px;
	overflow:hidden;
}
.single-featured-image h2 {
	background-color: Black;
	color:white;
	font-size: 20px;
	position:absolute;
	bottom:0px;
	left:0px;
	padding-left:10px;
	padding: 10px;
	-moz-opacity:.80;
	filter:alpha(opacity=80);
	opacity:.80;
	width:600px;
	display: block;
}
.single-featured-image h2 a {
	color:white;
}
.single-featured-image h2 a:visited {
	color:white;
}
.single-featured-image h2 a:hover {
	color:white;
}

图片需要设置为最大尺寸.

添加带缩略图文章和文章标题

<div class="featured-posts-box">
<?php
    $recentPosts = new WP_Query();
    $recentPosts->query('showposts=3', 'category_name=Featured');
?>
<ul class="top-featured-image">
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<li class="top-featured-image">
<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
<?php if ( has_post_thumbnail()) : the_post_thumbnail('thumbnail'); endif; ?>
</li>
<?php endwhile; ?>
</ul>
</div>

CSS代码

.featured-posts-box {
background:#eee;
padding:5px;
}

.top-featured-image {
	position:relative;
	width: 180px;
	overflow:hidden;
display:inline;
}

.top-featured-image span {
	background-color: Black;
	color:white;
	font-size: small;
	position:absolute;
	bottom:0px;
	left:0px;
	padding-left:10px;
	padding: 10px;
	-moz-opacity:.80;
	filter:alpha(opacity=80);
	opacity:.80;
	width:160px;
	display: inline;
float:left;
text-align:left;
}
.top-featured-image span a {
	color:white;
}
.top-featured-image span a:visited {
	color:white;
}
.top-featured-image span a:hover {
	color:white;
}

.top-featured-image ul {
list-style:none;
display: inline;

}

关于此代码的具体方法和效果,可以之原文查看.

标签：文字覆盖图片, 缩略图

添加分类名称到图片

添加文章标题到图片

添加带缩略图文章和文章标题

你的评论