Question

我在vhost系统上运行了一个简单的WP实例。我总是想知道为什么当我分享我的文章链接时没有预览，例如在facebook。我读到WP已经支持了，所以我很困惑，因为在最终生成的HTML源代码中没有行... 更困惑的是，因为您似乎只能get your previews加入wordpress.com网络？

简而言之：如何启用/添加oEmbed支持到我自己的本地博客并提供我的帖子的预览？

P.S。不，这不是关于嵌入其他平台内容（yt，flickr，...）并获得关于视频，图像等的html预览。

Answer 1

您可以在wp_head（）之前的部分中将OG元标记添加到主题header.php中：

我从我的主题header.php复制了这个，所以你可能需要根据自己的需要进行更改。

编辑：你可以在github上看到我的主题header.php：https://github.com/service4me/sandbox-wordpress-theme/blob/master/header.php

OG标题：

<meta property="og:title" content="<?php is_front_page() ? bloginfo('description') : wp_title( '');?> - <?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" />

OG类型：

<meta property="og:type" content="<?php if ( is_single() ) { ?>article<?php } else { ?>Website<?php } ?>" />

OG网址：

<meta property="og:url" content="<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" />

OG图片：

<meta property="og:image" content="<?php if ( is_single() && has_post_thumbnail() ) { 

      $ogImageUrl = wp_get_attachment_image_src(get_post_thumbnail_id(),’large’, true);

      echo $ogImageUrl[0];

    } else {

      echo bloginfo('template_directory'), '/img/logo.png';

    } ?>" />

OG说明：

<meta property="og:description" content="<?php if ( is_front_page() ) {

      bloginfo('description');

    } else {

      if ( is_single() ) {

        echo htmlspecialchars( get_the_excerpt() );

      } else {

        wp_title( '');

      }

    } ?>" />

OG区域设置：

<meta property="og:locale" content="de_AT" />

Answer 2

自托管的oEmbed提供者：一个简单的 Hello World 演示

这是一个非常简单的自托管oembed提供程序（站点A）的演示，它在oembed.com上为富实现 json 规范strong> 类型响应。其他可用类型包括链接，照片和视频。

网站A：

此网站是一个自托管 oembed提供商，支持 json 格式，只实现必需的 oembed规范并跳过可选参数。

我们还针对未找到的网址实施404，针对不可用的格式实施501。

此处使用的主要功能包括url_to_postid()，status_header()，get_post()和wp_send_json()。

/** * Demo: A simple self-hosted oEmbed provider. */ add_action( 'template_redirect', 'simple_oembed_provider_so27693829' ) function simple_oembed_provider_so27693829() { // Catch the user input: $input = filter_input_array( INPUT_GET, array( 'simple-oembed' => FILTER_SANITIZE_NUMBER_INT, 'url' => FILTER_SANITIZE_URL, 'format' => FILTER_SANITIZE_STRING, 'maxwidth' => FILTER_SANITIZE_NUMBER_INT, 'maxheight' => FILTER_SANITIZE_NUMBER_INT, ) ); // Our oembed service is activated: if( 1 == $input['simple-oembed'] ) { //-------------- // We only support json format: //-------------- if( 'json' != $input['format'] ) { status_header( 501 ); nocache_headers(); exit(); $pid = url_to_postid( $input['url'] ); //-------------- // The url doesn't exists: //-------------- if( 0 == $pid ) { status_header( 404 ); nocache_headers(); exit(); } //-------------- // json output: //-------------- else { $post = get_post( $pid ); $data = array( 'version' => '1.0', 'type' => 'rich', 'width' => empty( $input['maxwidth'] ) ? 600 : min( 600, $input['maxwidth'] ), 'height' => empty( $input['maxheight'] ) ? 400 : min( 400, $input['maxheight'] ), 'html' => sprintf( '<div class="simple-oembed"><h2><a href="%s">%s</a></h2><p>%s</p></div>', get_permalink( $pid ), apply_filters( 'the_title', $post->post_title ), 'Check out this great post!' ) ); wp_send_json( $data ); } } }

网站B：

要测试站点A提供的oembed服务，我们必须通过以下方式注册：

add_action( 'init', 'add_our_oembed_provider_so27693829' ); function add_our_oembed_provider_so27693829() { wp_oembed_add_provider( $format = 'http://site-a.tld/*', $provider = 'http://site-a.tld/?simple-oembed=1&' ); }

在网站B上。

然后，当我们在编辑器中添加site-a.tld链接时，我们得到：

保存之前：

保存后：

此处site-b.tld会向site-a.tld发送以下GET请求：

http://site-a.tld/?simple-oembed=1 &format=json &maxwidth=625 &maxheight=938 &url=http://site-a.tld/hello-world/

给出以下200状态响应：

{ "version":"1.0", "type":"rich", "width":600, "height":400, "html":"<div class=\"simple-oembed\"><h2><a href=\"http:\/\/site-a.tld\/hello-world\/\">Hello World from Site A<\/a><\/h2><p>Check out this great post!<\/p><\/div>" }

ps：我没有提到自动oEmbed发现。

有用的资源：

The oEmbed specs

The oEmbed Provider plugin（我与此不相关，但在撰写此答案时帮助了我。）

如果您想知道如何使用Ryan McCue的WordPress JSON REST API插件，以及oembed提供商，您可能需要查看this博文和this一个（两者都很棒。

为我自己托管的WP创建嵌入预览？

2 个答案:

自托管的oEmbed提供者：一个简单的 Hello World 演示