WordPress 外掛 NextGen教學

1. 臺北市立第一女子高級中學
WordPress
行政部落格進階研習
陳怡芬
2010/01/27

2. Outline
北一女中行政部落格管理備忘錄 ..................................................................................... 1
.
Topic#1: Wordpress 安裝外掛(相簿、編輯工具…等) .................................................... 3
Topic#2: Wordpress NextGEN Gallery 相簿管理 .......................................................... 7
Topic#3: Wordpress 佈景主題更新 ................................................................................ 10
Topic#4: Wordpress CSS 樣式設定 ................................................................................ 15
1 行政部落格進階研習 2010

3. 北一女中行政部落格管理備忘錄
2009.08 Edit by 資訊組
教育訓練時間：8/27/2009
1. 單位名稱：○○室
網址：http://web2.fg.tp.edu.tw/~xxxxxx/blog
2. 登入管理頁面
管理者帳號： admin
管理者密碼：=xxxxxx+2009
請先修改 admin 密碼：帳號/個人資訊
3. 新增組員帳號：
帳號/新增帳號
設定為「作者」「編輯」
、 、…
4. 新增網誌分頁，張貼內容
5. 新增文章分類
6. 新增文章/設定分類
7. 編輯相關鏈結
8. 修改外觀
佈景主題
新增佈景主題/安裝新佈景
主機：web2.fg.tp.edu.tw
帳號：xxxxxx
密碼：=xxxxxx+2009
傳送方式：勾選使用 FTP 傳送
模組—設定版面上呈現的功能模組
9. 外掛‐部落格的額外功能
2 行政部落格進階研習 2010

4. Topic#1: Wordpress 安裝外掛(相簿、編輯工具…等)
1. 進入管理介面，選取「外掛」／「新增」
2. 搜尋外掛：輸入『NextGEN』相簿外掛，找到「NextGEN Galley」按下「安裝」
3 行政部落格進階研習 2010

5. 3. 選「立刻安裝」，輸入連線資訊
4. 管理外掛，進行外掛啟用
選取「外掛」／「已安裝」，找到 NextGEN Gallery，按下「啟用」
5. 管理介面左下角出現
6. 進入『選項』進行設定
(1) 一般選項: 相簿路徑 『wp-content/gallery』
4 行政部落格進階研習 2010

6. (2) 縮圖設定
(3) 圖片設定
(4) 相簿設定
5 行政部落格進階研習 2010

7. (5)效果設定：JavaScript 縮圖效果設為『Thickbox』(不錯哦)
7. 連線至主機，在『wp-content』新增一相簿資料夾『gallery』
8. 設定『gallery』權限為 777
6 行政部落格進階研習 2010

8. Topic#2: Wordpress NextGEN Gallery 相簿管理
下載網站 : http://wordpress.org/extend/plugins/nextgen-gallery/download/
最新版本 : NextGEN Gallery v0.72 (A NextGENeration Photo gallery for the WEB2.0(beta). )
相簿功能
1. 可以透過拖拉操作進行相簿的排序，是使用 AJAX 的技術，跟 wordpress widget 一樣 ，
想要怎麼排序用拖曳的就可以，所見即所得 !
2. 上傳圖片的壓縮檔 (zip)或是直接匯入資料夾，省去一張一張照片上傳的時間。
3. 浮水印設定功能，可在照片上加上文字或圖片，以防止別人到用你的照片。
4. 內建 JavaScript 效果 ，包括的特效部分包括以下三種 Thickbox，Greybox or Lightbox。
相簿管理與使用
1. 開啟這個外掛後會多出一個[ 相簿 ]，點進去開始建立相簿。
2. 回到 [ 新增相簿]內先新增加一個相簿(不可為中文名稱)。
3. 選擇上傳的方式來上傳圖片，這邊有三種選擇，(1) 上傳壓縮檔 (目前版本只支援 zip
檔)，(2) 匯入圖片資料夾，(3) 上傳圖片(可一次上傳兩個以上圖片)
4. 點選 [ 管理相簿 ]，編輯相簿的設定。
5. 一進入管理相簿，這裡顯示目前相簿的資訊(如下圖)，ID 就是相簿的編號，Page ID 為頁
面編號。
6. 接下來點選相簿進去做設定 ，一進去會看到很多表格，用下面三張圖說明。
7 行政部落格進階研習 2010

