之前微酷博客已经介绍过两次这样的文章了,第一次是当我还在用Pjblog的时候发了一篇PJBlog日志摘要图文混排教程,之后是前些天微酷博客改版换成Z-Blog程序后又发表了一篇Z-Blog实现日志图文混排教程,今天还是实现同样的效果只是目标程序是WordPress,以前研究WP很少很少,今天为实现这效果看了下发现WP功能确实强大,实现起来很简单,有点心动想转投WP了。
还是再先来看下实现日志图文混排后的效果吧,微酷也说不清这叫什么名字就自己起名叫日志Tag Logo ,就是CnBeta上的效果,每个文章右上角都有个小图片,并且连接到这类文章TAG标签,语言不好说看下面截图中右边的FireFox图片就明白啦。
①:打开主题风格文件夹下的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
联系客服