Cách tùy chỉnh kiểu Blockquotes trong chủ đề WordPress

Bạn đang tìm cách tùy chỉnh phong cách blockquotes trên trang web WordPress của mình?

Các trích dẫn thường là phần đáng nhớ nhất trong bài viết của bạn. Chúng cũng là phần được chia sẻ nhiều nhất trong bất kỳ bài đăng hoặc trang blog nào. Đây là lý do tại sao báo chí và các trang truyền thông chính thống tùy chỉnh phong cách blockquote của họ để làm cho nó nổi bật.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tùy chỉnh kiểu blockquotes trong chủ đề WordPress.

Tại sao nên sử dụng Blockquotes và tùy chỉnh chúng trong WordPress?

Sử dụng blockquotes trong nội dung của bạn có thể cải thiện trải nghiệm người dùng trên trang web WordPress của bạn. Bạn có thể sử dụng nó để làm nổi bật một phần văn bản đã chọn so với phần còn lại của nội dung và thu hút sự chú ý của người đọc.

Ví dụ: bạn có thể sử dụng trích dẫn khối cho trích dẫn từ các tác giả và người có ảnh hưởng, trích dẫn từ các ấn phẩm, lời chứng thực từ khách hàng hoặc nêu bật thông tin có giá trị cho người dùng của bạn.

Một lợi ích khác của việc sử dụng blockquote là nó có thể tăng mức độ tương tác trên mạng xã hội. Cho phép người dùng chia sẻ trích dẫn trên Twitter hoặc Facebook có thể giúp bạn có được nhiều người theo dõi hơn và cải thiện khả năng hiển thị trên mạng xã hội của thương hiệu bạn.

Theo mặc định, WordPress cung cấp khối Trích dẫn trong trình chỉnh sửa nội dung. Để thêm nó, chỉ cần truy cập trình chỉnh sửa WordPress và thêm khối Trích dẫn vào nơi bạn muốn trong nội dung.

Tuy nhiên, khối trích dẫn mặc định không cung cấp nhiều tùy chọn để tùy chỉnh. Bạn chỉ có thể thay đổi kích thước văn bản và chọn từ các kiểu mặc định trong WordPress.

Điều đó nói rằng, chúng ta hãy xem cách bạn có thể tùy chỉnh kiểu blockquote trong chủ đề WordPress. Chúng tôi sẽ chỉ cho bạn cách thay đổi kiểu trích dẫn bằng cách sử dụng plugin WordPress và cũng sử dụng CSS tùy chỉnh.

Phương pháp 1: Tùy chỉnh kiểu Blockquotes bằng plugin

Một cách dễ dàng để tùy chỉnh các trích dẫn trên trang web WordPress của bạn là sử dụng plugin như Gutenberg Blocks - Ultimate Addons for Gutenberg. Đây là một plugin WordPress miễn phí có thêm các khối bổ sung trong trình chỉnh sửa nội dung WordPress, bao gồm cả các trích dẫn có thể tùy chỉnh.

Trước tiên, bạn sẽ cần cài đặt và kích hoạt plugin Gutenberg Blocks - Ultimate Addons cho Gutenberg. Để biết thêm chi tiết, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

Sau khi plugin hoạt động, nó sẽ tự động đưa bạn đến Cài đặt » UAG từ bảng điều khiển WordPress của bạn.

Theo mặc định, plugin sẽ kích hoạt tất cả các khối bổ sung bao gồm cả trích dẫn, nhưng bạn có thể chọn tắt các khối khác nhau cho trang web của mình.

Sau đó, bạn có thể chỉnh sửa bất kỳ bài đăng và trang blog nào. Khi bạn đang ở trong trình chỉnh sửa nội dung WordPress, chỉ cần thêm khối Blockquote vào bất kỳ đâu trong nội dung của bạn.

Tiếp theo, bạn có thể nhập văn bản vào khu vực blockquote.

Bạn sẽ tìm thấy các tùy chọn khác nhau để tùy chỉnh kiểu blockquote trên menu bên phải.

Ví dụ: bạn có thể chọn giữa 2 bố cục, bao gồm bố cục hiện đại và trích dẫn. Sau đó, bạn có thể sử dụng các tùy chọn khác nhau để tùy chỉnh kiểu bố cục, độ dày của đường viền trích dẫn, màu sắc của nó, v.v.

Plugin cũng cho phép bạn thay đổi màu văn bản trong trích dẫn và chỉnh sửa kiểu chữ của nó.

Bạn có thể sử dụng phông chữ mặc định cho dấu ngoặc kép hoặc chọn phông chữ khác để làm nổi bật văn bản. Ngoài ra, còn có các tùy chọn để chỉnh sửa kích thước phông chữ và chiều cao dòng.

Có nhiều tùy chọn hơn để tùy chỉnh kiểu của blockquote trong plugin.

