Publié le WordPress > Tutoriels WordPress

Ajouter une seconde zone d’extrait dans la création d’articles de WordPress

Par défaut, chaque article de WordPress peut être accompagné d'un extrait facultatif, utile pour ajouter une introduction.

Cependant, comment faire pour en ajouter un second et gérer ainsi du contenu additionnel en lien direct avec votre article ?

Pour info, ce bout de code provient tout droit du forum officiel de WordPress (version anglaise) et l’auteur n’est autre que Justin Tadlock. Par contre, la procédure n’est pas spécifiée et le néophyte aura bien du mal à comprendre la démarche.

Étape n°1 – Modification du fichier functions.php

Pour ajouter un deuxième champ d’extrait, ouvrez votre fichier functions.php à partir du menu Apparence puis Éditeur. Je suppose que vous êtes déjà connecté sur votre administration WordPress.

Capture d'écran - Ajout de code dans functions.php
Création de la seconde zone d’extrait

En fin de fichier, ajoutez les lignes de code suivante :

<?php
add_action( 'admin_menu', 'my_create_post_meta_box' );
add_action( 'save_post', 'my_save_post_meta_box', 10, 2 );

function my_create_post_meta_box() {
	add_meta_box( 'my-meta-box', 'Second Excerpt', 'my_post_meta_box', 'post', 'normal', 'high' );
}

function my_post_meta_box( $object, $box ) { ?>
	<p>
		<label for="second-excerpt">Second Excerpt</label>
		<br />
		<textarea name="second-excerpt" id="second-excerpt" cols="60" rows="4" tabindex="30" style="width: 97%;"><?php echo wp_specialchars( get_post_meta( $object->ID, 'Second Excerpt', true ), 1 ); ?></textarea>
		<input type="hidden" name="my_meta_box_nonce" value="<?php echo wp_create_nonce( plugin_basename( __FILE__ ) ); ?>" />
	</p>
<?php }

