WEB前端开发-网站SEO

给WordPress加上当前位置

admin — Wed, 11 Apr 2012 03:55:48 +0000

当前位置，举例来说，就是像“首页 > 分类 > 子分类 > 第二层子分类 > ... > 第 N 层子分类 > 文章”这样的效果，给读者一个清晰的网站结构导航。有了它, 访客就可以方便地访问同类的文章, 并明确文章的所属, 对提高用户体验和网站的 PV 值都很有帮助。在主题里加入当前位置的方法有两种： 1. 不包含父级分类的文章导航这里用到 the_category() 方法的默认模式, 会调用 get_the_category_list() 生成最后一层的子分类 (分类可能不只一个) 组成的 HTML 字符串并打印到页面上。代码如下：

Home 
 >  
 >

2. 包含父级分类的文章导航我们要用的是 the_category() 方法的 multiple 模式, 而他会调用 get_the_category_list() 和 get_category_parents() 两个方法生成一个包含所有父分类的 HTML 字符串并打印到页面上。代码如下：

Home 
 >  
 >

打开主题里面的 single.php ，找到以下代码，一般是第4行：

在后面加上上面的任意一种代码即可实现效果了。

wordpress无插件实现浏览次数

admin — Mon, 09 Apr 2012 06:37:15 +0000

停用了WP-PostViews插件，因为几天测试下来，发现这个插件对我的博客不灵，有的文章一直就是0，而且统计也不准确，搜索了一下，发现有其它的无插件解决方案，试了一下，解决了问题，在此备注一下。步骤如下： 1，停用后台WP-PostViews或者相关的浏览统计插件； 2，在你使用的博客主题里面，找到function.php，加入以下两段代码：

function getPostViews($postID){
 $count_key = 'post_views_count';
 $count = get_post_meta($postID, $count_key, true);
 if($count==''){
 delete_post_meta($postID, $count_key);
 add_post_meta($postID, $count_key, '0');
 return "0 View";
 }
 return $count.' Views';
 }

 function setPostViews($postID) {
 $count_key = 'post_views_count';
 $count = get_post_meta($postID, $count_key, true);
 if($count==''){
 $count = 0;
 delete_post_meta($postID, $count_key);
 add_post_meta($postID, $count_key, '0');
 }else{
 $count++;
 update_post_meta($postID, $count_key, $count);
 }
 }

3，打开single.php，找到以下代码：

在这段代码后面追加以下代码：

或者，只要在循环体开始后的任何位置加上以上代码都是可以的。 4，打开loop.php，找到以下代码：

在这段代码后面追加以下代码：

或者，只要在循环体开始后的任何位置加上以上代码都是可以的。 OK了，到此就实现了不用插件就可以实现浏览次数的效果了。

我的wordpress用到的插件

admin — Fri, 06 Apr 2012 10:17:18 +0000

自从换了wordpress以来，一直就没有好好打理过博客，清明放了三天假，刚好没事，集中时间研究了一下，搜集了一套皮肤，以及若干我觉得很实用的插件。首先，博客从国外挪回国内了，并且备案了（一天就下备案号，夸管局一下），独立IP主机；其次，重新整理了博客的分类，之前的附件因为换空间经常丢失，现在不再把附件上传到空间，所有的附件全部转移到金山快盘上了，20G够用了，还有每天登录也能扩容，再也不用操心附件失效的问题了，真是一劳永逸的好办法，之前一直没看上眼，现在觉得还不错；再者，博客内容也有所侧重，以后写的更多的是CSS3, Jquery, PHP, HTML5, SEO这块不再是重点了。另外，博客美化了一下，皮肤是从别人的博客上面看到的，觉得还不错，就拿过来用了。想试试的可以移步到此下载：http://d.1tpan.com/tp1464290226 重点说一下插件。WordPress插件很多，但我用的不多，挑选了一些实用的插件，罗列出来，做个标记： 1、BackUpWordPress 这是个自动备份的插件，可以备份整站，也可以选择性的备份数据库或者文件，并可以自定义自动备份的频率，且提供下载地址。这个插件对于经常折腾博客的人来说，的确很方便，即可以备份插件、皮肤，还能备份数据库。 2、comment-reply-notification 留言回复通知插件，这个插件的主要功能是当博客上的留言有人回复的时候，会有一封邮件通知用户他的留言有新的回复了，这样可以让用户跟踪自己的留言和由此产生的交流和讨论。 3、widget-logic 想不想要不同的页面实现不同的边栏内容，那这款插件就是必选的喽。Widget Logic 插件给每个 widget 一个扩展控制 Widget logic，你可以通过它根据不同页面自定义你的侧边栏内容。 Widget Logic 插件设置一些常用的标记： is_home() 主页 is_single() 文章页 is_page() 页面 is_category() 文章分类页 is_tag() 文章标签页 is_archive() 归档页 is_404() 404页 is_search() 搜索结果页 is_feed() 订阅页 Widget Logic 插件语法 ||表示或，&&表示和，!表示非，示例语言如下： is_home() 仅主页显示 !is_home() 除主页以外的页面显示 !is_category(5) 仅在ID非5的分类显示 is_home() || is_category('baked-goods') 在主页或名称为baked-goods的分类显示 is_page('about') 仅在关于页显示 4、wp-chinese-excerpt 中文摘要插件。自定义截取的数值，这个插件适合截取中文，不会出现截取后乱码的现象。不过在截取代码时发现还是有点小问题，这时手动插件more标签强制截断即可。 5、wp-pagenavi 分页美化插件，替换原生态的分页形式，这个不必多介绍，装了就明白怎么用了。 6、wp-syntax 代码高亮插件，最大的优点是简单易用，兼容性非常好，写技术文章的博客必备利器呀。不过目前我还没有使用，相信还不错吧。

