WordPress主題如何優(yōu)化

215次閱讀

共計(jì) 4112 個(gè)字符，預(yù)計(jì)需要花費(fèi) 11 分鐘才能閱讀完成。

這篇文章主要講解了“WordPress 主題如何優(yōu)化”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著丸趣 TV 小編的思路慢慢深入，一起來研究和學(xué)習(xí)“WordPress 主題如何優(yōu)化”吧！

1. 縮小圖片尺寸

在每個(gè) WordPress 主題中圖片都占有很重要的地位，但可惜的是很多主題開發(fā)人員都忘了優(yōu)化它們。這其中圖片包括 CSS 背景圖片、模板 logos、默認(rèn)的圖片、小圖標(biāo)等等。

優(yōu)化圖像可以節(jié)省您的帶寬消耗，也可提高你的博客讀者頁面響應(yīng)時(shí)間。拿 PhotoShop CS3 來說，菜單欄文件 – 存儲(chǔ)為 Web 和設(shè)備所用格式，可以優(yōu)化用于 Web 的圖片。通常我的做法是不斷降低圖片的質(zhì)量，直到我看到顏色或質(zhì)量的明顯變化為止。

此外，還可以使用像 Smush.it 無損圖像優(yōu)化工具，這個(gè)工具可以在保證圖片質(zhì)量的情況下壓縮圖片大小，使用方法有二：

依次點(diǎn)擊 UPLOADER – Select Files and Smush，選擇本地要壓縮的圖片即可，最后點(diǎn)擊壓縮結(jié)果的圖片名稱即可下載

點(diǎn)擊 URL，輸入圖片的 URL 地址，提交即可開始?jí)嚎s

2. 使用個(gè)性的 Favicon

一些 WordPress 主題并不附帶一個(gè)默認(rèn)的 favicon（該圖標(biāo)可以標(biāo)示一個(gè)網(wǎng)站，你可以在瀏覽器標(biāo)簽和瀏覽器的網(wǎng)址欄看到它），下圖標(biāo)示的是本博客所使用的 favicon 圖標(biāo)，一個(gè) if

如果一個(gè)網(wǎng)站沒有設(shè)置 favicon 圖標(biāo)，會(huì)給人一種不專業(yè)的感覺，為此還是確定你的 WordPress 主題包含一個(gè) favicon 圖標(biāo)吧。設(shè)置 favicon 圖標(biāo)其實(shí)也很簡(jiǎn)單，只需將一個(gè) favicon.ico 圖標(biāo)文件上傳至網(wǎng)站根目錄即可。如果你的主機(jī)不支持這種方法，也可以在 WordPress 主題中引用，打開主題目錄下的 header.php，在 /head 之前添加以下代碼（記住將以下代碼中的 favicon.ico 改成你的圖標(biāo) URL）：

link rel= icon href= favicon.ico type= image/x-icon /

3. 樣式化圖片描述

當(dāng)你上傳圖片并插入到文章當(dāng)中時(shí)，你應(yīng)該給它添加圖片描述來形容它。注：圖片描述就是圖片的說明性文字，在 WordPress 后臺(tái)編輯文章，上傳圖片后有一些選項(xiàng)，下圖中第二個(gè)標(biāo)題就是圖片的描述文字：

每一個(gè)好的 WordPress 主題都應(yīng)該包含圖片描述的默認(rèn)樣式，為了樣式化默認(rèn)的圖片描述，你可以在主題的 style.css 中添加 .wp-caption 類。以下是圖片描述樣式化的 CSS 代碼，你可以參考（使用了一些 CSS 3 屬性）：

