WordPress:入力文字数の制限や補足文の追加など、管理画面の抜粋入力欄周りをカスタマイズする方法

WordPress:入力文字数の制限や補足文の追加など、管理画面の抜粋入力欄周りをカスタマイズする方法

今後も使うことがありそうだったので備忘録。
WordPressの投稿画面には抜粋入力欄が設けられていますが、その部分に入力できる文字数を制限したり、抜粋入力についての補足などを入れるカスタマイズをする方法です。

予めクライアントに抜粋の仕様を伝えておけば良い話なんですが、担当者が仕様を忘れてしまったとか、担当者が変わったことにより仕様がちゃんと伝わっておらず、「表示が崩れた!」とか「文字が途中から・・・になってしまう!」みたいなことを言われるのを防ぐことができるかと思います。
補足文に関してはフックとか使って表示する方法もあると思いますが、今回は全てjQueryを使って実装してみます。

※念のため記載しておきますが、実際に表で表示される抜粋部分の文字数省略などについては別途テンプレートなどの調整・カスタマイズで対応をする必要があります。

WordPress:入力文字数の制限や補足文の追加など、管理画面の抜粋入力欄周りをカスタマイズする方法 目次

  1. 入力できる文字数を制限する
  2. 指定以上の文字数になると補足などの文字色が変更

1. 入力できる文字数を制限する

抜粋に入力できる文字数や補足で表示し、更に入力欄にはその文字数以上入力できないように制限をかけたものです。
実装には下記をfunctions.phpに記述します。

functions.php

function excerpt_count() {
?>
<script>
  (function($) {
    var count = 100;
    $('#postexcerpt .hndle span').after('<span style=\"padding-left:1em; color:#888; font-size:12px;\">現在の文字数: <span id=\"excerpt-count\"></span> / '+ count +'</span>');
    $('#excerpt-count').text($('#excerpt').val().length);
    $('#excerpt').keyup(function() {
      $('#excerpt-count').text($('#excerpt').val().length);
      if ( $(this).val().length > count ) {
        $(this).val($(this).val().substr(0, count));
      }
    });
    $('#postexcerpt .inside p').html('※ここには <strong>"'+ count +'文字"</strong> 以上は入力できません。').css('color', '#888');
  }(jQuery));
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'excerpt_count' );
add_action( 'admin_footer-post.php', 'excerpt_count' );

指定する文字数に関しては、コードでハイライト表示している部分で変更することができます。
上記記述後に投稿画面を確認すると、以下のように「現在の文字数表示」「入力欄の文字数制限」「補足文の表示」が実装できます。

抜粋のタイトル横に「現在の文字数と文字の上限数」を表示し、入力欄下に補足文を表示

抜粋のタイトル横に「現在の文字数と文字の上限数」を表示し、入力欄下に補足文を表示しています。
補足文の表示はデフォルトで「抜粋は投稿内容から自分で作成する要約で~」と表示されている部分のHTMLを変更する形にしています。

入力欄に文字を入力すると現在の文字数部分が変更される

上のキャプチャは入力欄に文字を入力してみたところで、このように文字を入力すると現在の文字数部分が変更されます。
また、画像ではわかりませんが、このまま文字を入力し続けても100文字以上になった時点でそれ以上の文字が入力できないようになっています。

目次へ

2. 指定以上の文字数になると補足などの文字色が変更

こちらも同じく抜粋に入力できる文字数や補足を表示したものですが、先ほどのものとは違って文字の入力制限はせずに、指定した文字数以上になった時に補足などの文字色を変更するといったものです。
実装には下記をfunctions.phpに記述します。

functions.php

function excerpt_count() {
?>
<script>
  (function($) {
    var count = 100;
    $('#postexcerpt .hndle span').after('<span style=\"padding-left:1em; color:#888; font-size:12px;\">現在の文字数: <span id=\"excerpt-count\"></span> / '+ count +'</span>');
    $('#excerpt-count').text($('#excerpt').val().length);
    $('#excerpt').keyup(function() {
      $('#excerpt-count').text($('#excerpt').val().length);
      if ( $(this).val().length > count ) {
        $('#excerpt-count, #postexcerpt .inside p').css('color', '#f00');
      } else {
        $('#excerpt-count, #postexcerpt .inside p').css('color', '#888');
      }
    });
    $('#postexcerpt .inside p').html('※ここに入力した内容は一覧画面で <strong>"'+ count +'文字"</strong> までは表示されますが、それ以降は省略表示されます。').css('color', '#888');
  }(jQuery));
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'excerpt_count' );
add_action( 'admin_footer-post.php', 'excerpt_count' );

指定する文字数に関しては、先ほどのものと同様でハイライト表示している部分で変更することができます。
上記記述後に投稿画面を確認すると、以下のように「現在の文字数表示」や「補足文の表示」が実装できます。

抜粋のタイトル横に「現在の文字数と文字の上限数」を表示し、入力欄下に補足文を表示
入力欄に文字を入力すると現在の文字数部分が変更される

初期表示や文字入力した際の見栄えなどは最初のものとほとんど変わらず、抜粋のタイトル横に「現在の文字数と文字の上限数」を、入力欄下に「文字数に関する補足文」をそれぞれ表示させて、現在の文字数部分は入力した内容によって随時変更されていきます。

指定した文字数以上入力された場合は「現在の文字数」と「入力欄下の補足文」の文字色が赤に変更される

指定した文字数以上入力された場合は、画像のように「現在の文字数」と「入力欄下の補足文」のそれぞれ文字色が赤に変更されます。

目次へ


これらのカスタマイズについては、以下を参考にさせてもらいました。

また、WordPressで管理画面に関するその他のカスタマイズは以下にまとめているので、興味ある方はこちらもご覧ください。

Close the search window,
please press close button or esc key.