GG資源網

wordpress主題製作,從零開始製作WordPress主題(圖文教程)(如何使用子主題功能修改您的WordPress主題?)

wordpress主題製作,從零開始製作WordPress主題(圖文教程)

wordpress主題製作,WordPress主題由一系列文件和 CSS 樣式表構成,構成了一個美麗的WordPress網站。每個主題都是不同的,這樣WordPress用戶就可以隨時更改WordPress網站的外觀。站長也許想為自己開發 WordPress主題,或者製作公開發行的的主題。創建自己獨特的 WordPress 主題外觀。利用模板,模板標籤,和WordPress 循環來產生不同的效果。為了產生不同的效果,比如在pages頁面和搜索結果頁面產生個性的效果。設計WordPress主題,這樣大家就可以通過網路更好的使用網站的作品。

wordpress主題製作目錄位於wp-content/themes/。主題的子目錄擁有所有樣式文件、模板文件、可選的函數文件(functions.php)、JavaScript文件、圖片等。比如說一個叫做test的主題就會放在 wp-content/themes/test/目錄里。請避免使用數字名字,這會導致無法在主題列表中正常顯示出來。wordpress主題製作每一個發行版都會有一個默認的主題。請認真查看默認的主題,這樣可能會對製作網站自己的主題有幫助。

WordPress 主題除了圖片和JavaScript,經常由三種文件構成。樣式表文件style.css,控制著頁面的外觀,函數文件 (functions.php)。模板文件,它控制著從資料庫中調出的數據所呈現的外觀。

wordpress主題製作的CSS文件不僅定義了網站的主題樣式,style.css *必須以注釋的形式列出主題的詳細信息。*兩個不同的主題是不允許擁有相同的表述的,因為這樣會導致主題選擇出錯。如果網站通過拷貝一個你已經製作的主題來製作你新的主題,請確保先更改這些頭部注釋。

wordpress主題製作也有很多好處:主題將樣式表單和模板文件從系統文件中獨立出來,這樣網站升級時就不會對網站的視覺外觀造成大幅影響。每個主題的呈現樣式和網頁布局都是獨一無二的,通過主題更換,WordPress網站可以快速改變其外觀。用戶再也不必為了讓網站表現得清新自然而清除CSS、HTML、PHP代碼。

我們自己開發wordpress主題製作原因還在於:這是一個深入學習CSS、HTML/XHTML、PHP的好機會,同時也是一個積累CSS、HTML/XHTML、PHP實踐經驗的機會。wordpress主題製作可以發揮站長的創造性,開發主題是一個充滿樂趣的過程(大部分時候),將主題公開發布,與其他用戶分享自己的勞動成果,回饋WordPress社區。

隨著WordPress功能的增強,以及人們對於WordPress建站的功能需求的提高,現在的wordpress主題製作一般都不僅僅幾串代碼那麼簡單了,不過再怎麼複雜,文件一般都是比較常用的,也是最基本的。WordPress主題的判斷標籤,比較常用於麵包屑導航和側邊欄中,用於判斷不同的頁面載入不同的內容,可以多個搭配一起用,有些還可以定義參數,運用的好的話,可以制定出很多不同的顯示方案。

如何使用子主題功能修改您的WordPress主題?

相信很多朋友使用的WordPress主題都經過了自己的一些修改,好不容易折騰好了,主題的升級版發布了,要不要升級呢?升級以後,還得重新再次修改?鬱悶啊!

其實,你大可不必如此煩惱,使用Wordpress的子主題功能,一切問題都可以迎刃而解!

很多朋友使用的是可以在線更新的WordPress主題,有的由於自己特殊的需求會對主題進行一定的自定義開發或修改,但是這樣的話,如果主題以後發布了升級版本,你如果升級的話,原來你做的二次開發就都沒了,還要重新做一次。那麼怎麼才能解決這個困境呢?其實很簡單的,只要大家使用WordPress的子主題功能來對主題進行二次開發就行了。

什麼是WordPress 子主題

