一般说来我们网站的所有页面的头部和底部基本相似,所以我们可以将这些相似的代码放到一个文件中,然后在每个模板文件载入这个头部和底部文件即可,这样我们就不需要给每个模板都把头部和底部文件都写一遍,而且修改方便,改了头部文件,所有页面都会生效。
接着上一篇教程,我们在做主题文件夹 content hemesAurelius 下面新建一个头部文件 header.php,然后将 index.php 中的头部代码提取 (剪切) 出来,写入这个文件:
- <!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">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Aurelius | Blog</title>
- <!-- Stylesheets -->
- <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
- </head>
- <body>
- <div id="wrapper" class="container_12 clearfix">
- <!-- Text Logo -->
- <h1 id="logo" class="grid_4">Aurelius</h1>
- <!-- Navigation Menu -->
- <ul id="navigation" class="grid_8">
- <li><a href="contact.html"><span class="meta">Get in touch</span><br />
- Contact Us</a></li>
- <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
- Blog</a></li>
- <li><a href="index.html"><span class="meta">Homepage</span><br />
- Home</a></li>
- </ul>
- <div class="hr grid_12 clearfix"> </div>
- <!-- Caption Line -->
- <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
- <div class="hr grid_12 clearfix"> </div>
保存好头部文件,在 index.php 的前面加上代码:
- <?php get_header();?>
get_header() 函数会自动载入主题文件夹中的 header.php 文件,所以头部文件的文件名命名为 header.php 然后使用 get_deader() 函数即可,同样的编辑主题文件夹的其它文件:archive.php 、 contact.php 、 full_width.php 、 page.php 和 single.php,删掉以上类似代码,也改成
- <?php get_header();?>
现在头部文件已经制作好了,接下来的工作就是编辑头部文件 header.php 将里面的静态 html 代码换成动态的 php 代码。
首先我们需要更改信息,一般我们将 title 信息改成这样的: 文章页面标题 | 网站名称 当然你也可以根据自己的 seo 只是更改,比如有的人在标题中加入网站描述。将 header.php 中的<title>Aurelius | Blog</title> 改成下面的代码:
- <title><?php if ( is_home() ) {
- bloginfo('name'); echo " - "; bloginfo('description');
- } elseif ( is_category() ) {
- single_cat_title(); echo " - "; bloginfo('name');
- } elseif (is_single() || is_page() ) {
- single_post_title();
- } elseif (is_search() ) {
- echo "搜索结果"; echo " - "; bloginfo('name');
- } elseif (is_404() ) {
- echo '页面未找到!';
- } else {
- wp_title('',true);
- } ?></title>
上面的代码通过判断将首页、文章页、分类页、 404 页面的<title> 信息设置成不一样的形式,这样是很有必要的。
几个判断函数的解释如下:
- is_home() :当前页面为主页时返回 true
- is_category():当前页面为分类页时返回 true
- is_single():当前页面为单文章页时返回 true
- is_page():当前页面为单页面时返回 true
- 更详细的内容参阅 WordPress 文档:条件标签
所以如果想根据自己的需要制作一个主题,不会 php 的话会很不方便,所以个人建议,如果打算制作主题,有必要去学习一下 php 。
第二步:修改 css 文件的路径。
在 header.php 文件中找到下面代码
- <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
也许你有会问,主题文件夹中不是有个 style.css 文件吗?为什么访问网站的时候没有加载样式表呢?
因为这个样式表的路径./style.css 其实是网站根目录,在以后的教程中我们会讲到,如果你不想让别人轻易看出你的网站是使用 wordprss 程序,那么你可以改变图片、样式表等文件的路径,比如本工作室,将图片、样式表都移到了网站根目录,在网页代码中就不会出现 wordprss 站才有的 wp-content/themes 之类的路径。好了,将上面的代码改成:
- <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
bloginfo() 函数很常用,函数参数和用法如下:
- <?php
- bloginfo();
- /*
- 该函数会根据参数直接输出信息,参数:
- name 博客标题-默认
- description-描述信息
- url-博客 url
- rss2_url-博客的 rss2.0feed 地址
- template_url 模板地址
- charset 编码方式
- stylesheet_url 样式表路径
- home 网站首页 url
- */
- /*
- 如果不需要直接输出而是获取对应的参量,使用下面的 get_bloginfo,参数同上
- */
- get_bloginfo();
- ?>
bloginfo('stylesheet_url') 会自动输出网站主题文件夹下 style.css 文件的绝对网址,如 http://localhost/wp/wp-content/themes/Aurelius/style.css
不过,还有几张图片的路径不对,还不能显示出来,用文本编辑器打开 index.php 、 archive.php 、 contact.php 、 full_width.php 、 page.php 和 single.php,给这些图片加上正确的 URL,搜索代码,将所有的:src="images/
,批量替换成 src="<?php bloginfo('template_url'); ?>/images/
。现在再刷新你的主页,看文章的缩略图 610×150 是否可以正常显示。
第三步:更改博客名称和描述信息,我们要将博客名称和描述,改成我们在后台设置的信息,将 header.php 中的如下代码:
- <h1 id="logo" class="grid_4">Aurelius</h1>
- <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
修改成:
- <h1 id="logo" class="grid_4"><a href="<?php echo get_bologinfo('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
- <h2 class="grid_12 caption clearfix"><?php bloginfo('description'); ?></h2>
可以看到这里还是 bloginfo 和 get_bloginfo 函数,所以说这两个函数经常用到。
第四步:添加 wp_head 。
wp_head 函数对于要使用插件的主题来说比较重要,一般如果插件需要加载 css 文件和 js 文件,都是通过 wp_head() 函数输出的。在 header.php 文件的</head> 前面添加:
- <?php wp_head(); ?>
在去看你的网站,查看网页源代码,会发现<head></head> 标签中多了如下代码:
- <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ludou.co.tv/blog/xmlrpc.php?rsd" />
- <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ludou.co.tv/blog/wp-includes/wlwmanifest.xml" />
- <link rel='index' title='露兜实验室' href='http://ludou.co.tv' />
- <meta name="generator" content="WordPress 2.9.2" />
当然这些代码是多余的,比如程序版本?告诉别人程序版本,是不安全的。所以在以后的教程中我们会讲到,如何去除这些多余的头部信息。
第五步:显示菜单栏
当前菜单有几个菜单项,但是都是静态的,我们希望能在后台控制,在头部文件 header.php 中找到下面代码:
- <ul id="navigation" class="grid_8">
- <li><a href="contact.html"><span class="meta">Get in touch</span><br />
- Contact Us</a></li>
- <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
- Blog</a></li>
- <li><a href="index.html"><span class="meta">Homepage</span><br />
- Home</a></li>
- </ul>
修改成加载菜单的函数:
- <?php wp_nav_menu( array('sort_column' => 'menu_order', 'container_id'=>'menu','menu_id'=>'navigation') ); ?>
不过添加了菜单函数,还得后台有个菜单控制的哦,所以我们需要再后台注册一个菜单。在 functions.php 中添加以下代码即可:
- //注册菜单
- if( function_exists('register_nav_menus') ){
- register_nav_menus(
- array(
- 'primary' => __( '主导航菜单' ),
- )
- );
- }
之后进入后开即可看到后台即可看到主题支持菜单了。这个函数是最新的菜单函数,跟原文不一样。 wp_nav_menu 函数参数稍多,这里就不加解释了,可以到官网搜索。。
到现在为止,你的主题虽然能够从后台控制头部代码了,但是还是只能看到一个页面,因为只有头部是动态的,其它位置都是静态的。
但是头部文件还有一个重要的信息没有添加,那就是描述和关键字。这个在下一篇教程中专门讲解。
最后提供露兜博客经过修改后的文件,以提供参考比较
下载该文件