在 WordPress 2.6 許多新功能裡有一個max覺得可以提出來跟大家分享的,那就是為你的圖片加上標題 (Image Captions),誠如max在 WordPress 2.6 Tyner 這一篇文章,Kai-shao留言提到的Image captions,這個功用需要佈景主題支援才能發生作用,接下來max將示範如何在佈景主題裡加上cpations的式樣,與在圖片加上cpations的語法,讓你的圖片可以顯示標題說明。
首先要確定你的佈景主題對圖片並沒有做任何式樣的設計,這樣子修改起來會比較容易,不然可能會有其他變動式樣後的麻煩要訂正。這次max以免費佈景主題 WP Premium
文章中提到的佈景主題來做範例,該佈景主題並沒有對圖片作任何的式樣設計,所以當在撰寫文章時插入圖片,所呈現的樣子(圖一)就很普通。經過一些小小的修改,可以為圖片加上標題說明(圖二),感覺就很不一樣了。
(圖一)
(圖二)
修改的步驟簡單說明如下:
1. 打開佈景主題的式樣檔(style.css),加上以下的語法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/* Captions */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } /* End captions */ |
以上這段是對cpations做式樣定義。
2. 為圖片加上captions語法:
1 |
[caption id="attachment_XY" align="alignnone" width="100" height="100" caption="This is a caption 這是圖片標題"]<img src="http://www.example.com/image.jpg" alt="This is a caption" title="示範圖片" width="100" height="100" />[/caption] |
This is a caption 這是圖片標題就是你想要為圖片編寫標題的地方,可以自行斟酌填入。
3. 完成,這時應該可以看見圖片呈現如(圖二)的效果。