WordPressでPinterestのWidgetをoEmbedに対応させる方法

PinterestのWidgetをWordPressに表示させるだけならタグをコピペすればいいだけだけど、Widgetをビジュアルエディタ内でも展開させたい。

oEmbedを追加する

現時点ではoEmbedにPinterestのWidgetは含まれていないから自分で追加する必要がある。
ちなみにプラグインでも表示させるだけのものならいくつもあったけど、ビジュアルエディタに展開させるようなものはなさそうだった。

WordPress Codex
oEmbed

WordPress Codex (EN)
oEmbedの対応サイト

wp_embed_register_handlerを利用する

wp_embed_register_handlerという関数でoEmbedを追加できるらしい。

WordPress Codex (EN)
wp_embed_register_handler

PinterestのWidget（Pin）の貼り付け方法はこちら。

interest Developers
Widget builder

ということで早速以下のコードをfunctions.phpに。

wp_embed_register_handler(
    'pinterest',
    '#https?://www.pinterest.jp/pin/([0-9]+)/?$#i',
    'pinterest_widget_embed'
);

$load_pinterest_js = false;
function pinterest_widget_embed($matches, $attr, $url, $rawattr){
    if(is_admin() && !$load_pinterest_js){
        $load_pinterest_js = true;
        $js = '<script async defer src="//assets.pinterest.com/js/pinit.js"></script>';
    }
    else{
        $js = '';
    }
    $embed = sprintf('<a data-pin-do="embedPin" data-pin-width="medium" data-pin-terse="true" href="https://www.pinterest.jp/pin/%s/">https://www.pinterest.jp/pin/%s/</a>%s', $matches[1], $matches[1], $js);

    return apply_filters('embed_pinterest_widget', $embed, $matches, $attr, $url, $rawattr);
}

最初はpinit.jsをフッターで読み込ませていたのだけど、WordPressのビジュアルエディタはiframe内に展開されているため、iframe外で読み込ませてもWidgetの自動展開はしてくれなかった。
だから$load_pinterest_jsフラグを立てて、一度だけiframe内で読み込ませることにした。

できた

上記のコードのままだとWidgetのサイズはMedium固定になってしまうけど、まぁいっか。