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

2021/12/25

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

cpanel、Plesk

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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