Zack Live » WordPress http://cn.zacklive.com 澳门WordPress 主题设计及网页设计 Thu, 29 Jul 2010 14:54:56 +0000 en hourly 1 http://wordpress.org/?v=3.0 为WordPress选择程式码显示插件 http://cn.zacklive.com/choose-right-syntax-highlight-plugin-for-wordpress/167/ http://cn.zacklive.com/choose-right-syntax-highlight-plugin-for-wordpress/167/#comments Fri, 05 Mar 2010 09:32:13 +0000 Zack http://cn.zacklive.com/?p=167 继续阅读 >>]]> syntaxhighlighter evolved 为WordPress选择程式码显示插件

刚开始我只用引用（Quote）来显示程式码，随着程式码越来越多，引用已经不够用，我决定要加个程式码高亮显示的插件到WordPress里。

我前后共测试了5个这种插件，包括：

我也总结出，具体的要求：

  1. 不用修改WordPress，包括主题：我不希望因为一个插件而修改WordPress或主题，特别是有其他的选择的情况下。
  2. 显示行数：有行数的话，当讨论程式码时，就比较容易去指定特定一行。关于这一点，WP-Syntax预设是不显示行数的，所以我没有选择它。
  3. 支持可视化编辑器（Visual Editor）：这是最严重的问题，有些插件在Visual Editor里会自动重编程式码以便在HTML下显示，这样会破坏原程式码，导致每次编辑时都要改程式码，改到我火都上来。SyntaxHighlighter Plus，Google Syntax Highlighter for WordPress和Syntax Highlighter for WordPress都有这个问题。

剩下的就是SyntaxHighlighter Evolved，它是唯一不需要作任何改动就符合以上要求，也支持所有常用的程式语言，包括PHP, HTML, CSS, C等。使用上也很简单，只要用[语言]和[/语言]来包住程式码，其中语言是程式码相应的程式语言，如PHP。该插件也有设置页面，可以做一些细节的微调，也有一些使用说明可以参考。以下是一个带有PHP的HTML范例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>PHP Code Example</title>
</head>
<body>
	<h1>PHP Code Example</h1>

	<p><?php echo 'Hello World!'; ?></p>

	<p>This line is highlighted.</p>

	<div class="foobar">
		This	is	an
		example	of	smart
		tabs.
	</div>

	<p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

Related Posts

]]> http://cn.zacklive.com/choose-right-syntax-highlight-plugin-for-wordpress/167/feed/ 3 WordPress 2.9.2 版本发布 http://cn.zacklive.com/wordpress-2-9-2-new-version-released/146/ http://cn.zacklive.com/wordpress-2-9-2-new-version-released/146/#comments Wed, 17 Feb 2010 17:10:02 +0000 Zack http://cn.zacklive.com/?p=146 wordpress 2.9.2 WordPress 2.9.2 版本发布

WordPress刚刚发布了最新版本2.9.2。这个版本只进行了一个小小的修正，早前Thomas Mackenzie指出，登入了的用户可以回收站（Trash）里看到其他会员的文章，因此WordPress团队针对这个问题进行了修正，并发布2.9.2版本。

官方公布可在这里找到。

Related Posts

]]> http://cn.zacklive.com/wordpress-2-9-2-new-version-released/146/feed/ 2 使用JQuery在WordPress实现Tabs效果 http://cn.zacklive.com/how-to-jquery-wordpress-tabs/128/ http://cn.zacklive.com/how-to-jquery-wordpress-tabs/128/#comments Mon, 01 Feb 2010 09:13:19 +0000 Zack http://cn.zacklive.com/?p=128 继续阅读 >>]]> jquery wordpress tabs 使用JQuery在WordPress实现Tabs效果

使用Tabs的好处是，能在有限的空间里显示更多的资讯。因而其应用也越来越广泛，而在WordPress中最常用在侧栏（Sidebar）。本篇将讨论如何使用jQuery实现Tabs效果，本文基于Justin Tadlock的教学撰写，英文原文请看这里。

1. 将jQuery加入到WordPress

首先我们要把jQuery加入到WordPress，WordPress本身就带有jQuery（在wp-includes\js里面），你可以用以下的程式将其加入，这句程式要放在<head>与</head>之间，通常是在你的主题的header.php文件：

<?php wp_enqueue_script('jquery'); ?>

当然你也可以使用你自己下载的jQuery，通常会将下载回来的jQuery会放在主题文件夹的js文件夹里面，你可以用以下这句程式：

