Trở lại với loạt bài viết hướng dẫn wordpress cho những bạn mới học wordpress. Hôm nay mình xin giới thiệu cách lấy ảnh đại diện của bài viết hay còn gọi là get thumbnail bài viết hoặc hiển thị ảnh thumbnail và các vấn đề liên quan khác của thumbnail trong wordpress.
Đầu tiên khi bạn tạo theme wordpress thì khu vực để úp ảnh thumnail trong mỗi bài viết sẽ không có sẵn. Bạn phải thêm code vào file functions.php để hiển thị khu vực này hiển thị. Đoạn code bạn cần thêm đó là.
<?php add_theme_support( 'post-thumbnails' ); ?>
Sau khi bạn thêm đoạn code đó vào file functions.php, bạn vào thêm 1 một bài viết mới sẽ thấy khu vực để úp ảnh thumbnail.
Các bạn có thể kết hợp với code lấy ảnh đầu tiên làm ảnh thumbnail trong wordpress để không cần post ảnh đại diện chỉ cần post ảnh trong bài viết mà vẫn có thumbnail.
Mặc định khi bạn post 1 ảnh lên media của wordpress thì nó sẽ tự động crop là thành 2 hoặc 3 hình có kích thước nhỏ hơn.
Để tùy chỉnh kích thước hình ảnh khi úp lên media của wordpress các bạn vào admin sau đó vào: Cài đặt -> phương tiện, tại đây các bạn sẽ thấy giao diện tùy chỉnh các kích thước hình ảnh được crop khi úp lên media. Các bạn có thể thay đổi kích thước tùy theo yêu cầu sử dụng.
Mặc định khi úp ảnh lên media wordpress sẽ tự động crop thành 3 size tương ứng là:
Và nó chỉ crop khi hình ảnh có kích thước lớn hơn so với những kích thước đã được tùy chỉnh ở trên. Nếu không muốn ảnh crop khi úp ảnh lên media thì các bạn có thể chỉ chỉnh như thế này:
Ngoài ra để crop thêm được nhiều kích thước khác nhau các bạn có thể thêm 1 đoạn code vào file functions.php để thực hiện điều này. Đoạn code đó là:
<?php add_action( 'after_setup_theme', 'wpdocs_theme_setup' ); function wpdocs_theme_setup() { add_image_size( 'home-thumb', 270, 250); add_image_size( 'cat-thumb', 300, 150); } ?>
Đoạn code trên mình đã thực hiện crop ảnh thành 2 ảnh:
Đơn vị ở đây là px nha. Các đoạn mã home-thumb, cat-thumb hay Thumbnail, Medium, Large là các đoạn mã giúp chúng ta trong việc lấy kích thước hình ảnh cho chuẩn xác. Chúng ta sẽ sử dụng chúng trong phần lấy ảnh đại diện ra ngoài.
Để hiển thị thumbnail bạn sử dụng đoạn code sau:
<?php echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' =>'thumnail') ); ?>
Trong đó:
Trường hợp bạn thích lấy url ảnh đại diện bạn có thể sử dụng đoạn code sau.
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) );?>" alt="<?php the_title(); ?>" />
<ul> <?php $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=5'); ?> <?php global $wp_query; $wp_query->in_the_loop = true; ?> <?php while ($getposts->have_posts()) : $getposts->the_post(); ?> <li> <a href="<?php the_permalink(); ?>"> <?php echo get_the_post_thumbnail( get_the_id(), 'thumbnail', array( 'class' =>'thumnail') ); ?> </a> <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> </li> <?php endwhile; wp_reset_postdata(); ?> </ul>
Trong bài này mình chia sẽ những kiến thức căng bản nhất của thumbnail trong wordpress, hi vọng nó cũng giúp bạn trong quá trình phát triển theme wordpress, và học wordpress.
Có vấn đề gì thắc mắc về thumbnail trong wordpress các bạn có thể cmt phía dưới để cùng trao đổi nhé! Fan page facebook mình: Blog Huy Kira like để nhận code wordpress miễn phí và cùng học wordpress.
Chào thân ái và quyết thắng!
Fonttiengviet.com là một dự án website do JKS thực hiện cho khách hàng Huy Academy.…
Chắc chắn nhiều anh em khi đọc bài viết này sẽ nghĩ tôi đang quảng…
Widget trong WordPress là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm…
Hôm nay mình sẽ hướng dẫn cho anh em cách tạo website blog cực kỳ…
Sống cực tốt anh em ạ :D Sau nhiều năm gắng bó với nghề thiết…
Nhân dịp quay lại viết blog mình share cho anh em code mẫu website blog…
View Comments
Cảm ơn anh!!!
mình muốn chèn link vào ảnh đại điện ra để bật ra link bài viết cho nhanh, như thế có làm được không bạn
Khi get ảnh đại diện bạn bọc cái thẻ a phía ngoài! cho nhanh chèn link vào ảnh chi cho phức tạp bạn!
Anh ơi giúp em lỗi ảnh không hiển thị trên website với ạ
https://thibanglaixemay.info
Cái này thì căng, phải biết trong kia nó dùng plugin gì, hay dùng theme gì mới xử được. Hoặc kiểm tra thử post ảnh đại diện chưa, hay ảnh đại diện bị lỗi!
Em dùng thêm redwaves lite, dùng plugin căn chỉnh size Thumbnail hết rồi nhưng box hiển thị featured image trên web lại quá lớn làm hình ảnh vỡ hết, với lại nhìn web rất xấu, anh có cách nào thu nhỏ lại khu vực này không ạ giúp em với? link web em đây ạ http://taivnn.com
Cảm ơn bài viết rất tâm huyết của ad
trong phần sản phẩm liên quan trên web của em không hiển thị Ảnh đại diện của sản phẩm, mà nó lấy random hình ảnh trong bộ hình. Giờ làm thế nào để đổi lại, sản phẩm liên quan chỉ lấy ảnh đại hiện của sản phẩm để hiện thị ạ.
Website của em: autogaragevn.com
Chao admin, web của mình bị lỗi không hiện ảnh đại diện khi sửa bài, khi viết bài vẫn hiện Set featured image để up ảnh lên, ảnh vẫn hiện bình thường nhưng khi sửa bài thì ảnh không hiện trong phần ảnh đại diện, cũng không hiện Set featured image, Admin xem hỗ trợ giúp mình được không, cảm ơn admin rất nhiều !
a ơi cho e hỏi với. Sau khi e chèn đoạn code vào thế là mở trang web không được luôn. A giúp e xem lỗi với ạ. Giờ phải làm sao ah?
trang này https://tamkhoe.vn/ ở trang chủ không đặt là Medium được mong ad giúp . cám ơn