É possível definir uma imagem em destaque com URL de imagem externa

19

Eu sei que existem plugins que buscam imagens de URL remota e armazenam localmente. Eu só quero saber se é possível não armazenar imagem na Biblioteca de Mídia e usá-la como Imagem em Destaque ?

Volatil3
fonte
Você pode fazer isso com um campo personalizado onde armazena o URL da imagem externa. Pode ser difícil fazê-lo funcionar sempre que the_post_thumnail()estiver presente (ou função semelhante) ou fazê-lo funcionar com diferentes tamanhos de imagem definidos pelo tema ou plugin.
cybmeta
1
Você pode usar este plug-in para definir o URL da imagem externa como sua imagem em destaque: wordpress.org/plugins/wp-remote-thumbnail
Advanced SEO
Armazena a imagem localmente ou liga remotamente?
precisa saber é o seguinte
@ Volatil3 Eu não testei, mas lendo a descrição do plugin, eu diria que chama remotamente.
Andy Macaulay-Brook

Respostas:

35

Sim, é possível e muito fácil.

Este é o fluxo de trabalho que sugiro:

  1. Coloque em algum lugar uma interface do usuário para inserir o URL da imagem em destaque. Provavelmente a melhor opção é usar o 'admin_post_thumbnail_html'gancho de filtro
  2. Use o 'save_post'gancho de ação para salvar a URL (após a rotina de segurança e validação) em uma meta personalizada de postagem
  3. Use o 'post_thumbnail_html'gancho de filtro para produzir a <img>marcação adequada , substituindo o padrão, se a postagem para a qual a imagem em destaque é necessária tiver a meta de postagem com a imagem em destaque externa

Para funcionar, esse fluxo de trabalho precisa que a imagem em destaque seja mostrada no modelo usando as funções get_the_post_thumnbail()ou the_post_thumbnail().

Além disso, devemos ter certeza de que o '_thumbnail_id'valor meta tem um valor não vazio quando definimos a meta para a URL externa; caso contrário has_post_thumbnail(), retornará falso para postagens que tenham apenas uma imagem em destaque externa.

De fato, é possível que uma postagem tenha uma imagem em destaque local padrão e uma definida por meio de nosso fluxo de trabalho e, nesse caso, a externa seja usada.

Para implementar nosso fluxo de trabalho, precisamos de uma função para validar o URL usado como uma imagem destacada externa, porque precisamos ter certeza de que é um URL de imagem válido.

Existem diferentes maneiras de executar esta tarefa; aqui eu uso uma maneira muito simples que só olha para o URL, sem baixar a imagem. Isso funciona apenas para URLs de imagem estática e não verifica se a imagem realmente existe, mas é rápida. Modifique-o para algo mais avançado, se necessário ( aqui está alguma ajuda).

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

Bem fácil. Agora vamos adicionar os 3 ganchos descritos no fluxo de trabalho acima:

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

e as funções relacionadas. Primeiro o que gera o campo no 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;
}

Observe que eu usei 'txtdomain'como domínio de texto, mas você deve usar um domínio de texto registrado e adequado.

É assim que a saída fica quando vazia:

URL externo para a imagem em destaque: o campo

E é assim que parece depois de adicionar um URL de imagem e salvar / atualizar a postagem:

URL externo para a imagem em destaque: o campo após o preenchimento e o salvamento

Então, agora que a nossa interface de administração está pronta, vamos escrever a rotina de salvamento:

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

A função, após algumas verificações de segurança, examina a URL publicada e, se estiver correta, salva na '_thumbnail_ext_url'meta meta. Se o URL estiver vazio e a meta tiver sido salva, ela será excluída, permitindo remover a meta simplesmente esvaziando o campo URL externo.

A última coisa a fazer é gerar a marcação da imagem em destaque quando o URL da imagem externa estiver definido em 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;
}

Acabamos.

O que resta fazer

Na saída da imagem em destaque, não usei widthnem heightpropriedades, nem classes que o WordPress geralmente adiciona, como 'attachment-$size'. Isso porque detectar o tamanho de uma imagem requer um trabalho extra que diminui o carregamento da página, especialmente se você tiver mais de uma imagem em destaque na página.

Se você precisar desses atributos, poderá usar meu código adicionando um retorno de chamada para wp_get_attachment_image_attributes'filtrar (é um gancho padrão do WordPress ) ou talvez possa alterar meu código para detectar o tamanho da imagem e gerar atributos e classes relacionados.

Gist de plug-ins

Todo o código postado aqui, com a exceção de adicionar uma inicialização de domínio de texto adequada, está disponível como um plug-in de trabalho completo em uma Gist aqui . O código usa um espaço para nome, portanto, requer PHP 5.3 ou superior.

Notas

Obviamente, você deve ter licença e autorização para usar e vincular imagens no seu site a partir de imagens externas.

gmazzap
fonte
onde estou para colocar esse código
Ankit Agrawal
você pode explicar qual código, em qual página precisamos escrever. Eu sou um novato em PHP / Wordpress então explique passo a passo. Obrigado
Ankit Agrawal
@AnkitAgrawal look here
gmazzap