<script type="text/javascript" src="< ?php echo bloginfo(stylesheet_directory) .'/js/jquery.js'; ? >">< /script >

另外，我们自己写的JavaScript会放在一个tabs.js文件里，请自行创建，这个文件同样放在主题的js文件夹里，我们要把这个文件也加入，请在上面那句的下一行加入：

<script type="text/javascript" src="< ?php echo bloginfo(stylesheet_directory) .'/js/tabs.js'; ? >">< /script>

2. Tabs的HTML程式码

现在可以关闭header.php，再打开主题文件sidebar.php，我们要加入Tabs的HTML，在你想要显示Tabs的位置加入：

<div class="tabbed">
	<!-- The tabs -->
<ul class="tabs">
<li class="t1"><a class="t1 tab" title="<?php _e('Tab 1'); ?>"></a></li>
<li class="t2"><a class="t2 tab" title="<?php _e('Tab 2'); ?>"></a></li>
<li class="t3"><a class="t3 tab" title="<?php _e('Tab 3'); ?>"></a></li>
<li class="t4"><a class="t4 tab" title="<?php _e('Tab 4'); ?>"></a></li>
</ul>

<!-- tab 1 -->
<div class="t1">
	<!-- Put what you want in here.  For the sake of this tutorial, we'll make a list.  -->
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

<!-- tab 2 -->
<div class="t2">
	<!-- Or, we could put a paragraph -->

This is a paragraph about the jQuery tabs tutorial.</div>

<!-- tab 3 -->
<div class="t3">
	<!-- Or, we could add a div -->
<div>Something needs to go in here!</div>
</div>

<!-- tab 4 -->
<div class="t4">
	<!-- Why not put a few images in here? -->

			< img src="image.gif" alt="Sample" />
			< img src="image.gif" alt="Sample" />
			< img src="image.gif" alt="Sample" /></div>
</div>

<!-- tabbed -->

这里设计了四个Tabs，只用了简单的HTML跟一点PHP，我就不多说了。

3. Tabs的jQuery主程式

我们先看这次的JavaScript，这是在tabs.js文件中的程式：

//part I
$(document).ready(function() {
	$('div.tabbed div').hide();
	$('div.t1').show();
	$('div.tabbed ul.tabs li.t1 a').addClass('tab-current');

// part II
$('div.tabbed ul li a').click(function(){
	var thisClass = this.className.slice(0,2);
	$('div.tabbed div').hide();
	$('div.' + thisClass).show();
	$('div.tabbed ul.tabs li a').removeClass('tab-current');
	$(this).addClass('tab-current');
	});
});

Part I：一共有三句，在网页载入后马上运行：$(document).ready。

  • 第一句是将所有的Tab内容（div）隐藏（hide）；
  • 第二句是显示第一个Tab内容（div.t1）；
  • 第三句是给第一个Tab的连结（li.t1 a）加入（tab-current），也就是标明这是当前显示的Tab。

Part II：是当Tab连结被点击时运行的程式：$(‘div.tabbed ul li a’).click。一共有五句：

  • 第一句是取得当前连结的前两个class，以t1为例，thisClass就是”t1 tab”；
  • 第二句是再次隐藏全部Tab内容（div）；
  • 第三句是显示当前连结相应的Tab的内容（div）；
  • 第四句是移除所有连结的tab-current属性。
  • 第五句是为当前连结加入tab-current属性。

整个程式运作过程时，一开始先将所有的Tab的div隐藏，再显示第一个Tab的div，并将第一个Tab的连结设为当前Tab（tab-current）；当有其他Tab连结被点击时，再次将所有Tab的div隐藏，然后显示被点击连结所对应的div，还要移除所有连结的tab-current属性，最后给被点击的连结加入tab-current属性。

4. Tab的CSS样式

最后的CSS设计可以说是很主观的部分，你可以根据自己的喜好进行修改，所以这里只给出基本的CSS，也不详细说明了。

/* Contains the entire tabbed section */
.tabbed {
	}

/* List of tabs */.tabbed ul.tabs {
	float: left;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	}
.tabbed ul.tabs li {
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
	}
.tabbed ul.tabs li a {
	overflow: hidden;
	display: block;
	margin: 0 2px 0 0;
	padding: 10px 12px;
	}
.tabbed ul.tabs li a:hover {
	}

/* The current selected tab */
.tabbed ul.tabs li a.tab-current {
	}

