thematic主題架構之子主題style.css詳解

如果你還不瞭解thematic，如果你希望能快速敏捷的進行wordpress主題開發，我們強烈建議你看一下《wordpress主題架構之Thematic介紹 》這篇文章，這篇文章能讓你對thematic有個初步的認識。在上一篇文章中我們介紹了《thematic主題架構安裝》，這篇文章開始介紹Thematic主題架構的子主題的style.css樣式表的介紹。

之所以稱之為子主題Child Theme），是因為子主題不能獨立的存在，必須以來Thematic架構而進行開發，這些內容我們在上一篇文章中有過介紹。

現在我們進入到wp-content\themes\thematicsamplechildtheme目錄下，在這裡有個style.css，這個檔案控制了wordpress的樣式，所以這個檔案也是至關重要的。開啟這個檔案顯示出以下CSS樣式：

 

 

  
/*為了更容易的理解以下內容的作用,部分文字的背景在本文編輯時加入了顏色
  
Theme Name:後面的字元就是在wordpress後台看到的主題名稱,你可以把這段字元修改為任何你喜歡的東西,例如Theme Name:My Theme,經過這樣的修改,在後台顯示的主題名稱就變成了My Theme     
  
Theme Name: A Thematic Child Theme  
  
Theme URI: 後面的字元應該是一個網址,也就是發布這個主題的網址.這個選項不是必填的
  
Theme URI:    
  
Description:後面的字元是關於這個主題的描述,也不是必填的.
  
Description: Use this theme to start your Thematic Child Theme development. 
  
Author: 主題的作者 
  
Author: Ian Stewart
  
Author URI:主題作者的首頁,不過感覺有種脫褲子放屁的感覺和Theme URI有重複的感覺
  
Author URI: http://themeshaper.com/
  
Template:這個是關鍵,這後面的字元決定了我們要調用哪個架構裡的內容,這個架構的位置和我們正在開發的主題一定要處於同一級目錄,這些東西我們在上一篇文章中講過,這裡的內容不要進行修改,保持現在這樣就很完美了  
  
Template: thematic
  
Version:這個選項只對作者進行更新記錄有些用處,如果你想分享你開發的主題,這裡還是需要精心的設計的  
  
Version: 1.0
  
Tags:看樣子是個標籤,沒什麼實際的意義  
  
Tags: Thematic  
  
.  
  
Thematic is © Ian Stewart http://themeshaper.com/  
  
.  
  
*/ 
  
/*以下的內容是引用Thematic的CSS樣式表,看看下面的檔案名稱就感覺Thematic提供的CSS很全面也很強大*/
  
/* Reset browser defaults */ 
  
@import url('../thematic/library/styles/reset.css');  
  
 
  
/* Apply basic typography styles */ 
  
@import url('../thematic/library/styles/typography.css');  
  
 
  
/* Apply a basic layout */ 
  
@import url('../thematic/library/layouts/2c-r-fixed.css');  
  
 
  
/* Apply basic image styles */ 
  
@import url('../thematic/library/styles/images.css');  
  
 
  
/* Apply default theme styles and colors */ 
  
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */ 
  
@import url('../thematic/library/styles/default.css');  
  
 
  
/* Prepare theme for plugins */ 
  
@import url('../thematic/library/styles/plugins.css');  
 

 大概看了一下這個styele.css檔案我們就能體會到架構的好處及架構開發人員的良苦用心。

我們在進行子主題開發時，只需要在這個樣式表中設計我們的樣式即可，如果在引入的Thematic中已經存在的選擇符，我們在這個檔案中重新定義一下這個選擇符的樣式即可。

例如我們想改變文章標題的大小，那麼我們可以通過在wp-content\themes\thematicsamplechildtheme/style.css這個檔案最下面加入以下代碼就可以改變文章標題的樣式

 

  
/*     
  
Theme Name: A Thematic Child Theme  
  
Theme URI:   
  
Description: Use this theme to start your Thematic Child Theme development.  
  
Author: Ian Stewart  
  
Author URI: http://themeshaper.com/  
  
Template: thematic  
  
Version: 1.0  
  
Tags: Thematic  
  
.  
  
Thematic is © Ian Stewart http://themeshaper.com/  
  
.  
  
*/ 
  
 
  
/* Reset browser defaults */ 
  
@import url('../thematic/library/styles/reset.css');  
  
 
  
/* Apply basic typography styles */ 
  
@import url('../thematic/library/styles/typography.css');  
  
 
  
/* Apply a basic layout */ 
  
@import url('../thematic/library/layouts/2c-r-fixed.css');  
  
 
  
/* Apply basic image styles */ 
  
@import url('../thematic/library/styles/images.css');  
  
 
  
/* Apply default theme styles and colors */ 
  
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */ 
  
@import url('../thematic/library/styles/default.css');  
  
 
  
/* Prepare theme for plugins */ 
  
@import url('../thematic/library/styles/plugins.css');  
  
 
  
.entry-title {  
  
    font-family:Arial,sans-serif;  
  
    font-size:10px;  
  
    font-weight:bold;  
  
    line-height:26px;  
  
    padding:0 0 7px 0;  
  
} 
 

我們在這個檔案的結尾處增加了

 

  
.entry-title {  
  
    font-family:Arial,sans-serif;  
  
    font-size:26px;  
  
    font-weight:bold;  
  
    line-height:26px;  
  
    padding:0 0 7px 0;  
  
} 
 

就輕鬆的控制了文章標題的樣式，讓我們看看前後的變化

修改前預設的文章標題樣式：

 

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/135P41432-0.jpg" />

經過增加樣式，修改後的效果：

 

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/135P41932-1.jpg" /> 

如果我們想做一個文章列表，或許可以通過CSS來實現，不過這隻是一種思維方式，實際上用函數來實現需要的功能更為可靠

 

 

 

 

  
.entry-content,.entry-meta,.entry-utility{  
  
    display:none;  
  
}  
 

我們在style.css中增加了這樣的一段代碼，重新整理wordpress前台可以看出以下變化

未經修改的樣式

 

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/135P44227-2.jpg" />

修改後的樣式

 

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/135P42T9-3.jpg" />

當然，這隻是很簡單的修改，利用樣式表，我們可以做很多工作，有關CSS的知識我們不作為主要內容來介紹，擷取這方面的知識。

 

本文出自 “WordPress研究院” 部落格，請務必保留此出處http://thematic.blog.51cto.com/1515344/722682