wordpress网站模板中，怎样添加和调用公共头部模板？#学浪计划#

wordpress网站模板主题开发中，我们可能会碰到这样一个问题：wordpress网站前台页面的头部、侧边栏、底部的数据基本上是差不多的，有的甚至是一模一样的，这时，我们还有必要在每一个页面的头部、侧边栏、底部重复添加或修改相同的代码吗？有没有更好的方法。当然是有的，我们可以把这些内容代码相同的部分，分割出来，放到一个公共的模板中，其它页面可以直接引用就可以了。这样的好处是，不需要每个页面模板都重写这些代码，而且在后期的wordpress模板维护修改时，也方便维护修改——在需要修改这几个部位的代码时，只需要修改这几个公共模板就可以了。下面，就随我一起来为wordpress网站模板创建公共模板吧，我们将以头部模板为例来做一下演示。

第一步：创建公共模板文件。

首先，我们在wordpress网站模板目录下3个创建公共模板文件：header.php（头部模板）、sidebar.php（侧边栏模板）、footer.php（底部模板），这些模板文件的名字是wordpress主题模板默认的模板名。当然，我们也是可以用其它名字的，不过，没有这些文件名方便好用。

第二步：把头部代码分离出来，放到头部模板中。

在sublime编辑器中打开wordpress模板的index.php首页模板文件，在代码中找到<!DOCTYPE html>和</header>标签（这里的模板是我们前面文章中创建的app模板），然后，把这两个标签之间的代码全部剪切下来，粘贴到header.php这个公共头部模板中，代码如下：

