WordPress主題怎么優(yōu)化?下面本篇文章給大家介紹一下10個(gè)改善WordPress主題的小技巧,希望對(duì)大家有所幫助!
現(xiàn)在有很多朋友都是用WordPress來(lái)搭建博客。安裝好WordPress后, 很多新用戶都嘗試去網(wǎng)上搜索下載一些很個(gè)性的主題(theme),而很少有用戶使用WordPress默認(rèn)的主題。其實(shí),不管你使用的WordPress主題是收費(fèi)的還是免費(fèi)的,還是有很多地方需要改善的。下面的WordPress主題建議,涵蓋了基本的定制技巧、樣式化以及優(yōu)方法
(資料圖片)
在每個(gè)WordPress主題中圖片都占有很重要的地位,但可惜的是很多主題開(kāi)發(fā)人員都忘了優(yōu)化它們。這其中圖片包括CSS背景圖片、模板logos、默認(rèn)的圖片、小圖標(biāo)等等。
優(yōu)化圖像可以節(jié)省您的帶寬消耗,也可提高你的博客讀者頁(yè)面響應(yīng)時(shí)間。拿PhotoShop CS3來(lái)說(shuō),菜單欄 "文件" - "存儲(chǔ)為Web 和設(shè)備所用格式 ",可以優(yōu)化用于Web的圖片。通常我的做法是不斷降低圖片的質(zhì)量,直到我看到顏色或質(zhì)量的明顯變化為止。
此外,還可以使用像Smush.it無(wú)損圖像優(yōu)化工具,這個(gè)工具可以在保證圖片質(zhì)量的情況下壓縮圖片大小,使用方法有二:
依次點(diǎn)擊"UPLOADER" - "Select Files and Smush",選擇本地要壓縮的圖片即可,最后點(diǎn)擊壓縮結(jié)果的圖片名稱即可下載點(diǎn)擊"URL",輸入圖片的URL地址,提交即可開(kāi)始?jí)嚎s一些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)站沒(méi)有設(shè)置favicon圖標(biāo),會(huì)給人一種不專業(yè)的感覺(jué),為此還是確定你的WordPress主題包含一個(gè)favicon圖標(biāo)吧。設(shè)置favicon圖標(biāo)其實(shí)也很簡(jiǎn)單,只需將一個(gè)favicon.ico圖標(biāo)文件上傳至網(wǎng)站根目錄即可。如果你的主機(jī)不支持這種方法,也可以在WordPress主題中引用,打開(kāi)主題目錄下的header.php,在</head>之前添加以下代碼(記住將以下代碼中的favicon.ico改成你的圖標(biāo)URL):
<link rel="icon" href="favicon.ico" type="image/x-icon" />
當(dāng)你上傳圖片并插入到文章當(dāng)中時(shí),你應(yīng)該給它添加圖片描述來(lái)形容它。注:圖片描述就是圖片的說(shuō)明性文字,在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é)果:
在主題header中調(diào)用 flush()函數(shù),可以加速你的WordPress博客。操作也很簡(jiǎn)單,打開(kāi)主題目錄下的header.php,在</head>后面添加以下代碼即可:
<?php flush(); ?>
這行代碼只是強(qiáng)制服務(wù)器在發(fā)送其他內(nèi)容之前,先發(fā)送你的網(wǎng)站頭(header)。通過(guò)使用 flush()函數(shù),瀏覽器就可以在等待網(wǎng)頁(yè)其他內(nèi)容的時(shí)候,下載網(wǎng)頁(yè)頭中引用的所有樣式表。
WordPress主題CSS文件中給網(wǎng)頁(yè)的不同部分定義大量的樣式代碼。為了縮小CSS文件的大小,可以使用CSS簡(jiǎn)寫方式。一些WordPress主題設(shè)計(jì)者為了方便初學(xué)者修改樣式而不用CSS簡(jiǎn)寫,但如果你是一位經(jīng)驗(yàn)豐富的CSS編寫者,你可以嘗試用CSS簡(jiǎn)寫方式來(lái) 寫/重寫 樣式表。
舉個(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主題更快。
以上我們以及通過(guò)使用簡(jiǎn)寫來(lái)優(yōu)化了styles.css,但是可能你的CSS和JavaScript文件仍然不是最精簡(jiǎn)的,你可以再次將它們壓縮。通過(guò)壓縮,可以去除文件中不必要的內(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代碼是混合在一起的。不過(guò),也有像W3 Total Cache 這樣的緩存插件,它可以壓縮前端的所有代碼,同時(shí)可以執(zhí)行其他優(yōu)化操作,如緩存你的博客文章,以改善網(wǎng)站的速度。
保護(hù)主題安全的的一個(gè)簡(jiǎn)單方法,是去除<head>標(biāo)簽中輸出的WordPress版本信息。為什么要去除呢?因?yàn)橛行阂庥脩艨吹侥愕腤ordPress版本后,那他對(duì)特定版本的漏洞進(jìn)行攻擊就簡(jiǎn)單多了。要去除版本信息,你需要采取以下兩個(gè)步驟。
首先,在主題的header.php中查找是否以下類似代碼,如果有的話就將它去除,因?yàn)檫@是用來(lái)輸出版本號(hào)的:
<meta name="generator" content="WordPress <?php bloginfo(’version’); ?>" />
接著,主題的wp_head()函數(shù)可能還會(huì)輸出WordPress版本號(hào),為了不讓它輸出,請(qǐng)?jiān)谥黝}目錄下的 functions.php 中添加以下代碼(沒(méi)有functions.php就新建一個(gè)):
<?php remove_action("wp_head", "wp_generator"); ?>另一種保護(hù)你的WordPress的主題的方法是隱藏登錄錯(cuò)誤。這樣做的原因是,不管什么時(shí)候,你輸入正確的用戶名,但是輸入的是錯(cuò)誤的密碼,那么系統(tǒng)就會(huì)提示:"錯(cuò)誤:密碼不正確。忘記密碼?",這樣就是直接暗示惡意用戶,這個(gè)用戶名是正確的,只要不斷地嘗試其他密碼,遲早可以破解處你的登陸密碼。
同樣,當(dāng)你輸入一個(gè)不存在的用戶名是,會(huì)出現(xiàn)提示"錯(cuò)誤:不可用的用戶名",同樣也可以暗示這個(gè)用戶名是不可用,再換其他用戶名,這樣又減少了一種可能。
為了不讓這樣的問(wèn)題發(fā)生,你需要在 functions.php 文件中添加:
add_filter("login_errors", create_function("$a", "return null;"));這個(gè)過(guò)濾器可以去除登陸錯(cuò)誤時(shí)出現(xiàn)標(biāo)準(zhǔn)錯(cuò)誤信息。
你下載到的大多數(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)教程。
因?yàn)橹黝}都是要提供給大多數(shù)人用的,所以需要更大的靈活性,為此需要?jiǎng)佑么罅康暮瘮?shù)和鉤子來(lái)滿足這種靈活性。不過(guò),這可能導(dǎo)致較低的性能和網(wǎng)頁(yè)的速度,因?yàn)槊恳粋€(gè)頁(yè)面生成的時(shí)候,它都需要進(jìn)行多次函數(shù)調(diào)用來(lái)呈現(xiàn)網(wǎng)頁(yè)。現(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è)原因,尤其是在你沒(méi)有使用緩存插件的情況下。
推薦學(xué)習(xí):《WordPress教程》
以上就是WordPress主題怎么優(yōu)化?10個(gè)改善小技巧的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
關(guān)鍵詞: