如何自定義WordPress主題中的Blockquotes樣式


引號通常是您文章中最難忘的部分。 它們也是任何帖子或演示文稿中共享度最高的部分。 這就是為什麼報紙和主流媒體網站自定義其大版畫風格以使其脫穎而出的原因。 在本文中,我們將向您展示如何在WordPress中自定義blockquotes樣式,並向您展示9個漂亮的自定義blockquotes樣式示例。

WordPress允許您使用編寫部分中的工具欄區域在帖子和頁面中添加塊引用。

在WordPress中添加Blockquote

這將在您的帖子中添加一些HTML,可用於自定義樣式。 注意:我們正在WordPress帖子編輯器中使用文本模式。 下面是您應該看到的HTML的示例。

Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam. Wise Man

為了自定義WordPress主題中的blockquotes樣式,我們需要修改主題的style.css文件。 您可以通過以下任一方法來執行此操作 外觀»編輯器 在您的WordPress管理員中,或通過FTP編輯文件。

接下來,您將需要使用以下建議的一種樣式,並覆蓋您的blockquote樣式。 如果不存在,則只需添加這些即可。 我們也非常歡迎您將兩種樣式結合起來並根據自己的內心需求進行定制。

1.經典CSS Blockquote

通常人們使用CSS background-image 在blockquote中添加大引號。 在此示例中,我們使用CSS來添加大引號。

經典CSS僅blockquote示例

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "2014 2009";
}

2.帶圖片的經典Blockquote

在此示例中,我們使用了背景圖像作為引號。

帶引號的圖像的經典塊引用

blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "2014 2009";
}

3.簡單的Blockquote

在此示例中,我們添加了背景色和虛線虛線,而不是blockquotes。 隨意使用顏色。

簡單的CSS blockquote示例

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

4.白色藍色和橙色Blockquote

可以使Blockquotes脫穎而出,並且它們可以像您希望的那樣豐富多彩。

藍色背景和白色字體blockquote示例

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

5.在CSS中使用Google Web字體作為Blockquotes

在此blockquote CSS示例中,我們使用了Google網絡字體庫中的Droid Serif字體。

在CSS中以Blockquote導入Google Web字體

blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
} 
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

6.圓角砌塊

在此示例中,我們使用了帶有圓角的blockquote,並且使用了陰影作為邊框。

圓角塊引用

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

7.使用漸變作為Blockquote的背景

在此CSS blockquote示例中,我們使用CSS3漸變來增強blockquote的背景。 CSS漸變非常棘手,因為它具有跨瀏覽器的兼容性。 我們建議使用colorlabs,CSS漸變生成器。

將CSS漸變添加為Blockquote的背景

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7d7e7d", endColorstr="#0e0e0e",GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

8.具有背景圖案的Blockquote

在此示例中,我們使用背景圖像作為blockquote的圖案。

具有背景圖像圖案的CSS塊引用

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

9.在Blockquote背景中使用多個圖像

您可以使用CSS在blockquote背景中使用多個圖像。 在此示例中,我們使用了 blockquote:before 將另一個背景圖像添加到blockquote的偽元素。

使用CSS在blockquote中添加多個背景圖像

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "2014 2009";
}

我們希望您發現本文對學習如何在WordPress中自定義blockquotes樣式有所幫助。 如果您有任何疑問或建議,請隨時在下面發表評論。