WordPress 技巧：如何汉化顽固插件

By NetPuter on 2009-05-24 / * WordPress / # , , !
24

在调戏 WordPress 的过程中，插件是不可不戏的一个部位。对于许多人来说，面对着满屏英文的插件设置，难免会有所纠结。还好有很多热心高手为我们汉化了许多的插件（比如 WPLAND 就为大家提供了一些自己汉化的插件），方便了我们的使用，在这里谢谢他们 :-) 。可是，要是插件还没被汉化呢，难道就面对满屏英文而纠结吗？非也非也，我们可以自己对插件进行汉化，就算是顽固插件，也一样不放过。

所谓的汉化

对于 WordPress 插件，建议大家使用 PoEdit 进行汉化。直接修改源代码也是可以的，但没有注意编码格式的话，可能会导致插件设置页面出现乱码。而且，插件升级之后旧文件被新文件覆盖，汉化也随之消失……使用 PoEdit 一般不会出现这些问题，点击此处下载 PoEdit 。

那么，使用 PoEdit 进行汉化的原理是什么呢？WordPress 使用 GNU gettext 机制来汉化，关键之处在于两个函数『 _e 和 __ 』。 PoEdit 通过识别并提取调用了这两个函数里的字符串，然后你只需要输入那些字符串所对应的中文语句，其他的交给 PoEdit 就行了，所有翻译的语句都会在 .po 文件中。看不懂？没关系，接下来我们开始汉化啦。

如何汉化插件

关于 PoEdit 的使用，可以围观 Denis 童鞋的『使用 poEdit 本地化 WordPress 插件』，里面有详细的介绍，附上偷拍的一张汉化时候的照片。

localize-01

如何汉化顽固插件

世界上只有两种插件不能被汉化：这种和那种。对于这种插件，他本身就是中文，当然不需要汉化啦。而那种插件呢，由于作者在编写插件过程中没有调用函数『 _e 和 __ 』，使得 PoEdit 无法识别其中需要被汉化的字符串，因此那种插件就不能被汉化鸟。

正如标题所说的，如何汉化顽固插件。其实方法很简单，就是我们手动调用函数『 _e 和 __ 』。本文以 Samsarin PHP Widget （让边栏支持PHP的插件）为例，这是没有汉化前的 Samsarin PHP Widget 后台设置以及直接载入 PoEdit 的结果，它完全不懂中文，XD。

localize-02

接下来我们就开始对它动手动脚啦，手用来动鼠标，脚用来赶蚊子，欧耶。

[1] 对 samsarin-php-widget.php 进行修改

打开源文件之后，在注释下面（也就是正式代码开始的地方）插入以下代码：

1

load_plugin_textdomain('samsarin_php_widget', "/wp-content/plugins/samsarin-php-widget/");

之所以要这么修改，是因为『在确保输出的文本可以被本地化之后，你必须设置你的插件，使得能够导入适当的 .mo 文件。 .mo 是编译后的 .po 文件，它是在 PoEdit 保存的时候会自动产生的。 via 』 单引号内的内容就是插件名称，双引号内的内容就是插件的相对路径啦。

关于那个插件名称，有点儿囧。最好看看代码里怎么叫它的名字，别以为是作者是 samsarin-php-widget 叫的实际上却是 samsarin_php_widget 的说。

[2] 把需要汉化的字符串标记出来

要把需要汉化的字符串标记出来，这可是个眼力+体力的事儿。一般来说 PHP 函数或过程可以不用去看了，你需要注意的是那些 HTML 代码，比如：

57
58
59

<h2>Samsarin PHP Widget Options</h2>
//把上面的代码修改成下面的样子：
<h2><?php _e('Samsarin PHP Widget Options', 'samsarin_php_widget'); ?></h2>

整个格式就是这样滴， HTML 元素可以不被 PHP 函数包围起来。就这么把所有需要汉化的字符串标记出来。

[3] 在 PoEdit 中进行汉化
[4] 调戏一下