9. 6. 都設定完後，點選 [ 相本 ]，先新增一本相本再把相簿拖進去就完成了。
7. 接下來我們新增一個頁面或新增一篇文章，來放我們想要圖片內容。
最後，如果你是在新增分頁的地方要增加這個相簿的話，請在 HTML 的編輯模式中運用下
列說明的代碼:
顯示單張圖片的代碼 : [singlepic=id,width,height,mode,float]
【使用說明 】
* id : 圖片編號 ( id )
* width : 最大寬度
* height : 最大高度
* mode (非必須) :
→ web20 : 產生倒影的效果
→ watermark : 產生浮水印
* float (非必須) :
→ left : 靠左對齊
→ right : 靠右對齊
顯示相簿頁面的代碼 : [gallery=id]
8 行政部落格進階研習 2010

10. 【使用說明 】
* id : 相簿編號 ( id )
顯示相本頁面的代碼 : [album=id,extend] 或 [album=id,compact]
【使用說明 】
* id : 相本編號 ( id )
* 可在相本內選擇顯示那些相簿
顯示投影片效果的代碼 : [slideshow=id,width,height]
【使用說明 】
* id : 相簿編號 ( id )
* width : 寬度
* height : 高度
1. 新增頁面之後，回到相簿內做 網頁連結的設定動作，切記 !
2. 然後在部落格網址後面加上 ?page_id=頁面編號 就可以顯示出來了，如果有使用固定網址
的話，就是網址加上自己所設的名稱
9 行政部落格進階研習 2010

11. Topic#3: Wordpress 佈景主題更新
(一) 新增佈景主題
方法一：線上尋找 WordPress 提供之佈景主題，直接安裝。
1. 進入管理介面，選取「外觀」／「新增佈景主題」／ 由指定功能來找佈景主題。
2. 看下方說明文字，進行「預覽」，再「安裝」。
10 行政部落格進階研習 2010

12.
3. 輸入連線資訊
伺服器名稱： web2.fg.tp.edu.tw
帳號：（申請部落格時的帳號），如 test
密碼：（申請部落格時的密碼），如 =test+2009
4. 成功安裝，可選「預覽」「啟用」或「回到佈景主題安裝」
、
11 行政部落格進階研習 2010

13. 方法二：100 個不容錯過的 WordPress 免費優質佈景主題
100 Amazing Free Wordpress Themes for 2009
http://www.smashingmagazine.com/2009/05/18/100‐amazing‐free‐wordpress‐themes‐for‐2009/
1. 下載（Download） ，存為 zip 檔。 （如 Vector_Flower.zip）
2. 在 zip 檔上按右鍵，選「解壓縮至此」，會產生一個同名資料夾(Vector_Flower)。
12 行政部落格進階研習 2010

14. 3. 上傳佈景主題檔（使用 FileZilla）
(1)主機： web2.fg.tp.edu.tw
(2)使用者名稱： （申請部落格時的帳號） ，如 test
(3)密碼：（申請部落格時的密碼） ，如 =test+2009
(4)按下「快速連線」
4. 進入 public_html /blog/wp‐content/themes
5. 將解開之佈景主題資料夾上傳至「themes」資料夾
6. 修改佈景主題之樣式檔案（style.css）權限：選取佈景主題資料夾，找到 style.css 按『右』
鍵，選『檔案屬性…』 ，變更檔案屬性為 777 。
13 行政部落格進階研習 2010

15.
14 行政部落格進階研習 2010

