web-dev-qa-db-ja.com

抜粋メタボックスに文字カウンターを追加する

カスタム関数プラグインに 変更されたバージョン of this （非常に人気のある）コードを適用してみます。 stackoverflowでも言及されていましたが、ユーザーからの質問が削除されたため、質問全体が削除されました。これが Googleキャッシュ版 です。密接に 変更されたコード はまだ存在しています。

これは変更されたコードです：

// 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');

これは抜粋メタボックスでうまく機能し、期待される結果を生み出します。

しかし、それはEdit Mediaスクリーン上で複数の問題を引き起こします。 if ('page' != get_post_type())とadmin_head-post.phpまたはadmin_head-post-new.phpにのみロードするようにコーディングされていますが。
これらの問題は以下のとおりです。

  • HelpおよびScreen Optionsボタンはクリックできなくなります。
  • Hover Effectは管理サイドバーでは動作しません
  • Description buttons（のような b+i+img 等）消えるだけです。

私たちは、元のスクリプトと他の修正されたバージョンのスクリプトをうまくいっていない状態で試しました。

同じjQueryコーディングを使用しているように思われる here および here 同様の質問がされています。それでも、誰も問題を報告していません。私たちだけ？

編集：

あなたが尋ねたので、エラーは以下のとおりです。

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

jquerywp-adminmedia-libraryexcerpt
1
marikamitsos

わかりました、それで私は書かれた方法が好きではなかったので、私はわずかに異なる構文ともっと読みやすい構造でそれを書き直しました。

<?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');
?>

#postexcerptがページ上にあるかどうかのチェックがありませんでしたので、それを追加し、それを整理して理解と変更を容易にすることを試みました。私はインラインスタイリングのファンではありませんが、まあまあです。

とにかく、私は2016をインストールしたクリーンな4.6.1インストールでこれをテストしました、そしてそれはちょうどうまくいきました。これがあなたのために働かないかどうか私に知らせてください。

4
socki03