WordPress – Liên kết ảnh ngoài cho Feature image

Trên bước đường tìm kiếm cách sử dụng feature image qua 1 link ngoài trên wordpress. Mình bắt gặp 1 thủ thuật chỉnh sửa code rất hay

Feature image là gì

Feature image là ảnh bìa của một bài viết (post, page) tựa như trang bìa của một quyển sách nằm trên kệ vậy

Ảnh trái và phải là feature image publish ngoài trang chủ và sau khi share link lên facebook

Thiết lập feature image trong dashboard

Trong giao diện soạn thảo mặc định widget Feature Image nằm bên phải

Và bạn chỉ có thể chọn Feature Image từ hình ảnh trong thư mục uploads của wordpress mà thôi

Tại sao nên sử dụng link ngoài cho Feature image

Với mỗi ảnh sau khi up lên thư mục uploads, nó sẽ được nhân ra 3 file với 3 kích thước.. và như thế khi website của bạn phình to thì uploads là thư mục chiếm dung lượng nhiều nhất (mà bạn phải trả tiền thuê hosting hàng năm)

Ngoài lý do tiết kiệm bộ nhớ, việc tập trung các feature image về 1 chỗ giúp bạn đơn giản hơn trong khâu update

Có nên dùng Plugin?

Có khá nhiều Plugin giúp bạn giải quyết nhanh gọn lẹ vấn đề này, ví dụ như Featured Image from URL, mà lại còn miễn phí. Tuy nhiên nếu 1 ngày nào đó, nhà phát triển ngừng phát hành thì trang web của bạn sẽ đối diện với điều kinh khủng nhất: tất cả các bài viết bị mất Feature image.

Thiết lập tuỳ chọn URL bằng function

Qua 3 bước

1. Tạo ô URL để người dùng nhập link feature image bằng  admin_post_thumbnail_html filter
2. Sử dụng save_post action để lưu URL (sau khi kiểm tra đường link hợp lệ) trong meta
3. Sử dụng post_thumbnail_html filter để xuất thẻ <img> ghi đè lên các giá trị mặc định với đường link feature image đã lưu trong meta

Truy cập FTP vào thư mục cài wordpress cho trang web, mở file function.php trong theme đang sử dụng kéo xuống dưới cùng để thêm vào đoạn code 1 (tổng cộng là 5 đoạn code)

function url_is_image( $url ) {
    if ( ! filter_var( $url, FILTER_VALIDATE_URL ) ) {
        return FALSE;
    }
    $ext = array( 'jpeg', 'jpg', 'gif', 'png' );
    $info = (array) pathinfo( parse_url( $url, PHP_URL_PATH ) );
    return isset( $info['extension'] )
        && in_array( strtolower( $info['extension'] ), $ext, TRUE );
}

tiếp theo là code 2 gồm 3 dòng sau

add_filter( 'admin_post_thumbnail_html', 'thumbnail_url_field' );
add_action( 'save_post', 'thumbnail_url_field_save', 10, 2 );
add_filter( 'post_thumbnail_html', 'thumbnail_external_replace', 10, PHP_INT_MAX );

tiếp tục là đoạn code 3

function thumbnail_url_field( $html ) {
    global $post;
    $value = get_post_meta( $post->ID, '_thumbnail_ext_url', TRUE ) ? : "";
    $nonce = wp_create_nonce( 'thumbnail_ext_url_' . $post->ID . get_current_blog_id() );
    $html .= '<input type="hidden" name="thumbnail_ext_url_nonce" value="' 
        . esc_attr( $nonce ) . '">';
    $html .= '<div><p>' . __('Or', 'txtdomain') . '</p>';
    $html .= '<p>' . __( 'Enter the url for external image', 'txtdomain' ) . '</p>';
    $html .= '<p><input type="url" name="thumbnail_ext_url" value="' . $value . '"></p>';
    if ( ! empty($value) && url_is_image( $value ) ) {
        $html .= '<p><img style="max-width:150px;height:auto;" src="' 
            . esc_url($value) . '"></p>';
        $html .= '<p>' . __( 'Leave url blank to remove.', 'txtdomain' ) . '</p>';
    }
    $html .= '</div>';
    return $html;
}

Lưu ý: thay thế "txtdomain" thành domain của bạn. Ví dụ như "https://www.vietchigo.vn" Sau khi nhập 3 đoạn code này, lưu file function.php thì ô nhập đường dẫn external image sẽ xuất hiện trong trình soạn thảo Post trong dashboard.

Nếu nhập đường dẫn ảnh vào và Enter thì sẽ xuất hiện thumbnail ảnh (bên phải). Thêm đoạn code 4 để lưu lại tiến trình

function thumbnail_url_field_save( $pid, $post ) {
    $cap = $post->post_type === 'page' ? 'edit_page' : 'edit_post';
    if (
        ! current_user_can( $cap, $pid )
        || ! post_type_supports( $post->post_type, 'thumbnail' )
        || defined( 'DOING_AUTOSAVE' )
    ) {
        return;
    }
    $action = 'thumbnail_ext_url_' . $pid . get_current_blog_id();
    $nonce = filter_input( INPUT_POST, 'thumbnail_ext_url_nonce', FILTER_SANITIZE_STRING );
    $url = filter_input( INPUT_POST,  'thumbnail_ext_url', FILTER_VALIDATE_URL );
    if (
        empty( $nonce )
        || ! wp_verify_nonce( $nonce, $action )
        || ( ! empty( $url ) && ! url_is_image( $url ) )
    ) {
        return;
    }
    if ( ! empty( $url ) ) {
        update_post_meta( $pid, '_thumbnail_ext_url', esc_url($url) );
        if ( ! get_post_meta( $pid, '_thumbnail_id', TRUE ) ) {
            update_post_meta( $pid, '_thumbnail_id', 'by_url' );
        }
    } elseif ( get_post_meta( $pid, '_thumbnail_ext_url', TRUE ) ) {
        delete_post_meta( $pid, '_thumbnail_ext_url' );
        if ( get_post_meta( $pid, '_thumbnail_id', TRUE ) === 'by_url' ) {
            delete_post_meta( $pid, '_thumbnail_id' );
        }
    }
}

Đây là hàm kiểm tra liên kết, nếu đường dẫn hợp lệ sẽ được lưu vào '_thumbnail_ext_url' post meta. Nếu ô URL trống và Meta đã lưu trước đó, nó sẽ DELETE để làm trống ô URL code 5 là code cuối cùng, thiết lập các thẻ HTML sau khi giá trị URL được lưu trong meta.

function thumbnail_external_replace( $html, $post_id ) {
    $url =  get_post_meta( $post_id, '_thumbnail_ext_url', TRUE );
    if ( empty( $url ) || ! url_is_image( $url ) ) {
        return $html;
    }
    $alt = get_post_field( 'post_title', $post_id ) . ' ' .  __( 'thumbnail', 'txtdomain' );
    $attr = array( 'alt' => $alt );
    $attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, NULL );
    $attr = array_map( 'esc_attr', $attr );
    $html = sprintf( '<img src="/%s"', esc_url($url) );
    foreach ( $attr as $name => $value ) {
        $html .= " $name=" . '"' . $value . '"';
    }
    $html .= ' />';
    return $html;
}