伟景博客 » Wordpress

Google voice现在对大家开放了

Welkin — Tue, 22 Jun 2010 23:45:17 +0000

Google Voice is now open to everyone. Google voice现在对大家免费开放了，不再需要邀请了。

Use a single number that rings you anywhere.
Get transcribed messages delivered to your inbox.
Free calls & text messages to the U.S. & Canada. Super low rates everywhere else.

用 jQuery 实现灵活的 tab 切换效果zz

Welkin — Fri, 08 Jan 2010 06:56:57 +0000

原文链接：http://www.xiaorsz.com/jquery-realize-tab-switch-effect/

Tab 切换效果现在网上到处都是，特别是一些大型的门户，为了在有限的空间内呈现更多的内容，往往都采取了这种方式。腾讯的迷你首页就非常的典型。我以前用的 wordpresss 皮肤 iNove 中，其实也有这样的效果，就在 Trackbacks 和 Comments 的切换处，就是一个简单的应用。

寒假期间也给自己的博客搞了个，是用的 jQuery 实现的，实现的代码是从网上收集来的，自己感觉是非常不错的代码，非常简单，但不失灵活，而且很好的做到了表现和行为的分离。现在就跟大家分享一下，建议已经引入 jQuery 框架的同志们使用，如果因为这么几行代码而专门引入 jQuery ，感觉有点太夸张了，其实这样的 JS 代码网上多的是，随便 google 一下就 N 多了！！

效果预览

实例见文章的结尾处相关文章的部分。

实现思路

大家看源代码就应该能看到了，我这里三部分内容其实在页面加载的时候都加载了，只是只显示了一块，另外的两块隐藏。然后用 JS 和 CSS 来对鼠标动作进行响应，来达到所想来的效果。这个是 tab 切换效果的基本思路。当然同一些大型门户不同，他们的 tab 都实现了异步传输，即在页面加载的时候并不会加载，而是在需要的时候才从服务器进行传输并显示，这样在技术上显然会比较复杂，对于小网站来说，的确没多少必要！！

具体代码

这里只展示下我用到的代码并进行一些解释，大家可根据实现情况进行修改。

首先看 HTML

tab1
tab2
tab3

以 LI 形式呈现的 tab1 的内容

以 LI 形式呈现的 tab2 的内容

以 LI 形式呈现的 tab3 的内容

看下其实挺简单，一个 P 里三个 span ，然后对应三个 ul 列表，只需要对应的 span 的 ID 和 ul 的 class 一致就可以了。至于 ul 中的内容，就因人而异了！！

我这里是用了两个插件：WordPress Related Posts 和 WP-PostViews Plus 来调用相关文章和热门文章的。于是，我是代码是这样的：

jQuery实现Tab切换效果

Welkin — Fri, 08 Jan 2010 06:54:57 +0000

原文链接：http://immmmm.com/add-jquery-tab-switch-effect.html

啥是“Tab 切换效果”，这都不知道那肯定落伍了！其实实现这个有很多方法，随手一搜就是一大把。不过，既然已经加载了jQuery，那就物尽其用，参考了这篇文章《用 jQuery 实现灵活的 tab 切换效果》。

老规矩，三块代码放了先：


	
		最新评论近期热评随机文章
	 /* Tab的标题，采用span标签，分别加上了id，并给第一个加上class="current" */
	
		
		
		
	 /* Tab的内容，分别加上了与标题对应的class；其中tab-content ul内的函数是调用WP Kit cn插件的 */

#sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;}
#tab-title .current{color:#356aa0;border-bottom:0px;padding:5px 14px;} /* 当前选中标题时的样式 */
#tab-title h3{color:#666;font-size:15px;font-weight:400;}
#tab-1,#tab-2,#tab-3{padding:5px 7px;border-bottom:1px solid #ccf;cursor:pointer;}
#tab-2{border:1px solid #ccf;border-top:none;}
.tab-2,.tab-3{display:none;} /* 这句是用让class=“tab-2”“tab-3”的先隐藏，用CSS控制的好处是没有延迟；如果用jQuery控制会出现只有当页面全部加载完后，tab-2tab-3中的内容才隐藏 */
#tab-content ul{padding:5px 10px;overflow:hidden;}
#tab-content ul li{padding-top:5px;height:20px;}

