Cách tạo Drop Cap cho từng bài viết trong WordPress

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 đầu 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 theme 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.

Chúc các bạn thành công !

Chuyên Mục: WordPress

Bài viết được đăng bởi webmaster