珂亦精品收藏

Drupal的安装及ZEN主题的使用

ray1980 — Sat, 21 Aug 2010 23:43:33 +0800

Drupal的安装

1. 下载程序Drupal 6.19及中文包
2. 新建一个数据库
3. 解压缩后进行安装，这里要注意的是sites\default\default.settings.php这个文件是要复制一份并改名为settings.php。

ZEN主题的使用

1. 下载ZEN主题
2. 解压后放到sites\all\themes\目录下，如果没有themes目录则建立一个

以ZEN主题创建自己的主题

1. 拷贝STARTERKIT目录到sites\all\themes\目录下并改名，如fy907
2. 把STARTERKIT.info.txt改名为fy907.info
3. 替换template.php和theme-settings.php文件中的STARTERKIT为fy907
4. 登陆后台，在admin/build/themes下找到新建的主题并启用。

添加江阴印刷网主题自定义菜单并支持二级分类

ray1980 — Mon, 19 Jul 2010 08:00:44 +0800

如果你在使用江阴印刷网风格,而且升级到了WordPress3.0,那么你可以看看主题在3.0下首页的分类名不显示的解决办法，而这篇是使主题支持自定义菜单并支持二级分类。

编辑functions.php文件，在 include (TEMPLATEPATH . ‘/settings.php’); 下添加

register_nav_menus( array(
	'primary' => __( 'Primary Navigation', 'cnt1' ),
) );
 
function twentyten_page_menu_args( $args ) {
	$args['show_home'] = true;
	return $args;
}
add_filter( 'wp_page_menu_args', 'cnt1_page_menu_args' );

编辑header.php文件，查找下例代码

<ul class="menu">
	<li<?php if ( is_home()) { ?> class="current-cat"<?php } ?>><a href="<?php echo get_option('home'); ?>/"><?php _e('Home', 'ctn1'); ?></a></li>
	<?php wp_list_categories('title_li=&depth=1&orderby=id'); ?>
	<li class="search"><?php include (TEMPLATEPATH . '/searchform.php'); ?></li>
</ul>
 
<?php if ( is_category() ) {
$cat = get_query_var('cat');
$child_cats = get_categories('child_of='.$cat);
	if ($child_cats) {
	$args = array(
		'title_li' => '',
		'echo' => 1,
		'child_of' => $cat
		);
	echo '<ul class="submenu">';
	wp_list_categories($args); 
	echo '</ul>';
	}
} ?>
 
<?php if ( is_home()) { ?><div class="tags"><?php _e('Tags: ', 'ctn1'); ?><?php wp_tag_cloud('smallest=12&largest=12&number=20&orderby=count&unit=px'); ?></div><?php } ?>

替换为

1
2
3

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<div class="search"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div>
<div class="tags"><?php _e('Tags: ', 'ctn1'); ?><?php wp_tag_cloud('smallest=12&largest=12&number=20&orderby=count&unit=px'); ?></div>

修改style.css以支持二级导航（不支持IE6.0）
查找代码

#nav {
	margin: 0 auto 10px;
	width: 940px;
	background: #D3EAF0;
	overflow: hidden;
	}
 
#nav .menu {
	height: 35px;
	line-height: 35px;
	background: #1A4963;
	font-size: 14px;
	overflow: hidden;
	}
 
#nav .menu li {
	float: left;
	margin-left: 15px;
	padding: 0 10px;
	display: inline;
	}
 
#nav .menu li a {
	color: #FFF;
	}
 
#nav .menu li a:hover {
	text-decoration: none;
	}
 
#nav .menu li.cat-item {
	margin-left: 0;
	}
 
#nav .menu li.current-cat {
	background: url('images/bg.gif') repeat-x 0 1px;
	}
 
#nav .menu li.current-cat a {
	color: #295B72;
	font-weight: bold;
	}
 
#nav .menu li.search {
	float: right;
	_padding-top: 5px;
	}
 
#nav .submenu {
	height: 35px;
	padding: 0 10px;
	font-size: 12px;
	overflow: hidden;
	}
 
