Cách thêm hình ảnh nổi bật hoặc hình thu nhỏ bài viết trong WordPress

Cách thêm ảnh nổi bật hoặc hình thu nhỏ bài viết trong WordPress là điều cần thiết cho bất kỳ blogger, nhà phát triển hoặc người sáng tạo nội dung nào. Ảnh nổi bật làm cho bài viết của bạn trở nên hấp dẫn về mặt hình ảnh và đóng vai trò quan trọng trong việc thu hút người đọc, cải thiện SEO, và nâng cao bản xem trước trên mạng xã hội. Cho dù bạn đang chạy một blog, một trang web portfolio hay một cửa hàng trực tuyến, một ảnh nổi bật được đặt đúng vị trí có thể tăng đáng kể tác động của nội dung bạn.

Trong bài viết này, bạn sẽ tìm hiểu cách bật và thêm hình ảnh nổi bật trong WordPress bằng cách sử dụng mã và cài đặt theme . Chúng tôi cũng sẽ hướng dẫn bạn thêm hình ảnh thông qua Classic Editor và Elementor để bạn có thể chọn phương pháp tốt nhất cho quy trình làm việc của mình.

Tại sao sử dụng ảnh nổi bật trong bài viết?

Hình ảnh nổi bật rất quan trọng trong việc làm cho các bài viết WordPress của bạn trở nên hấp dẫn và chuyên nghiệp hơn. Chúng đóng vai trò là tín hiệu hình ảnh giúp thu hút sự chú ý của người đọc, nâng cao tính thẩm mỹ tổng thể của blog hoặc trang web của bạn và tạo sự thống nhất trên nội dung của bạn. Ngoài việc cải thiện hình thức trực quan, các nền tảng truyền thông xã hội thường sử dụng hình ảnh nổi bật khi nội dung của bạn được chia sẻ, mang lại sự hiện diện mạnh mẽ hơn cho các bài đăng của bạn và tăng tỷ lệ nhấp chuột.

Do tác động của chúng, việc quản lý các tệp media của bạn, đặc biệt khi trang web của bạn phát triển, cũng quan trọng như việc thêm chúng. Thư viện media lộn xộn có thể làm chậm quy trình làm việc của bạn và khiến việc tìm kiếm hoặc tái sử dụng hình ảnh một cách hiệu quả trở nên khó khăn.

Đó là lý do tại sao các công cụ như WP Media Folder được khuyến nghị cao. Với các tính năng như thư mục không giới hạn, bộ lọc tìm kiếm nâng cao và tích hợp liền mạch với các nền tảng đám mây, WP Media Folder giúp bạn duy trì tổ chức và quản lý hình ảnh nổi bật cũng như các media khác một cách dễ dàng.

Cách bật hình ảnh nổi bật trong WordPress Theme của bạn

Không phải tất cả giao diện WordPress đều tự động hiển thị hoặc kích hoạt tính năng ảnh nổi bật. Nếu bạn không thấy tùy chọn này khi tạo bài viết, có thể giao diện của bạn chưa kích hoạt hỗ trợ cho tính năng này. Đừng lo lắng, bạn có thể kích hoạt nó theo hai cách, sử dụng mã tùy chỉnh (không cần chạm trực tiếp vào các tệp giao diện) hoặc thông qua cài đặt mặc định của theme mà bạn đang sử dụng.

Sử dụng mã tùy chỉnh

Nếu bạn quen thuộc với WordPress và muốn kích hoạt thủ công tính năng hình ảnh nổi bật mà không cần chỉnh sửa trực tiếp tệp functions.php, bạn có thể sử dụng plugin WordPress như WP Code. Plugin này giúp đơn giản hóa việc thêm mã mà không gặp rủi ro làm hỏng trang web của bạn do lỗi nhập liệu.

Để thực hiện việc này, hãy bắt đầu bằng cách cài đặt plugin WPCode từ menu Plugins > Add New. Sau đó, tìm kiếm "WPCode" và nhấp vào Install, rồi Activate.

Khi plugin đã hoạt động, hãy mở menu Code Snippets và chọn + Add Snippet.

Chọn "Thêm mã tùy chỉnh (đoạn mã mới)" tùy chọn.

Sau đó, nhập mã sau vào cột "Xem trước mã", chọn Đoạn mã PHP trong Loại mã và nhấp vào Lưu đoạn mã.

