Wordperss佈景製作教學系列(二)：WordPress佈景header.php製作

繼7月份發佈了第一篇佈景教學後，很抱歉阿湯近一直忙到不可開交，一直找不到時間續寫教學，今天抓到空閒之餘我們就來繼續佈景相關教學，上次準備好了空白的佈景檔案後，這次我們就接著從頂部的「header.php」來著手開始製作佈景，在這一連串的佈景教學裡，會盡量使用最簡單的CSS語法，教大家來「拼湊」佈景，避免太過深奧，看的灰殺殺，重點是要讓大家了解佈景的函數及結構，如果真的有興趣的同學可以自行研習CSS語法，往後就可以更進階的調整佈景。

在開始第二篇之前，尚未研讀第一篇的同學們，請至第一篇文章研讀後接續學習。

而接下來未說明到的CSS語法都請自行對照參考：http://css.1keydata.com/tw/

整體版面設置：

為了更精簡後續的CSS語法，我們可以先在Body(主體)設置一些統一的格式，像是字型、預設字體大小等等。

首先打開先前為各位準備的空白佈景檔案，使用NotePad++右鍵編輯後，加入以下CSS語法，body與*是設置統一div格式，而img的部份是讓圖片不會有週邊線條，如果沒有設置的話，在Firefox下部份圖片都會出現藍色邊框，阿湯都會習慣將部份格式先寫入，針對需要設定的部份再各別寫入。

*{font-family: Arial, sans-serif;font-size:15px;margin:0;padding:0;}

 

body{font-family: Arial, sans-serif;font-size:15px;margin:0;padding:0;}

 

img {border:none;}

設置header範圍：

我們先在header.php設置header的div區塊，比如阿湯是使用

<div id="header">

</div>

然後再去style.css裡定義header的css語法，如果區塊是id要用「#」定義，如果是class要用「.」定義，二者最主要的區別是id是獨有唯一的，而class是可以重複使用。

現在大部份人的螢幕解析度都是大於1024*768，因此我們可以設置版面寬度在大約980px左右，並且讓他置中，CSS語法如下：

#header{width:980px;margin:0 auto;}

加入網站名稱及網站描述：

我們先將網站名稱及網站描述的div區塊定義出來，而且要包在header的區塊裡面，每個頁面會出現的網站名稱及網站描述也都只會出現一次，因此我們也是使用ID來定義即可，但由於網站名稱及描述通常都會使用H標籤來加重，因此就會改成：

<h1 id="webtitle">  </h1>

 

<h2 id="webdesc">   </h2>

在定義CSS語法之前，我們先將WP內建的網站名稱及描述的程式碼加入

網站名稱：

bloginfo('url')表示網站位址，bloginfo('name')為網站名稱。再套入a href的連結語法，名稱就變成超連結囉。

<a title="<?php bloginfo('name'); ?>" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

網站描述：

<?php bloginfo( 'description' ); ?>

到目前為止就會像這樣子，接下來就可以來簡單設置一下網站標題及描述的CSS。



網站名稱及描述，主要要調整的部份為字體大小、字體顏色、以及位置，因此我們做了簡單的CSS設置如下：

h1#webtitle{padding:15px 0 0 20px;float:left;}

 

h1#webtitle a{font-size:36px;color:#555;}

 

h2#webdesc{float:left;font-size:16px;color:#abcaaa;padding:35px 0 0 10px;}

看起來是不是就好多了呢。

加入網站自定義分頁選單：

一樣先定義區塊，再加入選單的程式碼，如下：

<div class="menu"><?php wp_nav_menu(); ?></div>

不過這樣的程式碼只能顯示分頁，在後台還不能使用Wordpress 3.0所獨有的選單功能，我們必需在functions.php裡加入一段程式碼如下：

<?php

 

    register_nav_menus( array(

 

        'wpnote' => __( 'Primary Navigation'),

 

    ) );

 

?>

定義完後在後台就會看到外觀裡多出一個「選單」功能，就可以試試自定義的項目，接下來我們就往下來定義CSS。



menu的CSS我們使用最簡單的方式來定義，並設定位置在header右方偏下，語法如下：

.menu{float:right;padding-top:30px;padding-right:20px;}

 

.menu li{float:left;margin:0 10px;}

 

.menu li a{color:#666;}

另外我們在定義完後，就可以在header加個高度，將header區塊明顯示的設置高度，這樣往下的區塊就會從這個高度再開始堆疊。



到目前為止，就完成了今天的課程，簡單的製作出header.php囉，趕緊動手吧！

Wordperss佈景製作教學系列：

• (一)：WordPress佈景基本格局設置


• (二)：WordPress佈景header.php製作 (本篇)


• (三)：WordPress佈景index.php製作


• (四)：WordPress佈景sidebar.php製作


• (五)：WordPress佈景footer.php製作


• (六)：WordPress佈景single.php製作


• (七)：WordPress佈景分頁導覽製作