Cách tạo ảnh chức năng cho bài viết WordPress

[Thủ thuật WordPress] Tạo ảnh chức năng cho bài viết WordPress (hay được gọi là Featured Image) – Ảnh chức năng cho bài viết hay còn được gọi là ảnh đại diện cho bài viết đó. Nếu bạn đang sử dụng mã nguồn WordPress thì nó được gọi là Featured Image (hay là ảnh chức năng cho bài viết) thông thường ảnh chức năng cho bài viết rất hữu dụng nó được dùng để hiển thị hình ảnh đại diện cho trang Web ngoài ra nó còn có thể được dùng làm ảnh thumbnail ở các mục bài viết liên quan, bài viết ngẫu nhiên… Tuy nhiên có một số giao diện ảnh chức năng cho bài viết không được tích hợp sẵn trong giao diện hoặc bạn cảm thấy việc chọn hình ảnh chức năng sau mỗi lần viết bài mới mất thời gian và bạn muốn hình ảnh chức năng sau mỗi lần viết bài mới tự động được thêm vào?

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách sử dụng Avatar trong WordPress bằng cách sử dụng các Avatar trên mạng xã hội Facebook, Google ++ giúp bạn nhanh chóng thay đổi Avatar mặc định trong WordPress thành Avatar trên các mạng xã hội bạn đang dùng tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo ảnh chức năng cho bài viết WordPress.

wordpress tip and share 1

Tạo ảnh chức năng cho bài viết WordPress

Như mình đã nói ở trên một số giao diện không xuất hiện tính năng tạo hình ảnh chức năng cho bài viết hoặc bạn muốn tự động lấy hình ảnh làm ảnh chức năng cho bài viết hay bạn muốn mặc định ảnh chức năng cho bài viết thì phải làm sao? Hãy cùng blog thủ thuật tìm hiểu cách sử dụng và tùy chỉnh ảnh chức năng cho bài viết WordPress!

Đầu tiên để tạo hình ảnh đại diện cho bài viết trong WordPress, nếu giao diện được tích hợp sẵn khi bạn viết bài viết mới bạn sẽ thấy xuất hiện ở cột phía bên phải. Chỉ cần Kích vào “Chọn ảnh tiêu biểu” và sau đó chọn hình ảnh từ thư viện hình ảnh là được (nếu bạn không thấy có thể vào nút “Tùy chọn hiển thị” và tích chọn là được)

anh-dai-dien-bai-viet 1

Tuy nhiên khi vào “Tùy chọn hiển thị” bạn không thấy tính năng này vậy thì phải làm sao? Trường hợp này giao diện của bạn chưa tích hợp tính năng “ảnh đại diện” vậy để kích hoạt tính năng này phải thực hiện như thế nào? Rất đơn giản bạn chỉ cần thực hiện như sau?

Đầu tiên hãy truy cập vào tập tin Functions.php của giao diện đang sử dụng (nếu chưa biết truy cập vào tập tin này bạn có thể tham khảo bài viết cách sửa giao diện, plugin WordPress không cần FTP) sau đó dán đoạn code sau vào trước thẻ đóng ?> là được.

add_theme_support( ‘post-thumbnails’ );

Sau khi thêm câu lệnh trên vào tập tin Functions.php lúc này bạn sẽ thấy xuất hiện chức năng “ảnh đại diện” cho bài viết trong WordPress!

Thêm ảnh chức năng tự động

Nếu bạn cảm thấy công việc thêm ảnh chức năng cho bài viết mất thời gian thì bạn có thể sử dụng đoạn mã sau và dán trực tiếp vào trước thẻ ?> của tập tin Functions.php của giao diện đang sử dụng là được.

add_action( 'save_post', 'it60s_set_featured_image' );
function it60s_set_featured_image() {
    if ( ! isset( $GLOBALS['post']->ID ) )
        return NULL;        
    if ( has_post_thumbnail( get_the_ID() ) )
        return NULL;            
        $args = array(
            'numberposts'    => 1,
            'order'          => 'ASC', // DESC for the last image
            'post_mime_type' => 'image',
            'post_parent'    => get_the_ID(),
            'post_status'    => NULL,
            'post_type'      => 'attachment'
        );          
        $attached_image = get_children( $args );
        if ( $attached_image ) {
            foreach ( $attached_image as $attachment_id => $attachment )
                set_post_thumbnail( get_the_ID(), $attachment_id );
        }           
}

Với đoạn mã trên nó sẽ tự động lấy ảnh đại diện cho bài viết khi bạn đăng bài viết xong. Mặc định nó sẽ lấy hình ảnh đầu tiên làm hình ảnh đại diện.

Thêm ảnh chức năng mặc định

Nếu trước trong các bài viết không có “ảnh chức năng” cho bài viết đoạn mã sau sẽ giúp bạn tạo ra hình ảnh thumbnail mặc định cho các bài viết không có feature image. Sao chép đoạn mã bên dưới và dán vào trước thẻ đóng ?> của tập tin Functions.php của giao diện đang dùng.

add_filter( 'post_thumbnail_html', 'it60s_post_thumbnail' );
function it60s_post_thumbnail( $html ) {
    if ( empty( $html ) )
        $html = '<img src="' . trailingslashit( get_stylesheet_directory_uri()) . 
                 'images/default-thumbnail.png' . '" alt="" />';
    return $html;
}

Ở đây bạn cần phải tạo thư mục images và trong thư mục này phải có file hình ảnh là default-thumbnail.png!

Sử dụng Plugin tự động

