web-dev-qa-db-fra.com

Inscrivez-vous Embed Handler pour Padlet.com

J'essaie et que je ne parviens pas à enregistrer un code incorporé pour le contenu de Padlet.com (étrangement, il est pris en charge dans wp.com mais pas wp.org). Une url comme

 https://padlet.com/cogdogblog/aos9fosbbwk4

devrait incorporer comme

<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>

Ma tentative qui échoue jusqu'à présent

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 );
}

Je suis sûr que c'est mon maladroitement de regex. Il serait certain que les débutants comme moi, si le Codex Docs pour cette fonction avait un exemple mieux expliqué (et fonctionnant réellement).

Et quelle forme de regex est utilisée dans wp_embed_register_handler? Aucun des testeurs en ligne que j'utilise n'a ce format et nécessite une échappée de / - À la recherche d'un endroit pour tester les modèles qui WordPress utilise.

[~ # ~] Mise à jour [~ # ~] Après avoir omis de trouver un padlet répertorié comme un fournisseur OEMbed https://oembed.com / et ne pas trouver de documentation sur son site de développeur https://padlet.readme.io/ J'ai décidé de deviner de la mail à l'URL pour une demande de format OEMBED du format

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

ou un exemple réel

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

Et je reçois une réponse (cela a du sens comme c'est ainsi que WordPress.com le supporte probablement). Alors maintenant, je reçois un soutien total via le beaucoup plus simple:

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

Avez-vous envisagé d'utiliser une regex plus simple comme:

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

Puis briser la dernière section avec explode pour obtenir l'ID vidéo?

1
Tom J Nowell

Je pense que la question est que les styles inline sur le <iframe> provoque l'intégration de l'embarcation due à la désinfectante de WP du HTML. J'ai pu obtenir l'intégration au travail une fois que j'ai supprimé les styles en ligne et j'ai équilibré les balises 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

Vous pouvez styler l'intégration par ciblage .padlet-embed Dans votre CSS plutôt que d'ajouter les styles en ligne.

Modifier: Testé dans l'éditeur de blocs et cela fonctionne à la fois sur le backend et le frontend sans modification, mais vous devez utiliser le bloc d'intégration. enter image description hereenter image description here

0
Dave Romsey