¿Es posible establecer una imagen destacada con URL de imagen externa?


20

Sé que hay complementos que obtienen imágenes de una URL remota y se almacenan localmente. Solo quiero saber si es posible no almacenar la imagen en la Biblioteca de medios y usarla como imagen destacada .


Puede hacerlo con un campo personalizado donde almacena la URL de la imagen externa. Puede ser difícil hacerlo funcionar cada vez que the_post_thumnail()está presente (o una función similar) o hacerlo funcionar con diferentes tamaños de imagen definidos por el tema o el complemento.
cybmeta

1
Puede usar este complemento para configurar la url de imagen externa como su imagen destacada: wordpress.org/plugins/wp-remote-thumbnail
SEO avanzado

¿Almacena la imagen localmente o llama de forma remota?
Volatil3

@ Volatil3 No lo he probado, pero al leer la descripción del complemento, diría que lo llama de forma remota.
Andy Macaulay-Brook

Respuestas:


35

Sí, es posible y bastante fácil.

Este es el flujo de trabajo que sugiero:

  1. Coloque en algún lugar una IU para insertar la URL de la imagen destacada. Probablemente la mejor opción es usar 'admin_post_thumbnail_html'gancho de filtro
  2. Use 'save_post'el enlace de acción para guardar la URL (después de la rutina de seguridad y validación) en una metaetiqueta personalizada
  3. Use el 'post_thumbnail_html'gancho de filtro para generar el <img>marcado adecuado , anulando el valor predeterminado, si la publicación para la que se requiere la imagen destacada tiene el mensaje meta con la imagen destacada externa

Para funcionar, este flujo de trabajo necesita que la imagen presentada se muestre en la plantilla usando get_the_post_thumnbail()o the_post_thumbnail()funciones.

Además, debemos estar seguros de que el '_thumbnail_id'metavalor tiene un valor no vacío cuando configuramos el meta para la URL externa, de lo contrario has_post_thumbnail(), devolverá falso para las publicaciones que solo tienen una imagen destacada externa.

De hecho, es posible que una publicación tenga una imagen destacada local estándar y un conjunto a través de nuestro flujo de trabajo, y en este caso se usará la externa.

Para implementar nuestro flujo de trabajo, necesitamos una función para validar la URL utilizada como imagen destacada externa, porque debemos asegurarnos de que sea una URL de imagen válida.

Hay diferentes formas de hacer esta tarea; aquí uso una forma muy simple que solo mira la URL, sin descargar la imagen. Esto funciona solo para URL de imagen estática y no verifica que la imagen realmente exista, pero es rápida. Modifíquelo a algo más avanzado si lo necesita ( aquí hay algo de ayuda).

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

Muy fácil. Ahora agreguemos los 3 ganchos descritos en el flujo de trabajo anterior:

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

y las funciones relacionadas. Primero el que genera el campo en el administrador:

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

Tenga en cuenta que lo he usado 'txtdomain'como dominio de texto, pero debe usar un dominio de texto registrado adecuado.

Así es como se ve la salida cuando está vacía:

URL externa para imagen destacada: el campo

Y así es como se ve después de agregar una URL de imagen y guardar / actualizar la publicación:

URL externa para la imagen destacada: el campo después de rellenar y guardar

Entonces, ahora que nuestra interfaz de usuario de administración ha terminado, escribamos la rutina de guardado:

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

La función, después de algunas comprobaciones de seguridad, mira la URL publicada y, si está bien, la guarda en '_thumbnail_ext_url'la meta meta. Si la URL está vacía y se guardó el meta, se elimina, lo que permite eliminar el meta simplemente vaciando el campo URL externo.

Lo último que debe hacer es generar el marcado de la imagen destacada cuando nuestra URL de imagen externa se establece en 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;
}

Hemos terminado.

Lo que queda por hacer

En la salida de imagen presentada no he usado widthni heightpropiedades, ni clases que WordPress suele agregar, como 'attachment-$size'. Esto se debe a que detectar el tamaño de una imagen requiere un trabajo adicional que ralentizará la carga de la página, especialmente si tiene más de una imagen destacada en la página.

Si necesita esos atributos, puede usar mi código agregando una devolución de llamada para wp_get_attachment_image_attributes'filtrar (es un enlace estándar de WordPress ) o tal vez puede alterar mi código para detectar el tamaño de la imagen y generar atributos y clases relacionados.

Plugin Gist

Todo el código publicado aquí, con la excepción de agregar una inicialización de dominio de texto adecuada, está disponible como complemento completo en un Gist aquí . El código allí usa un espacio de nombres, por lo que requiere PHP 5.3+.

Notas

Por supuesto, debe asegurarse de tener licencia y autorización para usar y vincular imágenes en su sitio de otras externas.


donde debo poner este código
Ankit Agrawal

¿puede explicar qué código, en qué página tenemos que escribir? Soy un novato en PHP / Wordpress, así que explique paso a paso. Gracias
Ankit Agrawal

@AnkitAgrawal mira aquí
gmazzap
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.