Nếu bạn cảm thấy không tự tin cho việc tùy chỉnh bằng mã lệnh có một cách nhanh nhất đó là bạn hãy cài đặt Plugin Auto post thumbnail với Plugin này các hình ảnh chức năng trong bài viết sẽ trở nên rất dễ dàng và tự động, chỉ cần cài đặt kích hoạt và sử dụng.

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Đánh giá và chia sẻ để nâng cao chất lượng bài viết?

Tỉ lệ / 5. Phiếu:

Cảm ơn bạn đã đánh giá ...

Hãy theo dõi chúng tôi trên xã hội!

Chúng tôi rất tiếc vì bài đăng này không hữu ích cho bạn!

Hãy để chúng tôi cải thiện bài đăng này!

Hãy cho chúng tôi biết làm thế nào chúng tôi có thể cải thiện bài đăng này?

Chia sẻ: - Theo dõi Máy tính & Wordpress trên: Theo dõi Máy tính & Wordpress trên Google News

24 thoughts on “Cách tạo ảnh chức năng cho bài viết WordPress”

  1. ảnh feature bài viết của mình hiển thị trên máy tính rất lớn ở phía trên nội dung bài viết, chiếm toàn bộ màn hình, mình không thể tùy chỉnh được, có đoạn code nào có thể sửa được cho nó nhỏ gọn nằm ở 1 góc thôi không?
    Bác xem như ở bài này https://hotgamek.com/real-gangster-crime/

  2. Trong bài viết của em là ảnh từ một nguồn khác. Code này nó có hiển thị theo cái ảnh này nhưng ở nguồn khác k ? Hay nó sẽ download về xong tự gắn vào bài viết luôn.

    1. Không em nhé, ảnh trên host nhé! Em không nên dùng ảnh ngoài bởi vì sau này có rất nhiều vấn đề, nay host cũng rẻ em nên lưu ảnh trong host luôn nhé !

  3. Bác Thuần cho hỏi làm sao để set ảnh ĐẠI DIỆN CỦA TRANG CHỦ ĐƯỢC NHỈ? mình tìm mãi không thấy, trong khi để ông wp chọn ngẫu nhiên thì xấu quá!

    1. Tùy vào giao diện nhé? nếu giao diện bác chưa có bác có thêm đoạn mã này vào File function.php: add_theme_support( ‘post-thumbnails’ ); là được! luacs này khi viết bài mới bạn sẽ có lựa chọn hình ảnh

  4. Anh ơi cho em hỏi tạo thư mục images ở ngoài cùng của web như public_html hay là tạo thư mục images trong thư mục theme?
    e thấy có 2 thư mục images trong /public_html/wp-admin và /public_html/wp-includes

    E cảm ơn.

  5. Ad ơi cho em hỏi sau cái theme wordpress, khi trong bài viết của e chèn 2 ảnh: Ảnh đầu tiên là ảnh có đuôi .jpg và ảnh thứ 2 là .png sử dung plugin auto post thumbnail thì nó lại lấy ảnh thứ 2 là .png. Nhưng nếu e chèn 2 ảnh PNG thì nó lại lấy đúng ảnh đầu tiên đó. Nghĩa là nó chỉ mặc định lấy ảnh Png làm ảnh đại diện còn jpg thì k lấy. Giờ phải làm sao để nó lấy ảnh đầu tiên không phải Png đúng ạ?

  6. anh Thuần ơi, em muốn chỉnh to kích thước ảnh thumbnail bài viết theo ý muốn thì chỉnh ở đâu ạ ?

    Em cảm ơn anh

  7. Mình muốn hỏi khi mình chọn ảnh đại diện, nhưng mình không muốn ảnh đại diện xuất hiện khi mở bài viết thì thế nào. Vì hiện tại khi mình ở bài viết thì ảnh đại diện lại xuất hiện trên cùng bài viết

      1. Mình đang dùng theme Flatsome, nhưng mỗi khi mình chỉnh function.php lại bị lỗi 500, phải backup lại host, back lại mất 1 ngày, rất mất công. không biết làm thế nào bạn. mình cũng cần chức năng này. nhưng ko dám chỉnh sửa nữa.
        Với lại phần breadcrumbs của mình chỉ hiện mỗi trong Shop, lại chiếm nhiều diện tích quá. Mình tìm cách chỉnh mãi mà ko đc. Bạn xem giúp mình với. Thanks bạn.

        wed của mình: luckygemstone.net.

        1. Chào bạn:
          Lỗi 500 là xuất phát từ việc thiết lập của Webserver như sai cú pháp các file cấu hình khiến Webserver không khởi động lại được. Nói chính xác hơn là trình duyệt của bạn không nhận được tín hiệu truyền tải từ Webserver.

          Nếu bạn dùng Shared Host thì lỗi này thường có 2 nguyên nhân là bạn chèn nội dung file .htaccess sai cú pháp hoặc là CHMOD file .htaccess bị sai. Hãy fix bằng cách xóa nội dung file .htaccess đi và truy cập lại, nếu nó vẫn báo lỗi thì hãy CHMOD file .htaccess về 755, 644 hoặc 744.

          Nếu bạn dùng server riêng (VPS, Dedicated) thì hãy mở file log của webserver ra, nó sẽ nằm trong thư mục /var/log/httpd (Apache) hoặc /var/log/nginx (NGINX) để xem file cấu hình nào bị lỗi, thường thì sẽ phát sinh ra trong lúc bạn táy máy các file cấu hình VirtualHost.

          Đối với breadcrumbs bạn hãy kiểm tra phần tử của nó sau đó bạn vào CSS và chỉnh sửa lại cho phù hợp là được!

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Scroll to Top