iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
2
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 2

[DAY2] Wordpress主題結構大解構,讓你從wordpress的角度看網頁

既然要製作wordpress主題,當然也要對wordpress的結構,一定理解吧,這篇,我們將會為您剖析wordpress主體結構。

你不知道的事

一般部落格都是長這個樣子吧:
一般部落格的樣子
有標題,有選單,有顯示文章的地方,有旁邊的欄位,旁邊的欄位通常都會有一些文章推介、最新文章等等,方便用家。

但有趣的是,我們眼中的網頁,在wordpress世界裡,卻是由一個一個檔案所組成。

在wordpress眼中部落格的樣子

很有趣是不是?我們一起來探索一下wordpress眼中的世界吧/images/emoticon/emoticon37.gif

header.php

每個網頁都必定有標題和選單吧,只要是在頂部的,都是由header.php 這個檔案負責

sidebar.php

是不是在部落格裡,旁邊總是會有文章推介等功能,這些部份是由sidebar.php所負責的
sidebar.php 為每個網頁側旁的地方:通常會有文章推介等功能

loop

在部落格裡,是不是做到文章能夠根據時間等,整齊列出,並會顯示部分文章內容及圖片?這些都要歸功於loop這個功能。不太明白?給個簡單的例子吧,試想像一下你現在進入了一個耳機商店,你跟店員說想要個低價位、重低音的藍牙耳機。那麼這個時候,店員會做甚麼,當然是把符合你要求的,一項項介紹給您,直到有你看上的為止。

所謂的loop,其實就是做著店員一個個地列出符合你要求的產品這個動作。當然,它只有列完所有項目後才會停止吧。

loop,讓你的部落格能夠按著時間、作者等,顯示最新文章

foot.php

常在底部,都會看到這個網頁的copy right 是屬於哪個這樣的文字,這就是由foot.php所負責的了,當然它還能夠放到很多不同的功能進去啦,反正所有頁面的底部,都是由它所負責就是了。

除了上述那些之外,亦有一些是頁面以及後台相關的。

頁面部份

single.php

wordpress是有分文章(post)和頁面(Page)這兩種的內容,由於文章可以設的日期,作者,並做到分類和tag,所以通常用來撰寫博文用的。而single.php,則是控制文章用的,加設發佈時間、作者等,都需要在這裡設定。

single.php,幫忙wordpress訂立在文章頁面的模樣

page.php

頁面其實就是我們一般常看到的網頁頁面,而這個,就是交給Page.php.

這裡比較特別的地方是,他可以針對不同頁面,訂立不同的樣式。

index.php, front-page.php, home.php

他們在wordpress的php檔案裏,是最難分清彼此分別的。這三個,在wordpress裏,都是負責首頁,不過wordpress系統也像人一樣,是會偏心的,有時候他會較看重其中一個,有時候他會較看重另外一個 。

通常在wordpress設定首頁時,都會有兩種設定方法。

wordpress首頁的選擇方案

第一種,就是圖片內最頂那個選項,能夠讓你最新發佈的文章成為網站的首頁

在第一種情況下,wordpress通常會這樣找檔案的,它先會去看****front-page.php,沒有再去看home.php ,最後才看index.php

front-page.php -> home.php -> index.php

第二種,就是圖片內第二個選項,能夠讓網頁內其中一個頁面或文章設定為你的首頁

在第二種情況裏,則要看你是把頁面設定成首頁還是文章設定為首頁了。

假如是頁面,那麼wordpress通常會這樣找檔案的,它會先看front-page.php ,沒有再看有沒有和那個頁面相關的php檔案,我們在這裡先稱為page-related.php,再接著會看頁面的php檔案,即page.php ,最後才到index.php

front-page.php-> page-related.php -> page.php -> index.php

假如是文章呢,這個比較特別的,它並不需要找front-page.php,只需要先找出home.php 假如沒有再查看index.php。

home.php->index.php

