修改博客标题显示定位反映出我的css知识太缺乏

看到大多数的博客的博客名称都是用的文字,而不是图片。听说,这样有利于SEO,于是,试着加入文字的博客名称。原来的Blogool的模板实际也是用css显示的是图片,而博客名称是<h1></h1>括起来的文字。这应该是符合SEO原则的,但我没有去深究。

我对css基本上是一窍不通,又不想去学。找了其它网站的源代码来依葫芦画瓢,结果,在linux下firefox中调好的页面在windows的IE下严重变形。只得重来。

我找出wordpress最初默认安装的主题,把相关的代码抄下来,改了改,就贴上去了。下面把相关的代码贴在这里,因为有不少元素不知道该怎么用,以后需要的时候再接着学习学习。

style.css的代码:

/*
=header
*/
#hd{
margin-bottom: 18px;
}
#hd h1{
margin: 12px 0 12px 0;
font-size: 33px;
font-weight: bold;
text-align: left;
}

#hd h1 a:link,#hd h1 a:visited,#hd h1 a:hover{
color: #000;
text-decoration: none;
}
#hd .description {
font-size: 1.2em;
text-align: left;
padding-left: 8px;
}

header.php中的代码:

<div id="hd">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div><!--/hd -->

把这段代码贴上看看,好像是没有图片的好看,又把原来 Blogool的css稍稍改了一下,让它显示图片。

代码如下:
/*
=header
*/
#hd{
margin-bottom: 18px;
}
}
#hd h1{
margin: 0 0 6px 0;
font-weight: border;
text-align: left;
}
#hd h1 a{
display: block;
text-indent: -9999px;
background: url(images/logo.gif) no-repeat;
width: 247px;
height: 62px;
}
#hd h1 a:link,#hd h1 a:visited,#hd h1 a:hover{
color: #000;
text-decoration: none;
}
#hd h2{
font-size: 25px;
font-weight: normal;
font-family: simhei;
padding-bottom: 8px;
margin: 0.5em 0 1em 0;
}
#hd .description {
font-size: 1.2em;
text-align: left;
padding-left: 18px;
}

header.php的内容没有变。

2007.09.06更新:

还可以有几种修改标题的方案备用:

1、<h1><a href=”<?php bloginfo(’url’); ?>” title=”<?php bloginfo(’name’); ?>”><?php bloginfo(’name’); ?></a>
<span class=”description”><?php bloginfo(’description’); ?></span> </h1>

可以把标题和说明放在一排,说明小字。但是说明也在<h1>标签内,对seo不好。相关知识点:组织元素(span和div)

2、用绝对定位的方案把标题和说明也许可以放在一排,且标题在<h1>标签内,说明不在<h1>标签里面,说明小字体。如登录框部分的代码:

#trlogin{
position: absolute;
top: 3px;
right: 2em;
font-size: 12px;
text-align: right;
}

3、另如解惑使用的那种utom的主题,也可以恰当的把标题和说明放在一排。

css文件:

#header {
background:#000;
}

#header .inside {
padding:3em 0;
}

#header h2 {
font-size:2.25em;
border-right:1px solid gray;
float:left;
margin:0 0.5em 0 0;
padding:0 0.5em 0.25em 0;
}

#header h1 {
font-size:3em;
border-right:1px solid gray;
float:left;
margin:0 0.5em 0 0;
padding:0 0.5em 0.25em 0;
}

#header h1 a {
color:#FFF;
text-decoration:none;
}

#header h2 a {
color:#FFF;
text-decoration:none;
}

#header p {
line-height:1em;
margin:0;
padding:1em 0;
}
html源码:

<div id="header">
<div class="inside">
<div class="utom">
<div id="search">
<form method="get" id="sform" action="http://www.jiehoo.com/">
<div class="searchimg"></div>
<input type="text" id="q" value="" name="s" size="15" />
</form>
</div>
<img src="/images/logo.png" style="float:right" alt="JieHoo logo" />
<h2><a href="http://www.jiehoo.com/" title="解己之惑,解人之惑">解惑</a></h2>
<p class="description">解己之惑,解人之惑</p>
</div>
</div>
</div>

垃圾评论太多了,Akismet插件也应接不暇

spam太多了,Akismet插件也应接不暇。

刚开始使用Akismet插件的时候,我还庆幸“使用后感觉不错,今天就截获10多条垃圾评论,无一错杀和漏网 🙂”,可现在,我对Akismet能否挺得住表示怀疑了。