/* The content shown when a tab is selected */
.tabbed div {
	float: left;
	display: block;
	width: 100%;
	}

/* Set the CSS to make sure the other tabs' content isn't shown other than the first */
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {
	display: none;
	}

/* Content for inside your tabs' divs */
.tabbed div ul {
	}
.tabbed div p {
	}
.tabbed div div {
	}

Related Posts

]]> http://cn.zacklive.com/how-to-jquery-wordpress-tabs/128/feed/ 0 讲解：使用JQuery实现WordPress多层下拉导航 http://cn.zacklive.com/details-jquery-wordpress-drop-down-menu/126/ http://cn.zacklive.com/details-jquery-wordpress-drop-down-menu/126/#comments Sat, 30 Jan 2010 04:38:27 +0000 Zack http://cn.zacklive.com/?p=126 继续阅读 >>]]> 今日要讲解使用JQuery实现WordPress多层下拉导航的程式码。

第一行是让WordPress调用JQuery，就不多说了：

<?php wp_enqueue_script('jquery'); ? >

JQuery主程式讲解

然后是JavaScript(JQuery)的主程式：

< script type="text/javascript" >
$("#topmenu a").removeAttr("title");
jQuery(document).ready(function() {
jQuery("#topmenu ul").css({display: "none"}); // Opera Fix
jQuery("#topmenu li").hover(function(){
		jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
		},function(){
		jQuery(this).find('ul:first').css({visibility: "hidden"});
		});
});
< /script >

首先看第一句：

$("#topmenu a").removeAttr("title");

这句的目的是要移除topmenu底下的连结（a）的标题（title）属性。这是因为使用wp_list_pages()时，WordPress会自动为每条连结加入标题，而这个标题会跟JQuery的Tooltip发生冲突，所以就先将title移除。

jQuery(document).ready(function() {

这一句是说，当网页载入完成后，马上运行下面的程式。

jQuery("#topmenu ul").css({display: "none"}); // Opera Fix

需要这一句的原因是，在Opera里，下层Menu收得比较慢，会被用户看到，所以先把它设为不显示。

jQuery("#topmenu li").hover(function(){
		jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
		},function(){
		jQuery(this).find('ul:first').css({visibility: "hidden"});
		});

这是jQuery的.hover方法，第一个function()代表鼠标在topmenu的li之上时的效果，而第二个function()则是鼠标移出后的效果。

jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);

这是在鼠标移入时运行的程式，jQuery(this).find(‘ul:first’)是找到这底下第一个ul，后面是用css将它的visibility设为’可见’（visible），而display则为’none’。最后的show(268)是以动画特效慢慢显示出来，268是微秒，就是要在268微秒之内完成动画。这里使用visibility而不用display来显示，据说是因为若使用display，当鼠标快速滑过时，动画特效就不会出现，而变成将ul快速地弹出一下，便收回去，这不是我们想要的，使用visibility就能解决这个问题。

jQuery(this).find('ul:first').css({visibility: "hidden"});

这句就是当鼠标移走时，把第一个ul藏起来，这里也会以动画的方式慢慢地收回去。

CSS部分讲解

jQuery的部分解释完了，接下来看CSS的部分。首先看第一段：

#topmenu, #topmenu ul {
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:1.5em;
    z-index:300;
    width:100%;
    background:#fff;
    font-weight:bold;
}

这里要注意是，position要设为relative，line-height记得要设定，其他的就是外观设定。

#topmenu a {
    display:block;
    padding:0.25em 1em;
    color:#686868;
    border-right:1px solid #c8c8c8;
    text-decoration:none;
    background:#fff;
}   

#topmenu a:hover {
    background:#888;
    color:#fff;
}

这两段都是外观设定。

#topmenu li {
    float:left;
    position:relative;
}

这是让Menu横向排列。

#topmenu ul {
    position:absolute;
    display:none;
    width:12em;
    top:1.9em;
    left:-1px;
}

这里是第二层的Menu，display是none，因为一开始，第二层是不显示的。记得要设width，因为第三层会在第二层的右边，相距多少就是根据这个width来设定。top是离第一层多远，因为line-height为1.5em加连结（a）上下padding各0.25em，就等于2em，设为1.9em是为了让第二层贴着第一层1em。left等于-1px也是同样的道理，让第二层往左一点。

#topmenu ul a {
    border-left:1px solid #c8c8c8;
}   

#topmenu li ul {
    border-top:1px solid #c8c8c8;
    width:14.1em;
}

这两段是外观设定。