.red { color:#f00; }

7、WP-PostViews 这个是浏览次数的插件，安装完插件后，选择主题文件single.php文件进行编辑，在single.php文件相应位置调用显示代码

保存文件即可。 8、External Links 在新窗口中打开非站内链接，有4个选项，勾选了第1个和第4个选项，设置站内的所有外部链接在新窗口中打开。 9、帝国备份王这个不是插件，是数据库备份还原的程序，很强大。我在原程序的基础上进行了美化和简化，去掉了多余的语言，仅保留UTF8，对界面进行了美化，用起来更舒服一些。为什么要用这个呢，因为WordPress相关的数据库还原插件很少，而且使用起来有局限性，要么不能超过2M，要么执行SQL报错，要么有些函数被空间商屏蔽了不能用... 所以就选择用了这个，备份还原一条龙，加上BackUpWordPress，两个组合起来，可以实现WordPress的完美迁移，强烈推荐组合使用。附美化版下载地址：http://d.1tpan.com/tp0675901998

CSS多行文字/单行文字垂直居中的方法

admin — Tue, 15 Nov 2011 09:52:43 +0000

注意：在外层容器是固定高度，这才使效果得以实现。

其大概原理为：第一个alert_blank容器，display:inline以后作为行内元素，它的高度为100%，宽度却为0，相当于紧贴外层容器左边框的一条透明的线，这样就使得外层容器里面只存在一行。

外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中。真正盛放内容的div也是display:inline，它对外和blank垂直居中，只要内部文字不超过blank的高度，这个效果将是完美的。

虽然从语义化上讲，用空白div布局说不太过去，但是瑕不掩瑜。另：zoom:1是为了触发hasLayout。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS多行文字/单行文字垂直居中的方法</title>
<style type="text/css">
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
border:1px solid #f00;
}
.alert_blank, .alert_con{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
background:#0f0;
}
.alert_con{ width:100%; height:auto; }
</style>
</head>
<body>
<div class="alert">
<div class="alert_blank"></div>
<div class="alert_con">哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～</div>
</div>
</body>
</html>

lazyload改造！真正的图片延迟加载效果

admin — Thu, 29 Sep 2011 09:25:38 +0000

