WordPress 教程：自定義列表樣式

在 WordPress 排版時，我們經常用到 「非序列列表」，可以讓我們能夠更好的組織內容，呈現給讀者。但是這種千篇一律的非序列列表樣式 （粗點） 是否讓讀者感度枯燥，沒有新鮮感呢？今天我們將給它定義一個個性的列表樣式，然你的文章排版更加美觀，專業。

一、自定義簡單的列表樣式

使用簡單的列表樣式是一件簡單的事情，我們就從這個基礎出發，一步一步深化。首先看下面的樣式：

要完成上面的非序列列表，我們只需要三步：

1. 在排版時給一個指定的類。
2. 上傳一張圖示到媒體庫。
3. 新增一行 css 樣式。

1) 假設你喜歡的列表專案是如上圖的 「星」. 在文章編輯器裡，轉到 HTML 風格，採用<ul> 和<li> 標籤。

<ul>
	<li>This is the first item in the list.</li>
	<li>Here's another list item.</li>
	<li>Oh, but wait, there's more!</li>
	<li>Can this go on much longer?</li>
	<li>All right then, let's throw in a final item.</li>
</ul>

2) 儲存草稿後! 到媒體庫上傳一張新圖，記下圖片地址 （絕對地址） 。

3)最後就是新增簡單的 CSS 到樣式表。有三種方法可以新增。

1. 直接新增到 style.css 檔案內.
2. 透過主題編輯器進行新增.
3. 使用自定義樣式。 （如果經常需要新增 css 樣式，建議使用這種方法）

</pre>
</div>
<div>
<pre>ul.fav li {
list-style-image:url('媒體上傳的影像地址');
}</pre>
</div>
<div>

二、帶有點選背景的專案列表

使用點選背景的專案列表，讓我們的排版更加的專業，使用者體驗會大大加強。

首先我們會發現每個列表的圖示是不一樣的，所以與第一種方法略有不同。

1)首先我們會發現每個專案圖示都不一樣，所以我們應為每個 li 定義不同類或 ID，另外應為每個專案加入超級連結。所以應該按照如下格式寫：

<ul class="gizmos">
	<li id="giz1"><a href="URL-TO-LINK-TO">This is the first item.</a></li>
	<li id="giz2"><a href="URL-TO-LINK-TO">Here's another item.</a></li>
	<li id="giz3"><a href="URL-TO-LINK-TO">And there's more!</a></li>
	<li id="giz4"><a href="URL-TO-LINK-TO">How can this go on?</a></li>
	<li id="giz5"><a href="URL-TO-LINK-TO">Let's add a final item.</a></li>
</ul>

2)上傳 影像到媒體庫，注意不要上傳不同尺寸的影像，必須上傳相同尺寸，而且有幾個專案就上傳幾張圖片。這些圖片必須事先設計好。最好使用透明的 png 檔案，這樣比較美觀一點。記住每個影像的地址，可以複製到記事本內暫存。

3) 接下來需要設計 CSS 樣式，可按下面的方式設計.

<pre>ul.gizmos li {
	height:60px;
	list-style:none;
}
ul.gizmos a {
	display:block;
	height:42px;
	width:180px;
	padding:10px 0 0 70px;
}
ul.gizmos a:hover {
	color:#f00;
	border:1px solid #f00;
	border-radius:10px
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
ul.gizmos li#giz1 a {
	background:url('影像地址 1');
}
ul.gizmos li#giz2 a {
	background:url('影像地址 2');
}
ul.gizmos li#giz3 a {
	background:url('影像地址 3');
}
ul.gizmos li#giz4 a {
	background:url('影像地址 4');
}
ul.gizmos li#giz5 a {
	background:url('影像地址 5');
}</pre>

三、設計可點選的網格列表

上面我們設計的都是沒個專案佔有一行，能不能做成網格的排列呢？如下圖：

1) 程式和方法和上面的類似. 新增如下程式碼到文章或頁面內：

<pre><ul class="gridlist">
	<li id="grid1"><a href="URL-TO-LINK-TO">Photo</a></li>
	<li id="grid2"><a href="URL-TO-LINK-TO">Video</a></li>
	<li id="grid3"><a href="URL-TO-LINK-TO">Sofware</a></li>
	<li id="grid4"><a href="URL-TO-LINK-TO">Games</a></li>
</ul></pre>

2)上傳影像到媒體庫。

3) 寫 CSS 樣式:

<pre>ul.gridlist {
	max-width:274px;
}
ul.gridlist li {
	height:135px;
	width:135px;
	list-style:none;
	display:inline-block;
	vertical-align:top;
}
ul.gridlist a {
	display:block;
	height:25px;
	width:105px;
	padding:100px 0 0 20px;
}
ul.gridlist a:hover {
	color:#f00;
	text-decoration:none;
	border:1px solid #f00;
	border-radius:22px;
	-moz-border-radius:22px;
	-webkit-border-radius:22px;
}
ul.gridlist li#grid1 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#1-GOES-HERE');
}
ul.gridlist li#grid2 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#2-GOES-HERE');
}
ul.gridlist li#grid3 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#3-GOES-HERE');
}
ul.gridlist li#grid4 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#4-GOES-HERE');
}</pre>