Apakah mungkin mengatur gambar yang ditampilkan dengan URL gambar eksternal


20

Saya tahu ada plugin yang mengambil gambar dari URL jarak jauh dan menyimpan secara lokal. Saya hanya ingin tahu apakah mungkin untuk tidak menyimpan gambar di Media Library namun menggunakannya sebagai Featured Image ?


Anda bisa melakukannya dengan bidang khusus tempat Anda menyimpan URL gambar eksternal. Mungkin sulit untuk membuatnya bekerja setiap kali the_post_thumnail()hadir (atau serupa fungsi) atau untuk membuatnya bekerja dengan gambar yang berbeda ukuran ditentukan oleh tema atau plugin yang.
cybmeta

1
Anda dapat menggunakan plugin ini untuk mengatur url gambar eksternal sebagai gambar Anda fitur: wordpress.org/plugins/wp-remote-thumbnail
Lanjutan SEO

Apakah itu menyimpan gambar secara lokal atau menelepon dari jarak jauh?
Volatil3

@ Volatil3 Saya belum menguji tetapi membaca deskripsi plugin saya akan mengatakan itu memanggilnya dari jarak jauh.
Andy Macaulay-Brook

Jawaban:


35

Ya, itu mungkin dan sangat mudah.

Ini adalah alur kerja yang saya sarankan:

  1. Letakkan UI di suatu tempat untuk menyisipkan URL gambar yang ditampilkan. Mungkin pilihan terbaik adalah dengan menggunakan 'admin_post_thumbnail_html'hook filter
  2. Gunakan 'save_post'kait tindakan untuk menyimpan URL (setelah rutinitas keamanan dan validasi) dalam meta pos kustom
  3. Gunakan 'post_thumbnail_html'kait filter untuk menampilkan <img>markup yang tepat , menimpa default, jika posting yang memerlukan gambar unggulan memiliki meta posting dengan gambar unggulan eksternal

Agar berhasil, alur kerja ini membutuhkan gambar unggulan untuk ditampilkan di templat menggunakan get_the_post_thumnbail()atau the_post_thumbnail()fungsi.

Selain itu, kita harus yakin bahwa '_thumbnail_id'nilai meta memiliki nilai tidak kosong ketika kita menetapkan meta untuk URL eksternal, jika tidak has_post_thumbnail()akan mengembalikan false untuk posting yang hanya memiliki gambar fitur eksternal.

Bahkan, ada kemungkinan bahwa sebuah postingan memiliki gambar fitur lokal standar dan satu set melalui alur kerja kami, dan dalam hal ini eksternal akan digunakan.

Untuk menerapkan alur kerja kami, kami memerlukan fungsi untuk memvalidasi URL yang digunakan sebagai gambar berfitur eksternal, karena kami harus yakin itu adalah URL gambar yang valid.

Ada berbagai cara untuk melakukan tugas ini; di sini saya menggunakan cara yang sangat sederhana yang hanya melihat URL, tanpa mengunduh gambar. Ini hanya berfungsi untuk URL gambar statis dan tidak memverifikasi bahwa gambar itu benar-benar ada, tetapi cepat. Ubah ke sesuatu yang lebih maju jika Anda perlu (di sini ada bantuan).

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

Sangat mudah. Sekarang mari kita tambahkan 3 kait yang dijelaskan dalam alur kerja di atas:

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

dan fungsi terkait. Pertama yang menampilkan bidang di admin:

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

Perhatikan bahwa saya telah menggunakan 'txtdomain'sebagai domain teks, tetapi Anda harus menggunakan domain teks terdaftar yang benar.

Beginilah tampilan output saat kosong:

URL eksternal untuk gambar unggulan: bidang

Dan inilah tampilannya setelah menambahkan URL gambar dan menyimpan / memperbarui posting:

URL eksternal untuk gambar fitur: bidang setelah mengisi dan disimpan

Jadi, sekarang UI admin kami selesai, mari kita tulis rutin menyimpan:

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

Fungsi, setelah beberapa pemeriksaan keamanan, melihat URL yang diposting dan jika tidak apa-apa, simpan dalam '_thumbnail_ext_url'meta pos. Jika URL kosong dan meta disimpan, itu dihapus, memungkinkan untuk menghapus meta hanya dengan mengosongkan bidang URL eksternal.

Hal terakhir yang harus dilakukan adalah menampilkan markup gambar unggulan ketika URL gambar eksternal kami diatur dalam 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;
}

Kita sudah selesai.

Apa yang tersisa untuk dilakukan

Dalam output gambar yang ditampilkan, saya tidak pernah menggunakan widthatau heightproperti, atau kelas yang biasanya ditambahkan, seperti WordPress 'attachment-$size'. Itu karena mengendus ukuran gambar memerlukan kerja ekstra yang akan memperlambat pemuatan halaman, terutama jika Anda memiliki lebih dari satu gambar unggulan di halaman.

Jika Anda memerlukan atribut tersebut, Anda dapat menggunakan kode saya menambahkan panggilan balik untuk wp_get_attachment_image_attributes'memfilter (ini adalah pengait WordPress standar ) atau mungkin Anda dapat mengubah kode saya untuk mengendus ukuran gambar dan menampilkan atribut dan kelas yang terkait.

Pengaya Plugin

Semua kode yang diposting di sini, dengan pengecualian menambahkan inisialisasi domain teks yang tepat, tersedia sebagai plugin yang berfungsi penuh dalam Gist di sini . Kode di sana menggunakan namespace, sehingga membutuhkan PHP 5.3+.

Catatan

Tentu saja, Anda harus yakin bahwa Anda memiliki lisensi dan otorisasi untuk menggunakan dan hotlink gambar di situs Anda dari yang eksternal.


di mana saya harus meletakkan kode ini
Ankit Agrawal

bisa tolong jelaskan kode mana, di halaman mana kita harus menulis. Saya seorang pemula di PHP / Wordpress jadi tolong jelaskan langkah demi langkah. Terima kasih
Ankit Agrawal

@AnkitAgrawal lihat di sini
gmazzap
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.