難解的 CSS 排版：認識對齊(下)

日期：2019.09.05
留言數：0
標籤：css 語法 iT邦幫忙鐵人賽教學觀念

本文為參加第 11 屆「iT 邦幫忙鐵人賽」系列文章，會優先在部落格發文，再貼到 iT 邦幫忙～。
如果文章對您有幫助，歡迎到 iT 邦幫忙給我一個訂閱與肯定 ^___^。
好久沒寫文了，也希望自己可以堅持 30 天，加油（握拳

昨天講了text-align以及vertical-align這兩個常見的對齊語法，但他們可以對齊的範圍都比較小，偏向對齊元件，而非版面。
如果要讓版面置中，或是再更複雜的一些排版，我們還可以有更多選擇。

版面置中的好幫手: margin

這個應該很多人都用到爛掉了，但有的朋友可能不太懂原理，在此簡單介紹一下。

我們在切一個大版面時，如果要讓他左右置中，現在普遍最快的方法是使用以下語法：

.container {
  width: 1200px;
  margin: 0 auto;
}

然後版面就可以置中了。

margin: 0 auto; 是 margin: 0 auto 0 auto; 的簡寫，表示上下邊界為 0 ，左右為auto表示自己均分。margin會去判斷.container的寬度以及螢幕的寬度，相減之後除以二就是左右邊界的數值了。

至於該如何得到.container的寬度呢？就是必須要在 CSS 寫上寬度，如果沒寫寬度是不會有效果的。

margin大到版面，小到元件，只要有指定元素的寬度，幾乎都可以用這個方法左右置中。

.row {
  width: 500px; 
  margin: 0 auto; 
  &::after { 
    content: ''; 
    display: table; 
    clear: both; }
} 

.row__container { 
  width: 50%; 
  float: left; 
} 

.col { 
  width: 60%; 
  margin: 0 auto; 
}

更多的 margin

☞ 圖片一樣可以使用margin: 0 auto;置中
☞ margin可以讓版面置中，但沒辦法讓文字置中唷。

讓 padding 幫你實現簡單的垂直置中

如果說margin是負責版面，那padding就是負責裡面的元素了。

我們可以利用padding將 Box Model 往外推的特性做到置中的效果，只要上下數值一樣就可以囉。

.row {
  padding: 4em 0;
  width: 500px;
  text-align: center;
}

選單文字垂直置中的首選 line-height

▼ 假設今天要製作一個類似這樣的選單，文字需要垂直置中，同時又有限定元素的高度。

因為有限定高度，所以我們沒辦法用padding去推 Box Model；另外一個原因是，如果選單再複雜一點，padding通常都另有用途。

所以假設今天需求是：

有限定元素高度
文字需垂直置中
文字非常單純只有一行

在上述的情況下，可以直接用line-height解決，只要讓line-height跟height高度相同即可

.menu__item { 
  height: 30px; 
  line-height: 30px; 
}

用 position 讓你的版面水平垂直置中

用position的解法，我之前在部落格有寫過了，所以容我直接跳過～
有興趣的朋友可以直接參考這一篇文章：用 css 讓區塊水平垂直置中

用 transform 做出與 position 類似的置中效果

transform與position類似，都是直接將 Box Model 推移到特定的位置上，達到置中的效果。

使用position可以再利用margin去推算要定位的位置，但前提是你必須要知道元素的寬跟高，才有辦法回推。但使用position加transform就不用特別設定寬跟高，非常的方便

.card {
  position: relative;
}
.card__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

難解的 CSS 排版：認識對齊(上)

日期：2019.09.04
留言數：0
標籤：css 語法 iT邦幫忙鐵人賽教學觀念

我一直很想寫這系列的文章，一來是 CSS 博大精深，有太多難解的觀念在裡頭。二來是常常要切很多重複卻又複雜的版型，所以想要系統化這些資訊，供日後快速查閱。

因此，這系列算是我自己的筆記，也算是經驗分享吧！也希望能幫到各位 m(_ _)m

廢話不多說，直接上重點 XD。

(閱讀全文…)

Bootstrap 4 的 Grid 應用介紹

日期：2017.08.14
留言數：0
標籤：bootstrap CSS3 Flexbox Grid System RWD 教學

Bootstrap 4 從去年釋出 BETA 版後，到現在幾乎所有功能都齊全了，官方也釋出了詳細的 BETA 網站與文件，感覺 Bootstrap 4 距離正式定案的時間也不久遠啦 😀

為什麼 Bootstrap 4 的出現如此引人注目呢？因為之前 V2 到 V3 只是「增強」，但 V3 到 V4 卻是「改革」，Bootstrap 4 用的技巧與 CSS 語法都有大幅度的革新，所以用慣 Bootstrap 3 的朋友勢必要重新學習(就像我XDDD)。以我為例，我自己比較常用 Bootstrap 的 Grid System (網格系統)，因此這次的筆記也會以 Grid System 為主，介紹一下 V3 與 V4 之間的差異。

1. Bootstrap 4 的一個重大改變，就是使用了 CSS 的 Flexbox 重新排版定義 Grid，關於 Flexbox 的介紹，可以參考我之前的文章：CSS Flexbox 介紹與解析。
2. 承上，因為 IE9 並不支援 Flexbox，所以如有需要使用 IE9，就請繼續使用 Bootstrap V3 版本。

斷點(Breakpoint)的調整

Bootstrap 3 的斷點與前綴詞

	Extra Small	Small	Medium	Large
斷點範圍	0 ~ 767 px	768 ~ 991 px	992 ~ 1199 px	1200 px 以上
前綴詞	col-xs	col-sm	col-md	col-lg

Bootstrap 4 修改如下

	Extra Small	Small	Medium	Large	Extra Large
斷點範圍	0 ~ 575 px	576 ~ 767 px	768 ~ 991 px	992 ~ 1199 px	1200 px 以上
前綴詞	col-	col-sm	col-md	col-lg	col-xl

☞ 差異

新增了一個576px作為最小的斷點
Extra Small 由col-xs-*改為col-*
新增了 Extra Large，前綴詞為col-xl-*

可以自動的平均分配欄寬

以往使用 Bootstrap 3 時，每一個col-md-*後面一定要帶數字，數字表示欄寬。但 Bootstrap 4 因為使用了 CSS Flexbox，所以不輸入數字 = 平均分配欄寬。

以下來個簡易範例：

▼ Bootstrap 3
需要輸入「數字」才能知道寬度

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

▼ Bootstrap 4
不需輸入數字就能根據 col 的數量分配欄寬

<div class="row">
  <div class="col-md"></div>
  <div class="col-md"></div>
  <div class="col-md"></div>
</div>

▼ Bootstrap 4
也可以只設定其中一個欄寬，剩下的平均分配

<div class="row">
  <div class="col-md"></div>
  <div class="col-md-5"></div>
  <div class="col-md"></div>
</div>

☞ 範例

See the Pen rzGjNE by MUKi (@mukiwu) on CodePen.

動態調整欄寬

除了能平均分配欄寬外，還能根據文字寬度，動態的調整欄寬。這是 Bootstrap 4 的新語法，使用的是col-md-auto。

<div class="col-md">A</div>
  <div class="col-md-auto">Hello World / Nice to Meet you</div>
<div class="col-md">C</div>

也可以把我們之前熟悉的各種斷點給加進來，做出更多的螢幕寬度變化：

