Hướng dẫn lấy hình đại diện bài viết (thumbnail) trong wordpress

Hướng dẫn lấy hình đại diện bài viết (thumbnail) trong wordpress

Ngày 21 - 02 - 2017 - Tại chuyên mục: Wordpress - Lượt xem: 18256

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.

1. Hiển thị khu vực post ảnh 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à.

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.

Khu vực post ảnh thumbnail trong wordpress

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.

2. Tùy chỉnh crop hình ảnh thumbnail trong wordpress.

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.

Tùy chỉnh kích thước thumbnail trong wordpress

Mặc định khi úp ảnh lên media wordpress sẽ tự động crop thành 3 size tương ứng là:

  • Cở thu nhỏ là Thumbnail
  • Cở trung bình là Medium
  • Cở lớn là Large

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:

Hướng dẫn crop ảnh thumbnail trong wordpress

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à:

Đoạn code trên mình đã thực hiện crop ảnh thành 2 ảnh:

  • Ảnh 1 có mã thumbnail là home-thumb và kích thước là 270×250
  • Ảnh 2 có mã thumbnail là cat-thumb và kích thước là 300×150

Đơ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.

3. Hiển thị ảnh đại diện (get thumbnail) trong wordpress.

Để hiển thị thumbnail bạn sử dụng đoạn code sau:

Trong đó:

  • $post_id là id của bài viết bạn cần get thumbnail
  • thumbnail’ là kích thước bạn cần lấy. Các bạn có thể thay đổi thành: Medium, Large, home-thumb, cat-thumb để lấy đúng kích thược mà bạn mong muốn. Các kích thước này bạn định nghĩa ở phần crop hình ảnh phía trên.
  • array( ‘class’ =>’thumnail’) là mảng tùy chọn thuộc tính của thẻ img hiển thị hình ảnh, ví dụ như class, tite, alt …

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.

4. Ví dụ lấy 5 bài viết mới nhất có hình thumbnail trong wordpress:

5. Tóm lại:

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!

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)

11
  • NhânCảm ơn anh!!!

    Thích Trả lời 6 năm trước

  • phạm cao anmì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

    Thích Trả lời 6 năm trước

    • Huy KiraKhi 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!

      Thích Trả lời 6 năm trước

  • Đôn LêAnh ơi giúp em lỗi ảnh không hiển thị trên website với ạ https://thibanglaixemay.info

    Thích Trả lời 5 năm trước

    • Huy KiraCá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!

      Thích Trả lời 5 năm trước

  • hung phamEm 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

    Thích Trả lời 4 năm trước

  • thi bằng lái xe máy tại Hà NộiCảm ơn bài viết rất tâm huyết của ad

    Thích Trả lời 4 năm trước

  • Trí Tíntrong 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

    Thích Trả lời 4 năm trước

  • Hoàng Thanh NamChao 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 !

    Thích Trả lời 4 năm trước

  • Ha thanh thuya ơ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?

    Thích Trả lời 4 năm trước

  • nguyễn tâmtrang này https://tamkhoe.vn/ ở trang chủ không đặt là Medium được mong ad giúp . cám ơn

    Thích Trả lời 10 tháng trước

AVT