Czy to możliwe, aby ustawić wyróżniony obraz z zewnętrznym adresem URL obrazu

20

Wiem, że istnieją wtyczki, które pobierają obrazy ze zdalnego adresu URL i przechowują lokalnie. Chcę tylko wiedzieć, czy możliwe jest nie do przechowywania obrazu w bibliotece mediów jeszcze używać go jako Ciekawa obrazu ?

Volatil3
źródło
Możesz to zrobić za pomocą niestandardowego pola, w którym zapisujesz adres URL obrazu zewnętrznego. Może być trudno sprawić, aby działał za każdym razem, gdy the_post_thumnail()jest obecny (lub podobna funkcja), lub aby działał z różnymi rozmiarami obrazu zdefiniowanymi przez motyw lub wtyczkę.
cybmeta
1
Możesz użyć tej wtyczki, aby ustawić adres URL obrazu zewnętrznego jako wyróżniony obraz: wordpress.org/plugins/wp-remote-thumbnail
Zaawansowane SEO
Czy przechowuje obraz lokalnie lub dzwoni zdalnie?
Volatil3,
@ Volatil3 Nie testowałem, ale czytając opis wtyczki powiedziałbym, że wywołuje ją zdalnie.
Andy Macaulay-Brook

Odpowiedzi:

35

Tak, jest to możliwe i dość łatwe.

Oto przepływ pracy, który sugeruję:

  1. Umieść gdzieś interfejs użytkownika, aby wstawić adres URL polecanego obrazu. Prawdopodobnie najlepszym wyborem jest użycie 'admin_post_thumbnail_html'haka filtrującego
  2. Użyj 'save_post'haka akcji, aby zapisać adres URL (po procedurze bezpieczeństwa i sprawdzania poprawności) w niestandardowej meta postu
  3. Użyj 'post_thumbnail_html'haka filtru, aby wyprowadzić odpowiedni <img>znacznik, zastępując domyślny, jeśli post, dla którego wymagany jest wyróżniony obraz, ma meta postu z zewnętrznym wyróżnionym obrazem

Do pracy ten przepływ pracy wymaga pokazania obrazu w szablonie za pomocą get_the_post_thumnbail()lub the_post_thumbnail()funkcji.

Ponadto musimy upewnić się, że '_thumbnail_id'wartość meta ma niepustą wartość, gdy ustawimy meta dla zewnętrznego adresu URL, w przeciwnym razie has_post_thumbnail()zwróci false dla postów, które mają tylko zewnętrzny wyróżniony obraz.

W rzeczywistości możliwe jest, że post ma zarówno standardowy lokalny obraz polecany, jak i jeden zestaw za pośrednictwem naszego przepływu pracy, w tym przypadku zostanie użyty zewnętrzny.

Aby wdrożyć nasz obieg pracy, potrzebujemy funkcji do sprawdzania poprawności adresu URL używanego jako obraz z wyróżnieniem zewnętrznym, ponieważ musimy upewnić się, że jest to prawidłowy adres URL obrazu.

Istnieją różne sposoby wykonania tego zadania; tutaj używam bardzo prostego sposobu, który patrzy tylko na adres URL, bez pobierania obrazu. Działa to tylko w przypadku statycznych adresów URL obrazów i nie weryfikuje, czy obraz rzeczywiście istnieje, ale jest szybki. W razie potrzeby zmień go na coś bardziej zaawansowanego ( oto pomoc).

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

Całkiem łatwe. Dodajmy teraz 3 zaczepy opisane w powyższym przepływie pracy:

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

i powiązane funkcje. Najpierw ten, który wyświetla pole w adminie:

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

Zauważ, że użyłem 'txtdomain'jako domeny tekstowej, ale powinieneś użyć właściwej, zarejestrowanej domeny tekstowej.

Tak wygląda wyjście, gdy jest puste:

Zewnętrzny adres URL wyróżnionego obrazu: pole

Tak to wygląda po dodaniu adresu URL obrazu i zapisaniu / zaktualizowaniu posta:

Zewnętrzny adres URL polecanego obrazu: pole po wypełnieniu i zapisaniu

Więc teraz nasz interfejs administratora jest gotowy, napiszmy procedurę zapisywania:

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

Ta funkcja, po sprawdzeniu zabezpieczeń, sprawdza wysłany adres URL i jeśli jest w porządku, zapisuje go w '_thumbnail_ext_url'meta post. Jeśli adres URL jest pusty, a meta została zapisana, jest ona usuwana, umożliwiając usunięcie meta po prostu przez opróżnienie pola zewnętrznego adresu URL.

Ostatnią rzeczą do zrobienia jest wyświetlenie opisanego znacznika obrazu, gdy nasz adres URL obrazu zewnętrznego jest ustawiony w 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;
}

Skończyliśmy.

Co pozostało do zrobienia

W prezentowanym obrazie wyjściowym, którego nie użyłem widthani heightwłaściwości, ani klas, które zwykle dodaje WordPress 'attachment-$size'. Wynika to z tego, że wąchanie rozmiaru obrazu wymaga dodatkowej pracy, która spowolni ładowanie strony, zwłaszcza jeśli na stronie znajduje się więcej niż jeden wyróżniony obraz.

Jeśli potrzebujesz tych atrybutów, możesz użyć mojego kodu, dodając wywołanie zwrotne do wp_get_attachment_image_attributes'filtrowania (jest to standardowy hak WordPress ), a może możesz zmienić mój kod, aby wąchać rozmiar obrazu oraz atrybuty i klasy związane z danymi wyjściowymi.

Plugin Gist

Cały kod zamieszczony tutaj, z wyjątkiem dodania właściwej inicjalizacji domeny tekstowej, jest dostępny jako w pełni działająca wtyczka w Gist tutaj . Tam kod używa przestrzeni nazw, więc wymaga PHP 5.3+.

Uwagi

Oczywiście powinieneś mieć pewność, że masz licencję i upoważnienie do używania i umieszczania linków do zdjęć w swojej witrynie od zewnętrznych.

gmazzap
źródło
gdzie mam umieścić ten kod
Ankit Agrawal
czy możesz wyjaśnić, jaki kod, na której stronie musimy napisać? Jestem początkującym w PHP / Wordpress, więc proszę wyjaśnić krok po kroku. Dzięki
Ankit Agrawal,
@AnkitAgrawal spójrz tutaj
gmazzap