Berita是一個專為此類需求設計的免費theme。較之于同類產品，它同時為了增加定制化程度還改造了wp系統，使用上更類似插件。只要掌握簡單的html+css，就可以隨意對頁面進行改造。靈活度和拓展性在同類中是佼佼者。

下圖是我昨天使用WP+ berita改造的網站。（這個網站主要是為了方便演示，里面的部分icon和圖片有版權問題，請勿直接使用）

這是berita官網的demo。

 在此處下載我改造過的版本。（修改了css，header.php以及圖片文件）

 此處下載官方原版。官方地址：http://bizzartic.com/bizzthemes/berita/download/

我縮小了原版的header區域高度，在search框上方增加了一組url。添加了一些底欄版塊的樣式。

具體如何使用berita的插件系統，我會在下面詳細說明流程。并放出我的代碼。

————————————————————————————————————————————————————

首先，像安裝所有theme一樣，解壓包放置在wp-content/themes，并在WP左側菜單 Appearance - Themes 里啟用該theme。

接下來看見的界面是這樣的。。?？湛杖缫?。不要失望。還有大量的定制化和手寫代碼工作要做。

在左側菜單的Appearance里可以發現多了一項Berita Theme Options .這就是定制系統。如下圖。我做了粗略的說明。

Berita簡單的工作原理：

一個簡單的企業站是有一部分靜態頁面和一部分動態頁面來共同構成的。諸如about us ,contact us ,service, feature, customs 之類不經常變動的頁面直接寫成靜態html頁面。 news，case 之類會需要更新維護的動態部分使用CMS系統來生成。

Berita 使用WP里的pages 來制作靜態頁面，用posts來制作動態部分。實際上pages和posts都使用同一個編輯器，在編輯代碼時沒有什么差別。

所以下面先來創建一些pages，一些posts和幾個categories，來作為“建筑材料”。

有了材料，我們就可以組建首頁了。

第一步：設置LOGO

在此處設置Logo圖片。如果勾選Show Blog Title+Tagline，則logo圖片不再生效，而直接顯示blog title和tagline的文本。

第二步：首頁導航。

創建完pages后，導航上會直接出現鏈接?？梢栽贐erita Theme Options 去掉你不希望顯示在導航上的page。

在Blog Section Settings 設置一個放在導航上的post 分類。鏈接到Categories頁面。適用于”公司新聞”或者“產品的blog”

這里只允許設置1個。系統建議創建一個Category 名叫 BLOG ,然后把其它所有分類都設為它的子分類。這種做法適合想給blog加個首頁的用戶。

還可以設置在footer區顯示的文字導航

還可以設置多級導航。在edit page的時候，將右側的的Attributes - Parent 設為對應頁面，就可以在導航里自動出現

我在搜索框上方加了幾個about | contact的入口。在Appearance - Editor - header.php里可以修改鏈接和文本。在<div id=”search-spot”>下方加上

<p><a href=”http://clentrust.com/about” title=”About us”>About</a> | <a href=”http://clentrust.com/contact” title=”contact us”>contact</a> | Join</p>

第三步：首頁的滾動推薦區(Front Slider)。

Berita系統中，這部分也是利用Pages來完成的。創建幾個pages,有無title都可以。

然后如下圖中設置page的id及排序。

這個區域的高度可以在Pick Height里設置，頁面中超過該高度的部分不會顯示。

下面的代碼大家可以直接使用：注意要更換img時，要把class 改為class=”fr” （也就是float right的意思，完成圖片的右浮動）

<div class=”slider-post”><a title=”Sample Slider Page”><img class=”fr” title=”1″ src=”http://clentrust.com/wp-content/uploads/2009/11/1.jpg” alt=”1″ width=”350″ height=”250″ /></a>

<div class=”slider-title”>Sample Slider Page</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.<a class=”btn” href=”#”>view more</a></div>

第四步：底欄的3個版塊。

在Appearance-Widgets菜單里，我們可以發現左邊的可選widget窗體多了好幾個以Bizz開頭的。

右側的Current Widget也從單一的Sidebar,增加了6組Footer。

Front Footer: 控制靜態頁面（首頁和pages）底欄的3個版塊區域