web-dev-qa-db-ja.com

Padlet.comの埋め込みハンドラーを登録する

Padlet.comのコンテンツの埋め込みコードを登録しようとしましたが、失敗しました（奇妙なことに、WP.comではサポートされていますが、WP.orgではサポートされていません）。のようなURL

 https://padlet.com/cogdogblog/aos9fosbbwk4

のように埋め込む必要があります

<div class="padlet-embed" style="border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:border-box;overflow:hidden;position:relative;width:100%;background:#F4F4F4"><p style="padding:0;margin:0"><iframe src="https://padlet.com/embed/aos9fosbbwk4" frameborder="0" allow="camera;microphone;geolocation" style="width:100%;height:608px;display:block;padding:0;margin:0"></iframe></p>

これまで失敗した私の試み

add_action( 'init', function(){
  $regex_url = '#https?://padlet\.com/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$#i';

  wp_embed_register_handler(
    'padlet',
    $regex_url,
    'wp_embed_handler_padlet',
    true
  );
});


function wp_embed_handler_padlet( $matches, $attr, $url, $rawattr )
{
  $embed = sprintf(
    '<div class="padlet-embed" style="border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:border-box;overflow:hidden;position:relative;width:100%;background:#F4F4F4"><p style="padding:0;margin:0"><iframe src="https://padlet.com/embed/%1$s" frameborder="0" allow="camera;microphone;geolocation" style="width:100%;height:608px;display:block;padding:0;margin:0"></iframe></p>',
    esc_attr($matches[2])
    );

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

それは私の正規表現の不器用だと確信しています。 この関数のコーデックスのドキュメント がよりよく説明された（そして実際に機能している）例があれば、私のような初心者にはきっと役立つでしょう。

また、wp_embed_register_handlerではどのような形式の正規表現が使用されていますか？私が使用しているオンラインテスターに​​はこの形式がなく、/のエスケープが必要です。WordPressが使用するパターンをテストする場所を探します。

[〜＃〜] update [〜＃〜]oembedプロバイダーとしてリストされているPadletが見つからなかった後 https://oembed.com / 開発者のサイトでドキュメントが見つからない https://padlet.readme.io/ 形式からのoembedリクエストのURLを推測することにしました

 https://padlet.com/oembed?url=https%3A//padlet.com/XXXXXX/yyyyyyyyyy&format=json

または実際の例

https://padlet.com/oembed?url=https%3A//padlet.com/cogdogblog/aos9fosbbwk4&format=json

そして、私は応答を受け取ります（WordPress.comがサポートしている可能性があるため、これは理にかなっています）。だから今私ははるかに簡単な方法で完全なサポートを得ています：

wp_oembed_add_provider( "https://padlet.com/*", "https://padlet.com/oembed/", false );
oembedregex
2
cogdog

次のような簡単な正規表現の使用を検討しましたか？

'#^https?://padlet\.com/(\?.+)?$#'

次に、後者のセクションをexplodeで分割して、ビデオIDを取得しますか？

1
Tom J Nowell

問題は、WPによるHTMLのサニタイズにより、<iframe>のインラインスタイルが原因で埋め込みが窒息することだと思います。インラインスタイルを削除してHTMLタグのバランスをとると、埋め込みを機能させることができました。

    add_action( 'init', function(){
        $regex_url = '#https?://padlet\.com/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$#i';

        wp_embed_register_handler(
                'padlet',
                $regex_url,
                'wp_embed_handler_padlet',
                true
        );
    });


    function wp_embed_handler_padlet( $matches, $attr, $url, $rawattr ) {
        $embed = sprintf(
            '<div class="padlet-embed">
                <iframe src="//padlet.com/embed/%1$s" frameborder="0" allow="camera;microphone;geolocation"></iframe>
            </div>',
            esc_attr($matches[2])
        );

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

padlet embed example

インラインでスタイルを追加するのではなく、CSSで.padlet-embedをターゲットにすることで、埋め込みのスタイルを設定できます。

編集：ブロックエディターでテストされ、変更なしでバックエンドとフロントエンドの両方で機能しますが、埋め込みブロックを使用する必要があります。 enter image description hereenter image description here

0
Dave Romsey