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

目錄

    原始文章

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



    專有名詞介紹

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

    主機 (Host)

    cpanel、Plesk

    網域 (Domain)

    網頁檔案架構

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

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

     

    資料庫 (Database, DB)

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

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


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


    CSS

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

    BootStrap


    《WordPress內容訂閱》 – 試閱1

    我最近正在寫一本書,關於WordPress、個人品牌經營,以及如何透過寫作變現。我希望上市前可以先找到一些讀者試閱,並提供意見回饋,您可以透過上面的連結進行試閱。不論你是WordPress的新手或老手,如果你有興趣,都歡迎留下Mail。也歡迎你使用右下角的Facebook Messenger找我聊聊。

    推薦文章

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



    推薦文章

    Aron

    搭載商業思維的資料科學家,工業設計系畢業,曾任職知名品牌行銷企劃。下班後寫機器學習模型,寫網站,也寫文章。興趣是把Side Project當成創業題目來玩,把人生當成遊戲破關。

    facebook telegram

    推薦書單

    故事課2:99%有效的故事行銷,創造品牌力
    故事課2:99%有效的故事行銷,創造品牌力 ⭐⭐⭐⭐⭐
    人生複本
    人生複本 ⭐⭐⭐⭐⭐
    權力遊戲:馬斯克與特斯拉的世紀豪賭
    權力遊戲:馬斯克與特斯拉的世紀豪賭 ⭐⭐⭐
    用生活常識就能看懂財務報表
    用生活常識就能看懂財務報表 ⭐⭐⭐⭐

    1 則留言

    1. 阿朱爸

      試用了WP整個星期,還不如花10分鐘仔細看你這篇文章。非常有用,太感謝了~~

    發佈留言

    • * 表示必填欄位
    • 您填寫的電子郵件不會被公開
    • 請確認您的電子郵件正確無誤,當您的留言收到新的回覆時,我們會寄送通知信件給您

    發佈留言必須填寫的電子郵件地址不會公開。