search
top

WordPress無痛起步電子書–客製化免費佈景主題

  雖然不建議,但是,因為WordPress是開放式的系統,所有的原始檔案都在你的手上(如果這個WordPress網站是自己在自己的虛擬主機上安裝的話),你當然可以去修改它們所有的內容,包括所有的PHP檔案、CSS檔案、甚至是MySQL資料庫,所有的都可以改。不過,改了之後,如果系統無法正常運作,有時候是會有無法收拾的後果,這一點要特別的注意。也就是,如果你要修改系統裡的任何檔案,那麼就要做好所有資料的備份工作,以及有心理準備,你的網站可能會隨時無法瀏覽,甚至如果不小心讓PHP程式進入無窮迴圈,還要有被主機商暫停你的帳號的心理準備。

  講了這麼多,無非就是要告訴讀者,當你決定要修改系統檔案的時候,一定要小心再小心才行。而且,修改的內容,有可能會在下一次的版本更新中,又要全部重來(因為檔案被新的系統檔案取代了)。也就是說,當你的系統有做了客製化的作業,最好是記錄下來你給了哪些檔案,同時在升級的時候(主系統升級或是佈景主題升級)都要特別留意。

  那,如何客製化你的佈景主題呢?我們先來看一個比較粗暴的改法,就是進入虛擬主機的主控台(別忘了,你是虛擬主機的擁有者,你可以修改你的主機內的所有的檔案),然後找到FileManager(文件管理員或叫檔案管理員),如下所示:

ch0404

  進入安裝WordPress系統的資料夾下,可以看到許多的檔案及資料夾,如下所示:

ch0405

  在這些資料夾中,有些是放置系統檔的,有些則是放置外掛以及佈景主題檔案的。其中,所有的佈景主題檔案以及外掛程式,都是放在wp-content資料夾之下,如下所示:

ch0406

  在此例,我們的佈景主題是contango,所以我們再進去這個資料夾看看:

ch0407

  如果你有興趣的話,每一個檔案都可以打開來看看。不過,初學者的話建議不要這麼做,因為風險實在是太高了。那如何修改這些佈景主題的內容呢?其實在WordPress的控制台中就有可以修改的地方,那就是主題編輯器,如下所示:

css01

  還是再強調一次,每一個佈景主題的功能不同,有些佈景主題有提供功能非常強大的主題控制台可以修改主題中很多的參數,而有些佈景主題則沒有,所以要修改的話,只能從主題編輯器中去做修正。一進入主題編輯器,第一個開啟的檔案就是負責整個網站的外觀顯示的CSS檔案,檔名叫做style.css:

css04

  假設,我們要修改部份的外觀顯示,而如果你對於CSS指令有多少有些瞭解的話,那麼你就可以試著來這裡改改看。不過,在大部份的情形下,你是不需要動到這個檔案的(不得已才來這邊修改)。

  在這一節中,我們就以之前我們選定的Contango佈景主題,來做最簡單的修改,調整這個佈景主題的字型。請注意,修改佈景主題的先後順序是,如果你的佈景主題有提供自己的Options或Panel可以修改,以它們提供的介面為優先,這是最安全的做法,如果沒有,那麼就找找看有沒有「編輯CSS」這個選項,這是第二優先,萬一前兩者都沒有,那麼就只好修改「主題編輯器」中的style.css檔案囉。

  幾乎網路上所有的WordPress佈景主題都是歐美人士開發的,那些英文字體是很好看沒錯,但是一到了我們中文的環境,中文字全部變成新細明體(不過IE自動會切換為微軟正黑體),這是非常破壞排版的一種字體,這就是為什麼作者每次在編輯文章的時候,都一定會加上這一行<p style=”font-family:微軟正黑體”>的原因,目的就是要強制文章的內容段落一定要使用微軟正黑體才行。但是雖然在文章內改成這樣,可是在網站的其它部份卻沒有改變,一樣是新細明體,如下所示:

ch0408

  現在我們的任務,就是要把這個佈景主題中所有的文字,全部改為微軟正黑體。我們先看Contango這個佈景主題的Options選項畫面:

ch0411

  沒有找到任何可以修改CSS的地方,所以就去看看有沒有編輯CSS選項:

ch0410

  顯然是有,所以就點選「編輯CSS」選項,進入建立CSS的畫面,如下所示:

ch0412

  在這裡面已經有清楚的說明,我們在這裡修改的內容,會覆蓋佈景主題的設定。所以,我們就來動手修改所有的常用的標籤,如下所示:

ch0413

  請手動輸入13-15這三行,符號千萬不要用錯了,用錯了會沒有反應。font-family後面是冒號,而行末則是分號。前後使用的是大括號。輸入完畢之後請按儲存,然後我們回到網頁去,就可以看到明顯的改變了:

ch0414

  接下來,我們要把文章標題做反白的設定,給標題一個背景色。要這麼做,首先要知道文章標題用的是什麼標籤,要查詢標籤也很簡單,在文章標題的上方,按下滑鼠右鍵(我們這裡是以Chrome瀏覽器來操作),然後選擇選單中的「檢查元素」功能,如下所示:

ch0415

  從顯示出來的HTML網頁原始碼中可以看出,是使用<h2>標籤來設定文章的標題,如下所示:

ch0416

  所以,我們只要回到剛剛的編輯畫面,然後在之前的CSS程式碼之後再加上專門設定<h2>標籤的CSS指令碼,如下所示:

ch0417

  再回到我們的部落格看一下首頁,你就可以發現,文章的標題背景已經多了背景顏色了,如下所示:

ch0418

  在這一節中,我們簡單的示範了如果對於一些佈景主題的文字格式做一些細部的微調與設定,有興趣的讀者可以自行操作看看,讓你的部落格會有不一樣的質感,更符合你個人的需求。當然,如果你有興趣的話,也不用修改別人的,你也可以自行去設計一個完全屬於自己的佈景主題,這個部份,留待後續的章節再加以說明。

(1483)

發表迴響

top
%d 位部落客按了讚: