Như chúng ta đã biết , Drop Cap là thuật ngữ chỉ việc tạo chữ đầu tiên của đoạn văn lớn hơn so với phần còn lại của đoạn chữ. Chúng ta thường bắt gặp các trang báo giấy rất hay sử dụng. Trước đây mình cũng đã có một bài viết Kỹ thuật làm chữ hoa auk dòng (Drop cap) bằng CSS. Hôm nay mình sẽ giúp các bạn cách tạo chữ hoa đầu dòng tự động cho mỗi bài viết trong WordPress.
Cách 1 : Chèn code vào file functions.php
Các bạn tìm đến file functions.php nằm tại folder "them wordPress" mà các bạn đang dùng, rồi dán đoạn code bên dưới vào :
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');
Sau đó các bạn dán tiếp đoạn css sau vào bên trong file style.css.
.post-first-letter {
font-size: 50px;
float: left;
margin-top: 14px;
margin-right: 5px;
}
Cách 2 : Sử dụng Plugin
Nếu bạn cảm thấy cách 1 rườm rà và muốn sử dụng ngay thì có thể dùng Plugin để tạo chữ hoa đầu dòng cho nội dung các bài viết. Có rất nhiều plugin giúp bạn làm điều này, mình xin giới thiệu một số plugin sau đây :
1 Initial Letter
Plugin này cho phép chúng ta chọn kiểu chữ, kích thước và màu sắc của chữ đầu tiên trong nội dung bài viết. Rất dễ sử dụng và tùy chỉnh.
2 Drop Caps
Mặc dù plugin này đã xuất hiện khá lâu, nhưng nó vẫn là một trong những sự lựa chọn cho việc tạo Drop Cap bởi tính linh hoạt của nó. Plugin này cho phép bạn tạo Drop Cap cho những bài viết hay trang chỉ định. Trong phần tùy chỉnh của plugin này, các bạn sẽ có rất nhiều sự chọn lựa.
Mình hy vọng với 2 cách bên trên, các bạn sẽ có thêm kinh nghiệm cho việc quản lý trang web hay blog trên nền tảng WordPress của mình.