#nav .submenu li {
	float: left;
	margin: 8px 0 0;
	padding: 0 10px;
	border-right: 1px solid #295B72;
	display: inline;
	}
 
#nav .submenu li a {
	color: #295B72;
	}
 
#nav .submenu li a:hover {
	text-decoration: none;
	}

替换为

#nav {
	position: relative;
	margin: 0 auto 10px;
	width: 940px;
	background-color: #D3EAF0;
	}
 
#nav .menu {
	height: 35px;
	line-height: 35px;
	background-color: #1A4963;
	font-size: 14px;
	}
 
#nav .menu li {
	float: left;
	position: relative;
	padding: 0 15px;
	display: inline;
	}
 
#nav .menu li a {
	color: #FFF;
	}
 
#nav .menu li a:hover {
	text-decoration: none;
	}
 
#nav .menu .current-menu-item {
	background: url('images/bg.gif') repeat-x 0 1px;
	}
 
#nav .menu .current-menu-item a {
	color: #295B72;
	font-weight: bold;
	}
 
#nav .menu li:hover > .sub-menu {
	display: block;
	}
 
#nav .sub-menu {
	float: left;
	position: absolute;
	left: 0;
	top: 35px;
	width: 160px;
	background-color: #F8F8F8;
	border: 1px solid #D8D8D8;
	-moz-opacity: .9;
	opacity: .9;
	filter: alpha(opacity=90);
	display: none;
	z-index: 999;
	}
 
#nav .sub-menu li {
	padding: 0;
	}
 
#nav .sub-menu a {
	width: 130px;
	padding: 0 15px;
	display: block;
	text-align: left;
	}
 
#nav .sub-menu .current-menu-item {
	background: none;
	}
 
#nav .menu li:hover > .sub-menu a {
	color: #333;
	}
 
#nav .menu li:hover > .sub-menu a:hover {
	background-color: #333;
	color: #FFF;
	}
 
#nav .search {
	position: absolute;
	right: 10px;
	top: 5px;
	}

替换coolcode代码高亮插件为wp-syntax

ray1980 — Wed, 14 Jul 2010 22:41:54 +0800

终于把coolcode代码高亮插件替换为wp-syntax，wp-syntax 使用简单，显示方式简洁，视觉感官利落，对W3C也友好。

首先下载安装好wp-syntax，激活插件。
进入PHPMYADMIN替换原来coolcode的插件代码

1 2	UPDATE `wp_posts` SET `post_content` = replace (`post_content`,'<coolcode','<pre'); UPDATE `wp_posts` SET `post_content` = replace (`post_content`,'</coolcode','</pre');

wp-syntax是用以下代码，设置对应参数来完成 wp-syntax 高亮代码显示的，编辑文章时，选择HTML模式下
<pre lang=”LANGUAGE” line=”1″>要显示的代码</pre>
相关参数说明：
lang=”LANGUAGE”，在language处填写你要运行的代码语言，如css、php、html、javascript等；
line=”1″，1表示代码从第一行开始显示，可以不写，不写为全部显示。

wp-syntax 还支持下面代码：
abap, actionscript, actionscript3, ada, apache, applescript, aptsources, asm, asp, autoit, avisynth, bash, bf, blitzbasic, bnf, boo, c, cmac, caddcl, cadlisp, cil, cfdg, cfm, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, winbatch, xml, xorg_conf, xpp, z80

如果你嫌每次都要切换到HTML模式，手工添加麻烦的话，你还可以利用WP-Syntax Button插件添加按钮到编辑框中。

解决江阴印刷网风格适应WordPress3.0

ray1980 — Tue, 22 Jun 2010 10:29:39 +0800

如果你正在使用江阴印刷网风格,而且升级到了WordPress3.0,会出现首页的分类名不显示，搜索了一下官方，找到了解决办法：

编辑主题的index.php文件，找到

1	$wp_query->is_category = false;

改为

1	$wp_query->is_category = true;

再找

1	<?php single_cat_title(); ?>

改为

1	<?php printf( __('%s','ctn1'), single_cat_title('', false)); ?>

这样就可以正确显示分类名，如果还有其它问题，可以留言解决。

创建自己的 Dreamhost Promo Code 优惠码