function my_save_post_meta_box( $post_id, $post ) {

	if ( !wp_verify_nonce( $_POST['my_meta_box_nonce'], plugin_basename( __FILE__ ) ) )
		return $post_id;

	if ( !current_user_can( 'edit_post', $post_id ) )
		return $post_id;

	$meta_value = get_post_meta( $post_id, 'Second Excerpt', true );
	$new_meta_value = stripslashes( $_POST['second-excerpt'] );

	if ( $new_meta_value && '' == $meta_value )
		add_post_meta( $post_id, 'Second Excerpt', $new_meta_value, true );

	elseif ( $new_meta_value != $meta_value )
		update_post_meta( $post_id, 'Second Excerpt', $new_meta_value );

	elseif ( '' == $new_meta_value && $meta_value )
		delete_post_meta( $post_id, 'Second Excerpt', $meta_value );

?>

Libre à vous de traduire certains éléments en français… mais soyez sûr de vos modifications !

Étape n°2 – Définition de l’emplacement de la seconde zone d’extrait

La deuxième étape consiste à modifier à nouveau votre thème pour indiquer où sera inséré ce fameux champ additionnel.

Dans notre exemple, nous supposerons que vous souhaitez l’afficher juste en-dessous de la première zone d’extrait par défaut de WordPress… mais ces lignes de code peuvent être collées là où vous le souhaitez !

Dans l’éditeur de thème, ouvrez donc le fichier single.php puis ajoutez les lignes suivantes après <?php the_excerpt(); ?> ou avant <?php the_content(); ?> dans la situation où vous n’utiliseriez pas le premier extrait.

 <?php if ( get_post_meta($post->ID, 'Second Excerpt', true) ) : ?>
 	<?php echo get_post_meta($post->ID, 'Second Excerpt', true) ?>
 <?php endif; ?>

N’oubliez pas de sauvegarder vos modifications.

Étape n°3 – Vérification avec un article de test

Capture d'écran - Second champ d'extrait dans les articles WordPress
Complétez ce deuxième champ d’extrait pour vos articles

Rendez-vous ensuite dans le module Articles puis faites Ajouter. Remarquez l’apparition d’une deuxième zone d’extrait.

Constatez le bon fonctionnement de cette astuce sur une page d’article en insérant du texte d’exemple.

Capture d'écran - Aperçu d'un article avec double extrait
Deux extraits figurent dans cet article !

Du contenu HTML peut être ajouté tout comme dans la zone d’extrait traditionnelle.

Cette zone additionnelle pourra contenir des informations contextuelles et être utilisée comme zone de push auprès de vos visiteurs… intéressant, non ?

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

Des tutoriels et des bons plans en exclusivité !
  • *
  • Ce champ n’est utilisé qu’à des fins de validation et devrait rester inchangé.
Ces tutoriels devraient vous intéresser…
34 commentaires
  1. Philippe

    J’ai l’impression d’un déjà vu 😉

    Répondre
    1. Aurélien Denis auteur de l’article

      Tu as l’œil ! 🙂

      Répondre
  2. Fred

    Mais c’est super balaise, j’en cherchai vraiment. Je dois avouer que Aurélien me rend un grand service.Encore merci.

    Répondre
  3. Guillaume

    bonjour, j’étais super content car je cherchai sa exactement, mais j’ai un gros problème, depuis que j’ai ajouté la ligne de code à ‘fonction.php’ j’obtiens cette ligne de code à chaque fois que l’on poste un commentaire, que l’on vote, et lorsque moi meme je poste un nouvelle article…
    Pourriez vous m’aider SVP ?

    Répondre
    1. Guillaume

      pardons voila ligne de code : Warning: Cannot modify header information – headers already sent by (output started at /xxx/xxx/xxx/xxx/www/wp-content/themes/xxx/functions.php:137) in /xxx/xxx/xxx/xxx/www/wp-includes/pluggable.php on line 890

      Répondre
      1. Guillaume

        ah ben j’ai plongé sur ce problème toute le journée en en faite c’été les retours à la ligne après le  » ?>  » à la fin, désolé du dérangement 😀 mais sinon super code !!! 😉

        Répondre
        1. Aurélien Denis auteur de l’article

          Heureux que tu ait pu trouvé ton erreur et nous faire partager ton retour ici même ! 😎

          Répondre
  4. Marc-Aurèle GEFFROY

    J’ai bien vérifié le code que je colle dans functions.php, mais j’obtiens tout le temps une erreur du type :
    Parse error: syntax error, unexpected $end in /homepages/26/d117867942/htdocs/wp-content/themes/labaulebeach/functions.php on line 533

    je ne comprends pas

    Répondre
    1. Guillaume

      moi aussi j’ai eu ce probleme en fait il manque une acolade a la fin donc dans le code, juste avan le « ?> » tu rajoute « } »
      😉

      Répondre
      1. Marc-Aurèle GEFFROY

        Merci bcp Guillaume ! Ca fonctionne désormais.

        Par contre pourquoi ce champ ne prend-il pas en compte les sauts de lignes ?

        Répondre
        1. Aurélien Denis auteur de l’article

          Parce que le code s’écrit en HTML. Donc il faut rajouter des balises <p> par exemple. 😉

          Répondre
  5. Laurent

    Bonjour,
    Je viens déterrer ce très bon article, car j’ai une question ! J’ai fouiné un peu partout et je me demandais si ce « second excerpt », vu qu’il gère le HMTL, le fait il aussi pour les shortcodes ?

    Merci

    Répondre
    1. Marc-Aurèle Geffroy

      J’aimerai t’aider Laurent, mais je n’ai pas compris ta question…!

      Répondre
      1. Laurent

        En fait c’est tout simple, j’aimerais juste savoir si dans cet excerpt, l’utilisation de shortcodes est supportée.
        Mais j’ai trouvé la réponse tout seul.
        En fait j’aimerais désormais appliquer cet ajout aux custom post types.

        Répondre
        1. Aurélien Denis auteur de l’article

          Je pense que oui… essaie de copier le code de l’étape 2 dans le fichier du thème correspondant à ton CPT.

          Répondre
          1. Laurent

            En fait, j’ai fait un tour sur le codex, il suffit juste de remplacer ‘post’ par le slug du CPT et le tour est joué !

          2. Aurélien Denis auteur de l’article

            J’aurais du y penser !!! 😉

  6. TonyPhilippakis

    SALUT ! Moi j’ai dû ajouter un simple « } » avant le ?> final pour que ça marche IMPECCABLEMENT.

    Merci pour ça !

    Répondre
    1. Aurélien Denis auteur de l’article

      Tu peux le faire en suivant ce tutoriel et en modifiant l’emplacement pour sidebar.php ou ailleurs dans le thème.

      Répondre
  8. Thierry

    Aurélien tu dis dans la vidéo qu’il faut ajouter le script que tu donnes au debut du fichier function.php et tu te contredit dans le texte en disant qu’il faut mettre le script à la fin de function.php ,,,,??,

    faut le mettre ou au début ? ou à la fin ? finalement

    Répondre
    1. Aurélien Denis auteur de l’article

      En fait, il faut l’insérer entre les balises PHP c’est tout. Le mettre au début ou à la fin simplifie la gestion c’est tout. C’est plus facile d’identifier la modification en cas d’erreurs. 😉

      Répondre
  9. herman

    Bonjour,
    Est-ce possible de conditionner l’apparition de ce second bloc de texte en fonction de la categorie des articles ?

    Répondre
    1. Aurélien Denis auteur de l’article

      Je le pense mais ça me paraît pas simple ici.

      Répondre
    2. Aurélien Denis auteur de l’article

      Oui mais c’est technique.

      Répondre
  10. Kotas

    Genial ! Bravo ! Par contre je recherche a peu pret la m chose mais avec le titre d’un article et un sous titre de cet article qui s’afficherais avant l’extrait…

    Répondre
  11. noemie

    Bonjour
    C’est super, mais j’ai tenté de l’utiliser, puis ai effacé l’information contenu dans l’excerpt, et maintenant, il est impossible de sauvegarder une information à nouveau dans ce 2 excerpt
    Une idée de la ligne de code à modifier ?
    Merci d’avance

    Répondre
    1. Aurélien Denis auteur de l’article

      Une erreur s’affiche, que se passe-t-il précisément ?

      Répondre
      1. noemie

        J’avais mis un shortcode dans le second excerpt, puis l’ai effacé, et maintenant quoique j’écrive dans le second excertpt, la zone ne sauvegarde pas le contenu. (la zone reste vide)

        Répondre
        1. noemie

          j’ai changé de thème, pour voir s’il y vait incompatibilité avec d’autres instructions de l page des fonctions, mais c’est pareil.

          Répondre
  12. Jean-Philippe

    Bonjour, fantastique tutoriel, merci infiniment !
    J’ai une question : est-il possible (dans le back-office) d’insérer ce nouveau champ entre le champ qui sert au titre et le champ qui sert au contenu ?
    De manière à avoir (dans le back-office) :
    – Champ de titre
    – Extrait
    – Contenu

    Répondre
    1. Aurélien Denis auteur de l’article

      Bonjour, on doit pouvoir faire cela en modifiant le hook add_meta_box par un changement de priorité. Le Codex t’en dira certainement plus.

      Répondre
  13. Jean-Philippe

    Entendu, je vais plancher là-dessus et si je trouve je reviendrai partager ça avec vous !
    Autre chose cependant : j’ai suivi toutes les instructions à la lettre, j’ai copié le fichier avec pour seule modification l’ajout de l’ } manquante à la fin… et tout fonctionne (création d’un excerpt, sauvegarde, ajout dans mon template, etc.) sauf qu’il est devenu impossible de sauvegarder la page d’accueil, ou quelque page que ce soit (aucun problème pour sauvegarder les articles par contre). Voici le message d’erreur qui apparaît quand j’essaie de sauvegarder la page d’accueil après installation de ce code :
    Notice: Undefined index: my_meta_box_nonce in /Users/marc/Desktop/sites/wordpress/wp-content/themes/nouveaudesign/functions.php on line 105
    Warning: Cannot modify header information – headers already sent by (output started at /Users/marc/Desktop/sites/wordpress/wp-content/themes/nouveaudesign/functions.php:105) in /Users/marc/Desktop/sites/wordpress/wp-admin/post.php on line 197
    Warning: Cannot modify header information – headers already sent by (output started at /Users/marc/Desktop/sites/wordpress/wp-content/themes/nouveaudesign/functions.php:105) in /Users/marc/Desktop/sites/wordpress/wp-includes/pluggable.php on line 1174
    Est-ce que cela vient de ce que mon site est encore en local…?
    J’ai passé 8h à chercher… Je n’arrive pas à trouver la cause. J’ai testé mille trucs. Au secours ! Quelqu’un a-t-il la solution ? Pas possible que ça ne soit arrivé qu’à moi !

    Répondre
Laisser un commentaire