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

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

原始文章

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


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

別一頭栽進程式碼裡面

開始學WordPress的時候,我不太建議找個系列教學影片,然後從頭跟著做到尾,這麼做的後果很可能會變成知其然而不知其所以然,我自己就是這麼一路撞過來的。

首先,你可以先玩玩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。

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

這邊先小小作個補充,上圖的資料表名稱如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。

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

另外,如果你玩過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的圖中,大家可能會發現全部的欄位都是固定的,像是發佈日期、文章標題等,但這會有個問題,如果我想新增額外的資料欄位怎麼辦?

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

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

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

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

get_post_meta(775, '_book_review_name', ture);

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

get_post_meta(ID, '_billing_first_name', ture);


options

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

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

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網頁設計教學 1 – 新手入門概念篇
學程式真的可以提升邏輯思考能力?

Aron

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

發佈留言

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