logo

wordpress页面修改经验谈

      很多人喜欢Wordpress的默认主题,我在搭建个人博客时先后使用过很多主题,毫不夸张地说,我花了整整一周时间将Wordpress.org上的主题从第一页翻到了最后一页,看到5星级的主题都下下来试用过,对suffusion和cleanr这两个主题比较满意,因为本人一直认为简单就是美,刚好这两个主题都符合,让我放弃suffusion是因为它的设置项目太多了,以致于我没有精力一一去研究,放弃cleanr是因为修改主题后,不知什么原因导致评论显示列表异常,弄了几天都没搞定,当然我属于菜鸟,于是我将目光转向了默认的twentyten主题,首先它是Wordpress 3.0.1自带的官方主题,汉化彻底,不用自己动手汉化,二是看到很多前辈都在使用这个主题,随主流,三是它简单,速度应该比较快,这一点是我很看重的,因此我打算在它基础上进行修改,下面就是我搜集的10个技巧,部分参考了网上的内容。

1、去除头部的背景图片

不知大家对twentyten主题头部那个背景图片反不反感,反正我是看着有点不舒服,最悲剧的是在后台设置中还专门提供了一个选项来配置它,个人认为提供这个功能还不如把导航菜单的设置弄得更简单一点,要知道这块位置可是黄金广告位,怎么让这么一大块图片给占去了呢,恩…二话不说,干掉它,很简单,打开twentyten目录下的header.php文件后,删除68-78行的内容即可,推荐使用NotePad++打开,方便看行数,就是把下面这些代码去掉:

 

<?php

// Check if this is a post or page, if it has a thumbnail, and if it’s a big one

if ( is_singular() &&

has_post_thumbnail( $post->ID ) &&

( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘post-thumbnail’ ) ) &&

$image[1] >= HEADER_IMAGE_WIDTH ) :

// Houston, we have a new header image!

echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );

else : ?>

<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” />

<?php endif; ?>

如果你愿意还可以在这里插入一对<div></div>标签,然后在里面插入广告图片,注意图片长度是940px,否则就不美观了,如果你的网站人流量大,何不好好利用这个位置做做广告呢。

2、增加自定义网站Logo

同样,twentyten主题简单到连网站Logo也给省了,直接用文字表示,好歹也给自己的网站弄个Logo小图片啊,有人表示做Logo压力大,我这里告诉大家一个好办法,Logo用你的网站域名+一条线,再加网站的口号由上到下组成,反正我是用Windows的画图板就完成了我的Logo设计,还瞒中意的,Logo图片有了,下面来看如何插入,还是弄NotePad++打开twentyten目录下的header.php文件,找到63行,去掉下面这个函数调用:

<?php bloginfo( ‘name’ ); ?>

这个函数就是显示网站名称的,不要担心,网页在浏览器里显示时,浏览器标题(或标签)上仍然会显示网站的名称,然后就在这里插入Logo图片,如我这里是<img src=”/wordpress/logo.png”>。

3、增加网站头像(favicon)

网站头像就是在浏览器地址栏和收藏夹的最前面显示的那个小图标,为了让网站看起来更专业一点,还是有必要加这个图标的,如163,新浪这些大站都是加了,这个图标一定得是ico文件格式,一般的作图软件都无法生成这个格式,于是需要动用第三方工具了,有在线的,如http://www.bitbug.net/,也有AveIconifier2这样的免费工具,想法将ico图标制作好后(注意大小需要16×16,当然这些工具都会自动生成16×16的ico文件),将其复制到网站根目录下,然后打开twentyten目录下的header.php文件,在38行后加入下面两行代码:

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

<link rel=”Bookmark” href=”favicon.ico” />

现在刷新网站就能看到效果了。

4、增加导航菜单

进入Wordpress后台,依次点击“外观”*“菜单”,如果你收到“当前主题不支持菜单”,那需要打开twentyten目录下的functions.php文件,在末尾插入下面这段代码:

register_nav_menus( array(

‘primary’ => __( ‘Primary Navigation’, ‘twentyten’ ),

) );

如果你没有看到的是“您的主题支持 1 个菜单。请为您的目录指定显示的位置。”提示,那么恭喜你,你可以轻松地增加导航菜单了,Wordpress支持将分类目录和页面添加到导航菜单,还可以添加自定义链接到导航菜单上。我这里使用到了这三种类型,首先在“文章”*“分类目录”中,添加好准备显示在导航菜单的分类名称,注意别名最好使用英文,然后切换到“外观”*“菜单”,在右侧的“菜单名称”输入框中随便输入一个菜单名字(它不会显示的),点击“创建菜单”,然后在“主导航栏”的下拉列表中选择刚刚创建的菜单名称。

