Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; comment_reply_notification has a deprecated constructor in /home/wwwroot/hector/www.yiwuye.com/wp-content/plugins/comment-reply-notification/comment-reply-notification.php on line 13
[wp技巧]wordpress添加tag图片 « 一梧叶

[wp技巧]wordpress添加tag图片

 - by Hector

先看下效果吧,一梧叶的每篇文章右边都有一个96*96的透明图片,图片是跟文章正文内容的tag(标签)匹配的,当点击这个png图片时会转跳到含有这个tag的文章分类页面。Cnbeta大部分文章里面也带有这种功能的tag图片,国内著名的IT评论博客月光博客在文章列表页也有这种tag图片,但是月光博客的图片比较杂乱。

wordpress的tag添加png图标效果图

wordpress的tag添加png图标效果图

添加原理
给tag添加图片,是在上传好图片的情况下,根据tag名和图片的名称一一对应,每篇文章根据添加的一个自定义栏目tag_logo来控制要显示的图片。

具体步骤

1.添加图片
在wp-content文件夹下创建tag_logo文件夹,里面上传png图片,根据大小,我统一选择96*96的,注意文件名和tag名一致,大小写也一致,最好都用小写。比如本文的tag是wordpress,png则是wordpress.png。png图片可以到这个网站上去下载http://www.easyicon.cn/,里面广告少,搜索方便,高质量png图片也非常多,而且支持不同格式大小的png图片。
2.添加样式
在css文件最下面添加如下样式

#tag_logo
{
float: right; margin: 4px; padding: 0px; border: 0px;
padding: 0px;width:100px;height:100px;overflow:hidden; clear:both;
}
3.添加显示代码
在<?php the_content或者<?php the_excerpt前面添加如下代码

<!-- Tag Logo Begin -->
<!--?php if ( get_post_meta($post--->ID, 'tag_logo', true) ) { ?>
<!--?php $tag_logo = get_post_meta($post--->ID, 'tag_logo', true); ?>
<a href="<?php echo get_option('home'); ?>/tag/<?php echo $tag_logo; ?>/"><img id="tag_logo" src="<?php echo get_option('home'); ?>/wp-content/tag_Logo/<?php echo $tag_logo; ?>.png" alt="TAG:<?php echo $tag_logo; ?>" /></a><!--?php } else {?--><!--?php } ?-->
<!-- Tag Logo End -->
4.发布文章,添加自定义栏目
在发布文章的时候,在自定义栏目那里,新建一个栏目,名称是tag_log,值是标签的名称,比如这篇文章tag的wordpress。

Leave a comment