$('#tab-title span').mouseover(function(){ //鼠标移至id="tab-title"下的span标签时，触发
	$(this).addClass("current").siblings().removeClass(); //给当前的添加class="current"，并且让其同辈元素（即其余#tab-title span）移除class="current"；
	$("."+$(this).attr("id")).show().siblings().hide(); //让class="鼠标移至的span的id"（即tab-content中对应ul中的内容）显示，并且让其同辈元素（即#tab-content ul）隐藏；
});

OK，代码就这些，使用前提是加载了jQuery。这次折腾是html、css、jQuery代码三管齐下，才做出来这么一个东东，效果还行！

用WordPress内置jQuery制作Tabs滑动效果

Welkin — Fri, 08 Jan 2010 06:37:30 +0000

原文链接：http://wanwp.com/tips-tricks/howto-use-builtin-jquery-make-a-tabs-effect/

Tabs滑动效果是冰古比较喜欢用在WordPress插件设置页上的一个流行元素。因为它可以有效地压缩页面的长度，避免用户拉动才能看到内容；还有就是这个效果很coooool，你不觉得吗？

jQuery可以很方便地制作出流行的Tabs滑动效果，于是我们也就可以利用WordPress内置的jQuery快捷地在你的插件或主题中加入Tabs滑动效果。以下就看看如何在插件的设置页中加入该效果吧。

首先是准备设置页的HTML

    function test_setting_page() {
        echo <<
    
        设置
        卸载
    
    
        这里就是设置内容
    
    
        这里是卸载内容
    

TABS;
    }

这里用一个id为wrapper的div包裹设置页中要用到的HTML代码。跟着是ul列表，列表中的li就是Tabs滑动效果中的Tab。li中的#setting和#uninstall对应下面id为setting和uninstall的div，也就是说点击#uninstall对应的Tab就出现id为uninstall的div里的内容。需要更多的tab，按照这样的格式添加就可以了。
现在的效果：

接下来，我们为它添加必须的jQuery

    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');

    add_action('admin_footer', 'test_setting_js');
    function test_setting_js() {
        echo <<
jQuery(document).ready(function(){
    jQuery("#wrapper").tabs();
});

JS;
    }

三个wp_enqueue_script载入Tabs效果中要用到的jQuery库，跟着在后台的底部加上一小段jQuery调用代码（注：这里不能使用$，而用jQuery代替），其中的#wrapper就是上面HTML中的div。
现在的效果：

最后用CSS美化一下Tabs

    add_action('admin_head', 'test_setting_css');
    function test_setting_css() {
        echo '';
    }

CSS都应该添加到head标签里，所以是将CSS添加到后台头部的。虽然WordPress内置了jQuery库，但却没有内置美化用的CSS，所以要自己添加CSS，当然jquery官方提供了很多美化CSS，你选择一个就可以了，不过最好还是将该CSS保存为本地文件，而不是像这里用外链调用。
最后效果：

上面例子的完整代码

参考：UI/API/1.7.1/Tabs

网站截图bluga.net的easy thumb API

Welkin — Fri, 08 Jan 2010 06:33:46 +0000

原文链接：http://bingu.net/646/create-web-thumb-use-bluga-easythumb-api/

bluga.net提供的在线网站截图可以说是现有此类网站中最好一个。她提供了多种分辨率的截图、zip打包下载全部分辨率的截图，还有就是她提供了两种方便的API，可以让注册用户通过API快捷地获取网站的截图。

bluga.net为注册用户免费提供了每个月100张截图的应用，当我们在制作类似CSS Vault这样的网站时，就可以不用人工去进行截图工作了。

这里介绍bluga.net两种API中比较简单的一种，easythumb API：这个API仅仅用GET方法就能使用，看下面的PHP示例：

显示出来
$websnap_api = "http://webthumb.bluga.net/easythumb.php?user={$user_id}&url={$url}&hash={$hash}&size={$size}&cache=1";

// 下面把该图片从bluga.net把该截图下载到本地服务器中。
// 如果你的服务器限制了file_get_contents()，可用curl等函数进行获取
$snap = file_get_contents($websnap_api);

// 把该图片保存为thumb.jpg
$hd = fopen('thumb.jpg', 'wb');
fwrite($hd, $snap);
fclose($hd);

上面代码就可以实现把“http://bingu.net”的截图保存“thumb.jpg”中了。

转换为UTF-8文件并去掉BOM

转换为UTF-8文件并去掉BOM

Welkin — Wed, 06 Jan 2010 07:21:57 +0000

在汉化wordpress主题时需要存成utf-8格式的文件并去除BOM。可以用一下方法实现：

