外部画像URLで注目画像を設定することは可能ですか


19

リモートURLから画像を取得してローカルに保存するプラグインがあることは知っています。私はちょうどそれが可能かどうかを知りたいではない、まだとしてそれを使用するメディアライブラリに格納する画像に注目画像


外部画像のURLを保存するカスタムフィールドを使用して実行できます。the_post_thumnail()存在するたびに動作させる(または同様の機能)か、テーマまたはプラグインで定義された異なる画像サイズで動作させるのは難しいかもしれません。
サイブメタ14

1
このプラグインを使用して、外部画像のURLを注目画像として設定できます。wordpress.org
Advanced SEO 14

イメージをローカルに保存しますか、それともリモートで呼び出しますか?
Volatil3 14

@ Volatil3テストしていませんが、プラグインの説明を読んで、リモートで呼び出していると思います。
アンディマコーレイブルック

回答:


35

はい、それは可能であり、非常に簡単です。

これは私が提案するワークフローです:

  1. 注目の画像のURLを挿入するUIをどこかに置きます。おそらく最良の選択は、'admin_post_thumbnail_html'フィルターフックを使用することです
  2. 'save_post'アクションフックを使用して、URLを(セキュリティおよび検証ルーチンの後)カスタムポストメタに保存します
  3. つかいます 'post_thumbnail_html'<img>注目画像が必要な投稿に外部注目画像付きの投稿メタがある場合、デフォルトを上書きして、適切なマークアップを出力フィルターフックをます

このワークフローを機能させるには、次のコマンドを使用してテンプレートに注目画像を表示する必要があります get_the_post_thumnbail()またはthe_post_thumbnail()ます。

さらに、'_thumbnail_id'外部URLにメタを設定するときは、メタ値に空でない値が含まれていることを確認する必要があります。そうでない場合has_post_thumbnail()、外部の注目画像のみを持つ投稿に対してfalseを返します。

実際、投稿には標準のローカルフィーチャーイメージとワークフローを介した1つのセットの両方があり、この場合は外部が使用される可能性があります。

ワークフローを実装するには、有効な画像URLであることを確認する必要があるため、外部の注目画像として使用されるURLを検証する関数が必要です。

このタスクを実行するにはさまざまな方法があります。ここでは、画像をダウンロードせずにURLのみを表示する非常に簡単な方法を使用します。これは静的な画像URLに対してのみ機能し、画像が実際に存在することを確認しませんが、高速です。あなたがする必要がある場合は、より高度なものにそれを修正します(ここではいくつかの助けです)。

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

とても簡単。次に、上記のワークフローで説明した3つのフックを追加しましょう。

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

および関連機能。まず、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;
}

私が使用したことに注意してください'txtdomain'テキストドメインとして、しかし、あなたは正しい、登録済みのテキストドメインを使用する必要があります。

これは、空のときに出力がどのように見えるかです:

注目の画像の外部URL:フィールド

画像のURLを追加し、投稿を保存/更新した後の外観は次のとおりです。

注目の画像の外部URL:入力して保存した後のフィールド

それで、管理UIが完成したので、保存ルーチンを書きましょう。

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

この関数は、いくつかのセキュリティチェックの後、投稿されたURLを確認し、問題がなければ保存します '_thumbnail_ext_url'投稿メタにます。URLが空でメタが保存されている場合は削除され、外部URLフィールドを空にするだけでメタを削除できます。

最後に行うことは、外部画像URLがメタに設定されている場合に、注目の画像マークアップを出力することです。

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

できました。

やるべきこと

注目の画像出力では私が使用していませんでしたwidthheightのような、ワードプレスは通常、追加することに性質、またクラス'attachment-$size'。これは、特にページ内に複数の注目画像がある場合、画像のサイズをスニッフィングするとページの読み込みが遅くなる余分な作業が必要になるためです。

これらの属性が必要な場合は、wp_get_attachment_image_attributes'フィルターにコールバックを追加するコード(標準のWordPressフック)を使用するか、コードを変更して画像サイズをスニッフィングし、関連する属性とクラスを出力できます。

プラグインの要点

ここに投稿されたすべてのコードは、適切なテキストドメインの初期化を追加することを除いて、ここでGistのフル機能プラグインとして利用できます。。そこのコードは名前空間を使用しているため、PHP 5.3以降が必要です。

ノート

もちろん、外部の画像を使用してサイト内の画像を使用し、ホットリンクするためのライセンスと許可を持っていることを確認する必要があります。


このコードを置く場所
Ankit Agrawal

どのコード、どのページに書く必要があるのか​​説明してください。私はPHP / Wordpressの初心者なので、ステップごとに説明してください。おかげで
Ankit Agrawalさん

@AnkitAgrawalはこちら
gmazzap
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.