#topmenu li ul a {
    width:12em;
    height:auto;
    float:left;
    border-bottom:1px solid #c8c8c8;
}

这段要注意是width要设定，同样因为下一层是在右边出现。float:left也是同样的原因。

#topmenu li:hover ul ul, #topmenu li:hover ul ul ul, #topmenu li:hover ul ul ul ul {
    display:none;
}   

#topmenu li:hover ul, #topmenu li li:hover ul, #topmenu li li li:hover ul, #topmenu li li li li:hover ul {
    display:block;
}

最后这两段是设定，hover时的显示方式，也就是只显示下一层，不会显示下下一层。

全部的程式码解释完毕，你学会了吗？记得要自己试着改几个设定，看看有什么不一样的效果。有什么新发现，或问题，可以跟我讨论。

Related Posts

]]> http://cn.zacklive.com/details-jquery-wordpress-drop-down-menu/126/feed/ 0 高亮(Hightlight)显示作者回覆 http://cn.zacklive.com/wordpress-hightlight-author-comments/119/ http://cn.zacklive.com/wordpress-hightlight-author-comments/119/#comments Wed, 27 Jan 2010 04:55:16 +0000 Zack http://cn.zacklive.com/?p=119 wordpress translation 高亮(Hightlight)显示作者回覆

高亮显示作者回覆(Comments)，让读者能快速找到作者的回覆，这个主题一早就想写，简单又实用。

找了一些资料，发现最早期大家是用作者的E-mail来判断回覆是否属于作者的，这样的问题是，如果读者知道作者的E-mail，并用这个E-mail来回覆，就会造成混淆。就像我的E-mail就是公开的放在[关于]页里，任何人都能看到，存心恶作剧的话很容易做到。

因此，发展出以作者的ID来判断是否作者回覆，这个方法解决了以上的问题，一直延用至WordPress 2.7的发布。其实，这个方法还是适用于WordPress 2.7或以上版，只是这个版本以后的WordPress提供了更容易实现这个功能的方法。

自WordPress 2.7版后，WordPress会自动为文章作者的回覆加入.bypostauthor的class，以供主题设计师用CSS对作者的回覆进行修改美化。也就是说，你不用再去判断哪一篇是作者的回覆，因为WordPress已经帮你完成了这个动作，你可以直接开始修改CSS，对.bypostauthor进行美化。你可以直接在你的CSS文件的comment方面的代码后面(或直接加在CSS文件的最后)，加入像如下的代码：

li.bypostauthor {

color: #FFFFFF;

background: #000000;

}

这个例子是将文字颜色改为白色，而背景色则用黑色，也就是反白的效果，只是一个简陋的演示，你可以按你自己喜欢配色或加入背景图案之类。

相对于作者的回覆，WordPress也为读者的回覆加入了.byuser的class，让你能够轻松地对用户的回覆也进行修改，具体的方法跟前面讲的作者的回覆差不多，我就不再举例了。

就这么简单，WordPress越来越方便，我们要做的事情就越来越少。只希望WordPress在往易用的方向发展的同时，不要把自己弄得太臃肿。

Related Posts

]]> http://cn.zacklive.com/wordpress-hightlight-author-comments/119/feed/ 0 如何分离WordPress的Comments与Trackbacks http://cn.zacklive.com/how-to-separate-wordpress-comments-trackbacks/113/ http://cn.zacklive.com/how-to-separate-wordpress-comments-trackbacks/113/#comments Mon, 25 Jan 2010 04:24:41 +0000 Zack http://cn.zacklive.com/?p=113 继续阅读 >>]]> wordpress tweak hacks 如何分离WordPress的Comments与Trackbacks

自WordPress 2.7后，WordPress的回覆增加了一些新功能，包括对回覆进行回覆。因为在分离WordPress的Comments与Trackbacks的做法也有了一些不同，本篇所讲的是以2.7版之后为基础。

分离Comments与Trackbacks/Pingbacks

首先你要确认，你所使用的主题支持WordPress 2.7版本或以上，你亦可以参考WordPress的Default主题。现在请打开主题的single.php文件，在文件的后段找到以下程式：

<?php comments_template(); ?>

将其改为：

<?php comments_template('', true); ?>

这样做是为了让comments_template产生一个全域(global)的数组(array)：$comments_by_type，以备后用。这时可以储存并关闭single.php文件了。

再打开comments.php，约中间位置找到以下程式：

<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
        <?php wp_list_comments(); ?>
</ol>