ray1980 — Sat, 12 Jun 2010 10:33:08 +0800

Dreamhost 还是一开始的时候使用过，如果你有 Dreamhost 的帐号，那么你就可以创建自己的 Dreamhost Promo Code 优惠码。

1. 首先登陆Dreamhost的后台控制面板,地址是https://panel.dreamhost.com

2. 点击左侧的Rewards

选Create Your Own Promo Codes!

3.填写你的优惠码

Promo Code = 你创建的优惠码（不区分大小写，3个以上的字母或数字，但不能全是数字）
Description = 你希望使用你的Promo Code的用户见到的一句话
Free Domain Registration Bonus = 域名奖励
Unique IP Bonus = 独立IP奖励

下面的表格由你决定给用户多少优惠。你选的优惠越多，用户得到的优惠就越多，你自己得到的就越少。最小为$0.00，最大为每项的Max Discount。

检查无误后，按Create this Promo Code Now!。现在你就拥有你自己的Promo Code了！

我也创建了自己的优惠码 RAYHOST，有买Dreamhost 主机的可以用我的优惠码，或者用我另一篇文章中小张的主机

美国主机推荐：衡天小张

ray1980 — Wed, 02 Jun 2010 08:58:05 +0800

用过了不少主机，从一开始的Dreamhost，到新新加坡的主机，然后是Meyu的主机，到现在的无锡梦点，搬家无数处，中间也因一些原因，关闭过一段时间，现在找一个好的稳定主机商，不容易啊。

前段时间用过了衡天小张的主机，感觉不错，衡天小张的主机经营了有2年的时间，现在拥有了一个比较大的用户群体。

最近小张推出的独立IP主机还是不错的，性价比也很高，等空间到期，全线换到小张那去了。暂时挂着一个站在上面，还没开工江阴飞扬907。

废话了这么多，关键的在来了。话说，小张最近搞了个分销计划，我也搞了个主机优惠码 rayhost ，有到小张那买主机的童鞋，记得填上我的优惠码哦，你懂的。
丢下购买地址：http://my.hengtian.org/cart.php

其实按小张的话就是，平时闲着蛋疼没事，又想赚点小钱，小钱也是钱啊，走过路过不要错过，记住我的优惠码 rayhost。

WordPress主题的jQuery应用之TAB切换效果

ray1980 — Sat, 08 May 2010 13:30:16 +0800

首先在header.php的head标签中加载jQuery库

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

新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：

$(document).ready(function(){
$(".entry-foot span:first").addClass("current");  // 为第一个span添加 .current 的样式，默认选中
$(".entry-foot ul:not(:first)").hide();  //ul 不是第一个时隐藏
$(".entry-foot span").mouseover(function(){  // 鼠标移到 span 上时触发函数
$(".entry-foot span").removeClass("current");  //为第一个 span 移除 .current 样式
$(this).addClass("current");  //为触发的 span 添加样式
$(".entry-foot ul").hide();  // 隐藏 ul
$("."+$(this).attr("id")).fadeIn("slow");  // 这句是核心，class(.) 和触发 span 的ID 一致的 fadeIn(渐显)
});});

HTML代码如下：

<div class="tab">
<p>
<span ID="tab1">tab1</span>
<span ID="tab2">tab2</span>
<span ID="tab3">tab3</span></p>
<ul class="tab1">以 LI 形式呈现的 tab1 的内容</ul>
<ul class="tab2">以 LI 形式呈现的 tab2 的内容</ul>
<ul class="tab3">以 LI 形式呈现的 tab3 的内容</ul>
</div>

添加CSS代码如下：

.entry-foot{background-color:#FAFAFA;margin:5px 8px;padding:5px 10px;}
.entry-foot p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:6px;padding:2px 5px;}
.entry-foot p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.entry-foot p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.entry-foot li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.entry-foot .mhot,.entry-foot.allhot{display:none;}

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

WordPress主题的jQuery应用之幻灯片效果

ray1980 — Fri, 30 Apr 2010 16:18:17 +0800

首先在header.php的head标签中加载jQuery库

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

新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：

