快速制作一个wordpress主题模板(二)

09/0121

快速制作一个wordpress主题模板(二)

上次复习了《wordpress主题的基本原理》
这次就可以开始创建自己的主题了
制作主题需要的知识：
1.HTML、CSS 有时得用上javascript
你必须对XHTML和CSS有一定基础。
先用XHTML代码写结构层，等基本结构制作完以后，便可以用强大的CSS挥洒了。
所以制作基本模板的时候只涉及XHTML的知识，很简单。
2.关于PHP
如果只是想制作WP模板主题，并不需要太多的PHP知识，你只需要知道一点:即如何在结构中嵌入动态脚本呢？
<？php XXXX ？>,其中”<？php"为开始标签，"？>“为闭合标签，XXX为嵌入的内容。是的，你只要先了解这个就可以了，真的很简单。当然如果想自己写插件，那就得对PHP融会贯通了。
这次首先创建header.php
用记事本工具创建header.php，然后复制下面的模板代码，熟悉XHTML的人都很容易看懂。

<!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 profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<div id="header">
<div id="description">
<h2><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h2>
<?php bloginfo('description'); ?>
</div>
<div class="menunav">
<div class="menunav_wrap">
<ul class="navlist">
<li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="HOME">首页</a></li>
<?php wp_list_cats('orderby=ID&show_count=0&include=3,4,5,10&hide_empty=0'); ?>
</ul>
</div>
</div>
<div id="search"> <?php include(TEMPLATEPATH . '/searchform.php'); ?></div>
</div>
<div id="wrapper">

/**********************************************************************************************/
header.php经常要用到的WP标签
一.bloginfo标签
主要用途:利用bloginfo标签可获得一些Blog的一些基本信息.
bloginfo的参数十分丰富，常用参数如下：
1.设置信息的参数
name 博客名称
version WordPress版本
html_type 博客网页Html类型
charset 博客网页编码
description 博客描述
url 博客地址
2.路径相关的参数
stylesheet_url CSS文件路径
template_url 模板文件路径
3.RSS相关的参数
rss_url
rss2_url
atom_url
pingback_url
二.wp_get_archives标签
主要用途:输出存档的文章
常用的参数
type:归档方式
type=monthly:按月显示
type=daily:按天显示
type=weekly:按周显示
type=postbypost:显示文章标题
limit:显示篇数
format:格式
format=html:默认方式
format=link:输出格式
before=…:要在前面加的文字
after=…:要在后面加的文字
show_post_count:是否显示文章数量
show_post_count=true:要在后面显示文章的数量
示例:
wp_get_archives(’type=monthly&limit=8&format=html&
before=…&after=…&show_post_count=true’);
三.其它标签
wp_head标签:这个标签应该是为各个插件留下接口，从而增加不同的javascript和css功能的。
wp_title标签:显示或者返回网页的标题。
具体可以参考《wp_title文档》

header.php部分的主要应用—-导航菜单
通常会在header.php部分加入网站的导航菜单
关于导航菜单的制作可以参考我的这篇文档《制作一个导航菜单》
值得注意的是在制作导航菜单的时候可以很方便的利用wp_list_categories标签和 wp_list_cats 标签 自己产生li列表元素。
wp_list_categories
wp_list_categories标签是用来显示所有分类的链接列表
调用方法： < ?php wp_list_categories(’参数1=值&参数2=值&参数3=值’); ?> 参数可以任意个数。
关于wp_list_categories的详细参数可以参考《Template Tags/wp list categories》
这里只给出示例:

<div class="menunav_wrap">
<ul class="navlist">
<li><a href="http://hooken.cn" >首页</a></li>
<?php wp_list_categories ('orderby=ID&show_count=0&include=3,4,5,10&hide_empty=0'); ?>
</ul>
</div>

说明:
orderby=ID: 按照分类ID排序(每个分类都有自己的ID，可以在后台编辑分类的时候从URL后缀看到)
show_count=0:不显示分类日志数量；
include=3,4,5,10:显示ID为3，4，5，10的分类；
hide_empty:是否显示没有日志的分类
wp_list_cats
wp_list_cats标签的使用方法和wp_list_categories类似，只不过wp_list_cats标签是用来显示所有静态页的链接列表。

关于header.php的推荐插件
因为header部分主要是涉及seo
所以推荐使用All in One SEO Pack插件。下载地址
All in One SEO Pack是wordpress的一个seo插件，用这一个插件你就可以实现wordpress的整体优化。
All in One SEO Pack有什么作用？
• 1、可以给每篇文章添加独立的关键词；
• 2、可以给每篇文章添加独立的meta标签；
• 3、可以给每篇文章添加独立的description；
• 4、可以给每篇文章添加独立的摘要；
• 5、可以给每篇文章自动生成摘要；
• 6、可以防止存档页和首页的内容被抓取，从而防止因重复内容被google降权；
使用了这个插件，你就可以不用在header部分写meta name=”keywords” 和meta name=”description”这两个标签，因为插件会自动加载。