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

2022-12-15 14:28:56 浏览数 (1)

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

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

代码语言：javascript复制
<!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，找到以上类似代码，修改为：

代码语言：javascript复制
<?php get_header(); ?>

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

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

修改页面标题<title>

不同页面的标题都是不一样，而且title的设置会影响到SEO的效果，应该谨慎设置。将<title>Candy | Blog</title>修改为：

代码语言：javascript复制
<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中找到这一段代码：

代码语言：javascript复制
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />

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

代码语言：javascript复制
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
博客名称和描述

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

代码语言：javascript复制
<h1 id="logo" class="grid_4">Candy</h1>
<h2 class="grid_12 caption clearfix">我们的<span>博客</span>，让您了解我们最新的新闻。</h2>

将其修改为：

代码语言：javascript复制
<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>之前添加以下代码：

代码语言：javascript复制
<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>之前添加以下代码即可：

代码语言：javascript复制
<?php wp_head(); ?>
添加Description 和 Keywords

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

代码语言：javascript复制
<?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中以下代码：

代码语言：javascript复制
<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>

修改为：

代码语言：javascript复制
<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>
刷新缓存

在<body>前面，</head>后面添加PHP代码，用于提高程序运行效率：<?php flush(); ?>

本次练习到此结束！现在总结一些今天讲到的比较重要的知识点：

  • get_header() 从当前主题文件夹中包含header.php文件
  • is_home()，is_single()，is_category()等几个条件判断标签
  • bloginfo('stylesheet_url') 输出主题文件夹中style.css文件的路径
  • bloginfo('pingback_url') 输出博客pingback网址
  • bloginfo('template_url') 输出博客主题目录URL
  • get_option('home') 获取博客首页网址
  • bloginfo('name') 输出博客名称
  • bloginfo('description') 输出博客描述
  • wp_head() 用于包含WordPress程序输出头部信息
  • wp_list_categories(); 用于列出博客分类页
  • wp_list_pages() 用于列出博客页面

WordPress主题： 5 / 14

  • WordPress主题制作：开始前的准备
  • WordPress主题制作（一）：主题文件结构
  • WordPress主题制作（二）：模板和模板文件
  • WordPress主题制作（三）：牛刀小试
  • WordPress主题制作（四）：制作头部模板header.php
  • WordPress主题制作（五）：制作底部模板footer.php
  • WordPress主题制作（六）：制作侧边栏模板sidebar.php
  • WordPress主题制作（七）：制作基础模板Index.php
  • WordPress主题制作（八）：制作文章单页模板single.php
  • 计划: WordPress主题制作（九）：制作评论区模板comments.php
  • 计划: WordPress主题制作（十）：制作单页（非文章）模板page.php
  • 计划: WordPress主题制作（十一）：制作静态首页front-page.php
  • 计划: WordPress主题制作（十二）：创建您自己的小工具
  • 计划: WordPress主题制作（十三）：创建后台主题选项

本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：

原文出处：Yiiven https://cloud.tencent.com/developer/article/2193191

wordpress 网站建设 html css php

0 人点赞