除开我自己的评论,有效的评论率可能1~2%,绝不部分都是老外发的spam,每天都有10条左右,也许是Akismet网站太忙了(好像是全世界使用这个插件的每条评论都要先到它的网站报到接受检查),有些明显的spam(像包括几十个链接这种)也被漏报了。

不过,我设置的是评论用户的第一条评论都要检查一下,以后同一用户的评论就不必检查了。所以,没有一条丑陋的spam得以在我的公开页面漏面。

这个wordpress博客使用有1个月了吧,大概就有200个spam。除开我自己的和我邀请的,真正是来访网友的评论也就大概3条。

还有一次,Akismet把我登录后写的一条带一个链接的评论给当成spam挡住了。

像我这样的博客尚且如此多的垃圾评论,那些稍微有点名的博客一天的垃圾评论不知道又是多少呢 🙂 ,我在当心Akismet能否挺得住全世界这么多wordpress博客中的垃圾评论的轰炸 🙁

那种用发垃圾评论宣传网站的方式好像早已经列入搜索引擎打击的对象,Google黑板报明确的给出了答案:远离自动产生的链接。这篇文章也在google中国官方的谷歌中文网站管理员博客于8/15/2007 08:20:00 上午由博客主人: “谷海一粟”再次重复,相当于这个问题在google中国两大官方网站都加以强调了。难道,他们就没有真正的评估一下得失吗?

诚然,你假设发了10000条垃圾评论,得以公开漏面的假设1000条,而用户点击你的链接恐怕就少得可怜,因为大家都已经有免疫力了;就拿合法的广告来说,一般的点击率也就1%(我的google广告更低),你垃圾评论的点击率估计也就0.1%,也就是发了10000条垃圾评论,最后只有1个链接到达你的站。而你公开漏面的1000条垃圾评论,搜索引擎就不会惩罚你的这些链接吗?据我的经验,一个网站的流量大部分来自搜索引擎。而这些,你算过损失吗?而且,不包括你发垃圾评论的电费、网费、电脑磨损费等等。还有,不包括你和你网站的社会形象问题。

还有,像我这样使用wordpress之类的系统,因为这类系统大多在评论的链接中自动加入了类似“rel="nofollow"”之类的标记,这是告诉搜索引擎遇到这个超级链接就停止,不要把它当作是一个有效的投票,发了也白发。

建议这方面的SEO专家做一个“关于垃圾评论损益的可行性研究报告”,针对各种网站(包括只想赚钱的垃圾站、想N年赚钱的站、公益站、门户站、产品站、博客、论坛等等)的。我想,把这个报告弄好,发表出来,不知道应该有多红 🙂

另外,建议世界主要的搜索引擎联合开发一个像Akismet这类的巨型spam链接数据库并开发相应的功能调用接口,各种网站管理系统(cms、bbs、blog等)都可以开发挂接到这个数据库的插件,让这类垃圾链接失去存在的空间了。

ps: 我是不是对SEO感兴趣了呢 ❓

学习日记搜索引擎优化(SEO)方面的一些经验和教训

主要是指两个方面,一个是301重定向,一个是搜索引擎的搜索结果排名。

这算是本站建站以来的第三次301重定向了, 与前两次一样,关于百度和google对301重定向的反应是:google.cn反映迅速,把大部分的网址都转到网址http://www.learndiary.com下了。site:java.learndiary.com为202,site:www.learndiary.com为3570;而百度则显得要沉稳一些,http://www.learndiary.com只收录了首页,就算是改过了的URL结构(如:/archives/diaries/1.htm)也还是收在重定向之前的http://java.learndiary.com中的。site:java.learndiary.com为1040,site:www.learndiary.com为1。

搜索结果排名方面,最伤心的是可能是google方面的搜索排名一落千丈,原来来自google的流量每天大概200个IP,大概占搜索引擎流量的60~70%,百度每天大概100个IP。而现在百度的流量没什么变化,来自google的流量少得可怜,每天10个IP左右。

关于上面google搜索结果排名急降的现象我分析的原因是:

1、主要因素大概不是由于301重定向,我上两次做的301重定向对google来的搜索流量和排名都没有什么明显的影响;

