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

Решено

Скажите как можно добавить счетчик символов в заголовке поста, при его добавлении в админки? Мне нужно ограничить заголовок в 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;
 }
 

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

 

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

Ваш ответ

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