月度归档:四月 2011

为IE整圆角和透明度的问题

[ wordpress ] 2011年4月25日

之所以写这个,是因为自己弄主题的时候碰到了这个问题呢,也不得不感叹IE浏览器就是跟不上时代的潮流。写这个也孩子是为了给自己增加下熟练度。就这样吧:

首先是透明度的

  1. .transparent_class {  
  2.       filter:alpha(opacity=50);  
  3.       -moz-opacity:0.5;  
  4.       -khtml-opacity: 0.5;  
  5.       opacity: 0.5;  
  6. }  

 

接下来是圆角,这个感觉有点问题,我实际使用的时候不满意,方法就是要链接一个微软的脚本文件.

CSS如下所示:

  1. .main{  
  2. border: 2px solid #C0C0C0;  
  3. -moz-border-radius: 10px;  
  4. -webkit-border-radius: 10px;  
  5. border-radius: 10px;  
  6. position:relative;  
  7. z-index:2;  
  8. behavior: url(此处为ie-css3.htc文件的绝对路径);  

为实现:

  1. border-radius: 10px;     

就要链接上htc文件.

 

注意

1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为 IE浏览器找该文件是相对当前html文件路径来找的,所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

2、一定要有定位属性:position:relative;

3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大.

 

 

 

http://u.115.com/file/f07da5e8f7

给博客底部添加动态的年份标识

[ wordpress ] 2011年4月21日

有时候我查资料的时候,看到一些博客的年份标识有时都是去年的了,我就经不住内心嘀咕一下。嘿嘿,现在我在自己写主题,正好要装扮底部版权了,就去百度了下,顺便给大家分享下。

这种动态标识是根据第一篇日志来判断的,所以是蛮不错的。

函数如下,

  1. function comicpress_copyright() {  
  2.     global $wpdb;  
  3.     $copyright_dates = $wpdb->get_results("  
  4.         SELECT  
  5.         YEAR(min(post_date_gmt)) AS firstdate,  
  6.         YEAR(max(post_date_gmt)) AS lastdate  
  7.         FROM  
  8.         $wpdb->posts  
  9.         WHERE  
  10.         post_status = 'publish'  
  11.     ");  
  12.     $output = '';  
  13.     if($copyright_dates) {  
  14.         $copyright = "© " . $copyright_dates[0]->firstdate;  
  15.         if($copyright_dates[0]->firstdate != $copyright_dates[0]->lastdate) {  
  16.             $copyright .= '-' . $copyright_dates[0]->lastdate;  
  17.         }  
  18.         $output = $copyright;  
  19.     }  
  20.     return $output;  

以上的东西复制进functions.php

之后在适当的位置添加一下代码:

  1. <?php echo comicpress_copyright(); ?> 

之后刷新看下,当得当,最终结果:就是类似© 2009 – 2011这样的日期。

 

wordmobi–塞班S60用wordpress撰写工具

[ wordpress ] 2011年4月14日

之前就找过手机管理wordpress的软件,可一直搁置没使用。前几天一一下载了塞班版的软件,最后能用的就一个wordmobi。我这里就先介绍一下(想了半天,感觉确实没什么说的):就是一款塞班手机上的wordpress撰写工具,它支持多种语言,庆幸的是它支持中文,在里面能后管理文章,评论以及分类,标签.另外说一句,它也支持多账户设置。

 

官方地址:http://code.google.com/p/wordmobi/

下面贴几个图片出来:

 

 

最后我说一下我使用的经历:要使用wordmobi,首先要在博客后台设置--撰写(writing)里的 XML-RPC和ATOM 发布协议(Atom Publishing Protocol) ,如图所示:

如果不启用的话,会无法发布,更新。

还有就是文章写好后不能够保存,额,这是我遇到的情况。

jquery滑动菜单之我用

[ wordpress ] 2011年4月8日

一开始接触wordpress的时候,就接触到了那种滑动导航菜单,当时很迷,非常想自己会弄,可是找了好久,自己也不会弄,而且时间也不多,后来就不了了之了。

现在时间是很充足的了,就决定重新启动这个“项目”。

首先还是收集了好些应用jquery的插件(应该不算插件了,要自己修改才能应用)。今天看了下lavalamp的滑动菜单,它提供了三种基本样式,应该说还是够用的,只是可能简洁了点。

With Image

No Image

Bottom Style

要达到这样的效果,要做三方面的准备:CSS,JS和网页上的布局。

1.针对wordpress,在header.php里修改即可,若是自己编写代码构成的菜单解决很简单,添加如下代码:

  1. <ul class="lavaLamp" >
  2. <li class="current"><a href="#">Home</a></li>
  3. <li><a href="#">Plant a tree</a></li>
  4. <li><a href="#">Travel</a></li>
  5. <li><a href="#">Elephant</a></li>
  6. </ul>

如果是使用wp自身的自定义菜单功能调用菜单的话

比如

  1. <?php wp_nav_menu( array( 'theme_location' => 'header-menu')); ?>

要将其修改为

  1. <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ,'menu_class'=>'lavaLamp')); ?>

其中的'theme_location' 和'header-menu' 不是严格一致的,可能你的博客是其他。

2.CSS

如果你的博客菜单没有成型,或者说还不太复杂,能够简单修改的话,请参照提供的CSS修改,先贴出部分:

  1. .lavaLampWithImage {
  2. position: relative;
  3. height: 29px;
  4. width: 421px;
  5. background: url("bg.gif") no-repeat top;
  6. padding: 15px;
  7. margin: 10px 0;
  8. overflow: hidden;
  9. }
  10. .lavaLampWithImage li {
  11. float: left;
  12. list-style: none;
  13. }
  14. .lavaLampWithImage li.back {
  15. background: url("lava.gif") no-repeat rightright -30px;
  16. width: 9px; height: 30px;
  17. z-index: 8;
  18. position: absolute;
  19. }
  20. .lavaLampWithImage li.back .left {
  21. background: url("lava.gif") no-repeat top left;
  22. height: 30px;
  23. margin-right: 9px; /* 7px is the width of the rounded shape */
  24. }
  25. .lavaLampWithImage li a {
  26. font: bold 14px arial;
  27. text-decoration: none;
  28. color: #fff;
  29. outline: none;
  30. text-align: center;
  31. top: 7px;
  32. text-transform: uppercase;
  33. letter-spacing: 0;
  34. z-index: 10;
  35. display: block;
  36. float: left;
  37. height: 30px;
  38. position: relative;
  39. overflow: hidden;
  40. margin: auto 10px;
  41. }
  42. .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
  43. border: none;
  44. }

