Как вывести в админке количество символов в заголовке записи?

Решено

Скажите как можно добавить счетчик символов в заголовке поста, при его добавлении в админки? Мне нужно ограничить заголовок в 150 символов, именно тогда на самом сайте все красиво отображается. Варианты с тем что во фронтенде можно сделать что любой заголовок будет смотреться красиво — не предлагать. Мне нужен именно счетчик. Можно какой нибудь плагин. Если не сложный функционал можете подсказать как сделать?

счетчик символов в заголовкесчетчик символов в заголовке

Добавить Комментарий
    Ответ

    Для реализации функционала счетчика символов в заголовке поста, вам понадобится создать свой плагин, основы вы можете посмотреть тут: Полезные советы по разработке плагинов для WordPress

    Объяснять как сделать основу плагина не буду(об этом есть информация). Так же можно прописать данный код в вашем шаблоне в файле functions.php. Где именно прописать код(в своем плагине или в шаблоне — оставляю на ваш выбор)

    Данный функционал реализуем следующим образом. С помощью jQuery мы после поля заголовка #title добавим div в котором укажем ограничение по количеству, например 150. и пустой span в котором будем рассчитывать текущее количество символов в строке. Так же нам понадобится прописать стили для нашего счетчика.

    И так, приступим. Первое что сделаем, это подключим файл стилей и js файлы в админку:

     function onwp_add_admin_js() {
     wp_enqueue_script('onwp-admin-js', plugin_dir_url(__FILE__) . 'js.js', array('jquery'), '1.0', true);
     wp_enqueue_style('onwp-admin-css', plugin_dir_url(__FILE__) . 'css.css');
     }
    add_action('admin_enqueue_scripts', 'onwp_add_admin_js');
     

    Не забудьте указать правильные пути, в моем случае это путь в плагине: plugin_dir_url(__FILE__) . ‘css.css’

    Далее создаем 2 файла css.css и js.js

    Откроем js файл и пропишем:

     var onwp = {
     "EVENT": function() {
     // добавим счетчик символов заголовка
     onwp.character.add_html();
     // рассчет колличества символов в строке заголовка
     jQuery('#title').keyup(function() {
     onwp.character.cacl();
     });
     },
     character: {
     "add_html": function() {
     if (jQuery('#titlewrap #title').length >= 1) {
                    jQuery('#titlewrap #title').after('<div class="map-character-string"><span class="map-character-string-calc">0</span>200</div>');
                    onwp.character.cacl();
                }
     },
     "cacl": function() {
     var Value = jQuery('#titlewrap #title').val().length;
     jQuery('.onwp-character-string-calc').text(Value);
     }
     }
     };
    jQuery(function() {
     onwp.EVENT();
     });
     

    В данном коде мы после загрузки документа добавим после #title — <div class=»onwp-character-string»><span class=»onwp-character-string-calc»>0</span>150</div>. Затем сразу делаем расчет текущего количества символов в строке. Далее при вводе обновляем значения

    Теперь осталось прописать стили:

     .onwp-character-string {
     background: red;
     color: white;
     float: right;
     height: 20px;
     max-width: 80px;
     padding: 5px;
     text-align: center;
     }
     .onwp-character-string-calc {
     background: green;
     display: block;
     float: left;
     height: 20px;
     margin: -5px 5px 0 -5px;
     padding: 5px;
     }
     

    Готово, пользуйтесь на здоровье)

     

    Добавить Комментарий

    Ваш ответ

    Размещая свой ответ, вы соглашаетесь с правилами сайта.