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;}

01

設置header範圍:

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

<div id="header">

</div>

02

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

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

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

03

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

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

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

 

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

04

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

網站名稱:

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

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

網站描述:

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

05

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

06

網站名稱及描述,主要要調整的部份為字體大小、字體顏色、以及位置,因此我們做了簡單的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;}

07

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

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

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

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

09

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

<?php

 

    register_nav_menus( array(

 

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

 

    ) );

 

?>

10

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

11

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區塊明顯示的設置高度,這樣往下的區塊就會從這個高度再開始堆疊。

12

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

13

Wordperss佈景製作教學系列:

24 Comments

  1. KS -  2016 年 11 月 21 日 - 12:02:14 (Your Comment is Under Moderation)

    請問一下
    如果想要網頁往下滑時,將選單固定在網頁頂端,
    (像您網頁的 ABOUT, CONTACT)
    是要修改header.php還是functions.php的函數?
    新手發問

    謝謝

    回覆
    • 阿湯 -  2016 年 12 月 10 日 - 00:14:45 (Your Comment is Under Moderation)

      css

      回覆
      • Yuan -  2017 年 08 月 16 日 - 11:38:40 (Your Comment is Under Moderation)

        我也非常想知道怎麼做,將選單固定在網頁頂端

        回覆
        • 阿湯 -  2017 年 08 月 16 日 - 13:53:52 (Your Comment is Under Moderation)

          跟 WP 比較無關,要學 css

  2. Cynthia -  2016 年 03 月 16 日 - 08:32:31 (Your Comment is Under Moderation)

    register_nav_menus( array(
    'wpnote' => __( 'Primary Navigation'),
    ));
    請問這段程式碼是甚麼意思?

    p.s我想要在目錄的地方用城有子目錄的,有什麼好方法嗎?

    謝謝阿湯哥 🙂

    回覆
  3. joanne -  2014 年 04 月 17 日 - 15:03:49 (Your Comment is Under Moderation)

    我目前採用了 wp twenty twelve的主題
    請問要如何在header 的選單列的同一列 左方 加入自己的logo呢?
    像是這樣
    http://www.pure-cafe.com/

    回覆
    • 阿湯 -  2014 年 04 月 18 日 - 21:27:15 (Your Comment is Under Moderation)

      這要自行修改了..可能先研究一下CSS及結構

      回覆
  4. ivy18 -  2014 年 02 月 12 日 - 10:46:48 (Your Comment is Under Moderation)

    ㄚ湯站長您好~
    這篇教學的圖片看不到呢@@"

    回覆
  5. Jay -  2013 年 11 月 01 日 - 00:57:02 (Your Comment is Under Moderation)

    你好:我今天第一天上班,工作是改一個WRODPRESS製作的網站,請問在category裡,有的category進去還有分類,有的分類點進去卻直接是post,請問要怎麼製作分類下的項目點進去後還有分類頁的?

    麻煩你幫忙解答了,非常感謝QQ

    回覆
  6. 爱品牌 -  2011 年 04 月 13 日 - 20:31:38 (Your Comment is Under Moderation)

    感觉wordpress的程序管理着比zblog方便些

    回覆
    • 阿湯 -  2011 年 04 月 19 日 - 15:47:49 (Your Comment is Under Moderation)

      主要更新也比較快~還有那麼多外掛

      回覆
  7. stan -  2011 年 03 月 17 日 - 23:15:34 (Your Comment is Under Moderation)

    小弟初學,有個疑問
    是不是wordpress裡面的檔案都要是.php?(例如header.php)
    之前用CSS寫過網頁,但都是.html
    練習做了你這篇教學,但裡面都是掛php的語法@@
    是否我在header.php裡面寫html與法也可以呢?

    回覆
    • Scorpio -  2011 年 04 月 06 日 - 09:03:15 (Your Comment is Under Moderation)

      css跟php或html是無關的,php裡有些也都會用到html語法

      回覆
  8. 最好的电视帮 -  2011 年 03 月 10 日 - 01:02:10 (Your Comment is Under Moderation)

    文章不错,支持一下

    回覆
  9. 圣女贞德红 -  2011 年 03 月 07 日 - 15:24:18 (Your Comment is Under Moderation)

    我一直都是使用的他人制作的WP主题,从来没有想过要自己设计,因为有阻碍。讲技术类的,最好写上版权,避免被人剽窃。

    回覆
    • Scorpio -  2011 年 03 月 07 日 - 15:58:26 (Your Comment is Under Moderation)

      嗯嗯

      回覆
  10. Event -  2011 年 01 月 30 日 - 22:23:56 (Your Comment is Under Moderation)

    非常期待下一篇,ㄚ湯哥加油!

    回覆
    • Scorpio -  2011 年 02 月 08 日 - 09:04:05 (Your Comment is Under Moderation)

      油都快漏光了...XD

      回覆
  11. starskang -  2011 年 01 月 03 日 - 11:20:28 (Your Comment is Under Moderation)

    先生之用心實惠我良多!
    不知能否有此榮幸,將先生(wordpress筆記本)聯結至未學blog推薦名單?
    新年欣意、平安、吉祥

    回覆
    • Scorpio -  2011 年 01 月 18 日 - 11:02:36 (Your Comment is Under Moderation)

      歡迎連結

      回覆
  12. 阿光 -  2010 年 11 月 28 日 - 13:38:26 (Your Comment is Under Moderation)

    我想看下一篇~ =w=

    回覆
  13. blueghost -  2010 年 11 月 04 日 - 11:22:25 (Your Comment is Under Moderation)

    天啊,阿湯哥
    你真是我心目中的神!!既無私又專業
    對於想要從零打造的WP進階使用者來說真的非常受用
    怎麼都沒有人來鼓勵一下咧!?

    請問,下一篇,就是內文了嗎?

    回覆
    • Scorpio -  2010 年 11 月 06 日 - 14:57:47 (Your Comment is Under Moderation)

      下一篇不是內文~是index.php

      回覆

Leave A Comment

Your email address will not be published. Required fields are marked (required):

留言前請輸入「YA」

Back to Top