EmEditor软件，先打开任意一个PHP文件，按Alt+回车，选择“文件”的标签，在“打开时的字符码”，选择“UTF-8”，然后关闭EmEditor。以后打开任何PHP文件，只要按Ctrl+S，或者Ctrl+E，就可以保存为UTF-8编码的无BOM文件，十分方便。

UltraEdit可以点击“文件→另存为”，格式选择“UTF-8无BOM”，英文网页每次都需要这个操作。否则，在按Ctrl+S时，会被保存为ANSI格式。中文网页，在第一次另存为之后，以后只要按Ctrl+S即可。

EmEditor也可以用同样的方法，“文件→另存为”，字符码选择“UTF-8”，去掉“加入 Unicode 署名”前面的勾，英文网页每次都需要这个操作。同样，中文网页，在第一次另存为之后，以后只要按Ctrl+S即可。EmEditor建议按照第一段文字的方法设置，以后无需每次都使用“另存为”。

新的主题上线

Welkin — Mon, 04 Jan 2010 06:59:49 +0000

新弄了个主题终于上线了，不是原创（但应该属于半原创吧？？），属于东拼西凑型，吸取了很多主题中喜欢的设计，但是有待日后进一步完善。

如果有网友需要，我也可以分享给你。

30个精选优秀的CSS实例

Welkin — Wed, 30 Dec 2009 02:58:40 +0000

1.Hoverbox 图片集
一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。

2.高级CSS菜单
一款很有创意且复杂的CSS导航方案。

3.滑动影集
手风琴效果的影集，悬停便可拉伸图片。

4.Lightbox幻灯片
题为”Supercharge your image borders“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。

5.图片的阴影效果
在A List Apart上的一个关于图片效果Demo的讨论文章“CSS Drop shadows“.

6.跨浏览器多页式影集
悬停标签改变分类，悬停缩略图显示放大图。

7.CSS照片放大
使用简单的图片和background-position属性来进行调解。

8.CSS gallery layout—smells like a table
模仿表格布局，但使用的是列表。图集是流式宽度。

9.Sticky Footer
仅使用了很少XHTML的静态页脚。

10.whatever: hover
模仿Windows开始菜单的CSS导航菜单。

11.纯CSS手风琴效果
使用div和:hover伪类的手风琴效果，这个效果可以垂直显示也可以水平显示。

12.使用PNG和背景色的可扩展按钮

13.Pushbutton Links
链接在不使用图片的情况下看起来像个按钮。

14.含固定Header的可卷动表格
表格的标题被固定的优秀长表格。

15.CSS内容遮盖
当你悬停在图片上时，div容器会显示更多文字。

16.CSS样式表格版本2
一个使用背景图片且非常漂亮，被语义化标记的表格。

17.PNG遮盖
另一种为图片添加圆角的方法。（圆角、边框、阴影）

18.利用CSS为超链接添加提示
关于为不同类型的链接添加图标的简单教程。

19.简单的CSS圆角边框
仅适用了一张图片和很少的几行代码及标记。

20.Sitemap Celebration
使用嵌套列表的树形导航，很适合网站地图页面。

21.简单的跨浏览器幻灯片
不使用JavaScript实现透明度技巧（但是以不符合XHTML验证为代价）

22.圆角2
流式跨度和高度的圆角div。

23.使用背景图片百分比来创建图表
条线图使用列表

。

24.CSS柱状图:实例
3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。

25.动态翻转简单头
箭头会平滑的跟随鼠标移动，没有使用一丁点JavaScript和gif动画。

26.基于CSS的表单模板

27.CSS图片文本结合技巧
使用了空白div来让文本能围绕背景图中的图像显示。

28.使用CSS实现淡入效果的图片
这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。

29.纯CSS弹出效果
一个在IE5(Mac)上也能正常工作的弹出技巧。

30.使用CSS实现文本渐变效果
使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。

