WordPress佈景整體架構說明,每個檔案代表哪一個頁面




很多人在接觸Wordpress一陣子之後就會開始遇到一些問題,比如說只是想修改一些佈景文字或是某些外掛是必需自行添加源碼到檔案中,但不知道應該在哪一個檔案中修改,有些佈景或許真的很複雜,但既然要學習我們就先從WP預設的佈景Default來進行了解,往後在製作或修改佈景時就會快許多,不用再將檔案一個個開啟慢慢搜尋,當然有時作者會將某些源始碼分離到別的檔案這就另當別論囉。

WordPress佈景主要架構:

WP佈景的主要架構檔案的檔名都是固定的,在Wordpress裡已經預設好這些檔名各別的功用,主要架構通常是以下檔案:

header.php:網站頂部及網頁資訊
index.php:整體首頁
single.php:文章內頁
footer.php:網站底部
archive.php:分類頁面
page.php:分頁頁面
sidebar.php:側邊欄
style.css:css語法
404.php:錯誤頁面
comments.php:留言頁面
functions.php:功能函數
screenshot.png:顯示在後台佈景的縮圖

 

WordPress 預設佈景『Default』檔案解析:

在WP預設佈景裡一共有18個檔案加一個圖片資料夾所構成的,通常wp的佈景除了主架構檔案之外,通常會將圖片集中在一個資料夾,而CSS部份也都是統一寫在style.css裡,這樣一來往後在修改時就比較清楚要去改哪邊。wp-theme-01

以一個WP網站來說架構通常如下:

<html 描述>
<header 資訊>
<body>
<content 內容>
<sidebar 側邊欄>
<footer 底部>
</body>
</html>

夾在body之間的才是真正顯示在網頁上的內容,所以我們打開index.php可以看到架構是:

<?php get_header(); ?>
內容
<?php get_sidebar(); ?>
<?php get_footer(); ?>

而get_heaer就是讀取header.php,get_footer則讀取footer.php、Sidebar讀取sidebar.php,這是Wordpress程式預設的,當然如果你懂php語法的話也不一定要照這樣寫,可以用include或是其它方式來呼叫。

而有人一定會問到index.php和single.php差在哪裡,single.php也是讀取頭尾和側邊欄,不過還多了一個留言模板comments.php,在WP預設的結構中,讀取內文時會自動以single.php為內文的模板,所以如果你想要在內文的部份加入funp按鈕或是其它推文按鈕的話,就是修改single.php。如果是想在首頁加個什麼東西就是改index.php, 而比較喜歡和訪客互動的人通常會加裝表情符號則是修改comments.php。

其它最常見的大概就是想要拿掉佈景側邊欄預設的一些雜七雜八的功能,則是到sidebar.php中去做修改,最後就是底部訊息是在footer.php中修改,等這幾個部份修改習慣了,很快就上手了。

接下來丫湯要帶領大家如何從零開始製作一個簡單的佈景,等到基本的佈景寫法完成後,精進css和wp函數就可以製作出更多元的主題,丫湯從css不太了解到第一次製作佈景完成也總共只花了3個月時間不到,而且後來發現製作一個比修改一個快,所以有玩wp的同學們,一定要嘗試看看,在這其中可是會獲得更多不同的樂趣哦。

