Phần trích dẫn, tiếng anh là Quote, là những đoạn văn bản mang các tính chất quan trọng, tóm lược,… cần được người đọc chú ý. Sử dụng trích dẫn xen giữa vào các đoạn văn bản để tạo điểm nhấn cho bài viết và khiến người đọc chú ý vào nội dung trích dẫn.

Mặc định trong trình soạn thảo của WordPress cho phép mình tạo trích dẫn cho một đoạn văn. Bạn có thể thực hiện bằng cách bôi đen đoạn văn cần trích dẫn và nhấn vào nút quote như trong hình dưới đây:


Và đây là hiển thị của đoạn trích dẫn khi bạn xem bài viết ngoài trang chủ. Nhìn nó cũng nổi bật nhưng có lẽ đối với nhiều người thì nó khá là đơn điệu. Do đó, mình có thể tạo quote theo ý muốn của mình bằng cách sau.

Tạo phần trích dẫn cho bài viết

Mình sẽ hướng dẫn các bạn tạo trích dẫn cho bài viết bằng code nhé. Bạn hãy sao chép và dán đoạn code sau đây vào file function.php của Child theme:

function make_quote($atts, $content = null) {
return '<p style="background-color: #1fc8db; background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); color: #fff; font-style: italic; font-size: 1.2em; clear: both; margin-bottom: 18px; overflow: hidden; padding: 13px;">' . do_shortcode($content) . '</p>';
}
add_shortcode('quote', 'make_quote');

Sau đó, khi bạn viết bài, bạn sẽ chèn cặp thẻ [quote]…[/quote] ở 2 đầu đoạn văn trích dẫn như hình sau nhé. Chẳng hạn như:

[quote]Đây là một đoạn trích dẫn quan trọng cần được bạn chú ý![/quote]

Vậy là được rồi, bây giờ xem bài viết ngoài trang chủ, nó sẽ được làm nổi bật với màu nền như thế này. Bạn cũng có thể hiển thị trích dẫn theo ý mình bằng cách sửa CSS ở đoạn code trên để thay đổi màu nền, thêm hình nền, thay đổi kiểu chữ,…