8662 sujets

Développement web côté serveur, CMS

Bonjour,

je cherche des pistes pour créer de toutes pièces (avec add_meta_box() ) une meta box pour custom post type, cette meta box devrait contenir une vidéo Youtube (de type oEmbed)

Je sais que c'est possible avec un plugin qui s'appelle Meta Box mais je voudrais le réaliser sans passer par un plugin....

Quand on utilise la fonction add_meta_box() il y a en paramètre une fonction pour créer le html qui s'affiche et en général on met du html classique mais là je sais ps comment mettre une vidéo..

merci
Modérateur
Bonjour,

Il suffit de rajouter le code html d'insertion de la video Youtube via la fonction de callback, non ?

Où est-ce que tu bloques ?

Amicalement,
parsimonhi a écrit :
Bonjour,

Il suffit de rajouter le code html d'insertion de la video Youtube via la fonction de callback, non ?

Où est-ce que tu bloques ?

Amicalement,


merci à toi,

ben en fait je sais plus trop quoi mettre comme code et je veux pouvoir mettre l'Url de la vidéo à partir de l'éditeur...
Comme maintenant avec les blocks on est habitués à mettre une url et basta, j'ai un trou....

En fait je pensait qu'on pouvait acceder à un objet oEmbed de WordPress.

Il y a des plugins qui font ça mais je ne veux pas passer par un plugin
Modérateur
Bonjour,

Pourquoi ne pas utiliser le code fourni par youtube ?

1) On va sur youtube
2) On fait afficher la video
3) On clique sur le bouton "Partager" qui est en dessous de la vidéo
4) On clique sur le bouton "Intégrer" qui apparait dans un popup
5) On obtient un code html d'intégration de la vidéo

Amicalement,
parsimonhi a écrit :
Bonjour,

Pourquoi ne pas utiliser le code fourni par youtube ?

1) On va sur youtube
2) On fait afficher la video
3) On clique sur le bouton "Partager" qui est en dessous de la vidéo
4) On clique sur le bouton "Intégrer" qui apparait dans un popup
5) On obtient un code html d'intégration de la vidéo

Amicalement,


oui, mais en fait je voudrais que l'utilisateur saisisse ce code de partage/intégration dans le champ de la meta-box, au niveau de Gutenberg, et que la vidéo apparaisse comme dans un block Youtube de Gutenberg...
Modérateur
Bonjour,

Bon, le cahier des charges est un peu trop vague. Smiley cligne

On se met dans la peau de celui qui va éditer un article.

Il devra faire quoi dans l'idéal ? Quelle est la suite des clicks et saisies au clavier qu'il devrait faire pour insérer une vidéo ? De quelle information dispose-t-il identifiant la vidéo ? Est-ce la valeur du paramètre v des url de youtube ? Ou bien autre chose ?

Amicalement,
parsimonhi a écrit :
Bonjour,

On se met dans la peau de celui qui va éditer un article.
Il devra faire quoi dans l'idéal ?
Amicalement,


En fait l'utilisateur il aurait un champ <input> et dedans il colle le lien de partage qu'il récupère sur le site Yoube, exactement comme dans un bloc Gutenberg de contenu embarqué Youtube, la seule différence c'est que au lieu d'être dans le corps de l'article (the_content() ) la vidéo sera stockée dans la meta...
parsimonhi a écrit :
Bonjour,

Le champ input, c'est qui qui le crée, et comment ?

Amicalement,


ben c'est une meta-box de WordPress ( add_meta_box() )

Smiley biggrin
Modifié par lionel_css3 (28 Feb 2023 - 14:48)
Modérateur
Bonjour,

Elle est où dans l'interface, la balise <input> ? Elle est là en permanence ? Ou bien elle est créée à la volée par l'utilisateur ? Il voit quoi, l'utilisateur, au moment où il doit saisir les informations de la vidéo ? Il est en train de faire quoi ? Il est en train de rédiger un article avec l'éditeur Gutenberg ? Il y a autre chose que l'éditeur de visible à ce moment-là ? La vidéo est-elle relative à un article ? Y-en-a-t-il éventuellement plusieurs pour un même article ?

Amicalement,
Modérateur
Bonjour,

Je vais supposer que tu crées un "custom_post_type" minimal ayant pour nom "my_post".

Je vais également supposer que c'est sous forme d'un plugin.

Il faut donc créer un fichier qu'on va appeler par exemple my_post.php vide et qu'on met dans le dossier wp-content/plugins de wordpress.

