時候，我們會碰到這樣一種情況：我們的wordpress網(wǎng)站主題模板已經(jīng)定型了，但是，我們后期又想向wordpress網(wǎng)站添加一些新功能，這時候，我們該怎么辦？是繼續(xù)修改wordpress網(wǎng)站主題模板嗎？當(dāng)然，修改主題模板肯定可以。但是時間久了，對當(dāng)前的主題模板可能會有些生疏，修改起來可能會有點吃力。還有沒有其它方式向wordpress網(wǎng)站添加新功能？當(dāng)然是有的了。在部分功能應(yīng)用上，我們可以使用wp_head()這個函數(shù) + 插件的形式來完成一些功能。下面一起來看看wp_head()函數(shù)是如何來將插件數(shù)據(jù)插件前臺頁面的。

一、給wordpress網(wǎng)站創(chuàng)建插件。

進入到wordpress網(wǎng)站的插件目錄/wp-content/plugins/，在這個插件目錄下創(chuàng)建一個app目錄，也就是要創(chuàng)建一個名為app的插件。如下圖：

然后，在這個app插件目錄下創(chuàng)建2個文件，一個bbb.css文件和index.php文件，如下圖：

這里的bbb.css文件是這個插件的樣式文件，index.php是這個app插件的主頁文件。我們這里要實現(xiàn)的功能，只是一個演示功能，就是要修改前臺頁面字體的大小和顏色。

index.php文件代碼如下：