.wp-caption {
 background-color: #f3f3f3;
 border: 1px solid #ddd;
 -khtml-border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px; /* optional rounded corners for browsers that support it */
 margin: 10px;
 padding-top: 4px;
 text-align: center;
.wp-caption img {
 border: 0 none;
 margin: 0;
 padding: 0;
.wp-caption p.wp-caption-text {
 font-size: 11px;
 line-height: 17px;
 margin: 0;
 padding: 0 4px 5px;
}

以下是使用了以上 CSS 代碼后，圖片描述樣式化后的結(jié)果：

4. 使用 PHP 的 Flush

在主題 header 中調(diào)用 flush() 函數(shù)，可以加速你的 WordPress 博客。操作也很簡(jiǎn)單，打開主題目錄下的 header.php，在 /head 后面添加以下代碼即可：

?php flush(); ?

這行代碼只是強(qiáng)制服務(wù)器在發(fā)送其他內(nèi)容之前，先發(fā)送你的網(wǎng)站頭（header）。通過使用 flush() 函數(shù)，瀏覽器就可以在等待網(wǎng)頁其他內(nèi)容的時(shí)候，下載網(wǎng)頁頭中引用的所有樣式表。

5. 在你的主題樣式表中使用 CSS 簡(jiǎn)寫

WordPress 主題 CSS 文件中給網(wǎng)頁的不同部分定義大量的樣式代碼。為了縮小 CSS 文件的大小，可以使用 CSS 簡(jiǎn)寫方式。一些 WordPress 主題設(shè)計(jì)者為了方便初學(xué)者修改樣式而不用 CSS 簡(jiǎn)寫，但如果你是一位經(jīng)驗(yàn)豐富的 CSS 編寫者，你可以嘗試用 CSS 簡(jiǎn)寫方式來寫 / 重寫樣式表。

舉個(gè)例子，如果你在主題中發(fā)現(xiàn)類似以下的樣式規(guī)則：

.post {
  padding-top:3px;
  padding-right:10px;
  padding-bottom:5px;
  padding-left:2px;
}

你可以將它們縮寫至它們的簡(jiǎn)寫形式：

.post {padding: 3px 10px 5px 2px;}

這將有效地減少您的樣式表的大小。兩段代碼實(shí)現(xiàn)效果是完全一樣的，但是每一點(diǎn)的優(yōu)化都會(huì)使你的 WordPress 主題更快。

6. 壓縮你的 WordPress 主題文件

以上我們以及通過使用簡(jiǎn)寫來優(yōu)化了 styles.css，但是可能你的 CSS 和 JavaScript 文件仍然不是最精簡(jiǎn)的，你可以再次將它們壓縮。通過壓縮，可以去除文件中不必要的內(nèi)容，如空格、制表符、空行等。

要壓縮 JavaScript，可以使用在線工具 JavaScript Compressor，在第一個(gè)輸入框中輸入 js 代碼，點(diǎn)擊 Compress JavaScript 就可以的壓縮后的 js 的代碼。

要壓縮 CSS，可以使用在線工具 CSS Drive Gallery – CSS Compressor，輸入 CSS 代碼，點(diǎn)擊 Compress-it! 即可

如果想直接壓縮 HTML 代碼，那將是特別棘手的，因?yàn)橹黝}的代碼標(biāo)記可能會(huì)散布在多個(gè)文件中，而且很多 HTML 和 PHP 代碼是混合在一起的。不過，也有像 W3 Total Cache 這樣的緩存插件，它可以壓縮前端的所有代碼，同時(shí)可以執(zhí)行其他優(yōu)化操作，如緩存你的博客文章，以改善網(wǎng)站的速度。

7. 主題安全

保護(hù)主題安全的的一個(gè)簡(jiǎn)單方法，是去除 head 標(biāo)簽中輸出的 WordPress 版本信息。為什么要去除呢？因?yàn)橛行阂庥脩艨吹侥愕?WordPress 版本后，那他對(duì)特定版本的漏洞進(jìn)行攻擊就簡(jiǎn)單多了。要去除版本信息，你需要采取以下兩個(gè)步驟。

首先，在主題的 header.php 中查找是否以下類似代碼，如果有的話就將它去除，因?yàn)檫@是用來輸出版本號(hào)的：

meta name= generator content= WordPress ?php bloginfo(’version’); ? /

接著，主題的 wp_head() 函數(shù)可能還會(huì)輸出 WordPress 版本號(hào)，為了不讓它輸出，請(qǐng)?jiān)谥黝}目錄下的 functions.php 中添加以下代碼 ( 沒有 functions.php 就新建一個(gè))：

