1. 程式人生 > >WP如何給文章評論框新增背景

WP如何給文章評論框新增背景

用Wordpress建立這個部落格一段時間了,也形成了一個習慣,沒事就找找wp的各種小技巧,改改自己的部落格,讓其更個性化一些。

在訪問很多人的部落格時,發現評論框都有背景圖片,裡面通常會給一些提醒你分享和評論過的文字,從來達到部落格文章的擴大化,覺得挺有用的,就想自己也試驗下。

wp有一個好處,就是很容易找到程式碼的位置,因為用的是模板,所以不用想就知道comments.php頁面是評論也頁,看了一下程式碼,找到comment的位置。

一般都是這樣的程式碼<p><textarea name=”comment” id=”comment” tabindex=”4″></textarea></p>,textarea是訪問者寫評論的區域。知道程式碼是這樣的,然後看到它用的CSS id是comment,我們在wp的style.css檔案中找#comment,一般都是簡單的一句話#comment {width:468px;} 來定義文字框的寬度高度等內容,在這裡我們加上自己想要風格的程式碼,

[css]
#comment{
background-image:url(images/comment-bg.png);
background-repeat:no-repeat;
background-position:center center;
}
[/css]

background-image:url(images/comment-bg.png); 背景圖片的相對路徑為你當前所用主題的images/comment-bg.png

background-repeat:no-repeat; 表示圖片不要重複

background-position:center center; 圖片的位置為左右居中 上下居中

好了,自己PS一張圖片叫comment-bg.png,寫上自己喜歡的話,FTP上傳到空間去,這樣就好了。

在這裡,提供幾張看到過比較好看的圖片給大家使用。

因為各個WP部落格主題存在一定的差異性,所以可能在程式碼裡不盡相同,大家自己努力找找吧,有問題,歡迎留言討論。

效果請檢視本部落格的評論框。