如何自定义WordPress主题：头部

大多数的WPer并不是专业的coder，也没很多精力和能力设计自己独特的主题，这时候我们只能使用免费的WordPress主题，但毕竟是免费的主题，你使用的同时，可能也又很多的Blogger在使用和你同一款的主题，这时候我们需要微调下我们的主题，让它与众不同，真正属于自己，既然是微调，你只需要掌握最基本的HTML和CSS只是就能实现。下面我将讲解下一些常见需要修改的主题元素。

首页来说下头部：

Logo

Logo作为一网站的标志，其重要不言而喻，制作一个独特又涵义而又漂亮的Logo，能增进访问者对你网站的第一印象。我们使用Photoshop只用一款属于自己的Logo。

可以查看下这里的Logo设计指南，或是查看下这里的各大网站Logo欣赏，或许能给你带来点灵感。设计好了自己的Logo后，要怎样让他显示在自己的网站上呢？其实也不难，大多数的主题可能已经包含了Logo，这时候你只需要用自己设计好的Logo文件代替覆盖原主题中的Logo文件就可以，这里要注意，图片尺寸大小应尽量和原主题中的Logo的大小保持一致。但也又很多主题是直接显示的博客标题，这时候我们需要添加一段CSS代码到你的主题文件中.

#header h1{float:left;text-indent:-9999em;}
 
#header h1 a{width:200px;height:100px;background:url(images/logo.gif) no-repeat;display:block;}

恩，看懂了没有，这是你的头部的ID标签为header,而你的Logo是包含在h1标签中的，其中，Logo大小为200X100，而Logo文件名为logo.gif存在在你主题文件的images文件夹中。

Favicon

Favicon同样也是网站的标志，只不过它是迷你型，也不会直接显示在你网站外观上，而是显示在浏览器上，关于Favicon的制作和显示方法，可以参考我之前些的为你的博客添加favicon图标和制作透明背景或是动画favicon。

导航

一个良好的导航不仅能提高用户的体验，也能而有利于搜索引擎的收录，一般的WordPress主题提供的导航都为页面的连接，因为WordPress默认的导航也为页面连接，在这里我们也可以加入一些其他的元素，比如你的论坛或是其他的小项目等。修改header.php,寻找类似于下面的代码:

<li><a href="<?php echo get_option('home'); ?>/">Home</a></li><?php wp_list_pages('sort_column=menu_order&title_li=&echo=0'); ?>

在其其面或后面添加你想要的显示的项目连接，比如，我想在其后面添加自己的Twitter连接，可后直接在其后面添加：

<li><a href="http://twitter.com/housne" rel="nofollow">Twitter</a></li>

所以在这里你可以添加任何的连接，要注意和遵循这里的HTML标签。

到这里对于头部的改造就也差不多了，当然你还也可参考这篇文章的第三点。对于头部更多需要自定义的地方还希望各位童鞋提出自己的见解。

头部改造的完成也预示这我们的微调已经完成了一大半，关于其他部分的改造我们改天继续，也希望各位能提出自己觉得希望修改的地方。

WordPress WordPress - 主题 - 设计

« 徒步 如何自定义WordPress主题：侧边栏 »