16. Topic#4: Wordpress CSS 樣式設定
佈景主題檔案 (Indore Theme 為例)
外觀檔案
• children.php (children.php)
• links.php (links.php)
• sidebar‐bottom.php (sidebar‐bottom.php)
• sidebar‐right.php (sidebar‐right.php)
• 主要模板 (index.php)
• 佈景函式庫 (functions.php)
• 單篇文章 (single.php)
• 圖片附件模板 (image.php)
• 搜尋結果 (search.php)
• 搜尋表單 (searchform.php)
• 網誌分頁模板 (page.php)
• 迴響 (comments.php)
• 邊欄 (sidebar.php)
• 頁尾 (footer.php)
• 頁首 (header.php)
樣式表(style.css)
/* 樣式說明
Theme name: Indore
Theme URI:http://preuro.eu/indore‐theme/
Description: A two‐columned wordpress theme with customizable header.
Fixed‐width, two columns and two dynamic sidebars, widget ready theme.
Tags: light, white, fixed‐width, three‐columns, sticky‐post, custom‐header
Author: Stratus
Author URI:http://preuro.eu/
Version: 1.0.1
*/
a img {border: none;}
img {border: none;}
ol, ul {
list‐style: none;
}
body { // 瀏覽主體相關設定
font‐size: 10pt; // 字的大小
font‐family: 'Arial', Verdana, Sans‐Serif; // 字型
background‐image: url(images/bg.jpg); // 背景圖
color: #666666; // 顏色
15 行政部落格進階研習 2010

17. margin: 0; // 邊界
padding: 0; // 間距
text‐align:center; // 文字對齊
}
…
}
/* Main style of links */
a:link,a:visited{ // 超連結效果(link、visited)設定
color:#5C6FA3; // 超連結文字顏色
text‐decoration:none; // 超連結文字裝飾(無底線)
}
a:hover, a:active{ // 超連結效果(hover、active)設定
color: #990000;
}
/* Top and bottom areas */
.menu { // 選單設定
text‐transform:uppercase; // 文字強制轉換：大寫
width:850px; // 選單區域的寬度: 850 pixel
height:15px; // 選單區域的高度: 15 pixel
padding:10px; // 選單之間的間距: 10 pixel
text‐align: center; // 選單內文字對齊方式：置中
}
.menu li {
float:left;
}
…
#top{
height:0px;
width:100%;
}
#bottom{
height:52px;
width:100%;
}
/* The width and style of the actual blog area */
#page {
background: #f9f9f9;
width: 850px;
margin:0 auto;
padding:0 4px 0 2px;
}
/* Headers used within the blogposts (h1‐h3 are used elsewhere on the pages and
should not be used in posts)*/
h4,h5,h6{
font‐size:12px;
16 行政部落格進階研習 2010

18. font‐family: Arial, Helvetica, sans‐serif
}
h4 {font‐size: 12px;}
/* Deal with the header */
#header{
margin:0px;
padding:0px;
width:100%;
text‐align:right;
}
#header h1{
margin: 10px 20px 20px 0;
font‐size:28px;
text‐transform:uppercase;
font‐family: Candara, Arial, Helvetica, sans‐serif;
}
…
…
/* Deal with left, right and bottom sidebars */ 處理側邊欄位(Sidebar)
#sidebar‐right{
background‐color:#999999;
float: left;
margin:10px 0px 0px 2px;
width:240px;
padding:0px 7px 2px 7px;
font‐size:11px;
font‐weight:400;
border‐bottom:thick #CCCCCC;
text‐transform:uppercase;
}
#sidebar‐left{
font:Arial, Helvetica, sans‐serif;
color:#CCCCCC;
font‐size:14px;
text‐transform:lowercase;
font‐weight:bolder;
float:left;
margin:10px 2px 0px 0;
width:210px;
padding:2px 7px 2px 15px;
}
#sidebar‐bottom {
background‐color:#999999;
border‐top: 1px solid #999999;
padding‐top: 3px;
margin:5px auto;
}
…
/* Show calendar in bottom sidebar */
#calendar‐bottom table{
margin:auto;
width:90%;
}
17 行政部落格進階研習 2010

