WordPress兒童主題入門

文章撰寫者:
  • WordPress
  • 更新:Jul 27,2013

所以,你想像在WordPress世界中開始你的調整,你已經找到了很多很棒的主題。 你甚至可以找到很多高級主題,其中大部分都非常值得(一些專業外觀和代碼的書)。 你找到的大部分主題都是 很近,但沒有一個是你想要的。 能夠稍微移動菜單欄,替換字體,添加新的文本塊會很好。

好吧,如果這聽起來很熟悉,本指南適合您。 在這裡,我們將深入探討兒童主題世界,您可以在這裡完成任何您想要的任何事情,而不會破壞您購買的令人敬畏的主題,或丟失未來的更新,因為您所做的任何事情都將被取消。

編輯外觀而不修改主題文件

簡而言之,這就是Child主題:無需修改原始文件即可自定義。 除非您明確說明,否則子主題基本上具有相同的功能和主題(父母)的外觀。

它至少包含2文件,style.css和functions.php文件,所有其他文件將從父主題中獲取,因此除非您在子主題目錄中創建新文件,否則您將使用父文件。

我們在這裡有很多可能性,但主要優點是您可以輕鬆地回到原始主題,因此您也可以更新主要主題而不會丟失任何編輯,因為它們是在完全不同的文件夾中完成的。

讓我們親自動手吧

因此,第一步是在/ wp-content / themes /文件夾下創建一個新的子主題目錄。 我們稱之為“Twenty-Child”,讓我們創建基本的styles.css文件:

/ *主題名稱:Twenty Child主題URI:http://www.webrevenue.co描述:立即學習兒童主題作者:Rochester Oliveira作者URI:http://www.webrevenue.co/author/rochester/模板:twentytwelve * / / *調用主題CSS文件* / @import(“../ twentytwelve / style.css”); / *在下面添加你想要的任何東西* /

參數是(除了其他可選參數):

  • 主題名稱:您將在主題選擇屏幕下看到的名稱
  • 主題URI:將在那裡顯示的鏈接
  • 描述:一個簡短的描述,所以你會記住這是什麼
  • 作者:誰創造了兒童主題
  • 作者URI:如果您想鏈接到作者的網站
  • 模板:主要主題文件夾(因此,如果您想使用不同的主題作為主要,只需替換此參數)

添加此代碼後,您將在WP管理>外觀>主題下看到子主題。 您現在可以選擇它,所有更改都將在您的站點中顯示。

子主題編輯101

如果你沒有CSS知識,這可能沒用,對吧? 錯誤! CSS實際上非常簡單,你可以找到很多片段來幫助你。 以下是一些可幫助您進行自定義的簡單提示。

#1安裝Firebug

很多人都喜歡Chrome和Safari(我也是如此!),但對我來說,FireFox更適合開發。 所以,如果你想使用它,我建議你也安裝firebug,這是一個很棒的工具,可以理解當前元素中活躍的所有選擇器。

安裝後,您可以按F12或右鍵單擊頁面中的某個位置並選擇“檢查元素”。 您將看到一個包含當前頁面HTML和CSS的新窗口(以及許多其他有用的選項卡,也許我們稍後可以討論它們)。

在CSS框中,您將從上到下看到應用於當前元素的所有CSS規則,以及頂部中更“特定”的規則。 這很酷,但讓我們看看你能用這些信息做些什麼

#2考慮CSS特異性(或選擇器權重)

每個CSS規則都有其選擇器,屬性和值。 但是當瀏覽器找到影響相同元素的2或更多規則時,它必須選擇哪一個更合適。 我們通常有這個“規則”來理解將要考慮的內容:

  • ! 重要聲明將覆蓋其他任何內容
  • 內聯CSS將覆蓋任何東西,但! 重要規則
  • ID(#header,#footer,#container ...)值得100點
  • 類(.main,.nav,.box)值得10點
  • 標籤(body,div,p,a)值得1點
  • 通用選擇器和偽類(*,:hover,:after)值得0但是如果有“領帶”它們將適用

好的,讓我們看一個例子,以便更好地理解這一點。 使用二十二十二點右鍵單擊您的站點標題,您將看到出現的第一個CSS是:

.site-header {padding:1.71429em 0; 文章,一邊,細節,figcaption,圖,頁腳,標題,hgroup,nav,section {display:block; }

第一個選擇器有10點(因為它是一個類),第二個選擇器每個都有1點(因為逗號只是將不同的選擇器分開),這就是它出現在頂部的原因。 如果你有類似#header div的東西那個選擇器肯定會是第一個出現的選擇器。

為什麼這麼重要?

因為為了編輯主題而不編輯其CSS文件,您需要始終使用具有比主題中定義的規則更多的點的規則。 你可以聰明地使用簡單的代碼。 例如,要覆蓋此屬性:

.site-header {padding:1.71429em 0; }

您可以在子主題CSS中添加它,但不應該:

.site-header {padding 15px 0! 重要; }

因為這是錯誤的代碼,例如,如果你需要在單個頁面中更改它,那麼再次覆蓋會更加困難。 所以你可以簡單地使用它:

body .site-header {padding:15px 0; }

此選擇器具有11點,該點大於原始10,因此將應用此代碼。

#3充分利用這些功能

子function.php文件是唯一將加載到原始文件的文件。 這是WP團隊完成的一個聰明的解決方法,因此您可以保留原始功能並添加自己的功能。 問題是,首先加載子主題函數,主題開發人員必須做這樣的事情以避免在聲明函數時發生衝突:

if(!function_exists('top_menu')){function top_menu(){// cool code here} add_action('wp_head','top_menu'); }

那是因為如果你在子主題文件中定義一個函數,它可以覆蓋原始函數。 如果主題開發人員沒有這樣做,你最終會得到一個醜陋的PHP錯誤(因為同一個函數被創建兩次)。

#4了解一些CSS屬性

您是否知道可以使用CSS隱藏和添加內容? 您需要安裝firebug才能找到正確的選擇器,但您可以通過添加以下代碼來隱藏項目:

body a {display:none}

要添加它更複雜,因為你只能添加小文本,如果你想在價格標籤後面的“On Sale!”文本,例如你可以使用這個代碼:

.price del:在{color:red;之後 內容:“正在銷售!”; }

你覺得呢?

您對本指南有何看法? 你會考慮使用兒童主題嗎? 你已經在使用它嗎? 請使用下面的評論部分告訴我們!

關於羅切斯特奧利維拉

我是來自巴西Itajubá(MG)的網頁設計師和企業家。 我喜歡寫一些關於模糊主題和做一些很酷的東西。

連接: