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 );
次のような簡単な正規表現の使用を検討しましたか?
'#^https?://padlet\.com/(\?.+)?$#'
次に、後者のセクションをexplode
で分割して、ビデオIDを取得しますか?
問題は、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 );
}
インラインでスタイルを追加するのではなく、CSSで.padlet-embed
をターゲットにすることで、埋め込みのスタイルを設定できます。
編集:ブロックエディターでテストされ、変更なしでバックエンドとフロントエンドの両方で機能しますが、埋め込みブロックを使用する必要があります。