用人話寫的WordPress網頁設計教學 1 - 新手入門概念篇
×

用人話寫的WordPress網頁設計教學 2 – 基本名詞介紹


專有名詞介紹

雖然學WordPress不一定要寫程式,但寫程式會讓你的網站更上一層樓。
雖然網頁上的資料很多,但很多文章常常沒頭沒尾就一堆專有名詞霹靂啪啦。
這很正常,就像面對面和工程師說話一樣。
從這裡開始,我會解釋在網頁設計中常用的專有名詞,用人話說。

主機 (Host)

cpanel、Plesk

網域 (Domain)

網頁檔案架構

不管多厲害的網頁,它的檔案型式實際上都像是我們電腦中的資料夾,每個資料夾中有不同的檔案,包含程式檔、圖片檔等,需要的時候再引用這些檔案。
這個觀念很重要,等一下會用到。

下圖是我在自己的電腦上架設的網站內容。

用人話寫的WordPress網頁設計教學 2 - 基本名詞介紹

資料庫 (Database, DB)

經常聽到的資料庫,實際模樣如下圖,把它當成Excel就很好理解,差別只在於Excel檔案是存在自己的電腦,網站的資料庫檔案則存在主機。
許多網站使用的資料庫系統為mySQL,WordPress也是。SQL的唸法等同於Sequel。

下圖中,左邊列出全部的表格,右邊則顯示每個表格中的內容,我們可以透過PHP把資料庫的內容顯示在網站上。至於PHP是什麼?我們接著往下看。

用人話寫的WordPress網頁設計教學 2 - 基本名詞介紹


靜態網頁(Static Site)及動態網頁(Dynamic Site)

這裡的動態網頁不是指畫面中有動畫的網頁,而是網頁能夠從資料庫抓資料,達成在同一頁面上顯示不同內容的目的;相反,靜態網頁不能連線到資料庫,程式碼寫什麼就顯示什麼。

舉例來說,我有一個頁面顯示第一篇文章的介紹:

這是我的第1篇WordPress教學文章,標題是「沒有程式碼的基礎觀念解說」。

在靜態網頁中,如果想在另一個頁面顯示第二篇文章的介紹,就要把原本的檔案複製一份,並將內容改掉:

這是我的第2篇WordPress教學文章,標題是「還沒有想到標題」。

這樣的缺點顯示易見,如果我有100篇文章,就要在資料夾中新增100個檔案,超級麻煩,也會造成檔案管理上的困擾。

在動態網頁中,通常會先在資料庫中建立一張表格,表格的兩個欄位可能為id和title,代表文章的編號和標題,並將資料庫的內容顯示在網頁上:

這是我的第{id}篇WordPress教學文章,標題是「{title}」。

這樣一來,對於同一類型的頁面,我們只需要新增一個檔案,就可以顯示不同文章的標題了。通常這個檔案叫作範本(Template)。

在很久很久以前,網頁都是使用靜態網頁模式架設,所以在規劃階段,就必須確定網頁的數量及內容。在動態網頁出現後,對於部落格、購物網站來說是一大福音,只要一個頁面就可以不停地重複使用。

這代表靜態網頁完全被淘汰了嗎?也不盡然。
動態網頁的優勢是同一個檔案可以「重複」使用,但某些情況下,如設計公司的行銷活動頁面時,因為每次活動的頁面都不一樣,因此,使用動態網頁反而不太明智,這時就可以使用靜態網頁的方式製作。

靜態網頁使用的程式是HTML,動態網頁的主流則是使用PHP+HTML,也就是下面要介紹的部份。

另外,WordPress使用的是動態網頁模式,且安裝的時候會自動將資料庫中的基本表格、欄位設定好,不太需要手動進行操作,對初學者來說非常友善。


HTML 與 PHP

HTML是構成網頁內容的語法。

如果網站是一棟房子,HTML像是房子的鋼骨結構、牆壁與樓層隔板;下面會講到的CSS是房子的裝潢,讓房子看起來更美觀,可以符合電腦版和手機版;JS則是可以互動的物件,像是電梯、門等物品。
這三者是現代網頁的三個基本元件。

在架設靜態網頁時,鋼骨結構會全部使用HTML,動態網頁則使用HTML+PHP;完成主架構後,再加入CSS和JS。

必須注意一點,動態網頁在撰寫時使用的PHP,會全部轉換成HTML後才在畫面中顯示。HTML的樣子如下圖,在瀏覽器中按「右鍵 > 檢查(Inspect)」就可以看到。

用人話寫的WordPress網頁設計教學 2 - 基本名詞介紹

另外,在查WordPress的資料時,經常會查到一些PHP的資訊,因為WordPress本身是用PHP寫的,所以大部份的PHP語法在WordPress中都可以使用。
簡單來說,PHP是一種程式語言,WordPress則是用這個程式語言打造的網頁系統。


CSS

選擇器(Selector)、開發者工具(DevTool)

BootStrap

推薦文章

Aron

以前用MIX這個名字在網路打滾,後來改為Aron。工業設計系畢業,曾任職知名品牌行銷企劃,做點設計,寫文案也寫網站;目前擔任零售業數據分析師。最近開始玩截拳道、單輪車和Python量化投資。