function slideSwitch() {
var $current = $("#slideshow div.current");
if ( $current.length == 0 ) $current = $("#slideshow div:last");
var $next = $current.next().length ? $current.next() : $("#slideshow div:first");
$current.addClass('prev');
$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
$current.removeClass("current prev");
});
} $(function() {
$("#slideshow span").css("opacity","0.7");
$(".current").css("opacity","1.0");
setInterval( "slideSwitch()", 3000 );
});

HTML代码如下：

<div ID="slideshow">
    <div class="current">
        <a href="http://www.koryi.net/"><img src="1.jpg" alt="" /></a>
        <span>The First Image</span>
    </div>
    <div>
        <a href="http://www.koryi.net/"><img src="2.jpg" alt="" /></a>
        <span>The Second Image</span>
    </div>
    <div>
        <a href="http://www.koryi.net/"><img src="3.jpg" alt="" /></a>
        <span>Yes, thd third.</span>
    </div>
</div>

添加CSS代码如下：

#slideshow{position:relative;height:195px;width:425px;border:10px solid #ddd;margin:0 auto 15px;}
#slideshow div{position:absolute;top:0;left:0;z-index:3;opacity:0.0;height:195px;overflow:hidden;background-color:#FFF;}
#slideshow div.current{z-index:5;}
#slideshow div.prev{z-index:4;}
#slideshow div img{display:block;border:0;margin-bottom:10px;}
#slideshow div span{display:none;position:absolute;bottom:0;left:0;height:50px;line-height:50px;background:#000;color:#fff;width:100%;}

原文：http://www.happinesz.cn/archives/1015/

WordPress主题的jQuery应用之返回顶部滑动效果

ray1980 — Tue, 27 Apr 2010 21:02:37 +0800

首先在header.php的head标签中加载jQuery库

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

新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：

1 2	$('.top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('.bot').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

在footer.php文件中加入代码：

<div ID="goto">
	<div class="top">顶端</div>
	<div class="bot">底端</div>
</div>

在CSS文件中添加下例代码：

*html #goto { position: absolute; top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));}
#goto { position: fixed; left: 50%; top: 50%; bottom: auto; margin-left: -500px; z-index: 999;}
#goto .top, #goto .bot { width: 28px; height: 41px; margin: 5px 0; background-image: url('images/goto.gif'); background-repeat: no-repeat; display: block; text-indent: -9999px; cursor: pointer;}
#goto .top { background-position: 0 0;}
#goto .bot { background-position: 0 100%;}

原文：http://immmmm.com/added-sliding-effect-enhanced.html

WordPress主题的jQuery应用之标题提示

ray1980 — Sat, 03 Apr 2010 09:14:40 +0800

首先在header.php的head标签中加载jQuery库

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

新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：

var sweetTitles = {
	x : 10,								
	y : 20,								
	tipElements : "a",	    			
	init : function() {
		$(this.tipElements).mouseover(function(e){
			this.myTitle = this.title;
			this.myHref = this.href;
			this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);       // url 超过 30 个字符的部分用 ... 代替
			this.title = "";
			var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
			$('body').append(tooltip);
			$('#tooltip')
				.css({
					"opacity":"0.8",                   // 0.8 为透明度可自行根据喜好调整数字
					"top":(e.pageY+20)+"px",
					"left":(e.pageX+10)+"px"
				}).show('fast');	
		}).mouseout(function(){
			this.title = this.myTitle;
			$('#tooltip').remove();
		}).mousemove(function(e){
			$('#tooltip')
			.css({
				"top":(e.pageY+20)+"px",
				"left":(e.pageX+10)+"px"
			});
		});
	}
};
$(function(){
	sweetTitles.init();
});

在CSS文件中添加下例代码：

1
2
3

body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

如果你还用了@回复这样的jQuery提示效果的话会被标题提示遮掉，可以参照下面解决：
代码中的tipElements : “a”改成tipElements : “a:not(‘.atreply’)”来排除class为atreply的a标签，或者用tipElements : “a:not([href^='#'])”来排除href为锚点的a标签

原文：http://leeiio.me/sweet-titles-for-jquery/