< !DOCTYPE html>< html>< head>< meta charset="UTF-8"> < title>< ?php wp_title(" - ",true,right); bloginfo("name"); echo " - "; bloginfo("description"); ?> </title>< link rel="stylesheet" href="< ?php bloginfo("stylesheet_directory"); ?>/style.css"> < ?php wp_head(); ?></head>< body> < header>< ?php $menu = array( 'container' => false, //最外层标签名。'container_class' => '','menu_class' => 'aaa','menu_id' => '', 'theme_location' => 'menu_top', //菜单名。 );wp_nav_menu($menu);?></header>

如下图：

第三步：在首页模板或其它页面模板中引入头部模板。

分离出头部的代码后，首页模板index.php文件代码就没有了头部的原始代码了，这时，我们打开wordpress网站前台页面，就会出现页面布局乱了，因为没有了头部，也就没有了CSS样式了。那么，我们怎样在首页模板中引用这个公共的头部模板呢？方法有两种。

方法1：使用PHP函数—— include()来引用头部模板header.php。代码如下：

include("header.php");

通过include()函数引入的方式，有它独特的好处，它可以引入任何名字的.php后缀的文件，也就是说，我们的公共头部模板名不是header.php，也是同样可以方便引入的。

方法2：通过wordpress函数来引入头部模板header.php。代码如下：

get_header();

这个函数在没有参数的情况下，可以直接引入模板名为header.php的模板文件。这个函数也可以给它添加一个参数，如：get_header("mobile")，这就是要引用wordpress模板文件header-mobile.php。加参数引入公共模板时，这个公共模板的名字必须是以header-作为前缀的。

以上，我们简单介绍了“如何为wordpress添加和调用公共模板header.php”。侧边栏模板和底部公共模板的创建和引用方式也是一样的，只是wordpress自带的调用函数不一样，侧边栏调用函数是get_sidebar()，底部模板调用函数是get_footer()，它们的使用方式跟get_header()函数是一样的，这里就不多说了。

管现代Web开发更加依赖于各种MVC框架，但是开发者仍然需要对HTML和DOM有基本的了解。然而，即使对有多年经验的前端开发人员来说，也会遇到一些不知道的情况。

HTML头部元素描述

HTML<head>元素用作元数据（关于数据的数据）的容器。它用在<html>标签和<body>标签之间。

HTML文档的头部内容在页面加载时不会显示在浏览器中。它仅包含有关HTML文档的元数据。

元数据定义HTML文档的标题，字符集，样式，链接，脚本和其他元信息。

HTML头部可以包含很多元数据信息，也可以很少或没有信息，这取决于我们的需求。但是头部对HTML文档至关重要。

HTML<head>元素

<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）,样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为:<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。

HTML<title>元素

HTML<title>元素用于定义文档的标题。它在所有HTML/XHTML文档中使用。<title>元素必须放在<head>元素之间，并且一个文档只能有一个title元素。

<title>元素作用

它定义了浏览器选项卡中的标题。

当用户将页面添加到收藏夹时，它为页面提供标题。

它在搜索引擎结果中显示页面的标题。

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
    </head>
    <body>文档内容......</body>
</html>12345678复制代码类型：[html]

HTML<base>元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoon.com/images/" target="_blank">
</head>123复制代码类型：[html]

HTML<link>元素

HTML<link>元素用于将外部样式表链接到您的网页。<link>元素包含两个主要属性，即“rel”和“href”。rel属性表示它是一个样式表，href给出该外部文件的路径。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>123复制代码类型：[html]

HTML<style>元素

HTML<style>元素用于为HTML页面设置样式。<style>元素只影响当前页面HTML页面的CSS属性。如果要对多个页面应用CSS，则应使用单独的CSS文件。

<head>
    <style type="text/css">body {background-color:yellow} p {color:blue}</style>
</head>123复制代码类型：[html]

HTML<meta>元素

HTML<meta>元素用于指定网页上的字符集，页面描述，关键字，作者和其他元数据。

搜索引擎和其他Web服务使用元数据来更好地对网页进行排名。

<meta>标签定义字符集：

<meta charset="UTF-8">  1复制代码类型：[html]

charset属性指定字符编码。在此示例中，我们将其设置为“UTF-8”，这意味着它可以显示任何语言。

<meta>标签定义搜索引擎关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">1复制代码类型：[html]

<meta>标签定义网页描述内容:

<meta name="description" content="免费 Web & 编程 教程">1复制代码类型：[html]

<meta>标签定义网页作者:

<meta name="author" content="Runoon">1复制代码类型：[html]

<meta>标签定义每30秒钟刷新页面:

<meta http-equiv="refresh" content="30">1复制代码类型：[html]

元刷新用于向浏览器提供指令，以在给定的时间间隔后自动刷新页面。如上例所示，它将在30秒后自动刷新。

<meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html>1复制代码类型：[html]

如果添加了URL，则在指定时间结束后重定向到该页面。

<meta>标签定义设备尺寸

HTML5中引入了此方法，以通过使用<meta>标签来控制视窗大小。视窗是用户在网页上的可见区域。它随设备的不同而变化，在手机上的显示尺寸明显小于计算机屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1.0">  1复制代码类型：[html]

width=device-width是用来设置页面的宽度将与设备的屏幕宽度保持一致。

当最初由浏览器加载页面时，initial-scale=1.0用于设置初始缩放级别。

HTML<script>元素

HTMLhead元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

「链接」

么是css的调用方式？

简单来讲，就是解决把css代码写在哪里的问题，这块内容之前在课堂上演示过，这里再用文字说明一下，权当复习。

大体有以下四种方式：

外联式样式表；
内嵌样式表；
元素内定；
导入样式表

1，外联式样式表

添加在HTML的头部信息标识符< head>里：

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

其中href是目标文档的URL， type则规定了目标URL的MIME类型，而media规定了文档将显示在什么设备上。

2，内嵌样式表

添加在HTML的头部信息标识符< head>里：

<head> 
      <style type="text/css"> 
             <!-- 样式表的具体内容 --> 
      </style> 
</head>

type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“< !--注释内容-->”。

3，元素内定

语法：

<Tag style="properties">网页内容</tag>

举个例子：

<p style="color: blue; font-size: 10px">CSS实例</p>

上面例子的代码说明：

用蓝色显示字体大小为10px的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势——即内容结构和格式控制分别保存。

4，导入样式表(高级用法，暂时先放下）

语法：

<style type="text/css"> 
        <!-- @import url("css/base.css"); --> 
</style>

其中外部引用CSS主要用到两种方式link和@import

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

link和@import存在如下差别：

差别1：老祖宗的差别。link属于HTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：当使用javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

从上面的分析来看，还是使用link标签比较好。

课后练习：

步骤一：新建一个名为index.html的网页。

步骤二：在index.html网页文档里加入两个p标签，分别在p标签中加入内容（内容随意）

步骤三：尝试用上面提到的前三种方式，用css代码改变p标签内容的显示格式。

在线咨询

上一篇：css实现常用的开关按钮功能
下一篇：html多页面实现背景音乐的连续播放，简单处理笔记

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商