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