2、主要因素可能跟我6月中旬(距这篇日记的发布时间大概是一个半月)把网站关闭了大概一周时间有关。由于个人原因,我打算关掉网站。后来又把网站恢复了,而就是这关闭网站一周时间导致现在在google中的搜索结果排名急降。(littlebat后注:网站中断一周可能不是google搜索结果排名骤降的主要原因,请查看本日记的后续评论-2007.08.16晚

我想,搜索引擎的职责就是为搜索用户提供准确的信息,而当网站关闭时,用户点击网站在搜索引擎中的历史页面时,得到的却是不存在的网页。搜索用户不满意的网页google当然也不满意。于是,本站所有的页面在google搜索结果的权重补降至非常低的水平,这从在google.cn中site:www.learndiary.com中出现的搜索结果绝大部分都是“补充页面”可以看出(不过今天这个时候在google.cn中用site命令查所有网站都没有出现“补充页面”的标志,可能是google.cn在调试吧?这个时候是2007.08.01 17:49)。

而本站关闭一周为什么到现在为止在百度的搜索排名中没什么变化呢?原因可能是本站在百度中的权重小,也许碰巧我关闭网站的那周百度蜘蛛就可能没怎么爬过我的站而google的蜘蛛在这期间比较勤快?也许是百度对网站关闭造成搜索结果失效的情况的处置算法不同?也许百度的算法比google的要稳重一些?搞不懂。静观其变吧。

不管怎么样,对于想真正做网站的朋友,我建议要保持网站服务的持续和稳定性,在您为浏览者提供稳定网络服务的同时,您的网站在搜索引擎眼里也会有好印象的。我的关于搜索引擎优化(SEO)的一个大原则,对搜索引擎的用户友好的网站也就是对搜索引擎友好的网站。

还有,原来的学习日记是着重于JAVA和程序、计算机方面的学习网站,所以在这方面还有一些流量;而现在的学习日记定位就纯属我的个人博客了,主要用来记录一些自己当前各种知识和技能的学习点滴。定位的改变必将带来浏览者的改变,进而带来搜索引擎搜索排名的改变。

我的wordpress使用的主题、插件及针对浏览体验和SEO方面的一些修改

我使用的是wordpress2.2.1带中文包版本,由于对下载来的wordpress及其模板、插件都作了一些修改。特地把这些变动记录一下备忘和供朋友参考。

1、模板:
选来选去,用了http://wordpresstheme.cn/category/chinese/上的blogool.org WordPress Theme,原效果图如下:
blogool.org WordPress Theme
下载来的模板(littlebat于2009年8月16日后注:我发现今天不能打开这个主题的发布网址了,另一个有效的网址是:blogool.org WordPress Theme Released),在header.php和sidebar.php去掉了blogool.org自己专有的东西,把logo的位置变了,弄不懂它里面的logo是怎么链接的,删掉了原来的logo链接,在后面加了logo:

日记

另外在右上角加了主页和标签的链接。

2、使用的插件
1)、中文 WordPress 工具箱1.2
作者的说明如下:

用来解决官方 WordPress 没有照顾到的中文相关问题。使用这个插件,你可以显示随机文章,最新留言(最新引用),留言最多文章,发表评论最多的网友,还有真正的文章摘要,等等,真正截断,没有乱码。 作者:桑葚

我使用了:最新日记,最新评论,随机日记的功能;

2)、Jiehoo Bookmark1.0
主要是用来把日记加到一些网摘上;

3)、Simple Tagging1.6.8,可从这里下载。
一个强大的tag(标签)插件,我使用了其中的:标签,相关日记,标签云(tag cloud)的功能,和最常使用标签(修改了代码)的功能。
实际上,我先用的是Jerome’s Keywords,这个插件在WordPress 2.1x以后,每次有人评论,该贴原来设定的tag 就被清空。我的2.2.1也是如此,就算是垃圾评论来了好像也会清空被评论日记的tag。现在用simple tagging插件,可导入Jerome’s Keywords的tag。
使用这个插件要注意,在实现tag cloud的时候,如果要把您以前所有的tag都包括进来,一定要把“Maximum number of days to be considered:”(最大过去天数)改成您的最早日记以前,默认是包括1年内(365天)的日记。我的改成了2000

因为我的日记的tag使用次数差距大,默认的设置显示不明显。作了下列修改:
(1)、Cloud tag separator(s):设置成了空格;
(2)、Tag count scaling maximum:设置成了300,据使用经验看,大概是数字越大,不同使用次数的tag的颜色和字体大小层次分得越清楚;
(3)、Most popular font size:设置成了28,使使用次数多的tag的字体更大一些。
实现tag cloud需要把下载来的文件解开后的目录wordpress 2.2 template files for default theme (kubrick)中的pagetemplate.tagcloud.php拷到您使用的theme的目录下。创建一个以它为模板的页面,这个页面就是您的tag cloud页面了。
另外把上面相同目录下的style.css中
/**
* Style for Simple Tagging Plugin
* http://sw-guide.de/wordpress/wordpress-plugins/simple-tagging-plugin/
*/ 后有关这个插件的部分拷到您的style.css后面。
为了适应我的tag cloud需要,对这部分的下面代码作了一点改动:

