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