英文原文:30 Exceptional CSS Techniques and Examples
翻译原文:精选30个优秀的CSS技术和实例(暴风彬彬)
翻译:暴风彬彬(http://blog.bingo929.com/)

随机日志

WordPress注册新用户直接显示密码毋须邮件发送

Welkin — Tue, 29 Dec 2009 05:55:15 +0000

WordPress注册无须邮件通知，直接显示密码（非插件），不需要插件支持，直接修改wp-login.php文件即可，大大节省了服务器资源。经验证wordpress2.9适用。

打开wp-login.php:

1、搜索下面这句，位于 register_new_user 函数中。用于注册成功后发送通知。找到后把它注释掉（在代码的前面加 “/*” 代码的后面加 “*/” 不包含引号）。

wp_new_user_notification($user_id, $user_pass);

并在上面这句的下一行加上两句：

setcookie(“u”, $user_login);
setcookie(“user_pass”, $user_pass);

目的是把注册时填写的用户名，以及wordpress随机生成的密码写入cookies，以便在后面调用。

2、将 $errors->add(‘registered’, __(‘Registration complete. Please check your e-mail.’), ‘message’);

替换为：

$errors->add(‘registered’, __(”Registration complete. username: ‘.$_COOKIE["u"].’ password:’.$_COOKIE["user_pass"].”), ‘message’);

修改完成，保存上传。

50个新颖并激动人心的公司网站设计

Welkin — Mon, 28 Dec 2009 23:29:04 +0000

Every website must highlight and convey information for their type of users in the right way to make it work. It’s especially important in corporate designs, where website must be designed in perfect way so visitor focus on points where designer intended visitor to focus. Many business projects are completely based on Internet marketing so their website is everything, designers have to do important and hard job to create beautiful and eye-catchy website, which stand out of crowd in this full market.

In this article, You’ll find all the most inspirational and very creative corporate webdesigns, I found through pretty intense and deep research! Enjoy and get inspired!

1. Tracking Time

In my opinion, this website is a very attractive color in terms of diversity.

2. Quommunication

This website looks very good thanks to the formal design, which is characterized by dark colors.

3. Fused Network

Fused Network is a leading web hosting provider.

4. Creative Logic Media

A New Type of Digital Media Company.

5. Mobify

Mobify is a free service that makes WordPress, Drupal and other websites mobile-friendly.

6. Pulse

Pulse is the easy way to manage your cash flow online, allowing you to quickly manage and evaluate your income and expenses.

7. SimpleFlame

SimpleFlame provides high quality design, development and support services.

8. Goinnovate

Goinnovate is a talented Website Design studio.

9. Camp Creative Group

I was surprised by this website because it is simple, but with a variety of effects.

10. nclud

nclud creates unique, stylish and usable designs for the web.

11. W3roi

Track the clicks, leads and sales from all your online advertising in one place.

12. Dialogix

Dialogix is a social media monitoring tool that shows you exactly what is being said about your brand, industry and competitors in Twitter, YouTube, Flickr, news websites, forums, MySpace, Facebook and much more.

13. Guifx

Guifx creates better touchscreen interfaces.

14. Media Temple

Media Temple hosts websites.

15. Viewzi

Viewzi is a whole new way for search.

16. PimpMyTwitter

PimpMyTwitter provides only professional, high quality, one-of-a-kind Twitter backgrounds.

17. Backboard

Simplify document feedback for your workgroup.

18. Reinvigorate

Reinvigorate measures your influence on the web in real-time.

19. Directdesign

Italian webpage designs.

20. Reflect

Reflect allows web designers and their clients to easily create and manage websites.

21. Paramoreredd

Online marketing, website design and development.

22. Cobblestone

23. Product Planner

Product Planner was born out of the need to help people understand and create user flows for their web products.

24. BuySellAds

BuySellAds is an advertising marketplace for small to medium sized website owners/publishers.

26. LightCMS

LightCMS is a content management system for web designers.

26. eCoverSuiteElite

eCover Suite Elite allows you to instantly create a professional looking eBook cover and software box in just a few minutes.

27. WaterCMS

Get a beautiful business website design with content you can manage yourself including blogs, calendars, forms, payments and much more.

28. SupersonicAds

The leading virtual currency monetization platform in Europe.

29. QuaffsLabs

QuaffsLabs designs and develops websites according to the latest standards and demands.

30. Pokeseo

Say hello to Pokeseo, the first SEO reporting app for the Apple iPhone.

31. Digital Mash

A mash of work from Australian designer.

32. Saturized

Saturized is an interactive agency providing web design, development and rich media solutions.

33. Central Snowsports

This website attracts with its bright colors.

34. Bohemian Coding

Fontcase is a font management application that provides an elegant and powerful workflow to help you organise the fonts you have installed on your system.

35. Trent Cruising

36. reichweite

37. Miro

Open-source, non-profit video player and podcast client.

38. Koves

Koves enterprise applications are designed to make the flow of administration from every department, office and employee measurable and traceable, as well as a whole lot quicker.