自學WordPress網頁設計,你先別急著啃教學寫程式

目錄

    原始文章

    自學WordPress網頁設計,你先別急著啃教學寫程式


    原始文章

    自學WordPress網頁設計,你先別急著啃教學寫程式


    WordPress是免費且開源(Open Source)的部落格系統,除了部落格外,許多購物網站、媒體網站、品牌形象網站都是用WordPress架設,官方號稱世界上有1/3的網站都是使用WordPress所架設。因為是開源社群,所以網路上有很多免費的中英文資源,以及高互動率的WordPress Taiwan 正體中文社群,最近實體活動的舉辦頻率也越來越高。如果你原本沒有深厚的程式知識和經驗,但想學習網頁設計,那WordPress絕對是一個值得考慮的選擇。

    別一頭栽進程式碼裡面

    開始學WordPress的時候,我不太建議找個系列教學影片,然後從頭跟著做到尾,因為這樣你很有可能會知其然而不知其所以然,做出和教學影片非常接近的東西,只是改改顏色或文字,卻不知道為什麼HTML是這樣用,CSS的選擇器為什麼是這樣寫。

    首先,你可以先玩玩WordPress內建的功能,看一下文章、頁面的差異是什麼,怎麼新增分類、標籤,或是使用佈景編輯器(Customizer)。另外,還有相當重要的一點,從WordPress 5.0後內建的Gutenberg文字編輯器,都可以先玩玩看。

    再來,你可以開始試著裝外掛或佈景主題,隨便裝隨便玩,弄壞了頂多砍掉重來。

    接著是程式碼的部份。這邊你可以先放下WordPress,到Youtube找個HTML和CSS的教學跟著做,了解什麼是head、body、footer,以及inline style與外部樣式表的差別。

    最後,也是這篇文章的重點,在正式加入php寫WordPress之前,我強烈建議大家先去資料庫玩玩看,可以手動修改資料庫內的文章內容,看一下前台會有什麼變化。

    為什麼進資料庫看看很重要?因為WordPress有很多現成的function可以使用,但如果你不知道原理,很多時候就只能複製貼上。所以如果你行有餘力,最好可以再玩點SQL,知道怎麼Query後,你的WordPress之路會進入另一個新的境界。

    我自己就曾經因為不熟悉WordPress的資料庫,在使用WP_Query卡關了一段時間,懵懂無知的複製貼上了一堆query、sub query,Q到不知道自己在幹嘛。但當你了解SQL的邏輯後,就會知道WP_Query只是把SQL包裝成另一種型式,做的事情一樣是join來join去的。

    一樣,玩壞了重裝就好。

    WordPress預設資料表說明

    以下12張資料表是WordPress內建的資料表,大家都有,不用羨慕別人。
    接下來會跟大家講解每一張資料表的用處,以及一些相關的function。

    這邊先小小作個補充,上圖的資料表名稱如wp_posts,我在下面只會寫posts,因為posts是資料表名稱,wp_則是前綴(Prefix)。Prefix在安裝WordPress的時候可以設定,但初學者不太會去動它。

    有一派理論是說,如果你使用預設的前綴wp_,這樣駭客就會知道你的資料表名稱是什麼,因為大家都一樣!這也是為什麼有些安全性外掛都會有一個選項是修改資料表前綴。

    另外,資料表前綴記錄在wp-config.php中,所以如果你的前綴是wp_,但你把原本的wp_posts刪掉,匯入一張abc_posts,這樣系統是讀不到的喔。

    補充結束,我們進入正題。

    posts

    wp_posts是WordPress裡面最重要的資料表,所有的頁面(Page)、文章(Post)、媒體(Attachment)以及自訂文章類型(Custom Post Type)都會儲存在這張資料表中,差別就只是他們是不同的Post Type。

    另外,如果你玩過WooCommerce,其實WooCommerce中的訂單(Order)和產品(Product)、可變商品(Variable)也都是存在Post中,這個邏輯超級重要,代表你可以用操作文章的方式來操作訂單和產品,如用get_the_ID取得產品的ID,用get_the_title取得產品名稱,或用WP_Query和loop列出產品。

    WooCommerce物件較複雜的部份,是包含了一般文章不會有的屬性,而這些屬性可能是儲存在WooCommerce獨立的資料表中,如產品屬性和運送方式。這也是為什麼WooCommerce會有一些特殊的function,因為它會把這些額外的資料統整起來,然後一起吐給你。但如前面所說,如果你要取得的內容沒那麼複雜的話,用一般操作文章的方式既簡單又優雅。

    還有很酷的一點,WordPress可以透過post_status將文章設定成公開(open)或私密(closed),這個屬性其實也是WooCommerce的訂單狀態,如處理中(wc-processing)或已完成(wc-completed)。

    另外,WordPress不少多語系(Multilingual)外掛,我主要是用WPML,也用過一些Polylang,但我猜邏輯都是差不多的。它們的模式就是將文章複製,有幾個語系就複製幾份。

    postmeta

    在上面wp_posts的圖中,大家可能會發現全部的欄位都是固定的,像是發佈日期、文章標題等,但這會有個問題,如果我想新增額外的資料欄位怎麼辦?這時候就會用到postmeta。

    meta的意思是某個東西的相關資訊,許多WordPress原始系統沒有的資料內容,都是以meta的方式儲存在資料庫。除了post有postmeta外,下面還會提到term有termmeta,comment有commentmeta。

    舉例來說,我想為我的文章新增個人筆記,只在後台的文章編輯頁面才看得到,像這種資料就會存在wp_postmeta中。個人筆記確實也是我寫在後台的功能之一,所以我每一篇文章都有滿滿的小抄啊。

    如上圖,這張資料表的欄位就只有四個,這裡的post_id指的是這筆資料是跟哪一篇post作連結,而meta_key就是這筆資料的名稱。畫面中的部份是我用meta來記錄書籍的出版資料,並透過Schema作SEO。這是題外話了。

    舉個例子,如果我要從上面的資料表取得書名,可以用get_post_meta

    get_post_meta(775, '_book_review_name', true);

    另外再提一下WooCommerce,WooCommerce訂單中的許多資料也都是以meta的型式儲存,如訂購人名字,所以當然也可以用get_post_meta取得。

    get_post_meta(ID, '_billing_first_name', true);

    options

    options資料表包含了佈景主題的設定,「外觀 > 自訂(Customizer)」中的設定,以及選單的內容。

    terms

    terms是個很重要的物件,它和下面的termmeta、term_taxonomy、term_relationships是同一系列的東西。

    不管是文章的分類(category),或是WooCommerce的商品分類(product_cat),這些都是terms。所以如果你想取得文章的所有分類,你可以用get_categories,也可以用get_terms,兩種方式都會到這張資料表裡面抓資料。

    termmeta

    term_taxonomy

    term_relationships

    users

    故名思義,這個資料表裡面放的是所有的帳號資料。
    如果哪天你忘了自己的密碼,又離奇地收不到密碼重置信,你可以登入資料庫,手動改掉密碼欄位user_pass。但必須注意一點,WordPress的密碼採用MD5加密,所以你要將密碼丟到像是MD5 Hash Generator這樣的轉換器,然後將新密碼貼回資料庫。

    另外,如果你管理的WordPress站有很多使用者,且有人反應他的會員界面異常。身為一個專業站長,我們一定不能跟對方說「可以借我帳號密碼測試看看嗎」。這個時候你可以先備份對方原本的user_pass,並貼上自己設定的新密碼登入測試,完成後再貼回原始密碼。


    usermeta

    和post及term一樣,每個user都會有一些額外的資料,如電話、地址,這也是客製化會員資料界面的常見解法。

    取得usermeta的方式很簡單,和postmeta類似,只不過把post_id換成是user_id而已。方法如下:

    get_user_meta($user_id, $key, $single);

    comments

    comments是WordPress預設的留言格式,和post很像,但是是兩個完全不一樣的東西。在WooCommerce的訂單中有「訂單備註」,它也是以comments的方式儲存在資料庫中。

    另外,許多網站會安裝Facebook留言外掛。不管你是直接埋FB官方提供的程式碼,或是透過其他外掛取得這個功能,只要使用者必須用臉書帳號登入才能留言,我統稱為Facebook留言外掛。

    透過Facebook外掛留言的內容會儲存在Facebook的資料庫,而不是自己的網站資料庫中。我認為這對網站的長久經營而言不是好事,畢竟網友的留言也是網站很重要的資產,當哪天Facebook沒落時,有新的社群媒體崛起時,勢必要壯士斷腕,那倒不如一開始就切割清楚。

    commentmeta

    links

    基本上這個資料表是前朝遺物,根據WordPress Codex的說法,「The wp_links holds information related to the links entered into the Links feature of WordPress. (This feature has been deprecated, but can be re-enabled with the Links Manager plugin.)」。

    簡單來說,不要理它。

    WordPress 官方文件-資料庫說明

    WordPress在官方文件〈Database Description〉中,針對資料庫預設的資料表作了滿詳細的說明,大家可以參考看看。


    在資料庫中新增資料表

    上面介紹的方式,都是透過WordPress提供的函式取得資料。
    事實上,我們也可以在資料庫中自行新增資料表,並透過SQL取出資料,開啟更多的客製化潛能。詳情請參考WordPress Codex的wpdb

    我正在寫一本書

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

    推薦文章

    用人話寫的WordPress網頁設計教學 1 – 新手入門概念篇
    學程式真的可以提升邏輯思考能力?



    推薦文章

    Aron

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

    facebook telegram

    發佈留言

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

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