<div class="row">
  <div class="col col-lg-2">
    A
  </div>
  <div class="col-12 col-lg-auto">
    Hello World
  </div>
  <div class="col col-lg-5">
    C
  </div>
</div>

☞ 範例

See the Pen MvEJJd by MUKi (@mukiwu) on CodePen.

讓 Column 換行

安插一個空的 DIV，CLASS 名稱為w-100，就可以讓 Column 強制換行唷～

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
  <div class="col">E</div>
  <div class="w-100"></div>
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

☞ 範例

See the Pen prWRaX by MUKi (@mukiwu) on CodePen.

垂直對齊

前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。

align-items-start：置頂
align-items-center：置中
align-items-end：置底

▼ 直接在row裡面寫上align-items-*的 CLASS 即可。

<div class="row align-items-start">
  <div class="col">AA</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

<div class="row align-items-center">
  <div class="col">A</div>
  <div class="col">BB</div>
  <div class="col">C</div>
</div>
<div class="row align-items-end">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">CC</div>
</div>

▼ 另外我們也可以改用align-self-*在col裡面單獨針對 Column 做對齊的動作

align-self-start：置頂
align-self-center：置中
align-self-end：置底

<div class="row">
  <div class="col align-self-start">A</div>
  <div class="col align-self-center">B</div>
  <div class="col align-self-end">C</div>
</div>

透過範例可以發現 A, B, C 三個 column 不會相互影響，A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例，輸入多行文字後，他真的就是從中間平均的往上下展開唷！

☞ 範例

See the Pen NvadMo by MUKi (@mukiwu) on CodePen.

水平對齊

有垂直對齊就一定會有水平對齊(廢話XD)，所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

justify-content-start：靠左對齊
justify-content-center：置中對齊
justify-content-end：靠右對齊
justify-content-around：分散對齊(含左右)
justify-content-between：分散對齊(不含左右)

<div class="row justify-content-start">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-center">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-end">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-around">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-between">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

☞ 範例

See the Pen MvEpYy by MUKi (@mukiwu) on CodePen.

移除 gutter

Bootstrap 的row跟column分別有使用margin以及padding當作 gutter，讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求，我們希望 column 是緊密黏在一起的，所以 V4 新增了no-gutters這個 class，可以讓我們移除 gutter

<div class="row no-gutters">
  <div class="col">A</div>
  <div class="col">B</div>
</div>

直接將no-gutters放在row就可以囉，因為語法跟效果很直覺，所以就不上 codepen 範例惹(~~絕對不是因為懶~~)

Column 排序

以前如果要將排序會用pull跟push在那邊推來推去的，現在一樣因為使用了 Flexbox 的關係，在使用上也更方便了！

flex-unordered：不排序
flex-first：第一個
flex-last：最後一個

<div class="row">
  <div class="col flex-unordered">
    我應該是第一個，但我不排序
  </div>
  <div class="col flex-last">
    我應該是第二個，但我會排在最後
  </div>
  <div class="col flex-first">
    我應該是第三個，但我會排在最前面
  </div>
</div>

☞ 範例

See the Pen wqrJEa by MUKi (@mukiwu) on CodePen.

這邊要特別注意的是，如果使用 flex 排序，寬度縮小時也會持續這個排序模式，column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%，還是可以使用 V3 的push以及pull，不過在 V4 的寫法有一點調整，將前綴位置放到後面(原本是col-md-push-*)：

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

☞ 補充

offset也一樣將前綴往後放。

Bootstrap 4 的 Grid 介紹就到此告一段落囉，有一些功能我沒有特別提到，例如 Wrapping、Nested，是因為跟 V3 相比沒有太大的改變，就不額外寫出來了。

Bootstrap 的功能非常強大，是一個堪稱超完整的 Framework，但我自己只有使用它的 Grid System，所以就只介紹 Grid 在 V3 與 V4 之間的差異囉 ^Q^。以後如果再開 RWD 課程，也會以 V4 為主要規劃設計新的範例與課程，也請大家敬請期待 😀

那麼對文章有任何不懂的地方，也歡迎留言告訴我唷，謝謝 ^_^

CSS Flexbox 介紹與解析

日期：2016.06.27
留言數：0
標籤：css 語法 CSS3 flex RWD 原創教學觀念

老實說我到現在都還沒開始用 flex 做網站，最大的原因就是 IE 相容問題，不過這也不能當作不學習的原因，畢竟這行就是要不斷的學習新知識😂，而且剛好在某次前端課程中有同學問我能否介紹 flex，所以想想，乾脆就寫一篇文章吧！不僅是幫自己做個筆記，以後也可以當作課堂上的補充講義～。

▼ flex 相容一覽圖 / caniuse.com

什麼是 Flexbox

簡單來說，Flexbox 是一種 CSS 的排版語法，就跟我們以往用的 position, float, display…一樣，只是 Flexbox 是 CSS3 的新語法，所以才有瀏覽器相容的問題。

Flexbox 相關屬性與值

我覺得 Flexbox 較難上手的原因，就是他的屬性跟值太多了，不像 float 很單純的只有 left, right, none 這三種，但當然好處就是彈性非常大，幾乎很多複雜的排版都可以靠 Flexbox 輕鬆解決。

在這邊也參考了 W3C 的網站，列出所有 flexbox 的屬性跟值給大家參考，至於詳細的介紹還是可以看 W3C 關於 Flexbox 的文件喔！

屬性	屬性介紹	可用的值	預設值	影響
flex-flow	將 flex-direction 以及 flex-wrap 合併寫在一起	flex-direction ｜flex-wrap		flex containers
flex-direction	排列方向	row	row	flex containers
		row-reverse
		column
		column-reverse
flex-wrap	換行	nowrap	nowrap	flex containers
		wrap
		wrap-resverse
order	調整元素排列的順序	<整數>	0
flex	將 flex-grow、flex-shrink 以及 flex-basis 合併寫在一起	flex-grow｜flex-shrink｜flex-basis		flex items
flex-grow		<數字>	0	flex items
flex-shrink		<數字>	1	flex items
flex-basis		<寬度>	auto	flex items
justify-content	水平對齊設定	flex-start	flex-start	flex containers
		flex-end
		center
		space-between
		space-around
align-items	垂直對齊 (元素單行排列)	flex-start	stretch	flex containers
		flex-end
		center
		baseline
		stretch
align-self		flex-start	auto	flex items
		flex-end
		center
		baseline
		strech
align-content	垂直對齊 (元素排列超過兩行以上)	flex-start	stretch	多行 flex containers
		flex-end
		center
		space-between
		space-around
		stretch

常用的 Flexbox 排版語法

要使用 flex 前，必須先在該容器指定：

div {
  display: flex;
}

而特別有趣的是，就連行內元素都可以用 flex 唷：

div {
  display: inline-flex;
}

接下來，我們用一小段 HTML 語法表示 Flexbox 的架構：

<div class="flex-container">
  <div class="flex-item">內容 A</div>
  <div class="flex-item">內容 B</div>
  <div class="flex-item">內容 C</div>
  <div class="flex-item">內容 D</div>
</div>

承上，這個很常見的巢狀排版恰恰能表達flex的兩大主角：flex-container以及flex-item，前者表示的是一個巨大的容器(container)，後者則是各個獨立的項目(item)。

flex的屬性，有的會影響的是容器，有的則影響項目。如果不太清楚屬性影響的是哪一塊，可以回到前一頁看表格的「影響」欄位做參考。