接下来在“分类目录”中选中要加入到导航菜单的分类名称,点击“添加至菜单”按钮,这样分类目录将上了导航菜单了。我们还需要将“关于”页面加入到导航菜单,办法一样,选中页面区域中的“关于”,点击“添加至菜单”。最后我们还要加入“首页”,这个需要自定义链接来实现,在自定义链接区域的URL后输入你的主页地址,如我这里是:http://sou10.org,在标签处输入“首页”,然后点击“添加至菜单”。现在我们已经创建好需要的菜单项了,不过还需要调整一下顺序,直接拖动就行,一般应将“首页”放在最前面,“关于”放在最后面,调整好顺序后,点击“保存菜单”按钮,大功告成,去刷新一下网站看看效果吧。

5、修改导航菜单样式

经过第4招的折腾,现在你的导航菜单应该不止“首页”和“关于”两个了吧,但个人对默认的导航菜单样式不满意,不知大家是否有同样的看法,首先是高度,它太高了,这块区域可很宝贵,我们先给把它的高度降下来,这里需要修改twentyten文件夹下的style.css文件了,首先找到第369行,即“#access {”定义区块,在最后加上“height:28px;”,然后再往下找到“#access a {”区块,将它包含的“line-height: 38px;”也改为28px,这样导航菜单高度就显得更好看一点了。当然我们还可以修改背景色,菜单文字颜色,这里就不再多说了,还是留给大家去摸索一下吧。

6、修改页面底部信息

WordPress安装完成后,默认的底部信息实在太丑陋了,我们需要加入版权,联系方式,网站统计,备案等信息,其实只需要修改一个文件,那就是twentyten文件夹下的footer.php。

很多人不希望出现骄傲地使用Wordpress这样的信息,好吧,很好去除的,打开footer.php后,直接删掉31-37行的代码即可,当然你也可以使用注释符(<!– –>)将这段代码注释掉。

一般页面底部的信息都是居中显示的,但遗憾的是Wordpress默认主题没有设置,只好加一句代码了。找到第25行,即:

<div id=”site-info”>

在这里加入align=”center”,最后变成<div id=”site-info” align=”center”>。

接下来在第28和29行之间插入我们需要增加的信息,如联系邮箱,网站协议,如果要换行,则在需要换行的地方插入<br>,然后再插入需要的内容,我这里第一行是网站名称和联系邮箱,第二行是网站遵守的协议,第三行是备案信息和站长统计代码。说得有点凌乱,还是共享一下最终的代码吧:

<div id=”site-info” align=”center”>

<a href=”<?php echo home_url( ‘/’ ) ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>&copy;2010

<?php bloginfo( ‘name’ ); ?>

</a> .联系邮箱:<img src=”/wordpress/email.png”>

<script src=”http://s17.cnzz.com/stat.php?id=2450146&web_id=2450146&show=pic” language=”JavaScript”></script>

</div><!– #site-info –>

现在看起来稍微像样一点了,其实多动动脑筋还可以再继续深入修改的。

7、去除侧边栏登陆小工具中的Wordpress.org链接

当我看到登陆小工具里包含有WordPress.org的链接,第一感觉就是想怎么将其除掉,这里需要动主题文件夹以外的文件了,那就是wp-includes文件夹下的default-widgets.php文件,打开它搜索wordpress.org,也就是第300行,将整行代码删除或注释掉即可,如果你不想看到订阅文章和订阅评论的链接出现(因为我们有更酷的方式展现RSS订阅的),那将298和299行的代码也删除或注释掉即可。现在侧边栏的登录小工具应该只剩下登陆和注册两项功能了。

8、修改翻页功能,显示页码

WordPress默认情况下的翻页功能也丑陋,看不到页码,很不符合国人的浏览习惯,提到这很多人会说用插件吧,的确,有很好的插件可用,但插件还是越少越好,下面就介绍一种不用插件也能实现页码翻页的功能。

首先打开twentyten文件夹下的functions.php文件,在末尾插入下面的代码:

function kriesi_pagination($query_string){

global $posts_per_page, $paged;

$my_query = new WP_Query($query_string .”&posts_per_page=-1″);

$total_posts = $my_query->post_count;

if(empty($paged))$paged = 1;

$prev = $paged – 1;

$next = $paged + 1;

$range = 7; // only edit this if you want to show more page-links

$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);

if(1 != $pages){

echo “<div class=’pagination’>”;

echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? “<a href=’”.get_pagenum_link(1).”‘>最前</a>”:””;

echo ($paged > 1 && $showitems < $pages)? “<a href=’”.get_pagenum_link($prev).”‘>上一页</a>”:””;

for ($i=1; $i <= $pages; $i++){

if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){

echo ($paged == $i)? “<span class=’current’>”.$i.”</span>”:”<a href=’”.get_pagenum_link($i).”‘ class=’inactive’ >”.$i.”</a>”;

}

}

echo ($paged < $pages && $showitems < $pages) ? “<a href=’”.get_pagenum_link($next).”‘>下一页</a>” :””;

echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? “<a href=’”.get_pagenum_link($pages).”‘>最后</a>”:””;

echo “</div>n”;

}

}

然后打开twentyten文件夹下的style.css文件,在末尾插入下面的代码:

.pagination{

line-height:23px;

}

