Tag: wordpress

WordPress có đoạn code tạo ra hình đại diện mỗi khi đăng bài, và nó cắt tất cả các ảnh khi bạn đăng lên thành các kích thước khác nhau. Điều này bạn có thể tham khảo ở bài loại bỏ các thumbnail WordPress tự sinh khi đăng bài.

Đó là bước đầu tiên bạn cần cài đặt trong quy trình chúng ta học thiết kế web cùng WordPress. Ở bài này chúng ta cùng nhau xây dựng kịch bản bước từng bước tối ưu quy trình tạo thumbnail (hình đại diện cho WordPress nhé).

Kịch bản yêu cầu, là chúng ta thiết kế một web với mỗi bài đăng trung bình có 4 hình ảnh trong đó, làm sao để tối ưu toàn bộ các hình ảnh và tiết kiệm không gian lưu trữ, cũng như tốt nhất cho người sử dụng.

Thứ nhất: Loại bỏ toàn bộ các hình đại diện thừa?

Với kịch bản bên trên mỗi khi đăng 4 hình ảnh lên, theo mặc định, bạn sẽ có 1 hình gốc, 1 hình thumnail cỡ bình thường, 1 hình thumnail cỡ trung bình và một hình thumbnail cỡ lớn đồng nghĩa với 4 hình ảnh, hosting của bạn phải chứa 16 hình điều này nếu bạn làm 100 bài là có 1600 hình ảnh.

Mình dùng hostgator, host nước ngoài, mọi thứ “ăn li mít” hết mà… không phải, hosting trong nước quản lý theo dung lượng host nước ngoài họ nói là umlimited nhưng thực tế bạn chỉ chứa được tối đa 100,000 file thôi. Không tin bạn cứ tìm hiểu mà xem. Tức là tối đa bạn chỉ đăng được khoảng 5000 bài với trung bình 4 ảnh/ bài.

Việc loại bỏ các hình đại diện thừa bạn tham khảo bài viết loại bỏ các thumbnail WordPress.

Thứ hai: Người dùng không muốn phức tạp đâu.

Tức là mỗi khi đăng bài, muốn lựa chọn hình đại diện, bước 01: bạn sẽ đăng các ảnh lên nhé, bước 02: sau đó bấm vào phần chọn hình đại diện (set featured image) bước 02: nhấn chọn hình ảnh, bước 04: nhấn chọn hình đại diện, bước 05: nhấn đăng bài.

Rất lằng nhằng, bây giờ mình muốn là đăng tất cả các hình ảnh lên, sau đó nhấn đăng bài, nó sẽ tự set hình đại diện luôn. 99% người dùng chọn hình ảnh thứ nhất làm hình đại diện.

Đây là đoạn code tự động set hình đại diện khi đăng bài.

[php]
function autoset_featured() {
global $post;
$already_has_thumb = has_post_thumbnail($post->ID);
if (!$already_has_thumb) {
$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ($attached_image) {
foreach ($attached_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment_id);
}
}
}
}
add_action(‘the_post’, ‘autoset_featured’);
add_action(‘save_post’, ‘autoset_featured’);
add_action(‘draft_to_publish’, ‘autoset_featured’);
add_action(‘new_to_publish’, ‘autoset_featured’);
add_action(‘pending_to_publish’, ‘autoset_featured’);
add_action(‘future_to_publish’, ‘autoset_featured’);
[/php]

Tất nhiên bạn bỏ cái này vào dòng thứ 2 trong tệp functions.php ở theme của các bạn. Như vậy khi đăng bài người dùng chỉ cần nhấn đăng bài tự động hình đại diện sẽ được cài đặt, và tất nhiên là khi họ muốn thay đổi họ sẽ nhấn thay đổi 🙂

Thứ ba: Code tìm thumbnail tất cả trong một

Bây giờ trong 1 bài viết, nếu có hình ảnh được cài đặt làm hình ảnh đại diện (set thumbnail) thủ công, tức là nhấn set thumbnail hoặc sử dụng đoạn code bên trên sẽ lấy hình đó là hình đại diện. Với những bài không có cài hình đại diện sẽ lấy hình ảnh đầu tiên làm hình đại diện. Có những bài không có hình đại diện nào thì phải cài một hình mặc định làm hình đại diện.

Cả 3 trường hợp đó sẽ trong một đoạn code như thế này này

[php]
function trogiup_thumbnail($size = ‘full’) {
if (has_post_thumbnail()) {
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, $size);
$image_url = $image_url[0];
} else {
global $post, $posts;
$image_url = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[‘"]([^’"]+)[‘"].*>/i’, $post->post_content, $matches);
$image_url = $matches [1] [0];

//Defines a default image
if(empty($image_url)){
$image_url = get_bloginfo(‘template_url’) . "/img/default.jpg";
}
}

return $image_url;
}
[/php]

Cái này bạn cũng cho vào trong tệp functions.php của theme. Bạn chú ý ở dòng thứ nhất có cái size = full bạn hãy thay bằng cỡ hình đại diện bạn đang dùng medium hoặc thumbnail. Ở dòng có chứa /img/default.jpg bạn cũng cần thay bằng đường dẫn ảnh ở website của bạn.

Tổng kết lại

Với tất cả các giải pháp bên trên bạn có thể quản lý hình ảnh tốt nhất trong WordPress của bạn. Đó là điều quan trong. Nhưng có một vấn đề tất cả các giải pháp trên không đáp ứng được, có là kích thước hình ảnh chưa hiển thị chính xác, bởi vì bạn đang tối ưu hết mức có thể.

Một giải pháp tự cắt thumbnail, tuy nhiên ở giải pháp này 4 hình ảnh ở mỗi bài bạn sẽ có 8 hình ảnh tức là WordPress sẽ tự tạo thumnail theo kích thước của bạn.

Đây là dòng code bạn thêm vào functions.php của theme.

[php]
if (function_exists(‘add_theme_support’)) {
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 300, 200, true);
add_image_size(‘thumbnail’, 300, 200, true);
add_image_size(‘medium’, 300, 200, true);
add_image_size(‘large’, 300, 200, true);
}

[/php]

Xin lưu ý: 300 là chiều rộng, 200 là chiều cao tính bằng px nhé! Tức là ngoài hình ảnh gốc sẽ có 1 hình cỡ 300×200 px hoặc kích thước khác tùy bạn cài đặt.

Để kích thước hình ảnh tốt nhất thì bạn có thể cắt hình ảnh ở máy tính sau đó up lên, cài đặt hình đó làm hình đại diện, đây là một giải pháp siêu tối ưu nhưng thêm 1 bước. Một cách khác như mình đang dùng đó là sử dụng css để co lại kích thước hình ảnh. Cái này mình sẽ trình bày trong bài khác.

Như vậy toàn bộ bài hướng dẫn đã hết, xin lưu ý bài hướng dẫn chỉ dành cho những người đã biết code và sửa chữa được code, mình không trợ giúp với những câu hỏi yêu cầu sửa code của theme bạn đang sử dụng.

Ngoài ra hãy sử dụng plugin EWWW Image Optimizer để tối ưu hình ảnh, hoặc sử dung Son Auto Save Image để đưa hình ảnh về dễ dàng hơn. Hãy đưa ý kiến của bạn về những giải pháp bạn đang sử dụng để tối ưu và quản lý hình ảnh tốt nhất nhé.