Je vais ensuite supposer que tu actives le plugin via l'interface d'administration de wordpress.

Dans my_post.php, on peut mettre le code suivant :
// On cree un custom post type minimal
function create_my_post_type() {

    $args = array(
        'label'                => 'My post',
        'public'               => true
    );

    register_post_type( 'my_post', $args );
}

add_action( 'init', 'create_my_post_type' );

// On lui ajoute une metabox
function youtube_video_metabox_callback($post)
{
    wp_nonce_field( 'my_post_nonce', 'my_post_nonce' );
    $value = get_post_meta( $post->ID, '_my_post_video_ref', true );
	echo '<label>Url de la video: <input type="text" id="my_post_video_ref" name="my_post_video_ref" value="'.esc_attr( $value ).'"></label>';
}

function youtube_video_meta_box() {
	add_meta_box('youtube_video_metabox', "youtube video metabox", "youtube_video_metabox_callback","my_post");
}

add_action( 'add_meta_boxes', 'youtube_video_meta_box' );

// Sauvegarde des donnees de la metabox dans la base a la fin de l'edition d'un my_post
function save_my_post_meta_box_data( $post_id ) {
	// On effectue quelques verifications avant de sauvegarder les donnees de la metabox
    
    if ( ! isset( $_POST['my_post_nonce'] ) )  return;
    if ( ! wp_verify_nonce( $_POST['my_post_nonce'], 'my_post_nonce' ) )  return;
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {
        if ( ! current_user_can( 'edit_page', $post_id ) )  return;
    }
    else {
        if ( ! current_user_can( 'edit_post', $post_id ) )  return;
    }
    if ( ! isset( $_POST['my_post_video_ref'] ) )  return;
    
    // On est pret pour sauvegarder les donnees de la metabox
    $my_data = sanitize_text_field( $_POST['my_post_video_ref'] );
    update_post_meta( $post_id, '_my_post_video_ref', $my_data );
}

add_action( 'save_post', 'save_my_post_meta_box_data' );

// Affichage de my_post pour un internaute lambda
function my_post_before_post( $content ) {
    global $post;
    // On recherche l'url de la video du post dans la base
    $url = esc_attr( get_post_meta( $post->ID, '_my_post_video_ref', true ) );
    if(!$url) return;
    // On parse l'url pour extraire l'id youtude de la video
    parse_str( parse_url( $url, PHP_URL_QUERY ), $vs );
    $ref = $vs['v'];
    if(!$ref) return;
    // On construit l'iframe contenant la video
    $youtube_insert='<iframe width="560" height="315" src="https://www.youtube.com/embed/'.$ref.'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
    // On l'insère en haut du contenu du post juste après le titre
    return $youtube_insert . $content;
}

add_filter( 'the_content', 'my_post_before_post' );

Ce code crée le custom post type 'my_post', y ajoute une metabox qui est un input et dans lequel on devra mettre l'url d'une video youtube (comme par exemple https://www.youtube.com/watch?v=xyz ), fournit la fonction de sauvegarde du contenu de la metabox dans la base, et fournit la fonction d'affichage de la vidéo dans le post.

La liste des opérations à effectuer est la suivante :
- Un admin crée my_post.php avec le code ci-dessus et le met dans wp-content/plugins
- Cet admin se connecte à l'interface d'administration de wordpress et active le plugin "my_post"
- À ce stade, "my_post" doit apparaitre dans le menu d'administration de wordpress à gauche de l'écran
- Un rédacteur de post se connecte à l'interface d'édition des posts de wordpress
- Ce rédacteur édite un post de type 'my_post'
- Il entre l'url d'une video youtube du genre https://www.youtube.com/watch?v=xyz dans le champ prévu à cet effet qui doit se trouver en bas de page
- Il sauvegarde le post
- À ce stade, le site est prêt pour recevoir des visiteurs
- Un internaute visite le site
- Il surfe afin de visualiser le post précédemment édité par le rédacteur
- Il devrait voir la vidéo juste en dessous du titre du post.

Amicalement,
Modifié par parsimonhi (28 Feb 2023 - 20:27)
Un grand merci à toi, parsimonhi

Ce code est hyper intéressant et prouve qu'on peut vraiment tout faire avec Wordpress...
Je vais étudier tout ça de près et effectivement je n'avais pas pensé au filtre (add_filter) pour afficher le contenu.

Encore merci pour ta générosité.