Reverie：一個(gè)基於Foundation框架的WordPress入門主題

Reverie是一個(gè)基於ZURB Foundation框架的WordPress入門主題，它為主題開發(fā)提供了堅(jiān)實(shí)的基礎(chǔ)，包括響應(yīng)式網(wǎng)格、排版、按鈕樣式和其他組件。其輕量級和極簡的設(shè)計(jì)能夠提升網(wǎng)站性能。

定制Reverie

您可以直接修改CSS和PHP文件或使用WordPress自定義器來進(jìn)行更簡單的更改。該主題支持子主題，允許您進(jìn)行更改而不會(huì)影響原始主題文件，從而方便更新主題而不會(huì)丟失自定義設(shè)置。

Reverie對開發(fā)者和熟悉基本HTML和CSS的初學(xué)者都非常友好。它開箱即用地支持WooCommerce，支持多語言網(wǎng)站翻譯，並兼容所有現(xiàn)代瀏覽器。該主題還支持自定義文章類型，並定期更新以兼容最新版本的WordPress和Foundation框架。

關(guān)鍵決策：子主題

定制任何基礎(chǔ)主題或入門主題時(shí)，都需要評估是否需要子主題。如果您要保持主題更新，則絕對需要使用子主題。主要原因是，當(dāng)您更新主主題時(shí)，您所做的所有更改都可能會(huì)丟失。如果您正在為客戶構(gòu)建網(wǎng)站，這很容易造成災(zāi)難。

另一方面，如果您不希望客戶自行更新主題並破壞您所有的辛勤工作，您可以使用簡單的代碼片段禁用更新。這將使該用戶無法從後端更新主題。主題和插件的更新最終可能會(huì)破壞整個(gè)網(wǎng)站，因此您可以通過將以下內(nèi)容添加到functions.php文件中來禁用它們：

function remove_core_updates() {
  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');

首次安裝後的步驟

安裝Reverie主題後，您可以看到它帶有“自定義”功能，使您可以從前端預(yù)覽基本更改，例如背景顏色、背景圖像和小部件。許多流行的主題都對這個(gè)區(qū)域進(jìn)行了詳細(xì)的自定義，甚至細(xì)化到字體顏色、字體系列等等。

創(chuàng)建Reverie子主題

子主題的工作方式是將文件保存在單獨(dú)的文件夾中，因此當(dāng)您更新主主題時(shí)，單獨(dú)文件夾中的文件不會(huì)被觸碰。這意味著您所有辛勤工作和自定義設(shè)計(jì)不會(huì)在每次更新主主題時(shí)都被擦除。

為Reverie設(shè)置子主題與其他主題大致相同。在主題目錄中，您需要?jiǎng)?chuàng)建一個(gè)名為“reverie-child”的文件夾。在其中，您需要放置一個(gè)style.css文件和一個(gè)functions.php文件。這是任何子主題的典型做法。如果您想添加自己的自定義功能和自定義樣式，則這些文件是必需的。

在子主題的樣式表中，您只需遵循子主題CSS文件的基本設(shè)置即可：

/*
Theme Name: Reverie Child Theme
Description: Child theme for Reverie 
Author: James George
Template: reverie
*/

@import url("../reverie/style.css");

/* Start child theme customization below */

現(xiàn)在，您可以將自定義函數(shù)和樣式添加到新的Reverie子主題中。

這是安裝Reverie後的典型外觀。如果要自定義外觀，需要將自定義CSS添加到子主題文件夾中的style.css文件中。

最好的方法是打開main-index.php文件和single-page.php文件並查看結(jié)構(gòu)。務(wù)必注意任何您想要關(guān)注的特殊類。在大多數(shù)情況下，一切都應(yīng)該非常簡單明了。

另一種方法（也是我選擇的方法）是使用Firefox的Firebug Inspector和Chrome的Inspect工具。選擇哪個(gè)工具都沒關(guān)係，它們的功能幾乎相同。我個(gè)人更喜歡Firefox的Firebug。我可以檢查一個(gè)元素，它會(huì)告訴我div ID和任何樣式化特定元素的屬性類。

這是查看構(gòu)建方式的另一種好方法，當(dāng)您將鼠標(biāo)懸停在Firebug窗口頂部細(xì)分中的某個(gè)項(xiàng)目上時(shí)，它會(huì)突出顯示該元素。您可以看到div是如何嵌套的，這可以幫助您縮小嘗試解決的任何問題的範(fàn)圍。

在上圖中，您可以看到您正在查看的代碼區(qū)域以淺藍(lán)色突出顯示。如果存在紫色區(qū)域，則表示存在任何填充。黃色表示應(yīng)用的任何邊距值。這是一種微調(diào)任何間距問題並診斷設(shè)計(jì)為何沒有按照您想要的方式構(gòu)建的好方法。