在Default主题中，会插了一个navigation的DIV，是用于回覆分页，我们不对其进行修改。

现在我们要在：

<?php if ( have_comments() ) : ?>
下面一行加入：


<?php if ( !empty($comments_by_type['comment']) ) : ?>


然后将：


<?php wp_list_comments(); ?>


改为：


<?php wp_list_comments('type=comment'); ?>

这一句是将列出全部回应（包括Trackbacks/Pingbacks），改为只列出回覆（不包括Trackbacks/Pingbacks）。

还要在：


</ol>


下面一行加入：


<?php endif; ?>

这一整段的修改是为了，在没有回覆，只有Trackbacks/Pingbacks的时候，不让回覆数（comments_number）跟</ol>标签显示出来。

接着我们要列出Trackbacks/Pingbacks，在刚才的endif下面一行加入：

<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3 id="pings">Trackbacks/Pingbacks</h3>
<ol class="pinglist">
<?php wp_list_comments('type=pings'); ?>
</ol>

<?php endif; ?>

到这里为止，我们已经成功将Comments与Trackbacks/Pingbacks分离。我们还可以再做一些优化修改。

让Trackbacks/Pingbacks只显示为列表

第一问题是，Trackbacks/Pingbacks除了标题连结外，还会显示简介，其实只要显示标题连结列表就足够了，简介不但没有人看，而且破坏画面观感。要做到这一点，首先要在functions.php加入以下程式，如果你的主题没有functions.php可以自行创建：

<?php
function list_pings($comment, $args, $depth) {
       $GLOBALS['comment'] = $comment;
?>
<li id="comment-<?php comment_ID(); ?>"><?php comment_author_link(); ?>
<?php } ?>
储存关闭后，打开comments.php，将刚才改过的：


<ol class="pinglist">
<?php wp_list_comments('type=pings'); ?>


改为：


<ol class="pinglist">
<?php wp_list_comments('type=pings&callback=list_pings'); ?>


完成，Trackbacks/Pingbacks整齐多了。

重新计算回覆数

还有一样可以修改的是，原本的回覆数（comments_number）会加入Trackbacks/Pingbacks，将其扣除，只显示comments会更加合理。这个功能只需修改functions.php，加入：

<?php
add_filter('get_comments_number', 'comment_count', 0);
function comment_count( $count ) {
        if ( ! is_admin() ) {
                global $id;
                $comments_by_type = &separate_comments(get_comments('status=approve&post_id=' . $id));
                return count($comments_by_type['comment']);
        } else {
                return $count;
        }
}
?>
完成。

另外还有一些修改，如用Tab来分开Comments和Trackbacks/Pingbacks，更节省空间，但是会涉及JavaScript，这里暂时不讨论，有兴趣的朋友可以自行研究，亦欢迎与我分享经验。

后记

Trackbacks跟Pingbacks的中文应该怎么翻译比较好呢？没找到合适的，所以直接用英文。

[via:WPHacks;Sivel]

Related Posts

]]> http://cn.zacklive.com/how-to-separate-wordpress-comments-trackbacks/113/feed/ 0 如何翻译WordPress主题 http://cn.zacklive.com/poedit-how-to-translate-wordpress-theme/102/ http://cn.zacklive.com/poedit-how-to-translate-wordpress-theme/102/#comments Thu, 21 Jan 2010 07:11:03 +0000 Zack http://cn.zacklive.com/?p=102 继续阅读 >>]]> wordpress translation 如何翻译WordPress主题

上一篇，我们讨论了如何让你的WordPress主题可被翻译成其他语言，今天我讲一下，具体如何去翻译WordPress主题。

同样地，先介绍一些基本概念。需要翻译的文字会储存在.PO文件中，而翻译完成的版本会储存为.MO文件里。这两个文件的命名有一定的规则：语言代码_国家或地区代码。如果不是使用UTF-8编码，还要加上所用编码格式，请看以下例子：

  • en_US – 美国英语
  • en_UK – 英国英语
  • fr_FR – 法文
  • zh_CN – 中文（简体）
  • zh_TW – 繁体中文（台湾）
  • ja_JP.EUC-JP.mo – 采用EUC-JP编码的日文

有些主题会提供.PO文件以供翻译，没有也没关系我们可以用poEdit生成。poEdit就是翻译.PO文件专用的软件，免费提供下载，支持Windows, Mac跟Linux平台，图形介面，使用起来十分方便。

第一次运行poEdit会要求你选择你的语言：