19. #calendar‐bottom a:link,
…
/* Deal with content (all styles used in index.php) */ 處理內文區間
#content {
text‐align:left;
width:570px;
padding:5px 10px;
float:left;
margin‐top:5px;
min‐height:570px;
border‐left:1px solid #e1e0e0;
}
…
/* Special styles used by image.php to show an image attachment */
.attachment{
text‐align:center;
margin:0 auto;
}
.caption{
width:310px;
margin:15px auto;
}
.attachment p {
padding:0;
margin:7px auto 2px auto;
}
/* Special styles used by archives.php (archives page) */
.archive{
width:200px;
padding: 2px 20px;
}
/* Special styles used by links.php (links page) */
.archive{padding: 2px 20px;}
/* Special styles used by children.php */
#list‐subpages{
margin:0 10px;
}
#list‐subpages ul{
list‐style‐type:none;
margin:3px 15px;
padding:0px;
}
…
/* Styles needed to handle comments */
.xoxo,.children{
list‐style‐type:none;
margin:4px;
padding:0 0 0 10px;
}
.children{margin:1px 4px;}
#respond h3,#content h3 {
font‐family: Arial, Helvetica, sans‐serif;
18 行政部落格進階研習 2010

20. font‐size:13px;
margin: 10px 0 2px 0;
}
#commentform textarea{
width:99%;
background:#fff;
border: 1px;
background:#fff;
padding: 2px;
border‐color:#cccccc;
border‐style:solid;
}…
/* Shows info about comment status */
#comments‐status {
margin: 10px auto;
padding:15px 0 15px 0;
background‐color:#f2f2f2;
text‐align:right;
font‐size:11px;
}
…
#author{
border: 1px solid #CCCCCC;}
#email{
border: 1px solid #CCCCCC;}
#url{
border: 1px solid #CCCCCC;}
#footer{
background‐color:#f2f2f2;
text‐align:right;
font‐size:11px;
}
#theme‐author{
padding:0;
margin:5px 0 0 0;
text‐align:right;
}
.pre {
width:100;
}
a img {
border: none;
}
img{
padding:10px;
border:none;}
19 行政部落格進階研習 2010

21. 部落格最傳統的樣式大抵就是一個刊頭(header)，一個主文區(container)，一個功能列(link)，
及一個底部(footer)所組成。這是部落格的基本架構，當你想修改你的部落格時，就可以立即
聯想他會再 CSS 語法中的那一個區塊(見下圖)。
而 CSS 每定義一個樣式，我們可以把該樣式想像成一個區塊(box)，透過對區塊的各種定義變
化出千變萬化的部落格樣式。上述的每一個主要區塊中可能都包含許多不同的樣式區塊，也
就是大區塊包含小區塊。
有這兩個基本觀念後，接下來就木笛會以兩篇文章的內容來介紹必學的 6 種部落格語法
部落格 CSS 語法第一招：background 的魔術戲法
背景圖片大概是部落格編輯中第一個接觸的部份，而也是美化部落格最常用的語法，尤其是
刊頭圖片往往象徵一個部落格的屬性與風格。其常用的語法有：
■background‐image:url();
在跨弧裡填入背景圖片的連結網址，連結外部可以不用再加""
■background‐color:#網頁色碼;
背景也可用單一顏色，填上三元色色碼，若是後三碼和前三碼相同填前三碼即可，如#cccccc
填#ccc。
■background‐attachment:屬性值;
背景的呈現型態預設是 x 軸重複和 y 軸重複，你也可以選擇以下屬性值
fixed：背景固定不滾動
x‐repeat：只於 x‐軸重複
y‐repeat：只於 y‐軸重複
no‐repeat：不重複
■background‐position:屬性值;
背景的定位初始位置，誰說一定要從上方開始顯示，透過這個屬性你可以定位背景於區塊內
的任何位置，其屬性值有
center： 置中
left：置左
right：置右
20 行政部落格進階研習 2010

