WordPress主题制作（四）：制作头部模板header.php

Yiiven

发布于 2022-12-15 14:28:56

1.2K0

发布于 2022-12-15 14:28:56

文章被收录于专栏：怡文菌怡文菌

当我们用文本编辑器打开从WordPress主题制作：开始前的准备下载的Yii-Candy中的 .php 文件，不难看出他们头部的代码都非常的相似！我们可以提取这部分相似的代码，放到一个单独的文件header.php中，各个页面想用这部分代码的时候再用WordPress的get_header()包含进去就可以达到所有页面头部内容一致，不再需要给每个页面都写一次这部分代码了，我们后期维护起来也至需要修改header.php即可。

在我们之前创建的主题目录wp-content\themes\Yii-Candy下新建一个文件header.php，我们提取出index.php中的头部代码复制粘贴到header.php中即可，下面的是目前header.php中的代码(不同主题的头部代码可能不太一样，在你实际的项目中可以自定如何书写)：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Candy | Blog</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="container_12 clearfix">
	<!-- top -->
	<a name="top"></a>
	<!-- Text Logo -->
	<h1 id="logo" class="grid_4">Candy</h1>
	<!-- Navigation Menu -->
	<ul id="navigation" class="grid_8">
		<li><a href="contact.html"><span class="meta">联系我们</span></a></li>
		<li><a href="blog.html" class="current"><span class="meta">最新文章</span></a></li>
		<li><a href="index.html"><span class="meta">首页</span></a></li>
	</ul>
	<div class="hr grid_12 clearfix">&nbsp;</div>
	<!-- Caption Line -->
	<h2 class="grid_12 caption clearfix">我们的<span>博客</span>，让您了解我们最新的新闻。</h2>
	<div class="hr grid_12 clearfix">&nbsp;</div>

再用依次打开index.php、archive.php、contact.php、full_width.php、page.php和single.php，找到以上类似代码，修改为：

<?php get_header(); ?>

现在刷新页面，查看我们修改后的主题是否还可以正常工作，答案是肯定的，页面跟修改之前几乎没什么两样。

接下来，我们将仔细探讨header.php中的内容。header.php会被所有的模板页面（主页、分类页、页面、标签页等）所包含，他的内容应该是动态的，适合不同页面的，不应该是单纯的HTML，因为HTML是静态的。我们一起来看看如何修改header.php吧。

修改页面标题<title>

不同页面的标题都是不一样，而且title的设置会影响到SEO的效果，应该谨慎设置。将<title>Candy | 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>

以上添加的php代码运用了条件判断，针对不同的页面采用不同title，这里解释一下这几个条件标签。

is_home()：当前页面为主页时返回true
is_category()：当前页面为分类页时返回true
is_single()：当前页面为单文章页时返回true
is_page()：当前页面为单页面时返回true
更详细的内容参阅WordPress文档：条件标签

可能你对这些条件判断标签还没有深入的认识，也不清楚到底是用了这些标签会对主题造成怎样的影响，不用着急，随着本教程逐渐深入，你会慢慢的对他们有比较清楚的认识。

更改样式表style.css路径

在此之前你看到的首页都是混乱的，原因是还没加载css样式。现在我们一起把样式加上。你可以在header.php中找到这一段代码：

<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />

你可能会问wp-content\themes\Candy目录下不是已经有一个style.css 吗？那为什么header.php 没有加载呢？因为这是WordPress的主题，是要被WordPress的主程序调用，经过层层解析才能把你的博客显示出来，而不是简简单单的html静态网页文件。正确的写法如下：

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

博客名称和描述

在header.php，下面两行代码用于显示博客名称和描述：

<h1 id="logo" class="grid_4">Candy</h1>
<h2 class="grid_12 caption clearfix">我们的<span>博客</span>，让您了解我们最新的新闻。</h2>

将其修改为：

<h1 id="logo" class="grid_4"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2 class="grid_12 caption clearfix"><?php bloginfo('description'); ?></h2>

现在你的博客首页看到的就是你博客名称和描述了，并且logo也是一个链接指向你的博客首页。

get_option('home') 输出首页网址
bloginfo('name') 输出博客名称
bloginfo('description') 输出博客描述

添加订阅feed链接

在</head>之前添加以下代码：

<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章" href="<?php echo get_bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论" href="<?php bloginfo('comments_rss2_url'); ?>" />

添加wp_head

有些插件需要在网页头部执行一些类如添加一些js或css的动作，要让这些插件能够正常的工作，也让你的主题有更好的兼容性，你应该添加wp_head()函数。打开header.php，在</head>之前添加以下代码即可：

<?php wp_head(); ?>

添加Description 和 Keywords

在</head>之前添加以下代码：

<?php
	$description = '';
	$keywords = '';
	if (is_home() || is_page()) {
		// 主页description
		$description = "博客描述";
		// 主页keywords
		$keywords = "WordPress, 博客, 编程,php,ludou";
	}elseif (is_single()) {
		$description1 = get_post_meta($post->ID, "description", true);
		$description2 = str_replace("\n","",mb_strimwidth(strip_tags($post->post_content), 0, 200, "…", 'utf-8'));
		// 填写自定义字段description时显示自定义字段的内容，否则使用文章内容前200字作为描述
		$description = $description1 ? $description1 : $description2;
		// 填写自定义字段keywords时显示自定义字段的内容，否则使用文章tags作为关键词
		$keywords = get_post_meta($post->ID, "keywords", true);
	    if($keywords == '') {
	        $tags = wp_get_post_tags($post->ID);    
	        foreach ($tags as $tag ) {        
	            $keywords = $keywords . $tag->name . ", ";    
	        }
	        $keywords = rtrim($keywords, ', ');
	    }
	}elseif (is_category()) {
		// 分类的description可以到后台 - 文章 -分类目录，修改分类的描述
		$description = category_description();
		$keywords = single_cat_title('', false);
	}elseif (is_tag()){
		// 标签的description可以到后台 - 文章 - 标签，修改标签的描述
		$description = tag_description();
		$keywords = single_tag_title('', false);
	}
	$description = trim(strip_tags($description));
	$keywords = trim(strip_tags($keywords));
?>
<meta name="description" content="<?php echo $description; ?>" />
<meta name="keywords" content="<?php echo $keywords; ?>" />

显示菜单栏

这里只在菜单栏中列出页面page，将header.php中以下代码：

<ul id="navigation" class="grid_8">
	<li><a href="contact.html"><span class="meta">联系我们</span></a></li>
	<li><a href="blog.html" class="current"><span class="meta">最新文章</span></a></li>
	<li><a href="index.html"><span class="meta">首页</span></a></li>
</ul>

修改为：

<ul id="navigation" class="grid_8">
	<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
	<li <?php if (is_home()) { echo 'class="current"';} ?>><a title="<?php bloginfo('name'); ?>"  href="<?php echo get_option('home'); ?>/">主页</a></li>
</ul>