?php remove_action(wp_head , wp_generator ?

8. 隱藏面板登陸錯(cuò)誤信息

另一種保護(hù)你的 WordPress 的主題的方法是隱藏登錄錯(cuò)誤。這樣做的原因是，不管什么時(shí)候，你輸入正確的用戶名，但是輸入的是錯(cuò)誤的密碼，那么系統(tǒng)就會(huì)提示：錯(cuò)誤：密碼不正確。忘記密碼？，這樣就是直接暗示惡意用戶，這個(gè)用戶名是正確的，只要不斷地嘗試其他密碼，遲早可以破解處你的登陸密碼。

同樣，當(dāng)你輸入一個(gè)不存在的用戶名是，會(huì)出現(xiàn)提示錯(cuò)誤：不可用的用戶名，同樣也可以暗示這個(gè)用戶名是不可用，再換其他用戶名，這樣又減少了一種可能。

為了不讓這樣的問題發(fā)生，你需要在 functions.php 文件中添加：

add_filter(login_errors , create_function( $a , return null;));

這個(gè)過濾器可以去除登陸錯(cuò)誤時(shí)出現(xiàn)標(biāo)準(zhǔn)錯(cuò)誤信息。

9. 替換主題自帶的搜索功能

你下載到的大多數(shù)主題都使用了 WordPress 核心提供的默認(rèn)的搜索方法，但是有時(shí)候，核心的搜索方法還不如第三方提供的搜索功能強(qiáng)勁，如 Google 自定義搜索，Yahoo! Search BOSS，Bing API。具體例子，WordPress 默認(rèn)的搜索功能，如果輸入的是作者昵稱，你將搜索不到任何內(nèi)容（除非你將作者昵稱寫到自定義域里面）

另一方面，使用由谷歌，雅虎和微軟的 Bing 提供的搜索功能將不僅利用他們的搜索專長(zhǎng)，而且還可以幫助你減少你的搜索服務(wù)器負(fù)載。

關(guān)于 WordPress 添加 Google 自定義搜索，你可以使用插件 Google Custom Search Plugin，如果你想手動(dòng)添加搜索代碼，你可以自行上網(wǎng)搜索相關(guān)教程。

10. 減少函數(shù)調(diào)用和靜態(tài)內(nèi)容鉤子

因?yàn)橹黝}都是要提供給大多數(shù)人用的，所以需要更大的靈活性，為此需要?jiǎng)佑么罅康暮瘮?shù)和鉤子來滿足這種靈活性。不過，這可能導(dǎo)致較低的性能和網(wǎng)頁的速度，因?yàn)槊恳粋€(gè)頁面生成的時(shí)候，它都需要進(jìn)行多次函數(shù)調(diào)用來呈現(xiàn)網(wǎng)頁。現(xiàn)在你可以嘗試找出不需要的函數(shù)調(diào)用，并注意一下你的博客中那些已成不變的內(nèi)容。

例如，在 header.php 中你可能會(huì)看到以下類似代碼：

bloginfo(name

這個(gè)函數(shù)輸出的是博客名稱。您的博客的名字大概不會(huì)經(jīng)常改變，如果這樣的話，那么你可以使用你的博客名稱直接代替以上代碼，這樣就可以減少一次函數(shù)調(diào)用：

echo 露兜博客

以下是另外一個(gè)例子（同樣在 header.php 中搜索）：

bloginfo(stylesheet_url

以上代碼輸出主題的 CSS 樣式文件的 URL。因?yàn)檫@樣網(wǎng)址幾乎是一成不變的，你可以將以上代碼替換成主題 CSS 的 URL：

echo http://example.com/wp-content/themes/themename/style.css

還有其他類似這樣的函數(shù)，他們是造成你的博客速度緩慢的一個(gè)原因，尤其是在你沒有使用緩存插件的情況下。

感謝各位的閱讀，以上就是“WordPress 主題如何優(yōu)化”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì) WordPress 主題如何優(yōu)化這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是丸趣 TV，丸趣 TV 小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

正文完