WordPress美化 - 怎么美化blockquote塊引用？

在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美化教程：