基本的 Flexbox 排版

flex-direction

我們先介紹最簡單的左右版面，以往直接用float: left解決，那麼換成flex的話可以這麼寫：

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Flexbox 是 Box Model 的一種表現形式，以前我們用display去改變每個元素的 Box Model，在此也是一樣，我們要在flex-container先設定display: flex，確保自己以及裡面的子元素 Box Model 都會轉成flex的設定。
flex-direction表示 flex 的水平排列方向，第一頁的 Flexbox 屬性表上有提到，flex-direction必須放在 flex container 的父層架構下，而不是 flex item 這個子層，所以這句話寫在.flex-container裡，如果你把它放在.flex-item會發現沒作用。(再次提醒：對照屬性表會更加清楚該放在哪裡喔。)

最後我們來把flex-direction所有的值都寫一遍吧！

See the Pen QEGbMm by MUKi (@mukiwu) on CodePen.

在值裡面，用到的row跟column，一個是水平排列、一個是垂直排列；而reverse是反轉的意思，稍微對照一下上面的範例應該不難了解唷！

flex-wrap

接下來再加一個新的語法flex-wrap，這個同樣要放在.flex-container裡面，wrap是斷行的意思，可以利用這個語法決定是否要換行。

設定nowrap表示即使有多少區塊，也必須都放在同一行內(會自動分配寬度)。設定wrap則是會依照內容或寬度自動換行。

See the Pen oLYjqG by MUKi (@mukiwu) on CodePen.

flex是三個屬性的合併縮寫：flex-grow, flex-shrink, flex-basis，可以看作是 FLexbox 的核心設定。註：flex 的這些屬性影響的是 flex items。

flex-grow

我們都知道，區塊預設的寬度是元素內容的寬度，如下圖所示 ▼

如果想要調整寬度，一般可以用width設定，但也能用flex-grow唷！flex-grow的預設值為 0，表示寬度就是元素內容的寬。而從 1開始，數字愈大，占的寬度比例也會愈大。

.grow1 { flex-grow: 2;}
.grow2 { flex-grow: 2;}
.grow3 { flex-grow: 1;}
.grow4 { flex-grow: 0;}

範例圖如下所示 ▼

flex-shrink

flex-shrink跟flex-grow相反，是表示當父元素寬度空間不足時，子元素壓縮的比例。預設值為 1，但設為 0 同樣表示不壓縮，數字愈大，被壓縮的幅度就愈大。

.shrink1 { width: 50%; flex-shrink: 2;}
.shrink2 { width: 50%; flex-shrink: 2;}
.shrink3 { width: 50%; flex-shrink: 1;}
.shrink4 { width: 50%; flex-shrink: 0;}

範例圖如下所示 ▼

flex-basis

可以在flex-basis設定寬度或高度，設定好後會自動分配該區塊的寬度或高度。

.basis1 { flex-basis: 200px;}
.basis2 { flex-basis: 600px;}

假設父元素寬度是500px，我在裡面設了兩個子元素分別為200px以及600px，他會依照比例分別給予子元素寬度，如圖所示 ▼

以上這三個語法因為有比較多的彈性，所以可以用在製作 RWD 網站上。

flex

最後，再次提到flex這個語法，是用來合併以上三個屬性，規格為：

flex: flex-grow｜flex-shrink｜flex-basis

flex 還有兩個更簡短的縮寫：

/* 以下兩個相同 */
.flex {
  flex: auto
  flex: 1 1 auto;
}

/* 以下兩個相同 */
.flex {
  flex: none;
  flex: 0 0 auto;
}

以上關於flex的範例程式碼，請參考：http://codepen.io/mukiwu/pen/qNRJPv

Flexbox 還有一些屬性沒有提到，因為~~我有點累了~~，所以暫時解說到這邊。但我覺得剩下的都是比較簡單而且很容易上手的語法，所以等待以後有空補完 XDD。

Flex 版面實例介紹

版面垂直置中

幾千萬年以來傷透腦筋的垂直置中，超級適合用flex解的喔！在這邊我們會用到兩個屬性：

justify-content
align-items

而這兩個屬性我前面通通都、沒、說(炸)，但真的很簡單，所以直接上程式碼啦！

.flex-container {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

範例請參考 codepen：

動態三欄式

除了用flex-grow動態調整他們的大小外，還用了order調整版面的順序

不同的圖片 / 區塊排列

這種排版變化比較多一點，但不知道怎麼稱呼它，所以直接看範例比較清楚 XDDD。

一樣是大量運用到flex屬性做調整，在這個例子中，flex-basis尤其為最重要，當然還有一些對齊的語法也不能少。以下是有用到的語法：

flex-wrap
flex-basis
justify-content

以上三種排版，是我目前想到可能比較有趣，或是比較實際的例子 XD，如果有特別想要了解某些版面換成flex該怎麼寫的話，也可以留言給我唷！

inline element 與 padding 的二三事

日期：2016.03.31
留言數：3
標籤：css 語法原創教學觀念

前兩天在台大上課時，剛好提到 display 的各種形態，然後很嗨森的告訴同學，如果你設定任一元素(element)為 display: inline 時，padding-top 以及 padding-bottom 是不會有作用的唷 😆 😆 😆

結果！！就在我邊說邊示範的這個 moment 時！！！！！

他居然 work 惹 🙀 🙀 🙀 🙀 🙀 🙀

當下整個尷尬的無以復加 XD，所以回家找了一些針對 inline element 的說明，然後順便糾正一下自己的觀念 T皿T

OK，以上內心小劇場 + 碎碎唸完畢，讓我們開始認真吸收一下觀念吧～

我在 Head First HTML with CSS & XHTML 找到了一段針對 inline element 的說明，這段內容敘述非常清楚，可以瞬間導正自己的觀念，所以分享給大家：

You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements
Head First HTML with CSS & XHTML

簡單來說，inline element 的確可以使用 padding-top 以及 padding-bottom的語法，但 padding 不會推擠周圍的 inline elements，反而會覆蓋其他的 inline elements。

不太懂也沒關係，我們就直接來看範例囉～

以 padding-bottom 為例

第一段是以p作範例(display:block)，第二段是span(dispaly:inline)。在同樣使用padding-bottom: 1em的設定下，來看一下他們有什麼差別吧！

就我們認知的 HTML element 都是以「堆疊」模式排列而成，所以透過範例可以發現，正常情況我們設定元素的下間距時，他下方的所有元素會因此被往下推擠；但如果將元素的型態改為 inline 時，他下方的元素不會被推擠，反而會讓下方的元素把自己給蓋住。

以 padding-top 為例

我們再來看一個更明顯的例子，現在我把 padding-bottom 改為 padding-top ，看看會發生什麼事情。

如同剛剛說的，元素型態為 inline 時，設定padding-top並不會讓自己的往下推移，而是會覆蓋掉前面的元素。

你可以試著把我在 HTML 寫的這段語法加上 class 變成<span class="padding">

那麼你會發現，同樣的他不會讓自己往下推移，而是會蓋掉前面的元素：

也因此，雖然 inline elements 可以吃到 padding-top 以及 padding-bottom 的設定，但卻不會讓其他元素跟著被推移，造成排版上的一些困擾。我想這就是大家不常使用的原因，導致我只記得結論就是不用 top 跟 bottom XDDD。

如果你之前上過我的課，或是跟我一樣有這種觀念的朋友，希望閱讀這篇文章後可以一起把這個觀念修正過來唷😁

SASS, LESS 退散，原生 CSS 可以使用變數啦！

日期：2016.03.07
留言數：2
標籤：css 語法 CSS3 技巧教學觀念變數

今天要跟大家分享一個新的 CSS 語法：變數。而且這個變數是原生的 CSS 就有的語法，不是其他預處理器例如 SASS, LESS… 的功能喔！

一想到以後可以使用 CSS 寫變數就超級興奮的😊～，但正因為這是 CSS 的新功能，想當然要考慮的第一個問題就是「瀏覽器的相容度」，透過 Can I Use 查詢後，~~可以發現支援度真是滿江紅啊 XDDD (紅色＝不支援，綠色＝支援)~~ 2019.08 更新：現在各大瀏覽器對 CSS 變數的支援度已經慢慢在增加囉！

但因為這功能實在是太實用了，即使支援度不好，我還是想介紹給各位，希望未來所有瀏覽器都能支援，就可以輕鬆地運用在網站上囉！Chrome 跟 Firefox 都有支援 CSS 變數的語法，歡迎使用這兩個瀏覽器觀看效果。

CSS 變數的基本語法

如同我們使用各種預處理器設定變數般，首先要命名變數與設定值，接下來在適當的地方呼叫該變數。

以下是一段簡單的範例語法：

:root {
  --main-color: #369;
}

h1 {
  color: var(--main-color);
}

把握幾個原則：

在:root命名變數，我們也可以在任意的選擇器內命名變數，後面會提到該怎麼寫，以及怎麼使用。
--main-color是變數名字，#369是該變數的值。
承上，變數命名的規則為：開頭必須是兩個破折號 --。
在要呼叫變數的選擇器裡面，使用var()呼叫該變數，可以把它想成 function。
變數的大小寫是兩個不同的變數，例：--main-color和--Main-Color是不同的變數喔。

變數的命名規則看起來有點麻煩，有一些開發者曾經回饋：「為什麼不用$foo呢？」，而針對這個討論，他們的回應是，不排除這個需求，未來可能會允許使用$作為命名規則，相關的閱讀可以參考這篇文章。

CSS 變數繼承觀念

前面有提到，除了可以將變數寫在:root外，還能寫在任意的選擇器，以下是範例語法：

/* 變數命名 */
:root { --bg-color: #369;}
h3    { --bg-color: #d9444a;}
#main { --bg-color: #94a437;}

/* 呼叫變數 */
* {
  background: var(--bg-color);
}

我的背景顏色是藍色，繼承的是 root 元素的設定
<h3>我的背景顏色是紅色，繼承的是 h3 的設定</h3>
<div id="main">我的背景顏色是綠色，繼承的是 #main 的設定</div>

也可以從 CodePen 看到實際效果 (記得確認瀏覽器有支援喔)

我們在通用選擇器( * )使用--bg-color語法，照理說，所有的 HTML 都會套用:root的設定。

但同時，我們又特別為h3以及#main設定了不同的背景顏色，因此，當我們的 HTML 有使用這兩個標籤時，他就會自動套用這兩個標籤設定的變數顏色囉！

也因此我們了解到，變數可以因應不同的狀況而更改它的數值 (這不就是變數的精髓嗎 XDDD)，我們還能利用這種特性設計 RWD 網站：

:root {
  --bg-color: #369;
}

section {
  background: var(--bg-color);
}

/* 視窗寬度在 0 ~ 600px 時，--bg-color 變數會改為紅色 */
@media (min-width: 600px) {
  :root {
    --bg-color: #d9444a;
  }
}

▼ 變數的另外一個特性：可以互相 assign 來 assign 去，也能在 CSS 變數中實現喔！

:root {
  --bg-color: #369;
  --font-color: var(--bg-color);
}

這時候呼叫--font-color，他的顏色就是 #369

var() function 結構

var()的完整結構如下：

var() = var( <custom-property-name> [, <declaration-value> ]? )

cutsom-property-name 是我們呼叫的變數，例如前面使用的--bg-color。我們也能在 declaration-value 設定其他的值，避免自定義的屬性無效時產生錯誤。如果寫成邏輯方程式大概就是：

if (custom-property-name) {
  --bg-color
} else {
  declaration-value
}

這種寫法有一種高檔的名詞叫做 fallback，如果你有機會閱讀 W3C 官方文件，會發現他們用 fallback 稱呼該處理。

在declaration-value要用「逗號」去分隔多個數值，例如var(--bg-color, #369, black);。但如果要處理例如margin或padding的 fallback 時，請注意他們原本的值就沒有逗號，所以不需加逗號，例：var(--padding, 10px 20px);

如用 CSS 語法表示 fallback 應用，請看以下範例：

#main {
  --bg-color: red;
}

#main .header {
  background: var(--header-color, blue);
  /* 並沒有 --header-color 這個變數，所以會顯示他的 fallback color: 藍色 */
}

#main .text {
  background: var(--bg-color, black);
  /* 有 --bg-color 這個變數，所以會顯示紅色 */
}

至於這個東西可以怎麼用呢？我暫時也不太懂 XDDD，不過看了一些 CSS Variables 的介紹後，有人提到可以用來作為元件的樣式設定，例如用 fallback 設定元件初始樣式，變數則是當作元件的 hook。

以下做了一個簡單的範例給大家參考，希望可以給大家更多的靈感囉：

template-default {
  --bg-color: #d9444a;
}

p {
  background: var(--bg-color, #369);
}

<template-default>
我會繼承 template-default 的 --bg-color 設定，所以背景是紅色
</template-default>


因為我不在 tempalte-default 裡面，找不到 --bg-color 這個變數，所以會顯示 fallback 的藍色

常見的 var() 錯誤寫法

使用 var() 時，有一些要特別注意的地方

1. var() 的位置

var() 只能設定值，不能作為屬性的變數，以下是錯誤寫法：

.main {
  --side: margin-top;
  var(--side): 20px;
}

2. var() 不能直接合併單位

.main {
  --gap: 20;
  margin-top: var(--gap)px;
}

上述寫法並不等於marign-top: 20px，如果我們要這樣設定，必須改用calc()幫我們計算數值。

利用 calc() 計算數值

以前面提到的 margin-top: 20px 為例子，我們可以改寫為：

.main {
  --gap: 20;
  /* 運算式的前後必須要空白，不然會出錯喔 */
  margin-top: calc(var(--gap) * 1px);
}

calc()是個很好用的計算工具，更多的介紹可以參考 W3C 的 calc() 文件

利用 JavaScript 讀寫 CSS 變數

最後，我們也可以使用 JS 來讀寫 CSS 變數的設定。

讀取：getPropertyValue()
寫入：setProperty()

請直接看以下語法與範例介紹：

var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--bg-primary-color')).trim();

/* 讀取背景顏色 */
document.getElementById("color-name").innerHTML=value;

/* 修改背景顏色 */
document.documentElement.style.setProperty('--bg-primary-color', '#369');

使用 Codepen 觀看效果時，記得把第 8 行的註解打開以看不同的效果：

已經很習慣使用預處理器的朋友，可能會對 CSS 變數有所疑問：「我用 SASS 或 LESS 不就好了嗎？」

當然，這些預處理器推出的原意，就是為了補足 CSS 本身的不足，如果今天原生的 CSS 提供了變數的功能，我還是很樂意去了解以及使用，如果一味使用預處理器而不去管原生的 CSS 推出了什麼改變，不覺得有點本末倒置嗎 XDDD。

另外在 W3C 文件裡，也有提到 CSS 變數其實有很多變化，例如以下這段語法：

--gap: if(x > 5) this.width = 10;

雖然我不知道這段語法該怎麼運用，但是從文件看來，這段語法應該是正確且可以跟 JavaScript 有所連結的。這樣看來 CSS 變數真的可以延伸出很多有趣的東西，這些改變都令我非常期待 XD。

也能參考 Google Developers 有趣的一段敘述

While this would not be useful as a variable, as it would be invalid in any normal property, it could potentially be read and acted upon with JavaScript at runtime. This means custom properties have the potential to unlock all kinds of interesting techniques not currently possible with today’s CSS preprocessors. So if you’re thinking 「yawn I have SASS so who cares…」 then take a second look! These are not the variables you’re used to working with.
CSS Variables: Why Should You Care?

以上，希望大家會喜歡這次的介紹囉，有任何問題都可以留言給我 ❤️

參考資料：

讓 WordPress 的 RSS Feed 也能讀到自訂的文章類型 (post type)

日期：2016.01.22
留言數：0
標籤：wordpress WordPress 修改技巧教學

如果你有使用 WordPress 的自訂文章類型 (custom post type)，應該會發現預設的 RSS Feed 是讀不到該內容的，那是因為 WordPress 的 RSS，預設只會讀到「post type = post」的文章，也就是我們後台系統的「文章」。

因此我們可以在 functions.php 加入一些語法，就可以讓 RSS Feed 讀到自訂文章類型：

<?php
function myfeed_request($qv) {
  if (isset($qv['feed']))
    $qv['post_type'] = get_post_types();
  return $qv;
}
add_filter('request', 'myfeed_request');
?>

以上這段語法會顯示所有的自訂文章類型，但如果你不希望顯示所有文章類型的話，只要將語法稍作修改即可：

<?php
function myfeed_request($qv) {
  if (isset($qv['feed']) && !isset($qv['post_type']))
	$qv['post_type'] = array('post', 'course', 'movies');
  return $qv;
}
add_filter('request', 'myfeed_request');
?>

在第 4 行修改你要放到 RSS Feed 的 post type 即可，如此一來你就可以自由決定要出現與消失的文章類型囉！

✏️ 以上語法參考來源：http://www.wpbeginner.com/

用 Bootstrap 3 製作高度相同的 div (column)

日期：2016.01.18
留言數：0
標籤：css 語法技巧教學

排版網頁時，常常會碰到的一個需求，就是希望左右欄位的高度可以相同。而讓欄位的高度相同已經不是什麼新奇的事了，所以今天要分享的是，當你使用 Bootstrap Grid 製作網頁時，該如何將這個效果套用在 Bootstrap 裡。

會想分享這樣的內容，也是因為之前在上 RWD 入門與實戰時，有同學問過這樣的問題。所以就寫成一篇文章分享給大家囉！

使用 flex 讓 column 高度相同

第一個最簡單的方法，就是使用 display: flex 讓所有欄位的高度相同。但 flex 有一個令人哀傷的事實：他不支援 IE9 以下的瀏覽器。但我想 flex 一定是未來排版的主流，所以一樣分享給大家。

你可以從範例語法的 Before 以及 After 看到前後差異。

而我只有在row裡面加上一行語法，即可做到該效果：

.row {
  display: flex;
}

正常情況下，Bootstrap 一行最多容納 12 columns，但如果使用display: flex，同一個row的col-*總數超過了 12，他們一樣會維持在同一行內，寬度也會自動均分。這是除了瀏覽器相容外，還需要特別注意的一件事。

使用 table 讓 column 高度相同

古早以前如果希望欄位的高度相同，用table不失為一個好方法，雖然現在我們不再使用表格做排版，但依然可以使用display: table將所有標籤的型態作轉換。

此外display: table的瀏覽器支援度很好，雖然語法較多，但是考量到 IE9 以下的兼容的話，推薦大家使用該方法。

Bootstrap 有 row 以及 column 的設定，所以在結構上很適合加入display: table，不需要再給予多餘的 DIV：

.row {
  display: table;
  width: 100%;
}

.row [class^=col-] {
  display: table-cell;
  float: none;
}

☞ 補充

使用display: table之後，寬度會等於行內元素(inline elements)，因此記得要加上width: 100%;讓寬度等於父層的寬度。
記得在col-*將所有浮動給移除(float: none)，不然display: table不會有作用。

以上兩種方法好記又方便，如果搭配 Bootstrap，也不需要增加額外的 DIV 標籤，希望大家會喜歡囉～

jQuery Ajax API 實作以及 Template 介紹

日期：2015.12.24
留言數：0
標籤：ajax jQuery template 原創教學觀念

前陣子在上前端基礎課，有教大家怎麼利用 jQuery AJAX 實現簡單的 CRUD 效果，後來覺得這對初學者來說，應該是個需要反覆思考才能融會貫通的小門檻，剛好最近也有學生對此表示不懂😱，所以就借這篇文章簡單跟大家介紹囉！

我會用在課堂上的教材跟大家拆解語法，但為了避免大家練習時灌爆我的 API，所以我不會透露 API 網址，一律用變數 ajax_url 代替。

什麼是 API

用程式介面（英語：Application Programming Interface，簡稱：API），又稱為應用編程介面，就是軟體系統不同組成部分銜接的約定。
維基百科

對網站開發人員而言，API 就是前後端溝通的一個接口。後端可以透過各種方法操作資料庫裡的資料；但對前端來說，我們該怎麼操作資料呢？我們可以利用後端人員提供的 API(通常是一串網址)去操作資料，只要有了 API，我們就可以用 JavaScript 搭配 AJAX 實現 CRUD 。

如果還是霧煞煞也沒關係，接下來會用程式碼讓大家加深印象，原理神馬的，可以透過實作去了解 😊。

什麼是 CRUD

CRUD 是四個單字的簡稱，就像我們在學 CSS 時一定要會使用選擇器(selector)，而後端在學操作資料庫時，一定要先會 CRUD。
這四個單字分別意思為：

C：Create (新建資料)
R：Read (讀取資料)
U：Update (更新資料)
D：Delete (刪除資料)

實作留言板的 CRUD

接下來要跟大家分享的是，如何透過前端實作一個留言板，這個留言板要有 CRUD 的功能，就是我們常說的：新增、刪除、修改留言。

那因為新增留言是我這期學生的期末考題，所以等他們考完試，我會再把新增留言的程式碼放上來，現在我們先來學習刪除、修改，以及顯示留言吧😋

在此先用 Bootstrap 做了一個非常簡單的留言版，你可以在 HTML 裡面看到要放留言的區塊，只有一行 <div class="result"></div> ，其他什麼都沒有。

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
	  <form class="form">
		<input type="text" id="inputName" class="form-control" placeholder="姓名" required="" autofocus="" />
		<input type="email" id="inputEmail" class="form-control" placeholder="電子郵件" required="" autofocus="" />
		<input type="text" id="inputUrl" class="form-control" placeholder="http://" autofocus="" />
		<input type="text" id="inputTitle" class="form-control" placeholder="文章標題" required="" autofocus="" />
		<textarea id="Message" style="width: 100%;" rows="10"></textarea>
		<button class="btn btn-lg btn-primary btn-block" type="submit">送出</button>
	  </form>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h3>留言內容</h3>
      <div class="result"></div>
    </div>
  </div>
</div>

在沒有樣板輔助的情況下，我們需要透過 jQuery 語法將 HTML 的字串組出來，因此所有的留言資料、排版，都必須寫在 jQuery 檔案裡。

顯示留言(Read)

顯示留言的邏輯大概是這樣：

讀取網頁
透過 jQuery 語法 (AJAX) 得知現在要撈出該 API 裡的資料
使用 GET 方法撈出資料
將撈出來的資料，利用 jQuery 改變 DOM 之後，秀在網頁上

轉換成語法則是：

$.ajax({
  url: ajax_url,
  type: 'GET',
  error: function(){
    console.log('error');
  },
  success: function(e){
    $(".result").append(="
      '<div class="full-msg" data-id="'+ e[i]._id +'">' +
      '姓名：<div class="name">'+ e[i].username +'</div>' +
      '<div class="update">更新留言</div><div class="del">刪除留言</div></div>' +
      '網站：<div class="url">'+ e[i].url +'</div>' +
      '電子郵件：<div class="email">'+ e[i].email +'</div>' +
      '標題：<div class="title">'+ e[i].title +'</div>' +
      '<div class="message">'+ e[i]. message +'</div>' +
      '</div>'"
    );
  };
});

$.ajax是 jQuery 包裝後的函式，因此他的格式都是固定的，我們只要把對應的資料寫進去，如果 url 跟 type(method) 正確，基本上資料都讀得到。

最後再透過 success 偵測資料成功被讀取後，應該要做的事情：
因此留言的資料非常多，所以我們要利用迴圈，將e物件的所有資料顯示出來，並透過append()把資料一筆一筆的接在後面。

組字串時把握兩個原則：

當變數碰到 html 時，需要用+串接
單引號用來包變數與 jQuery 語法，雙引號用來包 HTML 語法

組字串需要耐心跟細心，如果還是看不太懂他們的規則，我會建議先實作再透過開發者工具看 render 出來的 HTML 程式碼，相互對照會更加清楚他們的邏輯。

更新留言(Update)

更新留言的邏輯比較繁瑣一些，如果寫成文字大致如下：

點擊更新留言的按鈕
該篇留言會自動變成可編輯的表單，而且表單預設值是原本留言的內容
輸入完要更新的資料後，按下送出，表單會變回更新後的資料
如果按下取消，表單會變成原始資料，不會更新

因為有點複雜，所以我錄了一個 GIF 表示整個流程

轉為程式碼，也可以感受到他比 READ 還複雜許多，而且重點是這個程式碼我還沒寫完哈哈哈 XDDDD

$(".result").on('click', '.update', function(){
	var fullMsg = $(this).closest('.full-msg'),
	    updateID = fullMsg.data('id'),
	    name = fullMsg.find('.name').text(),
	    url = fullMsg.find('.url').text(),
	    email = fullMsg.find('.email').text(),
	    title = fullMsg.find('.title').text(),
	    message = fullMsg.find('.message').text();
	var updateTemplate = 
		'<div>姓名：<input type="text" class="name" value="'+ name +'" required=""></div>' +
		'<div>網站：<input type="text" class="url" value="'+ url +'"></div>' +
		'<div>電子郵件：<input type="text" class="email" value="'+ email +'" required=""></div>' +
		'<div>標題：<input type="text" class="title" value="'+ title +'" required=""></div>' +
		'<div>內文：<textarea class="message" required="">'+ message +'</textarea></div>' +
		'<div><span class="submit">送出</span><span class="cancel">取消</span></div>';
	fullMsg.html(updateTemplate);	
		
	$(".submit").on('click', function(){
		updateID = fullMsg.data('id');
		name = fullMsg.find('.name').val();
		url = fullMsg.find('.url').val();
		email = fullMsg.find('.email').val();
		title = fullMsg.find('.title').val();
		message = fullMsg.find('.message').val();
			
		$.ajax({
			url: ajax_url + updateID,
			type: 'PUT',
			data: {
				"title": title,
				"username": name,
				"message": message,
				"url": url,
				"email": email,
			},
			success: function(e) {
				console.log(e)
			}
		})
	});
	$(".cancel").on('click', function(){
		fullMsg.html()
	})
});

雖然沒有寫完，但是的確可以成功將留言更新，但更新後的樣式如果要用組字串的方式來寫，會太過於繁瑣，所以我後來採用 jQuery Template 實作(後面會再提到如何用 Template 改寫)。

但我們還是要簡單說一下這段程式碼，之後再把樣板加進來會比較好懂。

上述程式碼 highlight 的第 3 ~ 8 行(以下簡稱 A 段)，以及 19 ~ 24 行(以下簡稱 B 段)，乍看之下其實很類似，但兩個功能大不相同。

A 段代表的是上述邏輯的第二句話：留言會自動變成可編輯的表單，而且表單預設值是原本留言的內容。所以當我點下「更新按鈕」的時候，會利用 A 段將作者、標題、網址 … 等資料存到變數裡，這邊利用的是 DOM 的 text() 方法，接下來在updateTemplate 裡塞入表單元件，可以用 value="" 讓元件預設出現內容，所以在裡面塞入了各個變數。

而 B 段表示的，是當我更新完留言送出之後，會傳至 API 的實際內容。以name變數為例：name = fullMsg.find('.name').val();，將該表單元件的值存了起來，如果要得到元件的值，可以用 val() 方法。

最後再利用 $.ajax 加上 put 這個 type(method)，將資料一個一個的傳回去。你可以利用 sucess 印出結果，如果傳送的物件是更新後的結果，表示程式正確。

如果參考我上面寫的文字流程，成功之後應該要讓畫面回到「顯示留言」的樣子，但是如果用這種方法寫，程式碼可能會又臭又長，所以才想用 template 改寫，因此斷尾了 XDDD。但大家有興趣，也可以試著想一下該怎麼把這個功能寫出來唷 🙂

刪除留言(Delete)

相較於更新，刪除真的是簡單許多，我們的 API 設計，是只要得到該留言的 ID 值，就能透過 ID 將留言刪除。

但根據我的 HTML 結構，我是將 ID 寫在最外面，刪除留言則是放在裡面：

<div class="full-msg" data-id="12345">
  <div>姓名：
    <div class="name">MUKI</div>
    <div class="update">更新留言</div>
    <div class="del">刪除留言</div>
  </div>
  <div>網站：https://muki.tw/wordpress</div>
  <div>電子郵件：muki@gmail.com</div>
  <div>標題：我是標題</div>
  <div>我是文章內容</div>
</div>

所以點擊「刪除留言」之後，該如何利用 jQuery 找到這一篇文章的 ID 呢？我使用了closest()方法，以「刪除留言」為中心點，找到離他最近的.full-msg。

$(".result").on('click', '.del', function(){
	var fullMsg = $(this).closest('.full-msg'),
	    delID = fullMsg.data('id');
	$.ajax({
		url: ajax_url + delID,
		type: 'DELETE',
		error: function() {
			console.log('error');
		},
		success: function(e){
			console.log(e);
			fullMsg.fadeOut(800, function(){
				$(this).html('留言已刪除').fadeIn(800);
			});
		}
	});
})

如果成功刪除留言，必須要有一些簡單的回饋，讓使用者知道留言被刪除了 (就和更新留言是一樣的道理)。
只不過刪除比較簡單，我直接讓這一篇留言 fadeOut()，再秀出「留言已刪除」的字即可。

以上就是簡單的 CRUD 操作，希望對大家有所幫助。雖然語法看上去有點複雜，但其實觀念只有兩個，一是利用$.ajax操作 API，二是利用 jQuery 操作 DOM 讓使用者感受到回饋。

有時間會再更新如何使用樣板。我會以「更新留言」為例子，將他改寫成 template 的樣式，因為我們要的功能非常單純，所以我使用的是 jQuery Template，有興趣的朋友可以先閱讀他的官方文件。

WooCommerce 系列教學 (3/3)：串接第三方金流

日期：2015.10.12
留言數：9
標籤：woocommerce wordpress 原創教學系列教學

WooCommerce 系列教學，預計分為三篇，請參考以下目錄：

安裝與使用
商品上架流程
串接第三方金流(以 AllPay 為例)(本篇)

WooCommerce 是很熱門的購物車系統，所以有很多的第三方金流服務，都有提供相關的 plugin 或 API 讓我們可以與 WooCommere 完整串接，今天要介紹的這個第三方金流服務是歐付寶，老實說我已經忘記選擇它的原因，但用了 4 個月還算不錯，而且安裝非常方便，客服回應也很快，所以分享給各位。

▼ 這是歐付寶手續費的明細，詳細的內容可到金流收費總覽觀看

大家應該有發現超商付款的手續費非常高，所以我並沒有使用超商付款的功能，我自己的網路商店也只有用信用卡與 ATM/ WebATM。
歐付寶的好處是提供了很多種付款方式，但你不一定全部都要啟用，可以視自己的需求啟用即可。

安裝歐付寶

接下來要跟大家說怎麼安裝歐付寶囉。

▼ 請先在首頁的「下載專區」找到「套裝購物車模組」

▼ 找到第四個 WordPress WooCommerce 專用的外掛，下載後照著一般安裝外掛的流程，裝到你自己的 WordPress 網站。
⚠ 檔案裡面有一份 allPay 金流外掛套件安裝導引(WooCommerce).docx 也寫得很清楚，建議大家可以先行閱讀再安裝。

▼ 啟用後，在後台選單：「WooCommerce」→「設定」→「結帳」的分頁裡，會多了一個歐付寶，你可以在此設定想要啟用的付款方式，以及一些說明內容。

那麼要如何設定，讓顧客的錢進入你的口袋呢？接下來這個是最重要的地方，就是金鑰設定。

▼ 承上個步驟，將頁面稍微往下捲一些，會到「特店編號」、「金鑰」與「向量」的設定，只要將這邊設定完成，在商店的任何付款資料，歐付寶都能透過這個設定匯入到你的歐付寶帳戶。

WordPress 後台先到此暫停，讓我們回到歐付寶的網站去申請會員吧！

申請歐付寶會員，取得金鑰設定

請先註冊成為歐付寶的會員，一開始選擇個人會員就可以了，個人跟商務目前最大的差別，是收款額度的不同。

雖然很想把步驟寫清楚，但是歐付寶會員綁定手機號碼，我沒有其他的手機號碼可以測試截圖了，所以在此跟各位說聲抱歉 😢。但是歐付寶的網站步驟很清楚，註冊與申請是沒啥困難的。

註冊成為會員之後，可以去申請你的金鑰，申請金鑰的網址請點我。假設你已申請完畢，可以登入廠商後台取得你的特店編號、金鑰等設定。

▼ 這些設定可以在廠商後台的「系統開發管理」➡️「系統介接設定」找到，不管是 AllinOne 還是一般金流，數字都是一樣的，所以只要選擇一組填寫到 WooCommerce 即可。

▼ 在尚未正式開店前，可以先啟用測試模式，試試看你的購物流程是否暢通

以上就是 WooCommerce 串接歐付寶的簡單步驟，我個人覺得，歐付寶已經把付款做得很簡單了，而且所有資料都可以在廠商後台搜尋到，有任何不懂得也可以先到他的客服中心爬文，這邊就不再贅述了。

以後如果你覺得外掛的功能不足，也可以使用歐付寶提供的 API，讓你的購物網站擁有更多功能。但我這幾篇文章是針對「個人小額經營者」，相信不是所有人都會串接 API，而如果您們是「公司行號」，相信您們的團隊一定有工程師駐點，對 API 一定已駕輕就熟不需要我多說。所以在此我不會特別介紹 API 串接，但如果您有興趣，可以直接到歐付寶的官網下載各種串接規格。

如果有任何問題也歡迎在底下留言，謝謝各位！

WooCommerce 系列教學 (2/3)：商品上架流程

日期：2015.09.24
留言數：5
標籤：woocommerce wordpress 教學系列教學

WooCommerce 系列教學，預計分為三篇，請參考以下目錄：

從後台的「商品」→「新增商品」就可以添加各式各樣的商品了。如果你已經習慣 WordPress 的作業模式，你會很開心地發現商品跟文章的格式幾乎有九成像，不管是標題、分類、標籤，商品(特色)圖片，都可以很快地進入狀況！

所以在此我只會特別說明商品資料(Product Data) 的部分，這個也是大家在設定的時候，比較容易碰到的問題。

小補充：商品簡短說明

「新增商品」的最下面有一個「商品簡短說明」，在這邊輸入的文字，會出現在前台商品頁面的右上方喔。

當然，具體的位置還是要視你使用的佈景主題而定，不過國外的佈景主題設定幾乎都是在右上方無誤。

小補充：商品圖庫

在商品圖庫的地方，如果你一次上傳多張照片，他會利用 Lightbox 以及輪播方式秀圖。

商品資料

商品資料可以這麼看，先選擇 (1) 的下拉式選單，再點選 (2) 的各個設定，最後在 (3) 填入各種商品資料。

1.商品類型

WooCommerce 目前提供了四種商品類型：簡單商品、組合商品、外部/加盟商品、可變商品，簡單解說如下：

簡單商品：商品只有一種款式、一種價格，顧客直接點選加入購物車即可。
組合商品：附屬在其他商品底下，不會有自己的價格 (這個我從來沒用過)。
外部/加盟商品：純粹介紹商品，如果要購買會連到外部網站。
可變商品：一個商品頁面可以有很多種款式(例如 S, M, L 尺寸)，對應不同的款式可以設定價格、庫存，與圖片。

2.商品設定

可變商品的功能是最為複雜，也較為完善，所以我用「可變商品」作為圖例，介紹給大家。

一般：這個應該不用多作解釋，裡面只有「貨號」(SKU name)一個欄位，請填上不重複的貨號吧。
庫存：
可以勾選「庫存管理」以設定庫存，但如果是用可變商品，這邊可以不用寫，因為我們之後還需要分別設定各種款式的庫存。
單獨出售的部分，就是照字面的意思解讀啦！如果你希望顧客一次只能買一件這個商品，就把他勾起來囉！
運送方式：可以填寫產品的重量與尺寸，「運送級距」則是可以再給產品設定額外的運費，請看下面的介紹。

運送級距介紹

▼ 先在後台「商品」→「運送級距」的選單裡，設定額外的運費

▼ 接著在「WooCommerce」→「設定」→「運送方式」→「單一費率」，找到「運送級距費用」的欄位。你會發現我們剛剛設定的「大尺寸」出現在這了。我在這邊設定，只要有使用大尺寸的運送級距，運費都會額外增加 100 元。

▼ 回到商品設定的地方，可以設定這個商品的運送級距為大尺寸

▼ 如此一來，只要我們購買這個商品，運費就會自動再加上 100 元(原本的運費是 40 元)。

連結商品：推薦型跟交叉型，都是可以讓顧客在購物時看到更多的商品。可以將滑鼠移到框框後面的問號看他的解釋，因為設定很容易所以就不多談了。分組我自己沒用過，所以先跳過😓
屬性跟變化類型，是可變商品的精華部分，請直接看以下圖解

屬性

在購買產品時，可能曾經看過產品的規格，如下圖：

▼ 這些資料都是在屬性裡面設定的，記得要選擇「在商品頁面中可見」，才會出現在商品頁面裡：

如果你的商品資料是「可變商品」的話，你會發現「在商品頁面中可見」的文字下面，還有一個「用於變化類型」。這個就是讓我們設定，根據不同款式顯示不同的庫存、價格與圖片的重要選項唷！

▼ 範例可以參考我的寫法：

如果不需要讓這些款式出現在產品規格上，就不要勾選「在商品頁面中可見」的選項。每一個數值都請用|做分隔，寫在同一行或是換行都可以。

▼ 寫完之後記得按下儲存，然後再切到「變化類型」的分頁，並選擇「由所有屬性建立變化類型」。

送出之後，你剛剛新增的那四個數值，就會出現在畫面上了！

變化類型

每一個屬性都是一個變化類型，舉例來說，我這邊有四個款式讓顧客選擇，所以我可以單獨為這四個款式，設定圖片、價錢、庫存等資訊。

▼ 回到前頭，就可以跟各大購物網站一樣，選擇單一產品的各種款式囉～

⚠ 特別記住一點，所有的東西修改後，都必須按下該分頁內的「儲存變更」，這樣檔案才會存進去喔！

上架流程先到此告一段落，有沒有發現上架一點都不難，只要把可變商品搞懂，就可以做出很棒的變化囉！希望大家都能順利上架商品 🙂

最後一個部分，我會告訴大家怎麼跟 AllPay 歐付寶串接，敬啟期待囉 😊

WooCommerce 系列教學 (1/3)：安裝與使用

日期：2015.09.16
留言數：15
標籤：woocommerce wordpress 原創教學系列教學

WooCommerce 系列教學，預計分為三篇，請參考以下目錄：

很久以前寫過一篇 WooCommerce 的商品上架流程，但因為圖片都失效了，所以一直把「重寫」這件事情放在心上，但因為有段時間沒碰 WooCommerce 了，怕誤導大家所以遲遲未下筆。

後來，因為我現在有經營手帳寫真市集，是用 WooCommerce + AllPay 串接，所以可以有比較新、也比較完整的經驗分享啦！也歡迎大家購買市集的商品，給我一點支持喔 😳

事前準備：挑選佈景主題與安裝外掛

我不會寫適用 WooCommerce 的佈景主題，所以我都是從網路上找免費的 WooCommerce 佈景自己玩。

開發 WooCommece 的 WooThemes 也有提供免費與付費的主題，有興趣的朋友也可以從 WooThemes 下載。此外 WordPress.org 裡，也有人會上傳適用 WooCommerce 的 Themes，不過就要自己稍微找一下囉。

我選用的範例主題是從 WordPress.org 下載的 Klasik，如果你們想要自己練習，可以跟我下載一樣的佈景主題。

佈景主題裝好後，就可以安裝 WooCommerce 外掛了，直接從後台搜尋 WooCommerce 即可。

▼ WooCommerce 相關外掛有很多，我們首先要安裝的是由 WooThemes 開發的 WooCommerce – excelling eCommerce 主程式

啟用外掛後的第一步，就是安裝翻譯檔啦！WooCommerce 有提供繁體中文的版本，所以大家不用緊張，放手去安裝吧 🙂

▼ 請點選「Install Translation」

▼ 安裝成功後，畫面會變成繁體中文，然後就一直點選紫色按鈕進行你的商品設定即可。

這些設定之後都可以從後台更改，現在不想設定也沒關係 😊

事前準備到此告一段落，一來 WooCommerce 有中文化，二來很多設定都是要靠大家實際的販售情況調整。設定也不難，如果真的有問題再留言給我吧！

WooCommerce 的架構

安裝完左側會多了兩個選單，分別是：

WooCommeerce：WooCommerce 外掛相關設定，例如付款格式、付款方式、發送郵件… 等等。
商品：上架或分類商品設定，有點類似「文章」選單的感覺，有獨立的分類與標籤，每一個商品都是一個單獨的文章格式。

那麼，我們該如何在前台顯示 WooCommerce 的相關頁面資料呢？所有 WooCommerce 的資料，我們可以在「頁面」透過 shortcode 進行設定。

▼ 安裝 WooCommerce 之後，他也會自動新增一些頁面在「頁面」選單裡，像是商店、忘記密碼、我的帳號… 等。

這邊提醒大家，因為我們選的是繁體中文語系，所以 WooCommerce 預設會把網址代碼也設為中文，我建議大家到「頁面」選單後」，把所有頁面的代碼都改回英文，不然一些頁面可能會連不上喔！

固定網址也要記得改。固定網址的設定，可以選擇「商品起點」，總之就是確保你的固定網址都是/shop/而不是/商店/

接下來你可以試著連到商店頁面啦，網址通常是http://你的部落格網址/shop，如果你有試著新增商品，可以在這一頁看到所有的商品清單。

顯示特定的分類

一間店會有很多不同分類的商品，這是無庸置疑的，所以你一定會有一個需求，就是在顯示單一分類的所有商品。

假使我們以衣服 👔 為例子，頁面只會顯示分類為衣服的商品，就我所知的有兩種方法，一併分享給大家。記得要先新增商品分類，這邊就不再敘述怎麼新增了。

直接把連結抓出來

第一種方法，是直接找到「商品分類」的真正網址。

這個方法很簡單，到後台的「商品分類」選單中，找到你想要連結的商品分類，然後選擇「查看」就可以啦 😊

搭配 shortcode

另外，記得我們前面有提到，WooCommerce 幫我們建了一些頁面以顯示資料嗎。

我們先從後台點選「頁面」→「我的帳號」，你會看到文章內有一段程式碼為：[woocommerce_my_account]，這段程式碼，就是我們常用的 WordPress Shortcode。

因此，我們可以用同樣的方式，新增一個叫做「衣服」的頁面，然後插入一段 shortcode，告訴 WordPress 顯示所有分類為衣服的商品：[product_category category="clothing" ]

category 後面接的clothing，就是看你的商品分類的代碼怎麼寫，這邊就跟著寫一樣的字。

( 更多的 WooCommerce Shortcut 資料，請參考 Shortcodes included with WooCommerce )

乍看之下，感覺第一種方法比較簡單，但如果你還有一些特殊的需求，例如顯示指定的 SKU 商品、指定的單一商品 … 等等，都可以透過 Shortcode 幫你達成喔！記得使用方法，都是在「頁面」把對應的 Shortcode 插入即可。

WooCommerce 系列教學的第一篇就到此告一段落了，其實安裝並不難，設定也很簡單。所以我只是把大家初步使用，可能會碰到的問題先整理好放出來，希望對大家有所幫助！

如果有照著安裝的朋友們，可以試著先建立幾個商品，接下來我會分享進階的的商品設定，所以如果你有新增商品的經驗，會更快上手 😊，閱讀或實作有任何問題，都歡迎留言告訴我。