localize-03

唠叨一下

  1. 话说这个方法是 @Leewings 童鞋教我的，谢谢。
  2. 如果看不懂文章内容或者发现什么问题请先把文章再看一遍然后再操作一遍，实在受不了就留言吧。
  3. OrzDream 已经一个多月没更新了，在4月底的时候忙着期中考试，到了5月份运气一直不太好，没有心情更新。尤其是这段时间 WPChina 的独立服务器出了一些问题，看着一堆毛病更不想更新了。不过现在总算挤出了一篇想写很久的文章啦，感觉我的功力下降了……
  4. 如果你已经知道如何汉化了，而且对 WordPress 插件倍感兴趣，考虑一下加入 WPLAND ？
  5. 在这篇文章之前，本来是想模仿梵娜童鞋的《纪念 Plurk 君》写一篇《纪念 Chi.mp 君》的，后来发现对 Chi.mp 实在没有多少眷恋，算了。

继续阅读全文 »

WordPress技巧：解决冲突 插件主题不打架

By NetPuter on 2008-12-16 / * WordPress / # , , , , !
37

使用 WordPress 的过程可以说就是不断更换插件、主题的过程，可以说：世界因 WordPress 而美丽， WordPress 因扩展（插件、主题）而动人。同时，使用插件的方法不仅仅是安装独立插件，也可以通过主题内置的功能实现插件的效果。但有些时候，比如说 sofish 童鞋制作的“sofish牌主题”喜欢在主题中内置的翻页功能，同时如果我们也安装并启用了 WP-PageNavi 这个插件，就会发生这个冲突。在本文中，NetPuter 将告诉你如何和解这个冲突。

为什么需要在主题中内置功能实现插件效果

对主题制作者来说

  1. 可以极大地丰富主题的功能，可以方便做出自己想要的效果了。
  2. 阿瓦说：减少Function Hook，因为所有的插件都是Hook的方法，比较消耗CPU（不过如果你有Cache就好一些）。
  3. ……你觉得呢？

对主题使用者来说

  1. Prower说：使用主题时就不用为插件应该怎么添加、设置而发愁了。
  2. 减少后台使用的插件，提高 WordPress 运行速度（真的么？）。
  3. ……你觉得呢？

插件和主题之间为什么会产生冲突

就拿 sofish 童鞋的新作“Anjing”来说。如果要在页面中使用翻页效果，需要调用 wp_pagenavi() 这个过程函数。但当插件（WP-PageNavi）和主题（Anjing）都同时定义了这个名字的过程时，冲突就产生了，然后就是你一拳，我一脚，然后……（感觉解释得很生硬，好像说错了）

如何解决这个冲突

既然知道了冲突是因为同名的过程而产生的，那么解决这个问题就变得非常容易了——没错，只需要把插件或者主题中实现同个功能的那个过程改掉就行啦！鉴于插件相对于主题来说升级频率更高一些，为了方便，我们选择对主题进行修改。

要想在主题中实现某些功能，需要修改的是 functions.php 这个文件，WordPress 说它叫做“模板函数”。打开有冲突的主题中的这个文件，然后根据提示找到产生冲突的过程函数，比如同时启用了 WP-PageNavi 和 Anjing ，在主题预览的时候就会出现类似这样的一段话：

Fatal error: Cannot redeclare wp_pagenavi() (previously declared in F:\PHPnow\htdocs\wp-content\plugins\wp-pagenavi\wp-pagenavi.php:80) in F:\PHPnow\htdocs\wp-content\themes\Anjing_sofished\functions.php on line 99