其實WordPress子主題也是一個主題,它繼承了另一個主題——父主題——的功能,並允許你對父主題的功能進行修改,或者添加新功能。

創建一個子主題是很簡單的。創建一個目錄,將格式編寫正確的 style.css 文件放進去,一個子主題就做成了!

只需要對 HTML 和CSS 具有基本的了解,您就可以通過創建一個非常基本的子主題 來對一個父主題的樣式和布局進行修改和擴展,而不需要對父主題的文件作任何修改。

通過這樣的方式,當父主題被更新的時候,您所做的修改就可以保存下來。

因為這個原因,我們強烈推薦您使用子主題的方式來對主題進行修改。

如果您對 PHP, WordPress Templates,和 WordPress Plugin API有個基本的理解,理論上來講,您可以使用子主題對父主題的每一個方面進行擴展,而不需要對父主題的文件進行任何修改。

本文將說明如何創建一個基本的子主題並解釋您能用它來幹什麼。本文將使用 WordPress 3.0 的默認主題 Twenty Ten 作為父主題進行舉例說明。

了解子主題的目錄結構

子主題放在wp-content/themes目錄下屬於自己的目錄里。下面的結構顯示的就是子主題和它的父主題(Twenty Ten)在典型的WordPress目錄結構中的位置:

  • public_html
    • wp-content
      • themes (主題存放的目錄)
        • twentyten (示例中父主題Twenty Ten的目錄)
        • twentyten-child (子主題存放的目錄,可以任意命名)
          • style.css (子主題中不可或缺的文件,文件名必需為 style.css)

這個文件夾裡面必須少至只包含一個style.css文件,也可以包含多至一個完整WordPress主題所擁有的文件:

  1. style.css (必需)
  2. functions.php (可選)
  3. Template files (可選)
  4. Other files (可選)

讓我們看看它們是如何起作用的。

必需的style.css文件

style.css是一個子主題唯一必須的文件。它的頭部提供的信息讓WordPress辨認出子主題,並且重寫父主題中的style.css文件

對於任何WordPress主題,頭部信息必須位於文件的頂端,唯一的區別就是子主題中的Template:行是必須的,因為它讓WordPress知道子主題的父主題是什麼。

下面是一個style.css文件的頭部信息的示例:

逐行的簡單解釋:

  • Theme Name. (必需) 子主題的名稱
  • Theme URI. (可選) 子主題的主頁。
  • Description. (可選) 子主題的描述。比如:我的第一個子主題,真棒!
  • Author URI. (可選) 作者主頁。
  • Author. (optional) 作者的名字。
  • Template. (必需) 父主題的目錄名,區別大小寫。 注意: 當你更改子主題名字時,要先換成別的主題。
  • Version. (可選) 子主題的版本。比如:0.1,1.0,等。

*/ 這個關閉標記的後面部分,就會按照一個常規的樣式表文件一樣生效,你可以把你想對WordPress應用的樣式規則都寫在它的後面。

要注意的是,子主題的樣式表會替換父主題的樣式表而生效。(事實上WordPress根本就不會載入父主題的樣式表。)所以,如果你想簡單地改變父主題中的一些樣式和結構——而不是從頭開始製作新主題——你必須明確的導入父主題的樣式表,然後對它進行修改。

下面的例子告訴你如何使用@import規則完成這個。

一個子主題的範例

這個例子中的父主題是Twenty Ten,我們喜歡這個主題的幾乎每個部分,除了網站標題的顏色,因為我想把它從黑色的改成綠色的。使用子主題的話,只用完成以下三個簡單的步驟:

  1. wp-content/themes目錄下創建一個新目錄,並將它命名為twentyten-child(或其他你喜歡的名稱)。
  2. 將下面的代碼保存在名為style.css的文件里,並將它放到新建的這個文件夾。
  3. 到WordPress的控制台>主題,然後激活你的新主題:Twenty Ten Child。

