web-dev-qa-db-ja.com

WPの埋め込み関数を使用する際の問題点+ Instagram + AJAX

AJAXを介して投稿コンテンツを読み込むためにモーダルを使用しています。投稿のテンプレートの中に、私はwp_oembed_get()を使ってさまざまな種類のメディア(YouTube、Vimeo、Flickr、そしてInstagram)を埋め込んでいます。 Instagramを除いて、すべてがうまくいっている。

Instagramの埋め込みを含む投稿を開くと、うまく読み込まれます。しかし、モーダルを閉じて別の投稿を読み込もうとすると、埋め込みは正しく機能しません。埋め込み内の写真/ビデオが読み込まれません。

これがページです: http://staging.smuttynose.com/the-hopper

「Instagramテスト」の投稿の1つを開いてそれを閉じてから、もう1つを読み込むと、何が起こっているのかがわかります。

私はこれを考え出すことで私のロープの終わりにいます!

3
Adam Walter

Instagramは埋め込みコードを単なるiframeからHTMLとJSスクリプトへと変更しました。非常にエレガントではありませんが、私たちにできることは何もありません。 HTMLの一部であるJSファイルが実行されないため、AJAXを介して呼び出されると、もちろんこの設定は失敗します。ありがたいことに、それを2つのステップでAJAXで動作させるための別の公式な方法があります。

  1. このスクリプトをHMTLに含めます。

    <script src="//platform.instagram.com/en_US/embeds.js"></script>

  2. AJAXでコンテンツをロードした後にこのJSを実行します。

    if ( typeof window.instgrm !== 'undefined' ) { window.instgrm.Embeds.process(); }

それは、Instagramの埋め込みを探し、それらを読み込むということです。頑張って!

3
Banago