OK，发现目标！冲突的幕后黑手就在 functions.php 的第 99 行啦，可是打开一看，只是一个“}”。不要失望，根据 PHP 语法顺藤摸瓜向上乱摸就会看到——“ function wp_pagenavi{ ”是的，就是这一段。

解决插件和主题之间的冲突

对于主题使用者来说

直接把这一段 function 过程函数删掉保存就可以了。

对于主题制作者来说

为了更好的兼容性，你只需要把这段 function 过程函数改名就可以啦，比如说把“wp_pagenavi”改成“sofish_pagenavi ”（sofish 童鞋专用插件？），然后到调用这个 function 过程函数的地方把“<?php wp_pagenavi(); ?>”改成“<?php sofish_pagenavi(); ?>”就可以啦！

对于追求玩美的主题制作者来说

当然咯，为了不要让已经启用了的 WP-PageNavi 被浪费，你完全可以在调用“wp_pagenavi”的地方这样写：

1
2
3
4
5
6
7
8

<?php if(function_exists('wp_pagenavi')) { 
	wp_pagenavi();
} elseif(function_exists('sofish_pagenavi')) {
	sofish_pagenavi();
} else { ?>
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
<?php } ?>

看到了么？ WP-PageNavi 和 Anjing 握手和解了诶！

继续阅读全文 »

WordPress技巧：在SEO面前砍掉多余内容

By NetPuter on 2008-10-05 / * WordPress / # , , , !
55

感觉又是一篇标题党入党申请书的范文，呵呵~

直接进入正题，童鞋（好像你们不喜欢看到童鞋这个词，如果是的话我可以改口）喜欢在侧边栏显示最新文章、最新评论、饭否最新动态以及其他的信息，但是如果显示的内容太多又会导致页面不美观，直接砍掉多余的内容吧，可能会不好看，再者影响SEO。有没有……有，当然有。今天NetPuter就给大家介绍下如何在SEO面前砍掉多余内容。（感觉今天的这个情景预设的不好T^T）

先让我看看效果吧

  • 这个是没有砍掉前的效果，多余的内容很多。
  • 我砍！页面整齐了吧，一行就是一行，你敢跨？我就砍！

如何在SEO面前砍掉多余内容

CSS，又是CSS。代码如下：

1
2
3
4
5
6
7

<style type="text/css">
#sidebar {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
</style>

这里简单解释下这3个CSS参数是什么：

  1. overflow:hidden：不显示超过对象尺寸的内容
  2. text-overflow:ellipsis：当对象内文本溢出时显示省略标记“...”
  3. white-space:nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

具体大家可以参考CSS中文手册，遇到不熟的属性都可以参考下。

然后呢，把上面的CSS代码添加到主题目录下的style.css中相关位置就可以啦。

PS1：最近还是在整蛊WordPress主题，好折腾别人的主题却又达不到自己想要的效果，自己要做一个又没有灵感，哎~
PS2：感觉又写得很糟糕，哎~
PS3：原本显示在首页的Links我已经搬到了这里，和“传统”的Links页面不一样哦，另外需要申请Links的童鞋也可以到这里留言申请。

继续阅读全文 »

想看我 先订我 — RSS Post Editor

By NetPuter on 2008-10-02 / * WordPress / # , , !
24

如今通过RSS阅读Blog的人是越来越多啦，OrzDream也是如此，大部分的童鞋是通过RSS了解OrzDream的更新动态的。为了感谢这些通过RSS订阅的童鞋，也为了鼓励更多的童鞋使用RSS这个非常好玩好用的东西，所以从今天起NetPuter会不定向不定时地设置一些内容只在RSS Feed中显示。[rss]（现在你的括号中看到的就是只显示在RSS Feed的内容啦，不信你可以打开文章看看哦）[/rss]

那么这个功能要怎么实现呢？很简单，只需要一个插件：RSS Post Editor，就可以实现标题所说的“想看我？先订我！”啦。

  • 姓名：RSS Post Editor
  • 年龄：1.0
  • 血型：订阅型 & 日志型
  • 照片：真的想看么？那就先订阅OrzDream的Feed吧，我在这篇文章中使用了这款插件了的说~
  • ……：……

更多介绍，请查看：http://wpland.cn/2008/09/rss-post-editor.html
[rss]为了方便大家，也为了演示，我把下载页面给通过RSS订阅的童鞋：猛击这里就行啦~[/rss]

PS：小提问：你对RSS技术的未来有什么见解呢？

继续阅读全文 »

WordPress技巧：超实用的Web 2.0风格翻页代码

By NetPuter on 2008-10-02 / * WordPress / # , , , !
70

十月以来，陪伴我一个三个月的ADSL包月上网已经和我Say GoodBye了，取而代之的是每个月30小时68元的套餐。对于我这种人来说明显是不够的，所以就开始研究WordPress啦。今天就给大家带来《WordPress技巧：超实用的Web 2.0风格翻页代码》。

给WordPress增加一个高级翻页功能

WordPress几乎无所不能，只拿来做Blog略显单调，拿来做CMS、工作室甚至是微博客都绰绰有余。如何显示这些文章呢？文章比较少还好，但是对于几十甚至几百甚至几千篇文章，WordPress原生翻页功能就几乎变成了鸡肋了，尤其是它只能上一页、下一页的滚动，很麻烦！

还好，国外的高手制作了这款WP-PageNavi插件，让我们能够轻松拥有一个高级的翻页功能。我想应该很多人知道这一款插件吧，就不用我多介绍啦。需要的童鞋可以猛击这里。

事实上，还有很多增强WordPress翻页功能的插件，个人比较比较喜欢WP-PageNavi，所以下文就拿这款插件开刀啦~

给PageNavi开刀之前 记一下它长啥样


可怜的娃儿，你怎么长这么丑……

要给PageNavi开刀整成啥样

  1. 如果主题色彩非常有特色的话，你可以参考主题色系进行整容。
  2. 在这里NetPuter给大家强烈推荐这个玩意儿：24款超实用的Web 2.0风格翻页代码。

    这里面包含了24款翻页风格，比如说Digg、Yahoo、Flickr等等，更重要的是这套风格和PageNavi的样式长得很像，脸型也差不多，方便我们修改。下载链接在这里（快点鼠标左键，哼哼哈嘿~）
  3. 这娃儿命太苦了，算了，别折磨它了……

开刀整容吧

首先，我们需要了解一些PageNavi默认的代码样式（WP-PageNavi插件目录下的“pagenavi-css.css”）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi a:visited {
	padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
	border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}
.wp-pagenavi a:active {
	padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi span.pages {
	padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #000000;background-color: #FFFFFF;}
.wp-pagenavi span.current {
	padding: 2px 4px 2px 4px;margin: 2px;font-weight: bold;border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}
.wp-pagenavi span.extend {
	padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}

然后我们将24款超实用的Web 2.0风格翻页代码中的CSS.CSS所需要的CSS代码Copy出来，你会发现整容的内容（这里拿Digg的为例）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

DIV.digg {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
	BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
	BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
	BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
	BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
}
DIV.digg SPAN.disabled {
	BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}

对CSS比较了解的朋友发现了吧，这段代码比较臃肿，你可以稍微优化下。看看我是怎么整容的：

  1. 把上面代码中的“DIV.digg”替换成“.wp-pagenavi”，注意要灵活变通哦。
  2. 把“.wp-pagenavi A”和“.wp-pagenavi A:link”合并到一起，也就是写成“.wp-pagenavi A, .wp-pagenavi A:link {内容}”这样。
  3. 同样再把“.wp-pagenavi A:hover”和“.wp-pagenavi A:active”合并到一起。
  4. 你可以把修改后的“.wp-pagenavi SPAN.disabled”部分删掉，因为根本就没有用。
  5. 如果你不想显示前面的“Page 1 of 4”，你可以在CSS中增加以下代码： 
    1
2
3

    .wp-pagenavi SPAN.pages {
	display: none;
}
  6. 最后，把上面修改的内容添加到你正在使用的主题目录下的“style.css”的屁股。

快看整成什么样


哈哈，这娃儿变得很漂亮啦，赶快去给你的PageNavi整容吧！

继续阅读全文 »

123»

Advertise Here