[Thủ thuật WordPress] Hướng dẫn cách tạo Drop cap cho bài viết wordpress không dùng Plugin – Có thể nói chức năng Drop cap làm hiển thị chữ đầu dòng của bài viết của bạn lớn hơn bình thường giúp blog của bạn trở nên chuyên nghiệp hơn. Nếu bạn đang tìm kiếm một giải pháp tùy biến bài viết trở nên độc đáo và sinh động hơn thì đây chắc chắn là một tính năng rất hay nó giúp văn bản hiển thị trở nên chuyên nghiệp hơn lôi cuốn người đọc hơn với một thiết kế lạ và độc đáo.
Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách tạo Drop cap nhờ việc sử dụng Plugin Initial Letter WordPress với những tùy chỉnh vô cùng đơn giản là bạn có ngay một văn bản độc đáo tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách cách tạo Drop cap cho bài viết wordpress không dùng Plugin.
Tạo Drop cap cho bài viết wordpress không dùng Plugin
Có rất nhiều cách khác nhau để làm cho văn bản của bạn sinh động hơn tuy nhiên việc tạo chữ cái lớn trong văn bản là điều đơn giản nhất giúp văn bản của bạn có một phong cách riêng. Nếu bạn cảm thấy blog của bạn có quá nhiều Plugin thì bài viết này sẽ giúp bạn, hãy cùng blog thủ thuật tìm hiểu cách tạo Drop cap cho bài viết wordpress không dùng Plugin.
Đầu tiên hãy đăng nhập vào trang quản trị wordpress sau đó chọn Giao diện > sửa (bạn có thể tham khảo bài viết sửa giao diện, plugin WordPress không cần FTP để nắm rõ hơn về cách can thiệp nhanh vào các tập tin giao diện).
Giao diện chỉnh sửa code hiện ra > hãy chọn file Functions.php ở cột menu bên trái sau đó dán đoạn code dưới đây trước thẻ đóng ?> này là được.
function post_first_letter($content = '') {
$pattern = '/<p( .*)?( class="(.*)")??( .*)?>((<[^>]*>|\s)*)(("|“|‘|‘|“|\')?[A-Z])/U';
$replacement = '<p><span title="$7" class="post-first-letter">$7</span>';
$content = preg_replace($pattern, $replacement, $content, 1 );
return $content;
}
add_filter('the_content', 'post_first_letter');
Tiếp tục bạn copy các mẫu CSS mà mình cung cấp dưới đây nếu bạn thích mẫu nào thì chọn > hãy sao chép và dán vào cuối file Style.css là xong.
Mẫu một
.post-first-letter{
float: left;
color: #7FFFD4;
font-size: 60px;
line-height: 50px;
padding-top: 4px;
padding-right: 8px;
padding-left: 2px;
font-family: Georgia;
}
Mẫu hai
.post-first-letter{
float: left;
font-family: Times, Times New Roman, Serif;
color: #00FF00;
font-size: 5em;
font-weight: bold;
line-height: 1em;
padding-right: 0.15em;
}
Mẫu số 3
.post-first-letter{
background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 3em;
font-weight: bold;
margin: 7px 10px 0px 0px;
padding: 10px;
text-transform: uppercase;
}
Với 3 mẫu này bạn có thể tùy chỉnh màu sắc theo ý thích của bạn. Quá đơn giản để bạn có thể tạo Drop cap cho bài viết wordpress không dùng Plugin phải không?
Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!