<?php/*plugin name: app //這個是必須的，否則后臺插件列表中就找不到這個插件plugin uri: http://wanlimm.comauthor: 馬不停蹄version: 1.0description: 這是一個使用wp-head()函數(shù)的插件*/function my_head(){ //向wordpress網(wǎng)站頭部添加一個樣式文件echo '<link rel="stylesheet" href="'.WP_PLUGIN_URL.'/app/bbb.css">';}if(!is_admin()){ //如果不是后臺，就把my_head函數(shù)添加到wordpress的動作勾子wp_head勾子里。add_action("wp_head","my_head");}

bbb.css文件的代碼如下：

body{color:red; font-size:40px;}

把wordpress網(wǎng)站前臺頁面的文字顏色變成紅色，字體大小變成40像素。

二、wordpress網(wǎng)站后臺插件列表中啟用插件。

通過第一步的添加后，我們就可以在wordpress網(wǎng)站的后臺插件列表中看到這個app插件了，如下圖：

我們點擊“啟用”按鈕，啟用這個app插件。插件只有被啟用了，它的功能才會被應(yīng)用到wordpress網(wǎng)站的前臺頁面當(dāng)中去。當(dāng)然，雖然我們現(xiàn)在啟用了，我們wordpress網(wǎng)站的前臺的文字字體依然沒有變化。如下圖（我們上節(jié)課添加的內(nèi)容）。

三、在wordpress網(wǎng)站主題前臺添加調(diào)用代碼。

通過上面兩步，我們已經(jīng)準(zhǔn)備好了功能，就等著我們的wordpress網(wǎng)站前臺調(diào)用呢。這時，我們需要使用到wp_head()這個頭部函數(shù)，這個頭部函數(shù)的功能還是非常強大的，它可以把我們向wordpress的wp_head勾子里添加的所有動作函數(shù)添加到wordpress網(wǎng)站的前臺頁面中。不過，這個wp_head()函數(shù)必須添加在wordpress網(wǎng)站前臺頁面的< head>標(biāo)簽之內(nèi)才有效，如下圖：

這時，我們看一下wordpress網(wǎng)站的前臺頁面，看看頁面字體有沒有變化。這時，字體變大了，也變成了紅色。如下圖：

之所以旁邊的“返回首頁”是藍(lán)色，因為它是鏈接，想要修改它的顏色，必須單獨為它設(shè)置顏色。我們再來看一下源代碼，如下圖，wp_head()函數(shù)在wordpress網(wǎng)站的前臺的< head>標(biāo)簽中插入了我們創(chuàng)建的插件app的樣式文件bbb.css。

?當(dāng)然，wp_head()函數(shù)在插件bbb.css樣式文件的同時，會向< head>標(biāo)簽插入很多其它的代碼，有些代碼對我們根本沒什么用處，我們是可以通過一些手段來處理掉了，這個在我們后期的文章中會有相關(guān)的介紹。

好了，到這里，本節(jié)就接近尾聲。本節(jié)課的目的，主要是介紹“如何通過wp_head()函數(shù)向wordpress網(wǎng)站的前臺頁面的頭部添加數(shù)據(jù)代碼”，這個應(yīng)用非常廣泛，很多wordpress插件都要使用到wp_head()這個函數(shù)，如果不使用這個函數(shù)，這些插件就無法使用。

以上就是我的觀點，如有不同觀點，歡迎發(fā)表評論。同時，歡迎【點贊、分享、收藏】和【關(guān)注】我。

么是 HTML？

HTML （Hypertext Markup Language）是標(biāo)準(zhǔn)標(biāo)記語言，是 Web 瀏覽器顯示的基礎(chǔ)。 此外，CSS（Cascading Style Sheets）等技術(shù)以及JavaScript等腳本語言也支持這種技術(shù)。

創(chuàng)建主頁時，首先使用 HTML 確定句子的結(jié)構(gòu)并標(biāo)記它，然后設(shè)計要顯示的信息。 這是網(wǎng)頁的基礎(chǔ)。

現(xiàn)在，讓我們仔細(xì)看看可以使用少量 CSS 代碼實現(xiàn)的技術(shù)。

一種技術(shù)摘要，可以使用鮮為人知的短 HTML 代碼實現(xiàn)

loading="lazy"屬性

Web 性能改進技術(shù)之一是屬性，允許用戶延遲加載，直到滾動。 它還適用于嵌入 YouTube 視頻的 iframe 代碼和大尺寸圖像。loading="lazy"

XHTML

發(fā)送電子郵件、電話或短信短信

打開電子郵件創(chuàng)建頁面、直接撥打電話或發(fā)送短消息的技術(shù)。

XHTML

確定列表順序的屬性strat

start屬性允許您自由確定列表格式的數(shù)字。

meter在元素中顯示數(shù)字

meter元素允許您使用彩色滑塊顯示數(shù)字和數(shù)量。 不需要 JavaScript 或 CSS。

HTML 本機搜索

通過預(yù)先在表單輸入元素中指定一些數(shù)據(jù)列表，可以將其作為候選關(guān)鍵字顯示在輸入字段中的下拉列表中。

Fieldset按元素對標(biāo)簽進行分組

fieldset元素允許您將 Web 窗體中的多個控件和標(biāo)簽 （） 組合在一起。label

使用 window.opener 防止檢索原始窗口中的信息

target="_blank在 中打開的頁面將允許您訪問原始頁面的 window.opener。 這可能會對安全性和性能產(chǎn)生負(fù)面影響，例如"原始窗口在知道之前已轉(zhuǎn)換到填充站點"。 為了防止這種情況，請包括 或 。rel="noopener"rel="noreferrer"

base元素

如果要在新選項卡中打開 HTML 文檔中的所有鏈接，可以使用元素。 在下面的示例中，兩個鏈接都在新的選項卡中打開。base

防止傳真機緩存

若要更新網(wǎng)站的傳真，您可以通過將其添加到文件名中來在瀏覽器中下載新版本。?v=2

一種有效的技術(shù)，尤其是在生產(chǎn)環(huán)境中，以確保用戶輸入新版本。

XHTML

spellcheck按屬性檢查拼寫

可以決定是否檢查元素的拼寫錯誤的屬性。spellcheck

顯示 HTML 滑塊

input type="range"允許您使用滑塊調(diào)整數(shù)字。 所選數(shù)字可以顯示在 中。input type="number"

僅通過 HTML 顯示手風(fēng)琴

details元素允許您創(chuàng)建僅 HTML 本機手風(fēng)琴。

mark標(biāo)記中的文本突出顯示突出顯示

mark標(biāo)記允許您使用黃色標(biāo)記突出顯示文本的一部分。

下載文件具有屬性download

URL 鏈接的屬性允許您直接下載文件，而不是將其移動到文件中。download

XHTML

webp使用文件格式

使用".webp"作為圖像格式可以減小圖像大小并提高網(wǎng)站性能。

XHTML

視頻視頻縮略圖視圖

poster屬性允許您指定在加載視頻或按下"播放"按鈕之前顯示的圖像。

XHTML

type="search"在 中顯示取消標(biāo)記

在搜索框中使用時，將自動顯示"X"清除標(biāo)記以取消。type="search"

只有 HTML 可以實現(xiàn)的功能，我有很多。 我們計劃在未來添加和更新小技巧技術(shù)。