web-dev-qa-db-fra.com

Ajouter un compteur de caractères à l'extrait metabox

Nous essayons d'appliquer un version modifiée de this (très populaire) code dans un plugin de fonctions personnalisées. Cela a même été mentionné à stackoverflow, mais toute la question a été supprimée puisque l'utilisateur a été supprimé. Voici un version en cache de Google . De près code modifié est toujours présent.

C'est le code modifié:

// Add Character Counter to the Excerpt Meta Box
function excerpt_count_js(){
  if ('page' != get_post_type()) {

      echo '<script>jQuery(document).ready(function(){
jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:5px;right:80px;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). (128 Characters MAX)</small></div>");
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
     jQuery("#excerpt").keyup( function() {
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
     if ( jQuery("#excerpt_counter").val() >= 129 ) {
        jQuery("#excerpt_counter").css("color","red");
     } else {
        jQuery("#excerpt_counter").css("color","green");
     }
   });
});</script>';
}
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');

Cela fonctionne bien sur la boîte à méta extrait, produisant les résultats escomptés.

Mais cela provoque plusieurs problèmes sur l'écran Edit Media. Bien qu'il soit codé pour ne charger que if ('page' != get_post_type()) et sur admin_head-post.php ou admin_head-post-new.php.
Ces questions sont les suivantes:

  • les boutons Help et Screen Options deviennent non cliquables.
  • le Hover Effect ne fonctionne pas dans la barre latérale d'administration
  • le Description buttons (comme b+i+img etc.) disparaissent tout simplement.

Nous avons essayé l'original ainsi que d'autres versions modifiées du script sans succès.

Des questions similaires ont été posées ici et ici utilisant apparemment le même code jQuery. Pourtant, personne n’a signalé de problèmes. Est-ce juste nous?

MODIFIER:

Depuis que vous avez demandé, les erreurs sont les suivantes:

Uncaught TypeError: Cannot read property 'length' of undefined
Uncaught TypeError: Cannot read property 'hasClass' of undefined

jquerywp-adminmedia-libraryexcerpt
1
marikamitsos

Ok, donc je n’ai pas aimé la façon dont elle a été écrite, donc je l’ai légèrement réécrite avec une syntaxe différente et une structure plus lisible.

<?php 
// Add Character Counter to the Excerpt Meta Box
function excerpt_count_js(){
    if ('page' != get_post_type()) { ?>
        <script>

        (function($){

            $(document).ready(function(){

                if ( $('#postexcerpt').length ) {

                    var maxChar = 128;

                    $excerpt = $('#excerpt');

                    $("#postexcerpt .handlediv").after( '<div style="position:absolute;top:5px;right:80px;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). (' + maxChar + ' Characters MAX)</small>' +
                                                        '</div>'
                                                    );

                    $excerptCounter = $("#excerpt_counter");

                    $excerptCounter.val( $excerpt.val().length );

                    $excerpt.keyup( function() {

                        $excerptCounter.val( $excerpt.val().length );

                        var exColor = ( ( $excerptCounter.val() > maxChar ) ? 'red' : 'green' );

                        $excerptCounter.css( 'color', exColor );

                    });

                }

            });

         })(jQuery);

        </script>
    <?php }
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');
?>

Il ne savait pas si #postexcerpt était présent ou non sur la page. Je l'ai donc ajouté et j'ai essayé de le nettoyer pour le rendre plus facile à comprendre et à modifier. Je ne suis pas fan du style en ligne, mais bon.

Quoi qu'il en soit, j'ai testé cela sur une installation 4.6.1 propre avec 2016 installée, et cela a très bien fonctionné. Faites-moi savoir si cela ne fonctionne pas pour vous.

4
socki03