在WordPress文章編輯中有一個較為常用的按鈕“塊引用”,使用后會給選定的段落添加<blockquote>標簽,用以調用某些引用的語句或者強調。這一次的wordpress美化教程就教大家如何美化。
- 參考來源:詳情

blockquote標簽簡述:
<blockquote> 與 </blockquote> 之間的所有文本都會從常規文本中分離出來,經常會在左、右兩邊進行縮進(增加外邊距),而且有時會使用斜體。也就是說,塊引用擁有它們自己的空間。
<blockquote> 標簽定義塊引用。
通俗的來說,就是HTML標簽語義化的體現,意思是該標簽內的內容是引用的(如名言警句、軟件介紹等等)而通常會有特定的前端樣式。如W3C里面介紹的那樣,經常會在左右兩邊增加外邊距,還會用斜體。

飛鳥的主題之前采用的就是這種風格的blockquote樣式,看久了有點審美疲勞了,于是乎重新定義了一些塊引用的樣式,如下所示。

將css代碼貼出
/* 雅兮網自用塊引用樣式樣式 https://www.yaxi.net */
.post blockquote {
font: 14px/20px italic Times, serif;
color: #888;
padding: 18px;
background-color: #dddddd;
border-left: 15px solid #666666;
margin: 5px;
background-image: url(img/quote_open.png);
background-position: 15px 10px;
background-repeat: no-repeat;
text-indent: 23px;
line-height: 1.8;
}
.post blockquote p {
text-indent:23px;
}
.post blockquote p:last-child{
background-image: url(img/quote_close.png);
background-repeat: no-repeat;
background-position: bottom right;
}
非常容易看出,只是給blockquote標簽增加了一個背景圖(開頭引號),然后給最后一個p標簽加了一個背景圖(結尾引號);當然也可以通過偽元素::before、::after來輸出這一對引號,可個人喜好了,此處暫且不貼。
當然你也可以自行調整顏色以適配你的主題,兩個素材小標地址如下,請自行保存至你的主題模板根目錄的img文件夾下面。


另外之前的小綠標樣式也是個非常優秀的樣式,可以重新定義一個類,在寫文章的時候可以因勢調用,讓網站更具風格化!
2018.11.7重新調整blockquote引用塊樣式,使其更加圓潤,簡潔。新樣式代碼如下,只修改了blockquote標簽的樣式,其他的不變。

blockquote {
font: 16px/20px italic Times, serif;
color: #333;
padding: 18px;
background-color: #f5f5f5;
border-left: 15px solid #666666;
border-radius: 5px;
margin: 5px;
background-image: url(../img/quote_open.png);
background-position: 15px 10px;
background-repeat: no-repeat;
text-indent: 23px;
line-height: 1.8;
}
?
如果你也喜歡折騰這些花里胡哨的的東西,那么還可以看看這個wordpress美化教程: