Manul Tech

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


oEmbedを追加する

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

wp_embed_register_handlerを利用する

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

PinterestのWidget(Pin)の貼り付け方法はこちら。

ということで早速以下のコードを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固定になってしまうけど、まぁいっか。