poedit theme translation 如何翻译WordPress主题

然后会提示你输入你的名字跟E-mail，这会用作翻译文件的作者资料。

poedit theme translation name 如何翻译WordPress主题

按下[OK]后就会进入poEdit的主介面，我们就在这里进行翻译工作。首先，我们要先建立一个新的翻译专案，请点左上角的[档案]–>[新增编目档]：

poedit theme translation new 如何翻译WordPress主题

接下来会看到，专案设定的画面，在这里填入专案的详细资料。要注意，[语言]项请填入翻译的目标语言；WordPress的字元集全都是”utf-8″；复数形式我们可以暂时不填。

poedit theme translation project 如何翻译WordPress主题

填完之后，切换到中间的[路径]页面，这里填入要翻译的主题的所在位置，填入文件夹的路径即可。一共要填两次，除了[基础路径]，按下[新增]，中间会出现空格，这里也要填一次：

poedit theme translation path1 如何翻译WordPress主题

再切到最后的[关键字]页面，这里要填入翻译文字的标示符，就是我们上一篇讲的那三个：

  1. __
  2. _e
  3. __ngettext:1,2

按[新增]后，分别输入这三个，一行一个，一共按三次[新增]。关于最后的[__ngettext:1,2]，是用于处理单复数的问题，但目前我都还未用上过，我的理解，这里的[1,2]是指单复数要分开来翻译。除非你的主题确实有用到[__ngettext:1,2]，不然你也可以不输入。

poedit theme translation tag 如何翻译WordPress主题

按下[OK]后，会提示你储存.PO文件，通常会把文件储存在主题文件夹里的[languages]文件夹里。注意，文件要按上面说的规则来命名，即简体中文用：zh_CN.po作为文件名，繁体用：zh_TW.po。储存之后，poEdit会自动找出所有需要翻译的文字，按下[OK]后就可以开始翻译：

poedit theme translation text 如何翻译WordPress主题

以下就是翻译介面，按一下列表中的原文，中间会显示等待翻译的原文，你就可以在最下面的方框里输入译文：

poedit theme translation edit1 如何翻译WordPress主题

在这里你会发现一些奇怪的东西像：&#58;或是%s之类。如果你不确定这是什么，你可以看一下原文到底在哪里，poEdit可以帮你找到它们。先在原文列表中选中你要查询的文字，然后选[编辑]–>显示[参考位置]，在弹出的窗口按下[OK]，poEdit就会带你到原文件，并把文字所在的那行高亮显示：

poedit theme translation refer 如何翻译WordPress主题

现在你就知道&#58;其实就是冒号。另外，%s是程式输出的资料。这些都不需要改动，只要放在合适的位置上就可以。

翻译完成之后，按下[档案]–>[储存]，poEdit就会自动帮我们生成一个.MO文件，以供程式(WordPress)使用。到这里翻译就完成了。如果你是帮其他设计师的主题做翻译，记得把你翻译的.PO文件和.MO文件传给主题设计师，让他把你的作品加入到主题中。

poedit theme translation mo1 如何翻译WordPress主题

若有错漏，欢迎指正。

Related Posts

]]> http://cn.zacklive.com/poedit-how-to-translate-wordpress-theme/102/feed/ 2 设计国际化的主题: WordPress主题翻译教学 http://cn.zacklive.com/design-international-wordpress-theme-translation-tutorial/98/ http://cn.zacklive.com/design-international-wordpress-theme-translation-tutorial/98/#comments Wed, 20 Jan 2010 04:33:43 +0000 Zack http://cn.zacklive.com/?p=98 继续阅读 >>]]> wordpress translation 设计国际化的主题: WordPress主题翻译教学

WordPress是以英文为主的网志系统，插件跟主题也是英文版为多，但随着WordPress在全球范围地流行，越来越多不同国家，说着不同语言的人加入WordPress的大家庭。会出现这一情况，其中一个原因就是WordPress本身具国际化概念的设计。WordPress本身有多国语言版本（包括简体及繁体中文），所有的插件及主题亦能轻易地被翻译成其他语言。插件及主题设计师在设计时亦应该考虑翻译的问题，本篇将讨论如何设计出适合翻译的插件或主题。

首先我们要了解WordPress所使用的翻译系统：GNU gettext。这应是目前最流行的翻译框架（Framework），尤其在开源软件的世界中，大多数支援国际化的程式都使用GNU gettext。这个系统能让程式员在编写程式时，标示出需要翻译的文字，这些文字能轻易地被提取出来，让翻译员进行翻译，翻译完成后，系统就能直接使用新语言代替程式中的文字。