ul#tagcloud { padding:0; margin:0; text-align:center; list-style:none; }

改成下面这样:

l#tagcloud { padding:0; margin:10px; text-align:left; line-height: 300%;
list-style:none; }

使标签向左靠齐,与四周留点空隙和增大行距。

(4)、实现最常使用标签功能
我发现在simple tagging插件中没有像Jerome’s Keywords那样有专门函数来实现这个功能,于是添加了一个函数,调用实现tag cloud的函数来在侧边栏实现了这个功能。
方法如下:
在“插件编辑器”中打开“simple-tagging/simpletagging.php ”,添加如下函数:
注意:以下请把全角的“<”和“>”换成相应的英文符号!

function STP_TopTags($linkformat=null, $tagseparator=null, $include_cats=null, $sort_order=null, $display_max=null, $display_min=null, $scale_max=null, $scale_min=null, $notagstext=null, $max_color=null, $min_color=null, $max_size=null, $min_size=null, $unit=null, $limit_days=null, $limit_cat=null, $exclude_cat=null) {
echo STP_GetTagcloud($linkformat, '<br>', $include_cats, 'desc', 10, $display_min, 0, $scale_min, $notagstext, $max_color, $min_color, $max_size, $min_size, $unit, 2000, $limit_cat, $exclude_cat);
}

然后,在您要使用的模板上加上<?php STP_GetTagcloud() ; ?>就行了。
上面在调用生成tag cloud的函数基础上指定了一些参数(即上面没有$的项),从左到右意思如下:

'<br>'-标签的分隔;
'desc'-标签按使用次数从多到少排列;
10-开出前10个;
0-关闭按次数变颜色和字体的功能;
2000-包括2000天前以内的tag。

3、SEO(搜索引擎优化)方面作了一些修改,但主要的宗旨还是针对浏览者体验上作了一点优化。
1)、关于页面的title属性的修改:
网上说title属性做成“文章名称 - 文章分类 - 网站名称”类似的比较好,但wordpress自有的是相反的顺序。
网上有专门的插件,我的方法是直接修改代码如下:

(1)、修改文件/wp-includes/general-template.php,主要是根据wordpress内部工作时调用的查询参数来判断,如tag是"/?tag=java",我就可以确定tag的title,以此类推。要说的是,这种硬编码的方法不好,但是自己用比较方便。

