Your SlideShare is downloading. ×
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
NextGen
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

NextGen

1,658

Published on

WordPress 外掛 NextGen教學

WordPress 外掛 NextGen教學

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,658
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 

×