要标示出需要翻译的文字，主要有以下三种方式：

  1. __($text) : 这句程式表示$text需要翻译，然后返回翻译结果
  2. _e($text) : 这句程式表示$text需要翻译，然后输出翻译结果到网页，相当于：echo __($text)
  3. __ngettext($single, $plural, $number) : 当$number等于1时，使用$single的翻译，当$number大于1时，使用$plural的翻译

很明显，第三项是为了解决单复数的问题。

再来我们要想的是：哪些文字需要被翻译？答案是直接从主题或插件输出到网页的文字，而不是从数据库（如文章）或后台设定（如网志名称）取得的资料。详细的情况，你只要多试几次就会明白。

现在我们来看看实际的使用情况。最简单的情况是，我们在设计主题时，会写一句，如果找不到任何文章即输出：Not Found，之类的字样，一般的做法是：

<h2>Not Found</h2>

这两个字很明显会直接输出到网页，需要翻译，由于是输出到网页，我们使用_e()：

<h2><?php _e(‘Not Found’); ?></h2>

_e()是PHP程式码要用<?php 及 ?>包住。

接着我们来看第二个例子，我们常常需要在主题中显示有多少个回覆，会使用以下程式：

<?php comments_number(‘No Responses’, ‘One Response’, ‘% Responses’ );?>

程式会先判断有多少个回覆，再输出：没有回覆(No Responses)，还是一个回覆(One Response)或者多个回覆(% Responses)。这里三个回覆都需要翻译，但不是直接显示到网页，而是返回给程式使用，所以我们使用__()：

<?php comments_number(__( 'No Responses'), __('One Response'), __('% Responses'));?>

还有一种情况是，我们需要将整句话翻译，但句子里包含有其他参数。例如，要显示由谁谁谁写的，我们会用：

by <?php the_author(); ?>

如果这里只翻译by的话，可能有些语言的句子会不通顺，就以中文来讲，我们可能想要显示：由谁谁谁撰写，之类的，加了一些文字在the_author()后面。这个时候，我们可以用以下方法：

<?php printf(__(‘by %s’), the_author()); ?>

我们通过__(‘by %s’)标示整句需要翻译，然后用PHP的printf()将the_author()插入句子中并输出到网页。

如果你要留意上面回覆部分的程式码，你发现，其实WordPress在设计就有考虑到一些单复数的问题，所以我们很少会用到__ngettext()。

在这一篇，我们讨论了怎么设计出一个适合翻译的主题或插件，下次我会写一下怎样去实作翻译。

Related Posts

]]> http://cn.zacklive.com/design-international-wordpress-theme-translation-tutorial/98/feed/ 6 不用WordPress, 你的网志就不够专业 http://cn.zacklive.com/wordpress-professional-blog/88/ http://cn.zacklive.com/wordpress-professional-blog/88/#comments Sat, 16 Jan 2010 18:38:50 +0000 Zack http://cn.zacklive.com/?p=88 wordpress 不用WordPress, 你的網誌就不夠專業

在网络打混了四五年，从phpBB到Discuz再到WordPress，从MySpace的崛起到Facebook到Twitter，看尽了网络的沧桑，终于决定认真地写中文网志。既然是网志，第一篇就写网志程式吧。这是我最常使用内容管理系统，也是最多人使用的网志程式，它的发明者，Matt Mullenweg，也因为它成为了超级富豪，而它，就是顶顶大名的WordPress。

WordPress是目前世界上最流行的开源(Open Source)网志程式，有了它，你就能在几分钟之内架起世界级的专业网志。由于它是开源的(基于GPL版权)，你可以免费下载，进行任何修改，基本上你可以把它用于任何地方，不管是商业还是私人用途。很多著名的企业也选择WordPress作为公司的网志系统，例如CNN。也就是说，你能够不费分毫拥有跟CNN同等级的网志系统。如果你不想或不会自行架设网站，也可以使用WordPress官方推出的网志平台WordPress.com，只要简单的注册就能免费使用，唯一的缺点就是你不能完全决定你的网址，你的网址会是：YourName.WordPress.com，其实也不错了。

