之前微酷博客已经介绍过两次这样的文章了，第一次是当我还在用Pjblog的时候发了一篇PJBlog日志摘要图文混排教程，之后是前些天微酷博客改版换成Z-Blog程序后又发表了一篇Z-Blog实现日志图文混排教程，今天还是实现同样的效果只是目标程序是WordPress，以前研究WP很少很少，今天为实现这效果看了下发现WP功能确实强大，实现起来很简单，有点心动想转投WP了。

还是再先来看下实现日志图文混排后的效果吧，微酷也说不清这叫什么名字就自己起名叫日志Tag Logo ，就是CnBeta上的效果，每个文章右上角都有个小图片，并且连接到这类文章TAG标签，语言不好说看下面截图中右边的FireFox图片就明白啦。

WordPress利用自定义域实现日志Tag图片的方法：

①：打开主题风格文件夹下的style.css文件在最后面加入以下CSS代码

#tag_logo{float: right; margin: 4px; padding: 0px; border: 0px; padding: 0px; max-width: 500px; max-height:500px; overflow:hidden; clear:both;}
/* Tag Logo CSS For WP,Zblog,PJblog By iFu25.CN QQ:263499118*/
#tag_logo img{width:100px;height:100px;border:0px;}

 ②：打开主题目录下的index.php、single.php文件查找这段代码：<?php the_content
　　在这段代码的上一行插入下面的代码：

<!-- Tag Logo For WP By WWW.iFu25.CN QQ:263499118 2009.8.27 3:59:13-->
<?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 {?>
<a href="<?php the_permalink() ?>"><img id="tag_logo" src="<?php echo get_option('home'); ?>/wp-content/Tag_Logo/TAG.png" title="<?php the_title(); ?>" /></a>
<?php } ?>
<!-- Tag Logo End -->

 ③：在WordPress目录wp-content下建文件夹Tag_Logo，做个大小100左右的图片命名为tag.png.

④：开写日志，写完后找到下面的自定义域，添加新自定义域。名称：tag_logo (注意都小写)　值：（这里就是要显示的TAG图片，只写TAG名字就行比如光写日记两个字就可以了。）

⑤：做一张100左右的图片命名为日记.png然后上传到WP下的Tag_Logo文件夹下，这样就OK啦，可以事先把博客经常用的TAG名字的图片都做好传到Tag_Logo里面。

另外：微酷博客只做过简单测试，有问题欢迎反馈。

原创文章转载请注明来自微酷博客：http://www.ifu25.cn/show/1244.html