分享WordPress读者墙的制作

由于网站上线有一段时间了,交换友链的朋友也比较多,于是准备整个友情链接的版面出来,以方便整合大家的友链,同时也方便以后大家彼此的沟通交流与访问,今天也刚好周末,于是梳理下了方案和设计思路,决定在友链页面的上端放个读者墙,一方面为了页面的美观效果,另一方面也是为了增加用户的访问的体验感,对于读者墙的制作,可以说网上已经多的数不清了,我也查下一些资料,也发现了一些问题,比如:有的读者墙效果不够好,有的读者墙没登陆的用户头像出现空白问题,等等…..

于是我本人prolicn对于上面可能遇到的问题做了一部分的优化与补充,在此跟大家分享下…..

读者墙效果展示地址:http://prolicn.com/index.php/link

废话不多说,直接上代码:

1、复制主题下的page.php文件,重命名为:link.php,将其中第一个<?php替换为:

<?php
 /*
 Template Name: link 友情链接
 */
 ?>
 <?php

2、在模板文件中查找:
<?php the_content(); ?>

<!-- start 读者墙css -->
<style type="text/css">
#readerswall h2{ color:#fff; font-family:"微软雅黑"; margin-bottom:15px; font-size:18px;}
#readerswall li{width:50px;height:56px;margin:0 20px 21px 0;padding:5px;
float:left;list-style:none;border: 1px solid #DFDFDF;
-moz-border-radius:2px;-khtml-border-radius: 2px;
-webkit-border-radius: 2px;border-radius: 2px;}
#readerswall img{width:50px;height:50px;display:block;}
#readerswall .active-bg{width:50px;height:2px;_font-size:0;margin-top:5px;background:#DFDFDF; }
#readerswall .active-degree{background:#08c;width:50px;height:2px;_font-size:0;}
</style>
<!-- and 读者墙css -->
<!-- start 读者墙-->
 <?php
 $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id='0' AND comment_author_email != '这里填写你的博主的邮箱地址不显示该email的头像' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 40";//最后的这个40是选取多少个头像,我一次让它显示40个。
 $wall = $wpdb->get_results($query);
 $maxNum = $wall[0]->cnt;
 foreach ($wall as $comment) 
 {
 $width = round(50 / ($maxNum / $comment->cnt),2);//这个50是我设置头像的宽度,和下面&size=40里的40一个概念,如果你头像宽度40,这里就是40了。
 if( $comment->comment_author_url ) 
 $url = $comment->comment_author_url;
 else $url="#";
 $tmp = "<li title='".$comment->comment_author." (".$comment->cnt."次重要讲话)' num='".$comment->cnt."'><a href='".$comment->comment_author_url."' target='_blank'><img src='http://www.gravatar.com/avatar.php?gravatar_id=".md5($comment->comment_author_email)."&size=40&d=identicon&r=G' alt='" . $comment->comment_author . " (". $comment->cnt . "层楼)' /></a><div class='active-bg'><div class='active-degree' style='width:".$width."px'></div></li>";
 $output .= $tmp; 
 }
 $output = "<div id='readerswall'><h2>读者墙</h2><ul class='gavaimg'>".$output."</ul></div>";
 echo $output ;
?>
 <!-- end 读者墙 -->