WordPress最为人稍道的是它拥有非常大量的插件跟主题资源，有无数的人每天都在为WordPress撰写新的插件和主题，我也是其中一位主题设计师，目前有三个主题作品。而且插件的安装跟主题的更换只要按一下就完成，还可以在后台直接搜索网官上的插件和主题，连官网都不用上。搜索，下载，安装都在后台按几下就完成。现在的WordPress还有自动更新的功能，你再也不用为了安装新版本而去下载，上传，安装，还要担心资料会不会丢失，同样只要在后台按一下，你就拥有了最新的版本。由于有大量插件，你的网志可以得到几乎所有最新的功能，例如，把你的文章自动发表到Twitter上。

很吸引人吧，你也想要架设你自己的WordPress网址吧，推荐你一些网页，让你快速成为WordPress达人。

  1. WordPress新手，从何开始
    这是中文的基础教学，从WordPress的简介到安装，再到设定等都有涵盖到，适合刚接触WordPress的朋友。
  2. 我爱水煮鱼
    这是大陆知名的WordPress网志，从技术到主题介绍都有讨论到，想要学WordPress主题设计的朋友，可以看这里最新的WordPress主题设计教学。
  3. cn.wordpress.org / tw.wordpress.org
    这两个分别是简体跟繁体的官方网站，仅提供简体跟繁体版本的下载和WordPress最新的消息，更多的资源就要到英文的官方网站了。

在澳门似乎较少听到有人讨论WordPress，大概是因为自行架设网志的澳门人少之又少吧，如果你对WordPress有兴趣，欢迎与我交流。

Related Posts

]]> http://cn.zacklive.com/wordpress-professional-blog/88/feed/ 0 四个WordPress的主题框架 http://cn.zacklive.com/four-wordpress-theme-frameworks/66/ http://cn.zacklive.com/four-wordpress-theme-frameworks/66/#comments Tue, 14 Apr 2009 07:14:00 +0000 Zack http://cn.zacklive.com/?p=66

hybrid wordpress theme framework

hybrid wordpress theme framework

开始设计WordPress主题不是很久，但也体会到不同主题重复的代码很多，最大的不同当然就是CSS样式表文件。既然有那么多的重复代码，那就可以用框架来实现。结果有人比我更早想到了这一点，我一共找到了四个WordPress主题框架。

 

  1. Hybrid
    这个框架算是我找到的第一个WordPress主题框架，应该也是完成度最高的。作者以三年的WordPress主题设计经验为基础完成这个框架。Hybrid支持子主题，设计时已加入SEO元素，对超过１５个插件进行支持，CSS文件基于960 GS，Blueprint和Tripoli进行设计。而且Hybrid的多国语言支持也做得很好，目前已经有简体中文版的语言包以供下载了。跟其他几个框架比起来文档也算多，社群的活跃度也不错。
  2. Thematic
    Thematic框架跟Hybrid基本面十分相似，同样考虑到子主题，SEO，插件支持等等。社群的活跃度也不输Hybrid，文档方面，Thematic提供一个Wiki功能，让用户也能添加文档，只是现在的文档量还不算多。Thematic目前还没有多国语言方面的专门设计，也就是说，不像Hybrid那样提供中文语言包下载。
  3. SandBox
    SandBox应该是最早的WordPress主题框架，基本上SandBox提供一个空白的主题让你进行设计（修改CSS文件）。我知道SandBox至少是两年前的事了吧，当时觉得这个想法很棒，仔细看了一些文件，发现它内建了一些函数功能，让它更强大，这反而让我反感，因为一来你要再去学习这些函数，虽然我猜不会太难；二来对SandBox的原始代码有了依赖性，而且如果你用不着那些功能，那些内建的函数就变得多余了。如果你想要的是一个空白的主题让你好好发挥，我建议你研究一下以下这个框架。
  4. WP Framework
    WP Framework跟SandBox一样，是一个空白的主题框架。只是WP Framework比较新，而且跟据官方说法WP Framework参考了K2，Hybrid，Thematic等知名主题跟框架的设计，听起来好像还不错。可能是因为WP Framework比较新，流行度不够，文档跟社群的活跃度也偏低。

四个框架当中，Hybrid跟Thematic算是同一类，而SandBox跟WP Framework则是另一类，前者功能强大，完整，支持度高；而后者追求简洁，原始，依赖性低，如果你是新手设计师，我想WP Framework能帮助你更快的进步，要是你已经有相当的设计经验，Hybrid和Thematic都值得你去研究，也欢迎你跟我分享你的研究成果。

Related Posts

]]> http://cn.zacklive.com/four-wordpress-theme-frameworks/66/feed/ 0