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小時內與您取得聯系。

整合營銷服務商

wordpress網站模板中，怎樣添加和調用公共頭部模板？#學浪計劃#

第一步：創建公共模板文件。

第二步：把頭部代碼分離出來，放到頭部模板中。