Có thể đặt hình ảnh nổi bật với URL hình ảnh bên ngoài

Tôi biết có các plugin lấy hình ảnh từ URL từ xa và lưu trữ cục bộ. Tôi chỉ muốn biết liệu có thể không lưu trữ hình ảnh trong Thư viện phương tiện hay không mà sử dụng nó làm Hình ảnh nổi bật ?

Vâng, nó có thể và khá dễ dàng.

Đây là quy trình làm việc tôi đề xuất:

1. Đặt một giao diện người dùng để chèn URL của hình ảnh nổi bật. Có lẽ sự lựa chọn tốt nhất là sử dụng 'admin_post_thumbnail_html'bộ lọc móc
2. Sử dụng 'save_post'hook hành động để lưu URL (sau thói quen xác thực và bảo mật) trong meta bài đăng tùy chỉnh
3. Sử dụng 'post_thumbnail_html'móc lọc để xuất <img>đánh dấu thích hợp , ghi đè mặc định, nếu bài đăng mà hình ảnh nổi bật được yêu cầu có meta bài đăng với hình ảnh nổi bật bên ngoài

Để làm việc, quy trình công việc này cần hình ảnh đặc trưng được hiển thị trong mẫu bằng cách sử dụng get_the_post_thumnbail()hoặc các the_post_thumbnail()chức năng.

Hơn nữa, chúng tôi phải chắc chắn rằng '_thumbnail_id'giá trị meta có giá trị không trống khi chúng tôi đặt meta cho URL bên ngoài, nếu không has_post_thumbnail()sẽ trả về false cho các bài đăng chỉ có hình ảnh nổi bật bên ngoài.

Trong thực tế, có thể một bài đăng có cả hình ảnh đặc trưng cục bộ tiêu chuẩn và một bộ thông qua quy trình làm việc của chúng tôi và trong trường hợp này, bên ngoài sẽ được sử dụng.

Để thực hiện quy trình công việc của chúng tôi, chúng tôi cần một chức năng để xác thực URL được sử dụng làm hình ảnh nổi bật bên ngoài, bởi vì chúng tôi phải chắc chắn đó là một URL hình ảnh hợp lệ.

Có nhiều cách khác nhau để thực hiện nhiệm vụ này; Ở đây tôi sử dụng một cách rất đơn giản chỉ nhìn vào URL mà không tải xuống hình ảnh. Điều này chỉ hoạt động đối với các URL hình ảnh tĩnh và không xác minh rằng hình ảnh thực sự tồn tại, nhưng nó rất nhanh. Sửa đổi nó thành một cái gì đó cao cấp hơn nếu bạn cần ( đây là một số trợ giúp).

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 );
}

Khá dễ dàng. Bây giờ, hãy thêm 3 hook được mô tả trong quy trình làm việc ở trên:

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 );

và các chức năng liên quan. Đầu tiên, cái đầu ra trường trong quản trị viên:

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 ý rằng tôi đã sử dụng 'txtdomain'làm miền văn bản, nhưng bạn nên sử dụng miền văn bản đã đăng ký thích hợp.

Đây là cách đầu ra trông trống rỗng:

Và đây là giao diện sau khi đã thêm URL hình ảnh và lưu / cập nhật bài đăng:

Vì vậy, bây giờ giao diện người dùng quản trị của chúng tôi đã hoàn tất, hãy viết thói quen lưu:

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' );
        }
    }
}

Hàm này, sau một số kiểm tra bảo mật, xem xét URL được đăng và nếu nó ổn, hãy lưu nó trong '_thumbnail_ext_url'meta post. Nếu URL trống và meta đã được lưu, nó sẽ bị xóa, cho phép xóa meta chỉ bằng cách làm trống trường URL bên ngoài.

Điều cuối cùng cần làm là xuất ra đánh dấu hình ảnh nổi bật khi URL hình ảnh bên ngoài của chúng tôi được đặt 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;
}

Chúng ta xong rồi.

Còn lại để làm gì

Trong đầu ra hình ảnh nổi bật mà tôi không sử dụng widthhoặc heightthuộc tính, cũng không phải các lớp mà WordPress thường thêm, thích 'attachment-$size'. Đó là bởi vì việc đánh hơi kích thước của hình ảnh đòi hỏi phải có thêm công việc sẽ làm chậm quá trình tải trang, đặc biệt là nếu bạn có nhiều hơn một hình ảnh nổi bật trong trang.

Nếu bạn cần các thuộc tính đó, bạn có thể sử dụng mã của tôi để thêm một cuộc gọi lại để wp_get_attachment_image_attributes'lọc (đó là một hook WordPress tiêu chuẩn ) hoặc có thể bạn có thể thay đổi mã của tôi để đánh hơi kích thước hình ảnh và các thuộc tính và lớp liên quan đầu ra.

Plugin Gist

Tất cả các mã được đăng ở đây, ngoại trừ việc thêm một khởi tạo miền văn bản thích hợp, có sẵn dưới dạng một plugin hoạt động đầy đủ trong Gist ở đây . Mã ở đó sử dụng một không gian tên, vì vậy nó yêu cầu PHP 5.3+.

Ghi chú

Tất nhiên, bạn nên chắc chắn rằng bạn có giấy phép và ủy quyền sử dụng và hình ảnh hotlink trong trang web của bạn từ những người bên ngoài.