在上例中，如果我想設(shè)置作者名稱的樣式，更改其顏色，我可以將鼠標(biāo)懸停在其上，右鍵單擊並選擇“檢查元素”。然後，在下面的代碼中，您可以看到div和類名，它實(shí)際上是byline author的span類。

由於作者姓名是一個(gè)鏈接，我可以在末尾添加一個(gè)a，選擇活動(dòng)元素：

function remove_core_updates() {
  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');

這將作者鏈接更改為橙色。這很簡單，但這些是樣式化主題的基礎(chǔ)知識。此外，它比從PHP、div和類的一頁開始——並嘗試在您的腦海中整理所有內(nèi)容要容易得多。

在該系列的下一篇文章中，我們將探討向Reverie主題添加功能。這裡有很多靈活性，可能性無限。了解Reverie主題的整體結(jié)構(gòu)以及如何操縱其外觀將有助於您了解如何成功地在其上構(gòu)建。

Reverie常見問題解答

• Reverie與其他WordPress入門主題有何不同？ Reverie與其他WordPress入門主題的不同之處在於它與Foundation框架的集成。這意味著它帶有可立即使用的響應(yīng)式網(wǎng)格、排版、按鈕樣式和其他組件。它還包括自定義導(dǎo)航菜單、小部件區(qū)域和頁面模板，為主題開發(fā)提供了堅(jiān)實(shí)的基礎(chǔ)。與許多其他入門主題不同，Reverie的設(shè)計(jì)輕量級且極簡，有助於提高網(wǎng)站性能。

• 如何自定義Reverie主題？ Reverie高度可定制。您可以直接修改CSS和PHP文件，或使用WordPress自定義器進(jìn)行更簡單的更改。該主題還支持子主題，允許您進(jìn)行更改而不會(huì)影響原始主題文件。這使得更新主題而不會(huì)丟失自定義設(shè)置變得容易。

• Reverie適合初學(xué)者嗎？ 雖然Reverie是為開發(fā)人員設(shè)計(jì)的，但它也適合熟悉基本HTML和CSS的初學(xué)者。該主題簡潔、註釋良好的代碼使它易於理解其工作原理，並且與Foundation框架的集成提供了大量學(xué)習(xí)更多關(guān)於Web開發(fā)的資源。

• Reverie支持WooCommerce嗎？ 是的，Reverie開箱即用地支持WooCommerce。這意味著您可以輕鬆地在您的網(wǎng)站上建立在線商店，而無需安裝額外的插件或主題。該主題還包括幾個(gè)WooCommerce頁面的自定義模板，為您的網(wǎng)站提供一致的外觀和感覺。

• Reverie的性能與其他入門主題相比如何？ Reverie的設(shè)計(jì)輕量級且快速，有助於提高網(wǎng)站的加載時(shí)間和整體性能。該主題的極簡設(shè)計(jì)意味著它不包含不必要的特性或臃腫的代碼，這些可能會(huì)減慢您的網(wǎng)站速度。這使其成為重視性能的開發(fā)人員的絕佳選擇。

• 我可以將Reverie用於多語言網(wǎng)站嗎？ 是的，Reverie支持翻譯並支持多語言網(wǎng)站。該主題包含.po和.mo文件，您可以使用它們將主題翻譯成任何語言。它還支持WPML插件，這使得在您的網(wǎng)站上輕鬆管理和切換不同語言變得容易。

• Reverie兼容所有瀏覽器嗎？ Reverie旨在與所有現(xiàn)代瀏覽器兼容，包括Chrome、Firefox、Safari和Edge。該主題使用漸進(jìn)增強(qiáng)來確保它即使在舊版瀏覽器上也能正常工作，儘管某些高級功能可能不可用。

• Reverie支持自定義文章類型嗎？ 是的，Reverie支持自定義文章類型。這意味著您可以在您的網(wǎng)站上創(chuàng)建不同類型的內(nèi)容，例如博客文章、產(chǎn)品、評論等等。該主題還包括幾個(gè)顯示不同文章類型的自定義模板，為您的網(wǎng)站提供一致的外觀和感覺。

• Reverie多久更新一次？ Reverie定期更新，以確保與最新版本的WordPress和Foundation框架兼容。這些更新還包括錯(cuò)誤修復(fù)、性能改進(jìn)和基於用戶反饋的新功能。

• Reverie是否有任何支持？ 是的，Reverie通過其GitHub存儲(chǔ)庫提供支持。您可以報(bào)告問題、請求功能或?yàn)橹黝}的開發(fā)做出貢獻(xiàn)。主題網(wǎng)站上還有大量的文檔和教程，以及可以幫助解答問題和提供建議的用戶社區(qū)。

以上是Reverie：基於基礎(chǔ)的WordPress首發(fā)主題的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！