老四的博客 » 代码

可以这样回到顶部

老四 — Sat, 24 Apr 2010 14:56:20 +0000

回到网页顶部的效果不少，有加个#的，有滑上去，有弹上去的。但是把几种 jQuery 效果混合起来回到顶部大概不多。纠其原因，此举除了有让一些急性子的人等不及效果结束就关闭网页的可能，另一个重要原因是因为 IE家族对 JS 微“软”的支持。几种漂亮的效果加在一起，在 IE 下却是惨不忍睹。
但这不能阻碍我们对视觉享受的追求。
下面是我晚上写的一段代码，预览请尽量在 chrome,firefox中完成。
首先加载:

把以下代码保存调用：

$(document).ready(function(){
$('#gotop').click(function(){
$('#wrap').fadeTo("200", 0.3, function(){$('html, body').animate({scrollTop: 0},800);});
$('#wrap').delay(800).fadeTo("200", 1);
});
});

请根据实际主题代码更换：#gotop、#wrap

补充：如果加载的是 jQuery 1.4以下的版本，使用以下代码：

$(document).ready(function(){
$('#gotop').click(function(){
$('#wrap').fadeTo("100", 0.2, function(){$('html, body').animate({scrollTop: 0},800, function(){$('#wrap').fadeTo("100", 1);});});
});
});

滑动关闭侧边栏(基于jQuery1.4)

老四 — Fri, 23 Apr 2010 03:56:47 +0000

本文介绍的滑动效果，演示见本站文章页导航栏（关闭边栏）。之前在林木木的博客看到《关闭/显示侧边栏》一文，忍不住试了一下，但是对实际效果不太满意，于是一直没用。昨天翻看 jQuery 参考时，看到 1.4 版之后新出的几个函数，又想起“干掉边栏”这事，放上一试，感觉效果不坏，于是就有了这篇文章。

要实现此效果，首先需要加载 1.4 或更新版本的 jQuery 库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">script>

Html(加一个判断语句，只在文章页显示)

 if (is_single()) { ?>
关闭边栏
 } ?>

CSS(显示小手)

#close-sidebar{cursor:pointer}

JS(delay为新增函数)

$('#close-sidebar a').toggle(function(){
	$(this).text("显示边栏");
	$('#sidebar').slideUp(400);//用400毫秒的时间收起边栏
	$('#main').delay(500).animate({width: "930px"}, 600);//花500毫秒等待边栏收起后，用600毫秒的时间加宽主栏
	},function(){
	$(this).text("关闭边栏");
	$('#main').animate({width: "649px"}, 600);
	$('#sidebar').delay(700).slideDown(400);
});

补充：如果不想用jquery 1.4实现，可以使用以下代码：

$('#close-sidebar a').toggle(function(){ 
	$(this).text("显示边栏");
	$('#sidebar').slideUp(400, function(){$('#main').animate({width: "930px"}, 600);});
	},function(){
	$(this).text("关闭边栏"); 
	$('#main').animate({width: "649px"}, 600, function(){$('#sidebar').slideDown(400);});
});

wordpress 默认小工具修改表

老四 — Thu, 22 Apr 2010 12:49:07 +0000

WordPress 默认的边栏小工具代码写在default-widgets.php(wp-includes/default-widgets.php)。此文件中每个类对应一个小工具，如修改 RSS 样式（来自任何 RSS 或 Atom feed 的条目），只要找到 WP_Widget_RSS 这一类修改即可。以下是功能即与名称对照表：

Widget名称	Widget类名	Widget介绍
页面	WP_Widget_Pages	您博客的 WordPress 页面
日历	WP_Widget_Calendar	您博客的文章日程表
文章索引模板	WP_Widget_Archives	您博客文章的月度存档
链接	WP_Widget_Links	您的链接表
功能	WP_Widget_Meta	登入/登出，管理，Feed 和 WordPress 链接
搜索	WP_Widget_Search	您博客的搜索框
文本	WP_Widget_Text	任意文本或HTML
分类目录	WP_Widget_Categories	列表或是下拉菜单的分类目录
最近文章	WP_Widget_Recent_Posts	您博客的最近文章
最新评论	WP_Widget_Recent_Comments	最在侧边栏显示最新评论的列表
RSS	WP_Widget_RSS	来自任何 RSS 或 Atom feed 的条目
标签云	WP_Widget_Tag_Cloud	您最常使用的标签云

无插件实现 wordpress 彩色标签云效果

老四 — Tue, 23 Mar 2010 15:09:11 +0000

边栏的标签云（Tag Cloud）是 WordPress 2.3 版以后的内置功能，在后台小工具中直接拖动添加即可。不过标签字体默认情况尺寸不同，但色彩一致，看起来相当杂乱。虽然有 Simple Tags 等插件可以为标签上色，但几行代码就可以实现的功能还是不插了。

使用方法：

将以下代码放入主题包 functions.php 文件中（如果没有这个文件，新建保存即可）：


function colorCloud($text) { 
$text = preg_replace_callback('||i', 'colorCloudCallback', $text);
return $text;
} 
function colorCloudCallback($matches) { 
$text = $matches[1];
$color = dechex(rand(0,16777215));
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
$text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
return "$text>";
} 
add_filter('wp_tag_cloud', 'colorCloud', 1);
?>

第8行代码”$color=dechex(rand(0,16777215));”：作用是定义标签随机颜色的十进制数值范围，0 等于 #000000，16777215 等于 #ffffff。你可以使用进制换算工具换算后修改这行代码，改变颜色范围。

修改完成后，使用下面这段代码在博客中调用或者直接在小工具中添加标签模块即可：

1	wp_tag_cloud('smallest=8&largest=24&number=50'); ?>

函数说明：

“smallest”：最小的字体尺寸（使用频率最少的标签）
“largest”：最大的字体尺寸（频率最多的）
“number”：则表示标签显示数量。

对于大多数不熟悉 php 的用户，这一小改动的最大难点在于如何向 functions.php 中插入代码。因此我把代码加了头尾，使用时请直接将本文第一段代码粘贴到 functions.php 的末尾处。

本文源代码来自站长网。

17行代码为 wordpress 添加评论表情列表

老四 — Sat, 13 Mar 2010 11:09:04 +0000

为 WordPress 添加评论表情列表可以用插件解决，但把它集成到模板中更方便日后维护。这段代码不是我写的，我只是把它从一个叫做 wp-smilies 的插件中扒了出来，不加注释它只有17行代码，没有必要让这个文件独立存在加载。
使用方法：把代码放到模板 comments.php 文件中的合适位置，效果见本站。
具体代码如下：

        

function wp_smilies() {
	global $wpsmiliestrans;
	if ( !get_option('use_smilies') or (empty($wpsmiliestrans))) return;
	$smilies = array_unique($wpsmiliestrans);
	$link='';
	foreach ($smilies as $key => $smile) {
		$file = get_bloginfo('wpurl').'/wp-includes/images/smilies/'.$smile;
		$value = " ".$key." ";
		$img = "\"{$file}\" alt=\"{$smile}\" />";
		$imglink = htmlspecialchars($img);
		$link .= "\"#commentform\" title=\"{$smile}\" onclick=\"document.getElementById('comment').value += '{$value}'\">{$img} ";
	}
	echo ''.$link.'
';
}
?>
 wp_smilies();?>

感谢 wp-smilies 的作者 ThinkAgain，如果你感觉此文不妥，请来信告知。

Simple-hezi（wp主题）

老四 — Tue, 09 Mar 2010 11:15:44 +0000

主题：Simple-hezi，基于 wordpress 自带主题 Classic 演绎而成，宽度自适应。
演示：http://hulog.cn/
版本：1.0(大概不会有2.0了)
关键字：白灰，两栏，简洁，wordpress theme

Simple-hezi，顾名思义，简洁的盒子。主题包只有 30k，特别适合博客放置在国外并且喜欢简洁的用户。

如果哪位朋友使用了请留言通知我，我会把你的站作为演示，目前作演示站的那个空间快要到期了。

去掉wp分类目录前的category(非插件)

老四 — Fri, 26 Feb 2010 10:33:03 +0000

WordPress 的文章分类网址默认显示在 category 父目录下，例如分类名为 wp ，分类链接样式则为 http://blog.com/category/wp。如果后台设置的文章静态链接结构为“/%category%/%postname%.html”，例： http://blog.com/wp/x.html，那么之前的分类链接显得不合逻辑，所有我们希望将它去掉。

对于 wordpress 中的各类问题，几乎都能找到插件解决，这个问题也不例外。但是很大一部分 wper 患有严重的代码控，但凡修改代码可以达到的效果绝不用插件代替，即便后者更为简单。所以在这里介绍一个非插件的方法：
在目录 wp-includes/category-template.php 文件中搜索：

$catlink = $wp_rewrite-&gt;get_category_permastruct();

在下面添加：

$catlink = str_replace('/category', "", $catlink);

保存即可。

今日看点：河南青年看守所内死亡警方称喝开水后突然发病（网易很知趣，直接关闭评论）

H4主题共享

老四 — Thu, 31 Dec 2009 05:25:48 +0000

主题：H4
版本：1.1
说明：主题基于 mg12 的 inove 修改，dot重新布局演绎，并继续采用“署名-非商业性使用-相同方式共享3.0”协议发布。

功能：增加了留言预览，Ajax评论，优化部分细节增强用户体验。（ajax评论效果默认关闭，如需启用，请参照模板中的说明文档修改）

正如我之前一篇文章所说，站在巨人的肩膀上才能看得更远。所以，无论严格还是不严格的说，H4都只是inove的演绎版。

演示地址：使用H4的朋友可以在此留言，可以把你的博客作为演示

老四的博客 » 代码

可以这样回到顶部

相关日志

滑动关闭侧边栏(基于jQuery1.4)

相关日志

wordpress 默认小工具修改表

相关日志

无插件实现 wordpress 彩色标签云效果

相关日志

17行代码为 wordpress 添加评论表情列表

相关日志

Simple-hezi（wp主题）

相关日志

去掉wp分类目录前的category(非插件)

相关日志

H4主题共享

相关日志