.pagination span, .pagination a{

font-size:12px;

margin: 2px 6px 2px 0;

background:#fff;

border:1px solid #e5e5e5;

color:#787878;

padding:2px 5px 2px 5px;

text-decoration:none;

}

.pagination a:hover{

background: #8391A7;

border:1px solid #fff;

color:#fff;

}

.pagination .current{

background: #fff;

border:1px solid #8d8d8d;

color:#393939;

font-size:12px;

padding:2px 5px 2px 5px;

}

接下来就需要在index.php,category.php,tag.php,archive.php中加入调用代码。首先说说在Index.php文件的插入位置,在:

</div><!– #content –>

</div><!– #container –>

前插入:

<?php kriesi_pagination($query_string); ?>

这样在首页就可以看到带页码的翻页功能了。当我们点击导航栏中的菜单项时,Wordpress其实调用的是category.php文件,因此也需要在它里面插入上面这行代码,其位置也是在:

</div><!– #content –>

</div><!– #container –>

前插入。另外tag.php(点击标签时Wordpress调用的php文件)和archive.php(点击月度归档时调用的php文件)也需要插入,其位置和前面的都一样。

但还没有就此结束,细心的你一定发现现在有两种翻页的方法同时存在,我们需要将Wordpress默认的翻页方法去除,办法就是打开twentyten文件夹下的loop.php文件,删除或注释掉170-176行的代码,这样完美的翻页功能就实现了,如果你不喜欢它的样式,还可以修改插入到style.css中的代码。

9、在侧边栏加入RSS订阅信息

前面我们已经说过,Wordpress默认的订阅链接不好看,通常我们需要加一个较大的RSS订阅图片,以醒目的方式告知浏览者订阅本站的内容。

首先我们需要准备一张200×40的RSS图片,这个可以去搜索引擎的图片搜索中找一下,然后需要知道自己的feed地址,这里推荐去feedsky烧制网站feed,如果你给自己的网站增加一个二级域名,如feed.xxx.com,然后将这个域名与feedsky上烧制的feed地址绑定到一起,那么别人来订阅你的网站时,订阅地址就是feed.xxx.com这种二级域名,看上去规范多了吧,至于如何增加二级域名和在feedsky烧制网站的feed,已经超出本文的范围,下面说说如何在侧边栏里插入图片,并指向feed地址。进入Wordpress管理后台,点击“外观”*“小工具”,将“文本”拖动到右侧“第一小工具区域”,至于顺序可以根据你个人的需要拖动调整,松开鼠标后,就会打开“文本”小工具设置小窗口,在“标题”后输入“订阅本站”,在下面的文本输入区域中输入下面的代码:

<a target=”_blank” href=”http://feed.xxx.com”><img src=”/images/rss.gif” alt=”订阅本站”></a>

很多同志还不知道这里也可以插入HTML或JavaScript代码吧。需要注意的是图片路径,如果不加最前面那个“/”,很可能在主页能显示出图片,到分类目录,标签和日期归档索引页面时就会显示不出来。

10、微调索引页面

Twentyten主题虽然耐看,但默认的索引页面样式还是有点丑,如文章标题下方显示作者和发布日期就颠倒了,还有末尾处的发表在xxx目录,帖上xxx标签,点击评论和编辑这几项功能恐怕没有人会去用它,因此我打算调整一下,首先把作者和发布日期的顺序纠正一下,打开twentyten文件夹下的functions.php文件,找到twentyten_posted_on函数,将其(即441-455行)替换成下面的代码:

function twentyten_posted_on() {

printf( __( ‘<span class=”meta-sep”>由</span> %2$s <span class=”%1$s”>发表于</span>%3$s’, ‘twentyten’ ),

‘meta-prep meta-prep-author’,

sprintf( ‘<span class=”author vcard”><a class=”url fn n” href=”%1$s” title=”%2$s”>%3$s</a></span>’,

get_author_posts_url( get_the_author_meta( ‘ID’ ) ),

sprintf( esc_attr__( ‘View all posts by %s’, ‘twentyten’ ), get_the_author() ),

get_the_author()

),

sprintf( ‘<a href=”%1$s” title=”%2$s” rel=”bookmark”><span class=”entry-date”>%3$s</span></a>’,

get_permalink(),

esc_attr( get_the_time() ),

get_the_date()

)

);

}

这样索引页面(包括按主页,分类目录,标签和归档浏览)就会显示“由xxx发表于xx年xx月xx日”了。

接下来我们将索引页面正文摘要(非全文显示时)或正文(全文显示时)后的那些多余的功能去掉,让页面更干净一些,打开twentyten文件夹下的loop.php文件,注释或删除143-161行的代码即可。完成后在索引页面就留下文章标题+作者+发布日期+文章摘要(正文)了,看着更舒坦。

小结

虽然twentyten默认主题没有提供太多的设置,但只要我们稍微动一下手就能搞定很多问题,本文也仅仅算是针对初入门的朋友有点帮助,以后我们会写更多关于Wordpress的使用心得和体会共享,敬请期待!

Leave your needs and contact information