22. bottom：置下
上面的屬性可以兩兩結合，如 background‐position:center left;中間用空白鍵分開，如此背
景圖就會在左上方。
我們亦可以用更簡潔的方式表達，每個屬性間用空白鍵分開，其形態如下。
background:url(http://~/) #ccc fixed center;
每一個 css 區塊都可以用 background 來定義樣式 除了刊頭的 header 還有文章的標題 title、
， 、
連結列的項目符號、甚至是留言板的底色都可以定義背景圖或顏色來裝飾。
PS.背景圖片和背景色是可以同時使用的，也就是你定義背景圖片不重複，那剩餘的部份就會
顯示背景色。
部落格 CSS 語法第二招：border 的裝飾藝術
在部落格語法中 border 可以說是扛起分隔與美化區塊的重任，可以控制的元素有邊框的粗細
(width)、邊框的樣式(style)、邊框的顏色(color)，而且可以分別對邊框的上、右、下、左進
行設定，所以可以呈現出非常多的變化。其常用屬性語法如下。
■border‐width:屬性值;
填入數字並以 px 為單位，若只單純填一個數字，則內定會應用到四邊邊框上
■border‐color:#網頁色碼;
■border‐style:屬性值;
groove 有點內嵌效果、inset 是內浮雕效果、outset 是外浮雕效果
■border‐top、border‐right、border‐down、border‐left
border 屬性最常應用在部落中各區塊間的分隔變化，通常只針對一邊做變化，而利用這個屬
性你可以為邊框四邊都套上不同風格。
21 行政部落格進階研習 2010

23. 部落格 CSS 語法第三招：text 與 font 的格式變化
部落格內容基本上就是大量的文字，所以適當的為文字安排一些變化可以讓內容看起更豐
富。與字體相關且常用的屬性如下。
■font‐style:;
字體風格有 normal|bold|oblique 分別是正常|加粗|斜體
■font‐size:;
字體大小有很多種設定方法，但因為長久使用 word 的關係，大家對 pt 也就是點的單位比較
有概念，或者是 px 螢幕上的點為單位。現在鼓勵使用 em 這個單位，1em 表示使用者瀏覽器
預設的字形大小，所以 2em 就是兩倍預設字體大小，你也可以接小數點像是 0.75em。
■font‐weight:;
這是設定字體粗細的屬性，屬性值為 100~800 之間以 100 為單位變換，這可屬性只會變粗細
並不會改變大小，一般隨著字體的變化 400~700 是屬於 normal，所以 400 以下會使得字體比
較細。
文字格式也是可以靈活運用的地方，記住只要是一個 css 所定義的區塊都可以套用不同的文
字格式，像是部落格文章的 title 和內文用不同的大小和顏色與對齊方式。其常用的屬性如下：
■color:#網頁色碼;
■text‐align:屬性值;
right：向右對齊
left：向左對齊
center：置中對齊
justify：齊行對齊
■line‐height:屬性值;
每一行的高度，單位可以是 pt,px 或是 em，一般會設定較寬的行高讓瀏覽者閱讀起來比較
舒服
■text‐decoration:屬性值;
文字的裝飾最常配合連結樣是一起使用，其屬性值有
none：無裝飾
underline：下底線
overline：上底線
line‐through：穿越線
■text‐shadow:#網頁色碼 x‐偏移 y‐偏移;
替文字加上下落陰影，這實在是很酷的語法，如此就能輕易做出要藉助影像處理軟體才能
做到效果。但是….這個效果 IE6 不支援，連 Firefox 也不支援，只有 IE7 和 Safari 兩個瀏覽器
支援，所以在使用時要小心。
Q.大部分的語法我都不懂，進入部落格語法編輯區時我該怎麼找呢？
A.可以使用 Ctrl+C 網頁搜尋的功能,搜尋 header、container、box、footer 或其他語法代碼，
幾乎都可找到你想要修改的 CSS 語法位置。這招是直搗黃龍的 CSS 修改技巧，尤其每個部落
格的語法編寫習慣以及位置順序都不太相同，這樣可以直接修改你想要修改的部份囉！
22 行政部落格進階研習 2010