前段时间一直在研究lazyload延迟加载图片效果，后来发现lazyload只是一个花哨的效果，并非真的实现了按需延迟加载，再加上搜索到的相关参考资料都基本雷同，所以就暂时放弃了研究。今天有空，又来研究这个lazyload了，碰巧发现了相关的技术文档，经测试发现的确是实现了真正的延迟加载效果，所以研究一下，整理发布。（如何测试是否是真正的延迟加载，请使用FireFox的FireBug插件进行测试）以下文章是转载的，不是我的话：动态加载本质上都是一样的，即：图片或者数据一开始不会被加载，当你触发了滚动条（说明你想继续看这个网站）那么图片或者数据开始加载。那么实现的方法其实有很多，但是基本上都是通过替换的方式来实现的。滚动显屏加载 demo 您可以狠狠地点击这里：jQuery滚动加载图片实现的代码： <script language="javascript" type="text/javascript" src="http://www.mmba.cc/templets/css/jquery.js"></script> <script language="javascript" type="text/javascript" src="http://www.mmba.cc/templets/css/jquery.scrollLoading.js"></script> 当然，不可能真的就如此简单，我们还需要做点小动作的。元素默认是不加载的，那么真正的加载地址显然要预先在元素上放置的，例如新浪微博默认把头像地址绑在了一个自定义的“dynamic-src”属性上。在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，我设定了绑定地址的自定义属性为“data-url”，此属性值设为真实的图片（或页面）地址就可以了。对于常用的图片，还有一点小问题，就是其默认的src图片地址。其src地址不能是真实的图片地址（否则会直接一次性全部加载），也不能是空地址或是坏地址，否则IE浏览器下会出现很惊悚的红叉叉。我的做法是默认链接的是一个1px * 1px的gif透明图片（大小很小），同时可以透出后面加载中gif动画图片，当滚动加载的时候直接把此gif图片替换掉。于是，对于图片，可能就有类似下面的代码： <style type="text/css"> .zxx_test_list img { background:url(http://www.mmba.cc/templets/css/loading.gif) no-repeat center; } </style> <div> <img src="http://www.mmba.cc/templets/css/pixel.gif" data-url="http://www.mmba.cc/templets/css/hd(4).jpg" width="180" height="180" /> </div> scrollLoading是个很简单很小的插件（无注释YUI compressor min版仅508B），所以参数也很少，就一个，见下表：参数默认释义 attr data-url 获取元素加载地址的属性名? 就这些了。此插件只适用于页面默认滚动条的动态加载。对于内部div之类的滚动加载不支持。不懂的可以留言咨询！

垃圾评论还真是多！

admin — Tue, 09 Aug 2011 13:45:28 +0000

换了WP，这几天没有去外部博客留言评论，但自己的网站却来了一堆的垃圾评论，赶紧去注册一个Akismet API Key，希望能把大量的垃圾评论拒之门外！另发现了此主题有一些缺陷，尤其是评论方面没有过滤管理员的评论，导致调用评论和数量都出现了一定的偏差，有时间解决一下，有会解决的朋友，也请指点一下。还有，主题的内容截断看起来也不爽，截取第一段，通过我第一段内容不多，这样整体看起来不舒服，有空要改。

关于站内的友情链接问题

admin — Fri, 05 Aug 2011 11:46:53 +0000

因为换了空间和博客类型，原来的友情链接已经丢失了，太多了也记不起来了，暂时的方法只能是通过查询反向链接的方法，来确定还保留本站链接的网站，周末会把友情链接加上，如果有遗漏的，请在此贴评论留言提醒我一下。刚弄了个WP，很多东西都还没有弄好，慢慢来吧。近期百度变化异常的频繁，有时间整理一下，发个帖子详细分享一下我的经历。

博客被我折腾了很久！

admin — Fri, 05 Aug 2011 10:24:26 +0000

今年我的博客倍受冷落，最近又饱受折磨，换了两个空间，终于把博客安好家了，中间搞了很久才搞定，郁闷不说了。博客快要弄好了，买的空间真是不错，可以绑定3个主域名，无限个二线域名，600M的空间，12G的流量，控制面板是超级的牛呀。截张图晒一下，嘿嘿，有兴趣购买的朋友可以联系我，有优惠的哦！周末上海要刮台风了，听说是十几年难得一遇呀，明天的七夕看来也只有宅在家里了！刚好，熟悉WP，并且把漏掉的友情链接补上来！各位朋友，周末愉快哦！~

JS批量处理ZBLOG静态页面跳转

admin — Sat, 02 Apr 2011 05:25:52 +0000

今天有空，写了一个JS跳转的方法，适合换域名之后，兼顾访问老域名的访客，因为是用JS写的，所以此方法适用于动态和静态页面，尤其是静态页面无法写程序判断，用这个方法最适合不过，但从SEO角度来说，没多大意义，说白了，就是跳转。

之前没有想到这个方法，所以换域名之前的静态页面基本没法批量做处理，今天突然想起来了，就整理一下。方法如下：
假如：
程序为：Zblog
地址为：http://www.baidu.com/a/b/c.html
现换了新域名，原来访问的地址需要跳转到新的域名上面来，
新地址：http://www.google.com/a/b/c.html

步骤如下：
1、获取当前页面的URL地址；
2、判断是否老域名，是的话，则先替换老域名；
3、跳转到新的页面地址；

代码如下：

var thisURL = document.URL.toLowerCase();
//alert(thisURL);
var str1 = "baidu";
if(thisURL.indexOf(str1)>-1){
var newURL = thisURL.replace("baidu","google");
//alert(newURL);
window.location.href= newURL;
}

找到需要替换页面中的任意一个公用的JS文件，把以上代码复制进去，就搞定了。

方法简单有效，需要的不妨一试。

某老外参加的汉语考试！

admin — Tue, 29 Mar 2011 06:54:42 +0000

估计有些人看过这个笑话，觉得比较有意思，就记录下来了，不得不感慨国语的强大。

这个估计比放周董的歌当听力，发个小刀刻甲骨文写作还要郁闷的，笑话如下：

某老外苦学汉语十年，到中国参加汉语考试，试题内容如下：

题目：请解释下文中每个“意思”的意思。

阿呆给领导送红包时，两人的对话颇有意思。
领导：“你这是什么意思？”
阿呆：“没什么意思，意思意思。”
领导：“你这就不够意思了。”
阿呆：“小意思，小意思。”
领导：“你这人真有意思。”
阿呆：“其实也没有别的意思。”
领导：“那我就不好意思了。”
阿呆：“是我不好意思。”

结果：老外泪流满面，交白卷回国了。。。