Khi bạn mở trình chỉnh sửa bài đăng, thêm hình ảnh nổi bật sẽ xuất hiện trong thanh bên.

Nếu bạn muốn hiển thị hình ảnh nổi bật trong hiển thị bài viết, hãy thêm mã này vào tệp chủ đề thích hợp bên trong vòng lặp, chẳng hạn như single.php hoặc content.php.

<?php the_post_thumbnail(); ?> 

Bạn cũng có thể thêm điều này để điều chỉnh kích thước hình ảnh.

set_post_thumbnail_size( 300, 200 ); 

Hoặc tạo kích thước tùy chỉnh như.

add_image_size( 'custom-size', 590, 180 ); 

Cuối cùng, gọi với mã sau.

<?php the_post_thumbnail( 'custom-size' ); ?> 

Sử dụng Cài đặt Theme

Nếu bạn không muốn bận tâm đến mã, nhiều theme WordPress hiện đại đã cung cấp cài đặt để kích hoạt và đặt hình ảnh nổi bật trực tiếp từ Customizer. Để thực hiện việc này, hãy đi đến Giao diện > Tùy chỉnh. Sau đó chọn Bài viết Loại > Blog / Lưu trữ.

Sau đó, dưới Cấu trúc bài viết > Thành phần bài viết, bạn sẽ tìm thấy menu Hình ảnh nổi bật. Để kích hoạt nó, chỉ cần nhấp vào biểu tượng mắt như trong hình sau. Bạn cũng có thể điều chỉnh tỷ lệ, hiệu ứng di chuột và kích thước.

Thêm Hình ảnh Nổi bật trong WordPress qua Gutengberg (Block Editor)

Thêm hình ảnh nổi bật trong WordPress bằng cách sử dụng Gutenberg (Block Editor) rất dễ dàng và thực tế, đặc biệt là vì giao diện của nó hiện đại và trực quan. Với Gutenberg, bạn có thể đặt hình ảnh nổi bật trực tiếp từ thanh bên soạn thảo mà không cần cài đặt các plugin bổ sung. Tính năng này phù hợp cho người mới bắt đầu và người dùng có kinh nghiệm muốn tùy chỉnh nhanh chóng giao diện trực quan của các bài viết.

Sau đó, chọn hình ảnh để làm hình ảnh nổi bật, nhập Văn bản ALT và nhấp Đặt Hình ảnh Nổi bật.

Thêm Hình ảnh Nổi bật trong WordPress qua Elementor

Nếu bạn sử dụng Elementor để tạo trang hoặc bài viết, bạn vẫn có thể thêm hình ảnh nổi bật một cách dễ dàng. Mặc dù quy trình hơi khác so với trình chỉnh sửa WordPress mặc định, Elementor cung cấp các tùy chọn để hiển thị hình ảnh nổi bật một cách linh hoạt trong bố cục thiết kế của bạn. Đầu tiên, mở bài viết và nhấp Chỉnh sửa với Elementor.

Sau đó, nhấp vào biểu tượng Cài đặt ở giữa trên cùng. Ở bên trái là menu Hình ảnh Nổi bật, nhấp Chọn Hình ảnh.

Sau đó, màn hình media sẽ xuất hiện. Chọn hình ảnh, nhập Văn bản ALT và cuối cùng nhấp vào Chọn.

Kết luận

Thêm một hình ảnh nổi bật có thể cung cấp giá trị trực quan quan trọng để thu hút sự chú ý của người đọc, củng cố bản sắc nội dung và cải thiện diện mạo khi chia sẻ trên mạng xã hội. Ngoài việc làm đẹp trang, tính năng này cũng hỗ trợ SEO và làm cho trang web WordPress website của bạn trông chuyên nghiệp hơn.

Tuy nhiên, việc giữ cho thư viện media được tổ chức và hiệu quả cũng rất quan trọng khi số lượng hình ảnh tải lên tăng lên. Bạn có thể sử dụng WP Media Folder, một giải pháp quản lý media WordPress với các tính năng nổi bật như thư mục không giới hạn, tìm kiếm nâng cao và tích hợp đám mây. Hãy thử ngay bây giờ để quản lý hình ảnh nổi bật của bạn nhanh chóng, hiệu quả và không căng thẳng!