简单解释下
绿色文字的地方是注释
红色文字的地方是可以根据你自己主题做修改的
是不是很简单哈,由于本人prolicn考虑到一些页面的效果问题,加了一个动态背景的切换,这里就不多说了,如果你觉得不错的话,那你也赶紧来试试吧……
[button href=http://pan.baidu.com/s/1gdelx0v color=green]文件下载[/button]

WordPress 常用模板函数速查表

简单,快速,复制/粘贴,这个页面列出用于创建,更新和维护 WordPress 模板的常用函数列表。

基本模板文件

文件名描述
style.css主题样式文件
index.php首页模板文件
header.php头部模板文件
single.php单篇文章模板文件
archive.php存档/分类模板文件
searchform.php搜索表单模板文件
search.php搜索模板文件
404.php404模板文件
comments.php留言模板文件
footer.php底部模板文件
sidebar.php侧边栏模板文件
page.php静态页面模板文件
front-page.php静态首页模板文件
tag.php标签存档模板文件
category.php分类存档模板文件

头部函数

函数名描述
<?php site_url(); ?>站点根链接
<?php wp_title(); ?>文章或者静态页面标题
<?php bloginfo(‘name’); ?>站点名称
<?php bloginfo(‘description’); ?>站点描述
<?php get_stylesheet_directory(); ?>样式文件所在目录
<?php bloginfo(‘stylesheet_url’); ?>样式文件链接
<?php bloginfo(‘pingback_url’); ?>pingback 链接
<?php bloginfo(‘template_url’); ?>模板文件所在目录链接
<?php bloginfo(‘version’); ?>WordPress 版本
<?php bloginfo(‘atom_url’); ?>atom 链接
<?php bloginfo(‘rss2_url’); ?>rss2 链接
<?php bloginfo(‘url’); ?>网站根链接
<?php bloginfo(‘html_type’); ?>html 版本
<?php bloginfo(‘charset’); ?>字符集

导航菜单

默认导航菜单
<?php wp_nav_menu(); ?>
指定的导航菜单
<?php wp_nav_menu( array(‘menu’ => ‘Project Nav’ )); ?>
基于分类的导航
<ul id=”menu”>
<li <?php if(is_home()) { ?> class=”current-cat” <?php } ?>>
<a href=”<?php bloginfo(‘home’); ?>”>Home</a></li>
<?php wp_list_categories(‘title_li=&orderby=id’);?>
</ul>
基于页面的导航
<ul id=”menu”>
<li <?php if(is_home()) { ?> class=”current-page-item” <?php } ?>>
<a href=”<?php bloginfo(‘home’); ?>”>Home</a></li>
<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>
</ul>

模板函数

函数名描述
<?php the_content(); ?>文章内容
<?php if(have_posts()): ?>检查是否有文章
<?php while(have_posts()): the_post(); ?>显示文章
<?php endwhile; ?>结束循环
<?php endif; ?>结束判断
<?php get_header(); ?>头部模板内容
<?php get_sidebar(); ?>侧边栏模板内容
<?php get_footer(); ?>底部模板内容
<?php the_time(‘m-d-y’); ?>显示时间,格式为:’08-18-07′
<?php comments_popup_link(); ?>显示到文章留言的链接
<?php the_title(); ?>文章标题
<?php the_permalink(); ?>文章链接
<?php the_category(); ?>文章分类
<?php the_author(); ?>文章作者
<?php the_ID(); ?>文章ID
<?php edit_post_link(); ?>文章编辑链接
<?php wp_list_bookmarks(); ?>友情链接列表
<?php comments_template(); ?>留言模板内容
<?php wp_list_pages(); ?>所有页面列表
<?php wp_list_categories(); ?>所有分类列表
<?php next_post_link(‘%link’); ?>下一篇文章链接
<?php previous_post_list(‘%link’); ?>上一篇文章链接
<?php get_calendar(); ?>显示文章日历
<?php wp_get_archives(); ?>存档链接列表
<?php posts_nav_link(); ?>上一篇和下一篇文章链接
<?php rewind_posts(); ?>重回开头开始第二个循环

主循环

基本循环
<?php if(have_posts()) { ?>
<?php while(have_posts()) { ?>
<?php the_post(); ?>
<?php // custom post content code for title, excerpt and featured image ?>
<?php } // end while ?>
<?php } // end if ?>

其他函数

函数名描述
/%postname%/自定义固定链接
<?php include(TEMPLATEPATH . ‘/x’); ?>从模板文件夹加载文件
<?php the_search_query(); ?>搜索表单返回的值
<?php _e(‘Message’); ?>返回翻译之后的文本
<?php wp_register(); ?>注册链接
<?php wp_loginout(); ?>登录/登出链接
<!–nextpage–>将文章那个内容分页
<!–more–>截断文章内容,并创建到全文的链接
<?php wp_meta(); ?>管理元链接
<?php timer_start(); ?>开始计时 (header.php)
<?php timer_stop(1); ?>停止计时 (footer.php)
<?php echo get_num_queries(); ?>显示生成当前页面所需的查询数

深度剖析友情链接

对于一个不懂SEO的菜鸟而言,可能做好博客的SEO部分真的就是“内容+外链”如此这般简单和容易了,而我却一直都是这样做的:没有特意的去为了SEO而去修改一些网站程序方面的结构、基本的伪静态也不会去管的、首页的链接敢挂到40+、、、而作为这样的基础,就是一些原创的文章和互换一些链接了;为了在友链过程中正确的寻找较为正确的链接,找来一些知识普及一下:

Target=“_blank”

关于target=”_blank”去留的问题在网上已经被反复争议很多次了。有的说要留,有的说要去掉。主张留的一方主要是考虑到target= “_blank”的属性目前来讲还没有一个好的方式来解决,而主张去的一方则拿出了rel与JS的解决方案。target=”_blank”是否有没有必要存在目前还有很多正处在一种盲区。查阅了相关的文献,发现其实情况并非是我们所想的那样,事实上target=”_blank”并非是不符合标准的,而用rel与JS的解决方案也是没有必要的,因为这是个误区,只要我们了解了rel与target的真正含义我们就清楚了其实这里本不应存在争议。

先来了解一下target与rel的含义:

target ,允许指定在什么位置显示已经选择的超链接内容。也就是说链接的内容将在什么样的窗口被显示。target 的属性值有四个保留的名称,分别是:_blank,_self,_parent,_top。其中_blank的意思是浏览器总在一个新打开的、未命名的窗口中载入target=”_blank”链接的文档。这里大家也许会很不理解“未命名”是什么意思。事实上target 是可以给新打开的窗口赋一个ID,例如:target=”name” 这就表明通过target=”name”链接载入的文档将会在一个叫“name”的窗口显示。如果没有ID为“name”的窗口,那么浏览器就会新建一个名为“name”的窗口来显示链接文档。如果当前窗口的ID就是“name”那么这个链接文档就会在当前的窗口中替换原有的内容显示出来。而_self的意思其实就是当前文档,<a>的默认目标就是_self,这个属性值一般来说是用不到的。_parent是使链接文档在父级窗口显示,这个属性值只在框架结构中使用,如果身本就是顶级框架,那么其作用与_self相同。_top同样是应用在框架中的,但是他的效果是清除框架来显示目标文档。这对于从框架结构转向无框架结构是很有作用的。

现在知道了target 是一目标显示的属性与浏览器密切相关的,那么rel又是什么呢, 为什么很多人把他当作是target 的替代属性呢?下面就来认识一下rel。其实不只有一个rel还有一个与之对应的属性叫rev,这两个属性的意思分别是:从源文档到目标文档的关系;从目标文档到源文档的关系。这里的源文档可以理解为链接所处在的当前文档,而目标文档也就是这个链接将要打开的文档。这下我们应该清楚了,其实rel与 rev是一种文档之前的链接关系,而并非是与浏览器相关的如何显示目标文档的属性。

那么rel与rev有哪些关系呢?下面将一一列取并解释其中的含义:
next,链接到下一个文档;
prev,链接到前一个文档;
head,链接到集合中的顶级文档;
toc,链接到集合的目录;
parent,链接到源上面的文档;
Child,链接到源下面的文档;
index,链接到此文档的索引;
glossary,链接到此文档的术语表;

其中next与prev是一组。表明了当前文档与目标文档之前的关系是同级的关系,可以写成这样<a href=”movie_002.htm” rel=next rev=prev>。head与toc可以形成一个组合,表示者是由目录链接到最终的文档,或是由文档链接到目录。parent与child是一组,表示着由当前的文档链接到父级文档或是子级文档。而index与glossary可以与head分别组合,形成由文档到索引,或是由索引到文档;文档到术语表或是术语表到文档。

也许这样讲可能还是不很清楚,下面举个例子:这里整理了一个电影文档资源,那么需要对这些资源进行分类,把电影分成:武侠片、战争片、爱情片、恐怖片、纪录片。那么在电影根目录需要链接到下面的子类的时候那么链接的关系应该是:rel=child rev=parent ,而如果当前是武侠片的频道页,需要转爱情片频道或是其它频道时,那么链接关系就应该是:rel=next rev=prev,当由一个武侠片链接到“卧虎藏龙”这部电影的文档时链接的关系应该是:rel=head rev=toc,当由“卧虎藏龙”链接到索引的时候链接关系又变成了:rel=index rev=head。

由于目前的CSS还不能抓取rel与rev的属性值,所以没有办法给不同关系的链接提供不同的样式,所以现在rel与rev只是用来使得网页的语义性更为完善。

——引用

通过上述我们可以了解到,真正意义上的友情链接并不是那么简单和容易的事情,所以需要如果在乎站点的一些SEO数据方面的问题的话,进行交换的时候还需要谨慎为好;

基本上之前每周都会加几个友链,逛到喜欢的博主那里,就会忽悠一番:“来友个链,每周会有1——2次的践踏。。。对此下策、屡试不爽”,其实我并没有说谎,每周都会有至少一次的互访,并且会在一些文章页面进行留言评论的,如果没有更新的话,就会在留言板灌水、如果文章的内容充实,每篇都会很用心的评论一番;至少能做到“友情+链接”的本质,当然也喜欢跟类似的博客友链;

可能博客比较新的缘故,还没有到3个月,所以百度和360那边的收录一直不是太好:准确的说百度那边收录比较反常从收录2个一下子收录100多然后变成收录50多,最后变成现在的只收录了十几条;360的向来比较稳定,一直只是收录了3条而已;谷歌收录算是正常的,搜狗也不差、现在至少比百度和360强;所以认为为了收录的问题而对友链进行相关的分类还是很有必要的;博客现在已经对于友链进行了处理,部分链接已经移至内页搁置了,也希望全站链接的质量能够带动博客收录问题的转好;

如果说不是为了SEO的一些站点数据的话,首页挂满链接也没有问题的;自己可以那样看,但是别人可能有自己的看法;如果是一个喜欢阅读写博的博主,当然希望友链一些博客内容真实而又丰富的、读者量较大的、更新比较频繁的博客;其实这些站点本身就对于链接你而言有一定的好处的,在于pr输出这一方面,因为通过长时间的积累和浏览者的支持,一些博客本身就积累了较高的权重和利于SEO这一方面的,即使说你不在乎那些方面,无形中那些博客也在友链的过程中给你带来些许权重的传递、pr的输出,虽说拿那些数据不能证明什么,但是对于一些人来说,友情链接不能单从某一方面考虑了,不能单独的友情、也没有单独的链接,二者如果能兼得便是最好不过;任何东西“多而贫”必然不如“少而精”;

对于友链时的一些个人看法总结,可能网上有很多关于友情链接时的SEO注意事项,或多或少能决定这友链双方的考虑因素,给出一些个人友情链接有利于SEO方面的参考建议,仅做参考:

1、收录

2、百度预计流量

3、快照

4、权重或者pr

解释一下为什么这样认为:

1、我们可以去考虑一个1个月的新站收录几个,但是对于一个域名年长1年多甚至更长收录只有十几几十个的、还是慎重考虑,因为可能一不小心你的域名就会进入黑名单,除非你的关键词一个都没有;

2、百度站长之前就说过,索引量不可看得太重,因为建立的基础就是百度预计的流量展现了,页面有没有价值可能都有索引、但是流量才是重中之重,可能索引了一亿张网页,但是能带去流量的可能就只有100张页面;

3、其实站长工具查询友情链接的时候,快照都会有相应的显示日期,本身很喜欢快照在一周之内的博客,因为这也很好的说明了,博客内容的更新频率,蜘蛛喜欢的东西一般都是新鲜的、对于喜欢阅读的浏览者而言是一样的;

4、虽说搜索引擎有注明不用太看重权重和pr值,但是依然很多站长希望相信能帮助自己的一些关键词能获得更好的排名和带来更多的流量,顺便增加以下蜘蛛的爬取增加收录,但是这些至少在我考虑看来,重要性是这几点中最低的;
原文转载来自 春熙路《友情链接的那些事

如何让页整个页面变黑白色

用传统的方法将网站变成黑白色非常的麻烦,需要更换页面的文件,并且要对图片进行更改。但如果自己的网站支持CSS的话,一切变得很简单。只要是符合w3标准的网页,在CSS文件的最前面加上一行代码就可以了,这段代码使用的是CSS滤镜,将网页中的色彩部分过滤掉。
代码如下:
html {
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(1);
}

Div+CSS命名规范

(一)窗体

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

(二)css注释的写法:

/* Footer */   内容区  /* End Footer */

Html注释的写法 :<!–header头部– >

(三)id的命名:

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

(2)导航

导航:nav

主导航:mainnav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }   .f60 { color: #f60; }   .ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’作为名称,如

.font12px { font-size: 12px; }   .font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }   .bottom { float:bottom; }

(4)标题栏样式,使用’类别+功能’的方式命名,如

.barnews { }   .barproduct { }

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写,除非一看就明白的单词.   主要的 master.css  模块 module.css  基本共用 base.css   布局,版面layout.css  主题 themes.css  专栏 columns.css   文字 font.css  表单 forms.css  补丁 mend.css  打印print.css