Để trích dẫn các tweet, bạn có thể nhập tên Twitter của mình vào trường ‘Tên người dùng’ và thay đổi cài đặt biểu tượng Twitter. Có các tùy chọn để chọn hiển thị biểu tượng và văn bản Tweet, cả hai hay chỉ biểu tượng. Plugin cũng cho phép bạn thay đổi kiểu, nhãn và hơn thế nữa.

Thậm chí còn có một tùy chọn để vô hiệu hóa hoàn toàn biểu tượng Twitter xuất hiện trong các đoạn trích dẫn.

Khi bạn đã tùy chỉnh blockquote của mình, chỉ cần xuất bản bài đăng trên blog hoặc trang của bạn.

Sau đó truy cập trang web của bạn để xem hoạt động của blockquote.

Phương pháp 2: Thêm CSS tùy chỉnh để tùy chỉnh kiểu Blockquotes

Nếu bạn không muốn sử dụng plugin WordPress thì việc thêm CSS tùy chỉnh là một cách khác để tùy chỉnh các trích dẫn của bạn.

Bạn có thể sử dụng khối trích dẫn mặc định trong trình chỉnh sửa WordPress để thêm các trích dẫn của mình. Sau đó, chỉ cần nhập mã CSS tùy chỉnh để thay đổi kiểu dáng và giao diện của nó.

Để thêm mã CSS tùy chỉnh, trước tiên bạn cần truy cập Giao diện » Tùy chỉnh từ bảng điều khiển WordPress của bạn. Điều này sẽ mở tùy biến chủ đề WordPress.

Trong tùy biến chủ đề, bạn sẽ cần nhấp vào tùy chọn ‘CSS bổ sung’ được cung cấp trong menu bên trái.

Sau đó, bạn có thể nhập mã CSS tùy chỉnh để thay đổi giao diện và kiểu dáng của các trích dẫn.

Dưới đây là một số kiểu blockquote bạn có thể sử dụng trên trang web của mình.

1. Trích dẫn CSS cổ điển

Thông thường, mọi người sử dụng CSS Background-image để thêm dấu ngoặc kép lớn vào blockquote. Trong ví dụ này, chúng tôi đã sử dụng CSS để thêm dấu ngoặc kép lớn.

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 cổ điển có hình ảnh

Trong ví dụ này, chúng tôi đã sử dụng hình nền cho dấu ngoặc kép.

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. Trích dẫn khối đơn giản

Trong ví dụ này, chúng tôi đã thêm màu nền và đường viền nét đứt bên trái thay vì dấu ngoặc kép. Hãy thoải mái chơi đùa với màu sắc.

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 trắng xanh và cam

Các đoạn trích dẫn có thể được làm nổi bật và chúng có thể có nhiều màu sắc như bạn muốn.

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. Sử dụng Phông chữ Web của Google cho Blockquotes trong CSS

Trong ví dụ CSS blockquote này, chúng tôi đã sử dụng phông chữ Droid Serif từ thư viện phông chữ web của Google. Bạn có thể sử dụng bất kỳ phông chữ tùy chỉnh nào bạn muốn. Chỉ cần thay thế phông chữ trong mã bằng họ phông chữ bạn muốn sử dụng.

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. Trích dẫn góc tròn

Trong ví dụ này, chúng tôi có một đoạn trích dẫn với các góc tròn và chúng tôi đã sử dụng bóng đổ cho đường viền.

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. Sử dụng gradient làm nền cho Blockquote

Trong ví dụ về blockquote CSS này, chúng tôi đã sử dụng CSS gradient để nâng cao nền của blockquote.

Độ dốc CSS rất phức tạp vì khả năng tương thích giữa nhiều trình duyệt. Chúng tôi khuyên bạn nên sử dụng trình tạo độ dốc CSS, như CSS gradient.

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 có mẫu nền

Trong ví dụ này, chúng tôi đã sử dụng hình nền làm mẫu cho 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 cite:before {
content: "\2014 \2009";
}

Lưu ý: Bạn sẽ cần thay thế URL hình nền trong mã CSS bằng URL của hình ảnh bạn đã tải lên trang web WordPress của mình.

9. Sử dụng nhiều hình ảnh trong nền Blockquote

Bạn có thể sử dụng nhiều hình ảnh trong nền blockquote bằng CSS. Ví dụ: chúng tôi đã sử dụng blockquote:trước một phần tử giả để thêm một hình nền khác vào 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";
}

Lưu ý: Bạn cần thay thế URL hình nền trong mã CSS bằng hình ảnh bạn đã tải lên trang web của mình.

Chúng tôi hy vọng rằng bài viết đã giúp bạn tìm hiểu cách tùy chỉnh kiểu blockquote trong chủ đề WordPress. Bạn cũng có thể xem hướng dẫn của chúng tôi về cách chọn phần mềm thiết kế tốt nhất và dịch vụ lưu trữ trang web miễn phí tốt nhất.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.