X

Comment ajouter un compteur de caractères à la boîte de métadonnées de l'extrait

Extraits par IsItWP

Vous cherchez un moyen d'ajouter un compteur de caractères à la metabox d'extrait ? Bien qu'il existe probablement un plugin pour cela, nous avons créé un extrait de code rapide que vous pouvez utiliser pour ajouter un compteur de caractères à la metabox d'extrait dans WordPress.

Instructions :

Il vous suffit d'ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique au site :

function excerpt_count_js(){
      echo '<script>jQuery(document).ready(function(){
jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:0px;right:5px;color:#666;\"><small>Excerpt length: </small><input type=\"text\" value=\"0\" maxlength=\"3\" size=\"3\" id=\"excerpt_counter\" readonly=\"\" style=\"background:#fff;\"> <small>character(s).</small></div>");
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
     jQuery("#excerpt").keyup( function() {
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
   });
});</script>';
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');

Remarque : Si c'est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur la manière de copier / coller correctement des extraits de code dans WordPress, afin de ne pas casser accidentellement votre site.

Si vous avez aimé cet extrait de code, n'hésitez pas à consulter nos autres articles sur le site tels que : 9 meilleurs plugins d'événements WordPress et comment créer des formulaires d'inscription WordPress époustouflants.

Commentaires   Laisser une réponse

  1. Bonjour, est-il possible de faire cela pour l'éditeur de contenu ?

    1. Patricia Sarsfield September 24, 2020 at 11:34 am

      Essayez ceci, pour les commentaires/réponses :

      function excerpt_count_js(){
      if ( ‘post’ == get_post_type() ) {
      echo ‘jQuery(document).ready(function(){
      jQuery(“textarea#comment”).after(“Longueur de l’extrait : character(s).”);
      jQuery(“#excerpt_counter”).val(jQuery(“#comment”).val().length);
      jQuery(“#comment”).keyup( function() {
      jQuery(“#excerpt_counter”).val(jQuery(“#comment”).val().length);
      });
      });’;
      }
      return;
      }
      add_action( ‘comment_form_before’, ‘excerpt_count_js’);

  2. Customizing the WordPress Admin : WPNYC Meetup Recap : Chrisdigital's Blog : Chris Carvey : NYC November 8, 2014 at 7:43 pm

    […] 6. Ajouter un compteur de caractères à la metabox d'extrait […]

  3. Ça marche super bien !

  4. En plaçant le code dans la condition "if ('page' != get_post_type()) ", les pages de WordPress fonctionnent parfaitement. Peut-être que cela pourrait aider quelqu'un.

    function excerpt_count_js(){

    if (‘page’ != get_post_type()) {

    echo ‘jQuery(document).ready(function(){
    jQuery(“#postexcerpt .handlediv”).after(“Longueur de l’extrait : / 500character(s).”);
    jQuery(“span#excerpt_counter”).text(jQuery(“#excerpt”).val().length);
    jQuery(“#excerpt”).keyup( function() {
    if(jQuery(this).val().length > 500){
    jQuery(this).val(jQuery(this).val().substr(0, 500));
    }

    jQuery("span#excerpt_counter").text(jQuery("#excerpt").val().length);

    });
    });’;
    }
    }
    add_action( ‘admin_head-post.php’, ‘excerpt_count_js’);
    add_action( ‘admin_head-post-new.php’, ‘excerpt_count_js’);

  5. TechInsideCom June 5, 2014 at 1:55 pm

    Merci pour cette excellente solution. Est-il possible de faire la même chose pour la boîte de titre ? Merci.

    1. Vous pouvez jeter un œil à cet extrait, j'ai apporté quelques modifications CSS et corrigé quelques éléments.
      http://pastebin.com/gsFF8pc7

  6. Merci beaucoup pour celui-ci !
    Pour information, l'extrait fonctionne bien même sur la page d'extrait de produit woocommerce.

  7. Heracles Papatheodorou September 21, 2013 at 1:25 pm

    Merci pour celui-ci !
    J'ai apporté quelques modifications pour supprimer le HTML et rendre les extraits prêts pour Twitter :


    function excerpt_count() {
    echo 'jQuery(document).ready(function($){
    $("#excerpt").after('');
    function excerpt_count() {
    var count = $("#excerpt").val();
    $("#excerpt_counter").text($(""+count+"").text().length);
    }
    excerpt_count();
    $("#excerpt").keyup( function() { excerpt_count(); }); });
    ';
    }

    add_action( 'admin_head-post.php', 'excerpt_count');
    add_action( 'admin_head-post-new.php', 'excerpt_count');

    J'espère que cela s'avérera utile à quelqu'un.

  8. Merci pour l'extrait. Concernant le problème des pages : le script génère une erreur JavaScript lors de la modification d'une page : « TypeError: Cannot read property ‘length’ of undefined », sur cette ligne : jQuery(“#excerpt_counter”).val(jQuery(“#excerpt”).val().length);. Comme je suppose que sur une page un extrait n'est pas utilisé mais que le hook est toujours appelé et que le script est intégré dans l'en-tête, il n'y a alors nulle part où appeler « #postexcerpt .handlediv » pour que la requête s'insère après, et donc aucune valeur de longueur à évaluer. Mais vous pouvez mettre une instruction if autour des 3 dernières lignes du jQuery, quelque chose comme : « if (jQuery(“#excerpt_counter”).length > 0){ // dernières 3 lignes de code ici } » ce qui pourrait résoudre le problème.

    1. Cette solution a résolu tous les problèmes de js que j'avais. Les options d'écran étaient agaçantes, mais un problème beaucoup plus important était la mise à l'échelle des images renvoyant NaN et la rendant inutilisable. Tout a été facilement résolu en ajoutant l'instruction if, merci beaucoup !

  9. Je voulais partager une capture d'écran pour clarifier le problème avec les pages. J'espère que cela vous aidera. https://www.dropbox.com/s/xhkv718cjcj5ep9/excerpt-counter.jpg

    1. très étrange, je vais examiner cela, désolé d'avoir mis si longtemps, disqus a arrêté de m'envoyer de nouveaux commentaires par e-mail.

  10. J'ai le même problème avec AJAX qui ne fonctionne pas avec les pages. Quelqu'un a-t-il trouvé une solution ?

  11. Daily Tip: How to Add a Character Counter to the WordPress Excerpt Box | The WordPress Experts - WPMU.org June 9, 2012 at 10:00 am

    […] une petite astuce pratique que j'ai trouvée récemment sur wpsnipp.com. Cet extrait vous permet d'ajouter un compteur de caractères à la zone d'extrait sur votre édition de publication […]

  12. add_action( ‘COMMENT?, ‘excerpt_count_js’);
    Pouvons-nous ajouter des commentaires ?

    1. vous pouvez attribuer cela à n'importe quel élément qui connaît l'ID plutôt qu'au champ d'extrait.

  13. Devrait être une partie par défaut de Wordpress. Merci… Je l'ai un peu modifié pour qu'il corresponde à mes besoins en remplaçant les instructions d'extrait par le nombre de caractères. Qui a besoin de ces trucs idiots pour les débutants de toute façon…

    function tpl_excerpt_count(){ ?>        jQuery(document).ready(function(){        var label = 'Nombre de caractères : ';        jQuery('#postexcerpt p').html(label + jQuery('#excerpt').val().length);        jQuery('#excerpt').keyup(function(){            jQuery('#postexcerpt p').html(label + jQuery('#excerpt').val().length);        });    });   

    1. Ahhh très cool, pas une mauvaise idée du tout, content d'avoir pu aider !

  14. a été très utile, merci beaucoup.

    1. De rien, profitez du snippet.

  15. Merci pour le snippet ! Ça marche bien sur les articles mais sur les pages j'ai les mêmes problèmes qu'Eric et B.J. – une idée de ce qui pourrait causer ça ?

    Cordialement, Thomas.

    1. Salut TL, je viens de tester et je n'ai aucun problème avec wordpress 3.3 et aucune erreur, penses-tu que cela pourrait être un autre plugin que tu utilises ? Ce que je ferais, c'est désactiver tous les plugins que tu utilises, voir si tu as toujours des problèmes, sinon, active-les un par un en vérifiant quel plugin en est la cause.

      1. Salut Kevin,

        J'ai essayé avec tous les plugins désactivés mais aucun changement…

        Ce n'est pas si grave car j'utilise principalement des articles et non des pages, mais quand même. Si tu trouves ou entends quelque chose, fais-le moi savoir !

        Merci 
        TL

        1. utilises-tu la dernière version de wordpress ?

        2. oui, je l'ai testé avec la 3.3 et la nouvelle version 3.3.1… !

          (Je ne peux pas répondre à ton message, seulement au mien…)

  16. Y a-t-il une solution au problème avec les pages ? Je ne peux plus utiliser les options d'écran et les boutons d'aide sous les pages.

    1. Salut Marxo, je viens de tester sur Firefox avec wordpress 3.2.1 et aucun problème avec le menu d'aide ou d'autres menus d'administration qui fonctionnent. J'utilise jQuery(document).ready(); pour ne pas causer de conflits. Tu pourrais essayer cette méthode et voir si ça marche pour toi,

       http://advantcomp.com/jquery-conflicts-and-wordpress-how-to-include-your-own-jquery-scripts-the-correct-way/

      Bien qu'il puisse s'agir d'un autre plugin que vous avez en cours d'exécution, je désactiverais temporairement ceux-ci pour tester les choses.

      1. Merci pour votre temps. )

        J'ai essayé le code mis à jour. Tout est correct si vous choisissez Pages > Options de l'écran / Aide. Les problèmes commencent  si vous choisissez Pages > Page d'exemple > Options de l'écran / Aide.

        Installation WordPress 3.2.1 fraîche
        Aucun plugin
        Thème Twenty Eleven

  17. Merci pour cette super fonction. Mais pouvez-vous m'aider à ajouter des compteurs de caractères aux champs de métadonnées de ce plugin WordPress (More Fields) : http://wordpress.org/extend/plugins/more-fields/ ?

    1. Salut Anthony, il vous suffit de changer chaque occurrence de '#excerpt' par l'ID du champ pour lequel vous souhaitez afficher l'éditeur TinyMCE. 

  18. J'ai ce snippet (super fonctionnalité, d'ailleurs) sur mon site depuis quelques jours et je viens de découvrir qu'il (le jQuery) entrait en conflit avec le jQuery exécuté sur la section Pages de l'administration. Aucun menu ni aucun élément AJAX ne fonctionnait et cela n'affectait que les Pages (pas les Articles ni les Types de publication personnalisés).

    Quelqu'un d'autre a-t-il rencontré ce problème ?

    1. Salut Eric,
      Je vais regarder et voir si j'obtiens les mêmes résultats,

  19. Bryce Wisekal June 17, 2011 at 2:55 am

    J'aimerais beaucoup voir la possibilité d'inclure cela dans l'éditeur lui-même plutôt que pour les extraits. J'ai cherché toute la journée quelque chose qui compte les caractères à l'intérieur de l'éditeur, pas de l'extrait. C'est juste génial cependant. Maintenant, je vais le démonter et voir si je peux le faire fonctionner à l'intérieur de l'éditeur à la place.

    Merci beaucoup pour cette contribution fantastique !

    1. Cool, content que vous aimiez le snippet ! Il devrait être assez facile de tout mettre en place, vous pouvez changer #excerpt en #content et cela affichera déjà le compte mais affichera toujours le compteur dans la zone du titre de l'extrait. Sur la ligne 03, changez simplement "#postexcerpt .handlediv" pour cibler le nouvel emplacement où vous souhaitez que le compteur s'affiche et vous êtes prêt à partir...

      1. Bryce Wisekal June 17, 2011 at 3:43 am

        Tu es mon nouveau meilleur ami 🙂 Merci beaucoup ! Je l'ai déjà fait, j'ai juste du mal à le placer où je veux, mais je vais y arriver 😉 Tu es génial mec. Merci pour cette contribution fantastique ! 🙂

        1. Merci, pas de problème, profitez du site et n'oubliez pas de nous suivre sur Facebook ou Twitter, je poste tous les jours.

      2. Bryce Wisekal June 17, 2011 at 4:10 am

        Encore une fois, merci. Un peu de retouche et ce sera bien placé là où il faut. Merci !

        Je vous ai suivi sur Facebook et Twitter. J'ai hâte de lire vos tweets ! C'est des jours comme ça que j'apprécie vraiment les gens qui partagent leurs découvertes sur leur blog. Merci encore d'avoir partagé cet extrait !

        1. Super, profitez des extraits.

  20. Jani Uusitalo June 8, 2011 at 6:34 pm

    Génial ! D'habitude, quand je cherche des trucs pour WP sur Google, je tombe sur une tonne de plugins qui font ce dont j'ai besoin et qui essaient aussi d'être une solution universelle, mais cet extrait a résolu un problème avec une précision chirurgicale. Merci ! Dommage qu'il n'y ait pas de lien Flattr ici, ça aurait vraiment valu le coup.

    1. @google-de31253397522fac9cf8619290aa2a8f:disqus  content que l'extrait vous plaise ! Concernant Flattr, je ne l'ai pas encore ajouté, mais j'ajoute de nouveaux extraits sur wpsnipp.com tous les jours, donc je suis sûr que je l'aurai bientôt.

  21. Exactement ce que je cherchais. Merci beaucoup. Si je pouvais limiter le nombre de caractères autorisés dans la boîte (pour préserver le bon aspect de l'extrait), ce serait aussi génial. Cependant, en attendant, j'ai simplement écrit à côté du compteur de caractères. (NE PAS dépasser 320 caractères)

    1. Par défaut, l'extrait est tronqué à 55 caractères, il ne devrait donc jamais atteindre cette longueur. Cependant, vous pourriez utiliser cet extrait et définir le nombre de caractères pour l'extrait.

      http://wpsnipp.com/index.php/excerpt/custom-excerpt-length/

      Gardez à l'esprit que cela n'empêchera pas les utilisateurs de taper plus de texte dans le champ d'extrait.

  22. (Traduit par le programme)
    Ce conseil est vraiment fantastique ! Je pense qu'il pourrait même encourager les utilisateurs à utiliser cette fonctionnalité du système qui est toujours négligée mais très utile.

    1. Cela aide aussi car par défaut, je pense qu'il y a une limite de 55 caractères pour l'extrait.

  23. La boîte de métadonnées d'extrait n'apparaît que sur les pages d'administration de nouveau message et de modification de message, de sorte que l'extrait peut être limité à celles-ci en utilisant les hooks ‘admin_head-post.php’ et ‘admin_head-post-new.php’ plutôt que ‘admin_head’, qui ajoute l'extrait à chaque page d'administration.

    1. Bonne remarque Andrew, c'est une perte de charger cela sur chaque page d'administration. Je vais mettre à jour l'extrait, merci de l'avoir signalé.

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de confidentialité, et tous les liens sont nofollow. N'utilisez PAS de mots-clés dans le champ nom. Ayons une conversation personnelle et significative.

Liste de contrôle de lancement WordPress

La checklist ultime pour lancer un WordPress

Nous avons compilé tous les éléments essentiels de la liste de contrôle pour le lancement de votre prochain site Web WordPress dans un ebook pratique.
Oui, envoyez-moi l'eBook gratuit !