題外話:假如你之後會花時間看看別人販售的主題,就會發現一件事,通常大家都不會把front page php 放進去,為什麼呢?因為在wordpress的世界裡,只要用到它,它都是凌駕於一切的,這樣會令首頁的樣式變化大幅下降,而販售的通常都會提供好幾種選擇,這也最終導致front page php 的泛用性變得不高。

Cateory.php , tag.php

在了解他們之前,首先要知道,什麼是tag,什麼是category。

category

假如你到amazon裡面走一趟,你就見到,裡面的貨品是分門別類,例如牙膏會在牙膏這分類裡面出現,牙刷會在牙刷這分類

用亞馬遜的商店分類作例子,了解分類

而這也就是category的作用,能夠幫助您的文章能夠按題材,分門別類。

tag

不過,若在牙膏的頁面,有至少100個貨品在,但你要找一個牙膏是薄荷味,而且是美國出品,那麼就需要tag的幫忙了,在商品世界,tag通常都是要來標註產品特點,這樣在你購買的時候,就能夠透過搜尋你對產品的要求,作出篩選並且顯示結果,而這也就是tag的作用。在網站也是相同原理,透過利用tag,讓家就能夠更簡單找到自己想看的文章。不會在數千個文章裏,如同大海撈針一樣找尋他想看的文章,浪費光陰。

明白了吧?那麼Cateory.php究竟是在幹啥?/images/emoticon/emoticon13.gif

我們回到amazon,剛才不是說了他們會把所有貨物都會分門別類嗎?

Cateory.php,就是按了分類的連結後會出來的頁面

當我們按上圖其中一個分類,例如children dental care ,會發生什麼事?廢話,就是去到children dental care的版面呀。不過你可能不知道,其實這些版面是需要另行製作的,我們需要透過php幫忙,讓php把相同的分類找過來,再顯示給你看。除此之外,我們還要製作一下那個分類頁面是像什麼樣子呢,不然你要看什麼。而這就是Cateory.php。

至於tag.php?

他和Cateory.php極為相似,就只不過他是負責tag的版面。在用ig的時候,不是很常用到#xxx 嗎?當你按一下那些tag的時候,就會到了一個歸納了所有tag的版面,而在wordpress,這個就是tag.php負責的了。

Cateory.php,就是按了tag的連結後會出來的頁面

Archive.php

它可以管Cateory.php負責的頁面,也可以管tag.php負責的頁面,但它在wordpress的世界裡面地位較低,無論什麼事,wordpress都不會優先去看它。

當你前面沒有設定Cateory.php/tag.php,那麼wordpress才會來查看Archive.php,看看你有對於tag或Cateory的頁面,有什麼設定

**Searh.php **
提供搜尋結果的頁面

404.php

當想前往的網頁不存在時,會出現的版面。

Screenshot.png
一般wordpress主題,不是都會有一個縮圖嗎?

wordpress主題縮圖通常由Screenshot.png負責
這就是在這裡設定的了

後台部份

**comment.php **

配搭loop,讓主題有留言功能

functions.php

funtions.php 和插件的功能其實類似,都是為wordpress增加額外功能,不過分別在於funtions.php的改變,是跟著主題走的。它可做到的事很多,例如可以為主題加入翻譯文件,讓用戶自由選擇文章縮略圖,為用戶提供拖放介面,編輯主題,加設其他實用sitebar工具等。

style.css

裝飾主題的主要地方,是wordpress重要的css文件。與此同時,這裡也可以加入作者,主題名稱,以及網站連結。

總結

雖然上面介紹了這麼多項的檔案,但理論上只需要style.css 和index.php 這兩個檔案,wordpress就會知道這是主題,主題就能夠正常運作。不過,這樣的主題當然會很精簡吧。最後,當然上面介紹的也只是wordpress主題檔案的一部分,但這些都是最常用的,也是最常見的。

好了,今天就到這裡吧,明天我們開始談及製作主題時需要知道的知識啊,有興趣記得看,喜歡這篇文章不妨點讚和追蹤,有任何問題也歡迎在底下留言喔。


上一篇
【Day1 】前端?後端?讓你從餐廳輕鬆了解吧
下一篇
【Day3】Html基本結構大分析,讓新手的你也能簡單了解(前篇)
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言