下面一步步解釋上面代碼的作用:

  1. /* 開啟子主題的頭部信息。
  2. Theme Name: 子主題名稱的聲明。
  3. Description: 主題的描述(可選,也可被省略)。
  4. Author: 作者名字的聲明(可選,也可被省略)。
  5. Template: 聲明子主題的父主題,換言之,父主題所在的文件夾的名稱,區分大小寫。
  6. */子主題頭部信息的關閉標記。
  7. 用 @import規則將父主題的樣式表調入
  8. #site-title a 定義網站標題的顏色(綠色),覆蓋父主題中相同的樣式規則。

注意 @import 規則

需要注意的是,@import 規則之前沒有其他的CSS樣式規則,如果你將其他的規則置於它之上,那麼它將無效,並且父主題的樣式表不會被導入。

使用 functions.php

不像style.css,子主題中的functions.php不會覆蓋父主題中對應功能,而是將新的功能加入到父主題的functions.php中。(其實它會在父主題文件載入之前先載入。)

這樣,子主題的functions.php提供了一個靈活穩定的方式來修改父主題的功能。如果你想在你的主題里加入一些PHP函數,最快的方式可能是打開functions.php文件然後加入進去。但那樣並不靈活:下次你的主題升級更新了,你加入的新功能就會丟失掉。相反地,如果你使用子主題,將functions.php文件放進去,再將你想加入的功能寫進這個文件里,那麼這個功能同樣會工作得很好,並且對於父主題以後的升級更新,子主題中加入的功能也不會受到影響。

functions.php文件的結構非常簡單:將PHP起始標籤置於頂部,關閉標籤置於底部,它們之間就寫上你自己的PHP函數。你可以寫得很多,也可以寫得很少,反正按你所需。下面的示例是一個基本的functions.php文件的寫法,作用是將favicon鏈接加入到HTML頁面的head元素裡面。

給主題作者的提示。事實上子主題的functions.php首先載入意味著你的主題的用戶功能可插入——即子主題是可替換的——通過有條件地進行聲明。例如:

用這種方式,子主題可以替換父主題中的一個PHP函數,只需要簡單地對它再次聲明。

模板文件

模板文件 在子主題中的表現和style.css一樣,它們會覆蓋父主題中的相同文件。子主題可以覆蓋任何父主題模板中的文件,只需要創建同名文件就行。(注意:index.php在WordPress3.0及以上版本才能被覆蓋。)

同樣,這項WordPress的功能允許你修改父主題的樣式功能而不用去編輯父主題的文件,並且你的修改能讓你在更新父主題後繼續保留。

下面是一些使用模板文件的子主題的例子:

  • 增加一個父主題沒有提供的模板(例如:網站地圖頁面的模板,或者一單欄頁面,它們在頁面編輯,模板選擇里是可用的)
  • 增加一個比父模板更加具體的模板(見模板級別)。(例如:新加的tag.php模板用於按tag歸檔的文章來代替父主題中通常的archive.php模板。)
  • 替換父主題中的一個模板.(例:使用你自己的home.php來覆蓋父主題中的home.php

其他文件

除了style.css,functions.php,index.php和home.php,子主題可以使用任何正式主題使用的類型的文件,只要文件被正確鏈接。打個比方,你可以使用在樣式表裡或者Javascript文件里鏈接的圖標、圖片,或者從functions.php文件中調用出來的額外PHP文件。

由於網站搬家,部分鏈接失效,如無法下載,請聯繫站長!謝謝支持!
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途!
3. 分享目的僅供大家學習和交流,請不要用於商業用途!
4. 本站資源售價只是贊助,收取費用僅維持本站的日常運營所需!
5. 本站所有資源來源於站長上傳和網路,如有侵權請郵件聯繫站長!
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源,都不包含技術服務請大家諒解!
9. 如果你也有好源碼或者教程,可以到審核區發布,分享有金幣獎勵和額外收入!
10.如果您購買了某個產品,而我們還沒來得及更新,請聯繫站長或留言催更,謝謝理解 !
GG資源網 » wordpress主題製作,從零開始製作WordPress主題(圖文教程)(如何使用子主題功能修改您的WordPress主題?)

發表回復

CAPTCHAis initialing...