是否可以使用外部图像URL设置特色图像


20

我知道有些插件可以从远程URL获取图像并存储在本地。我只想知道是否可以将图像存储在Media Library中,而是将其用作Featured Image


您可以使用存储外部图像URL的自定义字段来实现。可能很难使它每次the_post_thumnail()都存在(或类似功能),或者使其与主题或插件定义的不同图像尺寸一起工作。
cybmeta 2014年

1
您可以使用此插件将外部图片网址设置为您的特色图片:wordpress.org/plugins/wp-remote-thumbnail
高级搜索引擎优化(SEO)

它在本地存储图像还是在远程调用?
Volatil3

@ Volatil3我还没有测试过,但是阅读了插件说明,我会说它是远程调用的。
安迪·麦考利-布鲁克

Answers:


35

是的,这是可能的,而且非常容易。

这是我建议的工作流程:

  1. 将UI放在某处以插入特色图片的URL。也许最好的选择是使用'admin_post_thumbnail_html'过滤钩
  2. 使用'save_post'动作挂钩将URL(在安全和验证例程之后)保存在自定义帖子元中
  3. 如果需要特征图片的帖子具有带有外部特征图片的帖子元,请使用'post_thumbnail_html'滤镜挂钩输出适当的<img>标记(覆盖默认值)

要工作,此工作流程需要使用get_the_post_thumnbail()the_post_thumbnail()功能将特色图像显示在模板中。

此外,'_thumbnail_id'当我们为外部URL设置meta时,必须确保meta值具有非空值,否则has_post_thumbnail()对于仅具有外部特征图像的帖子将返回false。

实际上,通过我们的工作流程,帖子可能同时具有标准的本地特色图片和一组图片,在这种情况下,将使用外部图片。

为了实现我们的工作流程,我们需要一个函数来验证用作外部特征图像的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 );

以及相关功能。首先在管理员中输出该字段的人:

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并保存/更新帖子后的外观:

特色图片的外部网址:填写并保存后的字段

因此,现在我们的管理界面已完成,让我们编写保存例程:

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'post meta中。如果URL为空并且保存了meta,则将其删除,从而只需清空外部URL字段即可删除meta。

最后要做的是在meta中设置我们的外部图像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属性,也没有使用WordPress通常添加的类,例如'attachment-$size'。这是因为嗅探图像的大小需要额外的工作,这会减慢页面的加载速度,尤其是在页面中有多个特色图像的情况下。

如果需要这些属性,则可以使用我的代码添加回调进行wp_get_attachment_image_attributes'过滤(这是标准的WordPress hook),或者可以更改我的代码以嗅探图像大小并输出相关的属性和类。

插件要点

除了添加适当的文本域初始化之外,此处发布的所有代码都可以在此处的Gist中作为功能齐全的插件获得。那里的代码使用名称空间,因此需要PHP 5.3+。

笔记

当然,您应该确保自己具有从外部使用和热链接网站中的图像的许可和授权。


我要在其中放置此代码的地方
Ankit Agrawal

您能解释一下我们必须在哪个页面上编写哪些代码。我是PHP / Wordpress的新手,所以请逐步解释。谢谢
Ankit Agrawal

@AnkitAgrawal看这里
gmazzap
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.