function wp_title($sep = '-', $display = true) {
global $wpdb, $wp_locale, $wp_query;

$cat = get_query_var('cat');
$p = get_query_var('p');
$name = get_query_var('name');
$category_name = get_query_var('category_name');
$author = get_query_var('author');
$author_name = get_query_var('author_name');
$m = get_query_var('m');
$year = get_query_var('year');
$monthnum = get_query_var('monthnum');
$day = get_query_var('day');
$tag = get_query_var('tag'); //添加标签的标题
$title = '';

// If there's a tag,添加标签的标题
if ( !empty($tag) ) {
$title = $tag;
}

// If there's a category
if ( !empty($cat) ) {
// category exclusion
if ( !stristr($cat,'-') )
$title = apply_filters('single_cat_title', get_the_category_by_ID($cat));
} elseif ( !empty($category_name) ) {
if ( stristr($category_name,'/') ) {
$category_name = explode('/',$category_name);
if ( $category_name[count($category_name)-1] )
$category_name = $category_name[count($category_name)-1]; // no trailing slash
else
$category_name = $category_name[count($category_name)-2]; // there was a trailling slash
}
$title = $wpdb->get_var("SELECT cat_name FROM $wpdb->categories WHERE category_nicename = '$category_name'");
$title = apply_filters('single_cat_title', $title);
}

// If there's an author
if ( !empty($author) ) {
$title = get_userdata($author);
$title = $title->display_name;
}
if ( !empty($author_name) ) {
// We do a direct query here because we don't cache by nicename.
$title = $wpdb->get_var("SELECT display_name FROM $wpdb->users WHERE user_nicename = '$author_name'");
}

// If there's a month
if ( !empty($m) ) {
$my_year = substr($m, 0, 4);
$my_month = $wp_locale->get_month(substr($m, 4, 2));
$my_day = intval(substr($m, 6, 2));
//$title = "$my_year" . ($my_month ? "$sep $my_month" : "") . ($my_day ? "$sep $my_day" : "");
$title = ($my_day ? "$sep $my_day" : "") . ($my_month ? "$sep $my_month" : "") . "$my_year";//改成了:日,月,年的顺序
}

if ( !empty($year) ) {
$title = $year;
//if ( !empty($monthnum) )
// $title .= " $sep " . $wp_locale->get_month($monthnum);
//if ( !empty($day) )
// $title .= " $sep " . zeroise($day, 2);
//如上,改变日期顺序为: 日,月,年
if ( !empty($monthnum) )
$title = $wp_locale->get_month($monthnum) . " $sep " . $title;
if ( !empty($day) )
$title = zeroise($day, 2) . " $sep " . $title;
}

//If there is a post
//if ( is_single() || is_page() ) {
// $post = $wp_query->get_queried_object();
// $title = strip_tags( apply_filters( 'single_post_title', $post->post_title ) );
//}
//日记和页面的标题分开,并在后面加上区分
if ( is_single() ) {
$post = $wp_query->get_queried_object();
$title = strip_tags( apply_filters( 'single_post_title', $post->post_title ) ) . " $sep " . '日记';
}

if ( is_page() ) {
$post = $wp_query->get_queried_object();
$title = strip_tags( apply_filters( 'single_post_title', $post->post_title ) ) . " $sep " . '页面';
}

//为分类,作者,标签的标题添加区别
if( !empty($cat) || !empty($category_name) )
$title = $title . " $sep " . '分类';

if( !empty($author) || !empty($author_name) )
$title = $title . " $sep " . '作者';

if( !empty($tag) )
$title = $title . " $sep " . '标签';

//去掉标题前面的分隔符
//$prefix = '';
//if ( !empty($title) )
// $prefix = " $sep ";

//$title = $prefix . $title;

$title = apply_filters('wp_title', $title, $sep);

// Send it out
if ( $display )
echo $title;
else
return $title;
}

还有一个修改的地方是在您使用的模板中的header.php文件在相应位置作了下列的修改:
<title><?php if(!is_home()){ ?><?php wp_title(); ?> - <?php } ?><?php bloginfo('name'); ?></title>
最终的效果就是:

我的wordpress使用的主题、插件及针对浏览体验和SEO方面的一些修改 - 日记 - 学习日记
linux - 标签 - 学习日记
java - 分类 - 学习日记
littlebat - 作者 - 学习日记

2)、把主页和分类页、标签页等都只显示列表,不显示具体内容。
理由:我认为这些页面只起个信息的组织作用和导航作用,我的标题和分类、标签就反映了这篇文章的大概内容,查找使用方便,突出了日记页面的内容。
另外,关于右侧侧边栏的内容包含在每页会不会影响搜索引擎收录呢?我认为不会,我觉得搜索引擎应该知道这是网站每个页面的导航部分,收录时应该忽略这部分在内容中的份量。况且,主要是每页有这个侧边栏方便大家浏览。如果,这部分侧边栏真的严重影响搜索引擎收录,我以后可能会作一些调整;

3)、永久链接,动态页面伪静态化
为了与以前的系统相一致,日记页面使用如/archives/diaries/文章id.htm的形式,因为本站近3年来有过几次url调整,因此使用不少.htaccess文件中的mod_rewrite重定向,见日记:学习日记利用apache的mod_rewrite模块的全套重定向方案

4、google广告
我认为:不要排斥广告,我在使用这个blog工具为自己和别人带来帮助的同时,也为商家和用户起了一个搭桥的作用,虽然一般的草根blog想靠这个吃饭是空事,但是“聊胜于无”,所以,我在header.php和footer.php中以及内容的末尾加了广告代码,个人感觉应该不会给使用带来较大的负面影响。我不管怎么改,也绝不会像现在有些下载站,下载一个东西要躲过一重又一重的广告陷阱,结果说不定还弄过劳而无获:(

5、额外的收获
本来我对php是一窃不通,这几天修改wordpress及其模板和插件中的代码,对php也有了一点知识了。我想自己以后如果这种阅读和修改代码的事情做多了,说不一定哪天自己还能写个小插件呢:)

6、wordpress的模板和插件很多很多,我觉得目前我用的插件是最基本的,应该说大部分使用wordpress的朋友用的插件都比我的多吧。今天写了一晚上,就到此为止了。以后,我会把系统的一些改动总结在这里。欢迎大家批评指正。谢谢。