22 Comments

  1. Kent -  2016 年 04 月 02 日 - 20:17:17 (Your Comment is Under Moderation)

    你好,我是WORDPRESS的初學者,最近在套用佈景主題遇到了一個問題,我有找到一個喜歡的佈景主題,想要多加一個圖片輪播的功能進去首頁裡,首頁至頂倫播我所選的圖片,而其他頁面只要一張代表圖置頂,我該修改哪個檔案,使用甚麼樣的語法呢??

    回覆
  2. Vagrant! -  2015 年 05 月 25 日 - 14:14:37 (Your Comment is Under Moderation)

    […] 0. […]

    回覆
  3. 測試文章掛表 | Devil Puppet -  2014 年 04 月 09 日 - 20:34:47 (Your Comment is Under Moderation)

    […] 先前已經有介紹過Wordpress的組成檔案有哪些,而佈景又有分為2欄式及3欄式,我們就以2欄式的佈景來撰寫這一系列的教學,不論在任何頁面,我們先以下方最基本的格局來編排佈景,這也是最常見的2欄式佈景,往後如果想要再改變更多元化的格局只要等待熟悉整體佈局後,隨時都可以自己再精研修改哦。 […]

    回覆
  4. Jasper -  2014 年 02 月 12 日 - 16:37:08 (Your Comment is Under Moderation)

    請問我想要將資料庫裏面的資料表秀在網頁上,但是都變成空白頁面,不知道是哪裡寫錯了,各位大大可以幫忙嗎??

    id

    name

    age

    <? for ($i=0;$i

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

      程式可能要自行研究一下哦

      回覆
  5. Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置 | etik guitar -  2013 年 11 月 03 日 - 10:08:50 (Your Comment is Under Moderation)

    […] 先前已經有介紹過Wordpress的組成檔案有哪些,而佈景又有分為2欄式及3欄式,我們就以2欄式的佈景來撰寫這一系列的教學,不論在任何頁面,我們先以下方最基本的格局來編排佈景,這也是最常見的2欄式佈景,往後如果想要再改變更多元化的格局只要等待熟悉整體佈局後,隨時都可以自己再精研修改哦。 […]

    回覆
  6. Erin -  2013 年 10 月 31 日 - 13:58:48 (Your Comment is Under Moderation)

    阿湯哥您好~~
    這是我的網站,http://shiba-kily.com/,想請問您一下,為什麼首頁網誌顯示的圖片會變成模糊的呢?因為是第一次自己弄wordpress,所以不知道這一個錯誤,該從哪個方向著手做修改,能否請您指點一下?謝謝:)

    回覆
  7. Triumph -  2011 年 03 月 11 日 - 11:50:46 (Your Comment is Under Moderation)

    阿湯哥您好!想請問一下,我已經有wp的blog了,也順利使用一段時間。
    但是我想要新增分頁(像是關於我、聯絡我們、相簿)等分頁按鈕時候,我就不會用了…google大神也找不到相關文章。是我搜尋錯關鍵字嗎?我搜尋『wordpress 分頁』。

    還是您已有文章教學呢?我有爬文過…似乎找不到。
    懇請您指點一下。感謝

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

      請問你是自己申請wordpress.com還是自己架的?新增網誌分頁後,應該都在外觀→選單裡可以設定

      回覆
  8. Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置 | Wordpress Note -  2010 年 12 月 21 日 - 13:39:21 (Your Comment is Under Moderation)

    [...] 先前已經有介紹過Wordpress的組成檔案有哪些,而佈景又有分為2欄式及3欄式,我們就以2欄式的佈景來撰寫這一系列的教學,不論在任何頁面,我們先以下方最基本的格局來編排佈景,這也是最常見的2欄式佈景,往後如果想要再改變更多元化的格局只要等待熟悉整體佈局後,隨時都可以自己再精研修改哦。 [...]

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

    請問一下阿湯哥
    我想要寫個function給single.php使用
    請問一下你們在寫的時候
    有沒有一個固定的地方(外部檔案)是專門放自己寫的function呢?
    也就是不用專門寫include這行指令就可以引入的公用區塊

    我只想要在"單頁文章顯示"時,去自訂我自己想要的header資訊
    自己額外寫一個類似get_header_single()這種東西
    有沒有好的建議呢,先謝謝您的回覆哦

    回覆
    • blueghost -  2010 年 11 月 04 日 - 14:14:52 (Your Comment is Under Moderation)

      阿湯哥不好意思,我解決了,剛剛try了一下
      原來把自訂函式增入function.php就可以了

      我是新增一個single_header.php檔案
      凡是在single頁面裡面的header部份,就用該函式引入single_header.php
      這樣子可以達到每一頁的head title部份改成post title
      或是其他自訂的東西也可以放在該php檔裡面

      回覆
      • blueghost -  2010 年 11 月 04 日 - 14:52:26 (Your Comment is Under Moderation)

        哈哈,我耍笨了
        原來預設有一個is_single()可以用
        可以在當下判斷是否為single頁面
        這樣的話直接寫在header.php即可

        用法參考:

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

          有解決就好~~^^

  10. Laurence -  2010 年 08 月 10 日 - 00:19:16 (Your Comment is Under Moderation)

    哈囉,不好意思!
    請問一下,我已經有網路空間了,也已經把wordpress上傳上去.如果想自行做佈景主題,我需要學會哪些軟體呢?
    小弟目前會使用Dreamweaver
    懇請回覆

    回覆
    • Scorpio -  2010 年 08 月 10 日 - 16:41:47 (Your Comment is Under Moderation)

      做佈景沒有一定學會哪一個軟體,想要自己做佈景如果要很完整的製作,至少要會HTML+CSS,再加上了解WP結構就可以了

      回覆
  11. Cladue -  2010 年 05 月 13 日 - 14:35:17 (Your Comment is Under Moderation)

    阿湯哥你好,我剛開始接觸wordpress,目前已經弄好一個免費空間跟一個網域,但是我在設定theme時遇到很大的挫折,就是我每次都照著操作做,可是都會出現我無法理解的問題(ex 兩欄突然變成三欄),也不知道如何修正。

    所以想問阿湯哥幾個基礎問題:
    1. 用wordpress會比blogger或是其他一般的部落格還要好嗎?學習的時間成本算一算,有比較好嗎?會有這個疑問是因為看到華文部落格大獎,其實得獎的人使用wordpress的人不多。
    2. 如果真有心想要學wordpress,對於完全不會任何語言的我,要從哪個先學呢?要學PHP嗎?CSS又是什麼呢?是另一種語言還是?
    3. Xoops又是什麼?

    回覆
    • scorpio -  2010 年 05 月 15 日 - 15:18:46 (Your Comment is Under Moderation)

      1.wordpress相較其它部落格來講是自定性高,想怎麼弄就怎麼弄,其實沒有說一定哪一個比較好,只是要看個人需求,華文部落格大獎和用哪一個部落格平台沒有關係,是看內容的。
      2.想學wp要先想好自己想要學到什麼地步,如果沒有要自己改佈景,做佈景,有沒有懂php也無所謂,css搜尋google即可
      3.同css,搜尋就很多了

      回覆
  12. 燃烧器 -  2010 年 04 月 05 日 - 19:06:47 (Your Comment is Under Moderation)

    学习。好东西。

    回覆

Leave A Comment

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

留言前請輸入「YA」

Back to Top