之后如果你的博客已经成型,可以参考以下代码:

  1. .lavaLamp a{z-index: 10;}
  2. .lavaLamp li.back {border-bottom: 3px solid #48A8A8; position: absolute;z-index: 8;}

具体的颜色,大小,间隔请自行修改,这里只提供洗方法。

3.Javascript文件加载

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js"></script>
  2. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.easing.min.js"></script>
  3. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.lavalamp.min.js"></script>
  4. <script type="text/javascript">
  5. $(function() {
  6. $("#1, #2, #3").lavaLamp({
  7. fx: "backout",
  8. speed: 700,
  9. click: function(event, menuItem) {
  10. return false;
  11. }
  12. });
  13. });
  14. script>

这样以后基本就没问题了,不过不排除我写的有问题(呵呵,技术不行)。还有就是,在应用到wp自定义菜单的时候不支持多级菜单,不知道怎么解决。

顺便贴出作者地址:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

用JiaThis分享你的博客

[ wordpress ] 2011年4月6日

JiaThis是一款国内的社会化插件,貌似看到很多人说它是盗版的share this。好吧,说实话我也没用过几个分享插件,这还是我第一次用。

我先引用下介绍“

JiaThis是一个提供网页地址收藏、分享及发送的WEB2.0按钮工具,网站的浏览者可以方便的分享到人人网、分享到开心网、分享到QQ空间、分享到新浪微博等一系列社会化关系网络站点。
网站主可以在这里获得标准按钮JS代码,嵌入到自己的网站...让网站链接分享到互联网各个角落!
个人用户可以在这里给浏览器添加分享快捷方式,以后浏览任何网站,直接点击就可以一键分享。
不仅中小型网站使用JiaThis,国内诸多超大型网站,如:淘宝、百度、腾讯、新浪、MSN、360、人人…等等,也都正在使用JiaThis。”

 

JiaThis说实话不是一款插件,只是我一开始用的是不知道哪来的插件,在我的博客启用插件后,在很多不该显示的地方出现了分享。我看了下代码,只是大概看下,因为不懂。在出现the_content()等之类函数的地方都是被插入分享代码。

 

JiaThis有四种样式,分别是侧栏式,工具式,按钮式,图标式。我们也可以自定义分享名字,图标等等。

以下是侧栏代码,只要把它放到你文章页面需要调用的地方,貌似放在the_content()所在<div>标签的前面或者后面。

  1. <!-- JiaThis Button BEGIN -->  
  2. <script type="text/javascript" src="http://v1.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script>  
  3. <!-- JiaThis Button END –> 

其他也没什么好说的,暂时就到这吧。

给WordPress代码高亮显示(不用插件)

[ 代码生活 ] 2011年4月4日

发表日志的时候难免会遇到要贴代码的时候,要是省事贴了文本上去,感觉太对不起群众了。所以还是要搞个代码高亮的东西的。

CodeRenderUnmi一款本地转换代码高亮显示的小工具,支持的语言有:java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi。

方便在你的博客中粘贴代码,自定相应的样式的话可以在highlight.css 里面.Text 支持自定义样式或在模板里加上语法样式,然后用CodeRenderUnmi生成相应代码,复制后贴到博客里就能高亮显示了。

这个工具的操作蛮简单的,Source Code 中贴上你要着色的代码,然后选择语种,点击 Render 按钮就会在 HTML Code 中生成相应的 HTML 代码,同时在 HTML Preview 中可以预览到效果。

Lang 下拉框可以选择所支持的语法,Options 右边的 Gutter、Controls、CollapseAll、FirstLine、Columns 是控制生成的额外的元素。每个内容显示(输入)区都提供了 Copy/Paste/Clear 快捷操作链接,还有一个总的 Clear 按钮。

Copy生成 的HTML 代码,在日志编辑窗口切换到HTML源代码编辑模式,粘贴就可以了。

最后还要正确显示还需要在wordprss主题加载“highlight.css”的样式文件。

打开header.php在顶部<link>…</link>标签前面或者后面添加

  1. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/highlight.css" />   

 

不过要注意按照以上代码,highlight.css要放到主题目录下CSS文件夹中,如果没有这个文件夹,放到主题目录下,修改插入代码

  1. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />    

其次可以把highlight.css里的代码复制到主题style.css中,上面的步骤就不用做了。

此时如认为默认的样式不好看的,可以通过修改“highlight.css”中的样式改变代码高亮、边框、背景等颜色,更个性化。

但需要注意的是Wordpress会自动把半角符号替换为全角,别人复制下来的函数代码标点是全角的,就无法使用了。

我在修改时,也遇到这个情况,复制的时候符号变化了,一直没有成功。还有就是如果代码实际显示的时候没有显示行号,而左边框有两条线,说明行号数字被挤压没了,修改下

  1. .dp-highlighter ol   
  2. {   
  3.     margin0px 0px 1px 32px/* 1px bottom margin seems to fix occasional Firefox scrolling */  
  4.     padding2px;   
  5.     color#2B91AF;   
  6. }   

里margin 的第四个PX数字

关于符号的具体解决办法是:

打开并编辑 wp-includes/formatting.php 文件,找到以下代码:

  1. // static strings    
  2.  $curl = str_replace($static_characters$static_replacements$curl);    
  3.  // regular expressions    
  4.  $curl = preg_replace($dynamic_characters$dynamic_replacements$curl);    
  5. $curl 开头的两句代码注释掉,如下:    
  6. // static strings    
  7. //$curl = str_replace($static_characters, $static_replacements, $curl);    
  8. // regular expressions    
  9. //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);    

效果如下

PHP:

  1. <div id="movenavi">   
  2.     <div class="moveup"></div>   
  3.     <div class="movecomt"></div>   
  4.     <div class="movedown"></div>   
  5. </div>    

 

CodeRenderUnmi

http://dl.dbank.com/c0li6v0nf2

练手的修改主题

[ 生活随笔 ] 2011年4月1日

最近几天忙里偷闲开始修改主题,练习所谓的开发啦。不过实力有限,而且到现在搞的我特憔悴,现在也就是个半成品,感觉不好。同时也决定今晚不干了,休息一晚把,也找点时间上传主题的图片.

图就随便搁着啦;