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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

WordPress 外掛 NextGen教學

WordPress 外掛 NextGen教學

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,611
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
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