Всем привет! Сегодня на seo-mayak.com мы продолжим расширять возможности WordpPress и создадим полноценный текстовый редактор для категорий (рубрик), меток и произвольных таксономий.
Возникает резонный вопрос, а зачем он вообще там нужен?
Многим он действительно никчему, но WordPress набирает все большую популярность и на данной CMS создают сайты самых разных тематик.
Не так давно, я работал над сайтом по продаже промышленного оборудования, где предусматривалось четыре уровня вложенности категорий, причем в каждом верхнем уровне должен был выводится не стандартный цикл WordPress, а разный текст, как в записях. Понятно, что без полноценного редактора в разделе категорий, здесь было не обойтись.
Кроме того, стояла задача на каждой странице категории верхнего уровня вывести миниатюры и заголовки дочерних категорий в виде каталога, но это уже отдельная тема и мы в этой статье ее касаться не будем. Ждите обновлений блога и я все расскажу.
В общем пришлось мне изрядно поломать голову и о том, что у меня в итоге получилось я и собираюсь Вам рассказать. Поехали!
Как добавить редактор в категории и метки без плагина
Первое, что нам надо сделать, это определить фильтры, с помощью которых мы сможем вмешаться в работу ядра WordPress, отвечающего за область редактирования рубрик или меток в админке и внести свои коррективы.
CMS WordPress очень славится своими хуками, они предусмотрены разработчиками практически для любых областей и чтобы найти подходящий, достаточно почитать документацию или поискать инфу в сети.
Среди таких есть хуки: edit_category_form_fields, позволяющий добавлять дополнительные поля в раздел редактирования категорий и edit_tag_form_fields, отвечающий за новые поля в разделе редактирования меток.
Еще нам надо отключить функции форматирования wp_filter_kses() и wp_kses_data(), иначе при сохранении или обновлении будут вырезаться все HTML теги.
Итак, какие фильтры нам нужны мы выяснили, осталось написать функцию, с помощью которой мы будем изменять ядро.
Данную функцию надо вставлять в файл functions.php вашей темы.
remove_filter( 'pre_term_description', 'wp_filter_kses' );
remove_filter( 'term_description', 'wp_kses_data' );
function mayak_category_description($container = ''){
$content = is_object($container) && isset($container->description) ? html_entity_decode($container->description) : '';
$editor_id = 'tag_description';
$settings = 'description';
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="description">Описание</label></th>
<td><?php wp_editor($content, $editor_id, array(
'textarea_name' => $settings,
'editor_css' => '<style> .html-active .wp-editor-area{border:0;}</style>',
)); ?><br />
<span class="description">Описание по умолчанию не отображается, однако некоторые темы могут его показывать.</span></td>
</tr>
<?php
}
add_filter('edit_category_form_fields', 'mayak_category_description');
add_filter('edit_tag_form_fields', 'mayak_category_description');
Примечание! Для Woocomerce используйте хук product_cat_edit_form_fields.
Кстати, сам редактор выводится с помощью функции WordPress wp_editor(), работу которой я уже подробно разбирал в одной из своих прошлых статей. Кто не читал, советую ознакомиться.
Посмотрим, что получилось:
Как видно теперь у нас два поля описания категорий и одно из них явно лишнее, думаю понятно какое.
Для решения этой проблемы, пришлось написать еще одну простенькую функцию, вот она:
function mayak_remove_category_description(){
if ( $mk_description->id == 'edit-category' or 'edit-tag' ){
?>
<script type="text/javascript">
jQuery(function($) {
$('textarea#description').closest('tr.form-field').remove();
});
</script>
<?php
}
}
add_action('admin_head', 'mayak_remove_category_description');
Смотрим
Если старое поле исчезло, значит все в порядке.
Автоматически редактор будет отображаться и на страницах редактирования произвольных таксономий.
Все работает на ура!
Но это еще не все! Теперь надо как-то вывести текст с редактора на страницах категорий или меток, ведь по умолчанию там выводятся только анонсы записей.
Для вывода содержимого поля «Описание» предусмотрены специальные функции WordPress:
category_description()> — выведет описание рубрики;
tag_description() — выведет описание метки.
В файлах их нужно прописывать с оператором echo, т.е. так:
<?php echo category_description(); ?> <?php echo tag_description(); ?>
Данные функции могут работать, как внутри цикла WordPress, так и за его пределами, это к слову, но лучше описание выводить за приделами цикла, т.е. перед строчкой:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Или после строчки:
<?php endwhile; ?>
Конечно, могут быть и другие варианты цикла, все зависит от шаблона.
И это еще не все! Остался один маленький штрих.
Дело в том, что на странице списка рубрик или меток по умолчанию отображаются их описание и если описание будет слишком большое, то получится следующее:
Такая простыня в списке рубрик совершенно никчему! Чтобы этого избежать, надо отключить вывод описаний на странице общего списка.
В правом верхнем углу страницы есть вкладка «Настройки экрана», вот она то нам и нужна:
Снимаем галочку и описание больше не будет мозолить глаза. Все просто!
Предвижу вопрос по поводу формирования description для категорий. Здесь сложностей быть не должно. Тот же плагин All in One SEO Pack автоматом выводит в качестве description определенное количество символов из первых предложений описания, лишнее просто обрезается.
В следующих статьях будет не менее интересно, следите за обновлениями.
До встречи!
С уважением, Виталий Кириллов
Статьи по теме:
Title, description, keywords и h1 для категорий товаров Woocommerce
Картинки для категорий (рубрик) — изображения WordPress
Title, description, keywords и h1 для категорий (рубрик) WordPress
Шаблоны для категорий или как сделать каталог из рубрики
Категории WordPress — термы и таксономии
wp_list_categories() — как выводить рубрики WordPress
Классная возможность! Я думаю, многим пригодится. Я помню, как раньше мучилась, вставляя теги в поле описания категорий.
Только я с недавних пор просто убрала это описание, т.к. оно было скорее для поисковиков, пользователи его не читали)) Может, теперь подумаю и верну его))
Здравствуйте Наталья!
Многие вставляют теги в описание и я это делал до недавних пор)
Вот спасибо, Виталий! А я мучился с html-кодом, правда нельзя было вставить тег -more-. На днях попробую и отпишусь о результатах.
Здравствуйте Альберт!
Тег more предусмотрен только для записей post, в категориях он работать не будет.
Полезная статья. Однозначно будет полезна владельцам сайтов на Ворд-пресс.
Статья полезная, в описании рубрики действительно появилось соответствующее окно. Правда есть одно НО!!! После нажатия кнопки «Обновить» все тэги пропадают. У меня стоит WordPress 4.7.2, плагинов, кроме «Image Watermark» — добавляет водяные знаки (т.е. ни как не влияет), нет. Можно ли это как-то решить?
Андрей, надо добавить отключение фильтров в функцию.
Вставьте в functions.php:
И еще небольшое уточнение: так если я отключу фильтры это же во всех редакторах они отключатся. Можно ли их отключить только для редактора категорий?
Форматирование отключается только для функций: pre_term_description() и term_description(), которые относятся к функционалу таксономий.
Ок. Спасибо
Для всех кто знаком с html редактор с кнопками не обязательная штука. А вот код отключения фильтров вещь незаменимая, т.к. без этого в описании рубрики вырезаются большинство html тегов. У меня без отключения фильтров работали только теги. Огромное человеческое спасибо вам за код отключения фильтров! Его работу я ещё не пробовал, но попробую в ближайшее время.
Сразу возникли два вопроса:
1. Вы пишете:
В каких файлах? Где они находятся?
2. Как добавить description для категорий без плагина All in One SEO Pack?
Заранее спасибо за ответ!
1. Если речь идет о категориях, то это могут быть файлы: archive.php или category.php, зависит от шаблона.
2. Позвольте ответить вопросом. А как сейчас у Вас выводится дискрипшен для категорий, его просто нет?
1. А где находятся файлы archive.php или category.php ? В моей теме нет таких файлов.
2. Дескрипшн для категорий у меня нет, в том то и проблема!
Предвижу ваш вопрос… дескрипшн для постов я вывожу добавив код в файл header.php моей темы между тегами head:
<meta name="description" content="ID, 'Description', true); if ($description) { ?>ID, "Description", true); ?>
" />
<meta name="description" content="" />
Код добавляет тег description и дает возможность использовать произвольное поле Description для задания содержания тега, если нужно изменить описание description. Если произвольное поле не существует, то используется выдержка из содержания страницы/записи.
Часть кода в предыдущем посте пропала. Как добавить код, чтобы он не вырезался в комментариях?
Чтобы добавить код в комментарий воспользуйтесь преобразователем.
Обычно файлы находятся в корне темы, но повторяю все шаблоны разные.
Что касается вывода дискрипшена, то в следующей статье я как раз буду рассказывать о произвольных полях для категорий, будем свой title и h1 для рубрик делать.
Статью ждать на следующей неделе, надеюсь…
1. Я уже нашёл в инете ответ на свой вопрос. Как вы и сказали выше, файл category.php находится в шаблоне темы. Если файл category.php не найден WordPress ищет шаблон для вывода архива archive.php. Если нет и этого файла, WordPress будет использовать основной шаблон Темы index.php.
2. С нетерпением буду ждать вашу статью. Может в ней будет ответ на мой вопрос как вывести описание дискрипшн в категориях?
Будет.
Виталий, здравствуйте, а как сделать так, чтобы описание меток(тегов) не повторялось на всех страницах, а было только на первой?
Здравствуйте Дмитрий! Обычно постраничная навигация закрывается от индексации, так что не вижу проблемы, что описание повторяется. Или Вы намеренно отрыли индексацию страниц пагинации?
добрый день, статья очень кстати. но есть одно но…
Насколько я понимаю функция mayak_remove_category_description()
должна удалить стандартное поле Описания. но почему то у меня она остается вместе с новим визуальным редактором WordPress 4.7.3
Здравствуйте Игорь! Версия WordPress здесь не причем, дело скорее всего в теме или плагинах.
Добрый день, однако кнопка Настройки экрана не раскрывает блок с галочками, в эту статью пришёл из статьи про миниатюры рубрик, так как не появлялось стандартное окно выбора картинок, после добавления редактора стало работать, но Настройки экрана и Помощь перестали работать и в консоли висит ошибка Cannot read property ‘editor’ of undefined
at mayak_image_upload
Добрый день!
Спасибо, что сообщили об ошибке.
Честно говоря просто небыло времени все тщательно протестировать.
Тут дело не в вызове редактора. Была ошибка в подключении функции mayak_loader(), что в статье — Картинки для категорий (рубрик) — изображения WordPress.
Подключение поправил.
скопировал заново function mayak_loader()
пока ничего не поменялось
Возможно кеш.
Скопируйте от суда, полностью!
if(preg_match("#tag_ID=([0-9.]+)#", $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])) add_action( 'admin_footer', 'mayak_loader' ); function mayak_loader() { ?> <script> jQuery(document).ready( function($) { function mayak_image_upload(button_class) { var mm = true, _orig_send_attachment = wp.media.editor.send.attachment; $('body').on('click', button_class, function(e) { var mb = '#'+$(this).attr('id'); var mt = $(mb); mm = true; wp.media.editor.send.attachment = function(props, attachment){ if (mm) { $('#id-cat-images').val(attachment.id); $('#cat-image-miniature').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />'); $('#cat-image-miniature .custom_media_image').attr('src',attachment.sizes.thumbnail.url).css('display','block'); } else { return _orig_send_attachment.apply( mb, [props, attachment] ); } } wp.media.editor.open(mt); return false; }); } mayak_image_upload('.bitton_images.button'); $('body').on('click','.bitton_images_remove',function(){ $('#id-cat-images').val(''); $('#cat-image-miniature').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />'); }); $(document).ajaxComplete(function(event, xhr, settings) { var mk = settings.data.split('&'); if( $.inArray('action=add-tag', mk) !== -1 ){ var mh = xhr.responseXML; $mr = $(mh).find('term_id').text(); if($mr!=""){ $('#cat-image-miniature').html(''); } } }); }); </script> <?php }C условием if работает всё как надо, странно что из поста про миниатюры у некоторых без редактора заработала подгрузка
Спасибо!
Виталий, подскажите, вывел текстовый редактор в категории как описано в вашей статье, по началу всё получилось, текст оказался внизу. Я начал писать новый текст с загаловками и вот что получилось
shop-tale.ru/product-category/biznes-nabory/biznes-aksessuary-muzhchineтекст вылез дополнительно в верху над верхним меню. Если удалять заголовки из текста, то всё нормально становится! Подскажите что с этим можно сделать?Андрей, я сходу не могу ответить на Ваш вопрос, так как все шаблоны разные, тем более у Вас вукомерс стоит. Так быть не должно!
Да, странно это, обычный блок с описанием корректно работает с заголовками, а когда текстовый редактор ставишь начинает глючить!
Здравствуйте, вопрос к профи, перерыл интернет, но решения не нашел (хотя думаю, что все проще, чем кажется, но с WP знаком не очень). Тестовый сайт
art-phenix.ruu , WP, тема Customizr. В саму тему встроен отличный слайдер, можно на разных страницах отображать разные слайдеры по размерам, кол-ом фото. Этот функционал добавлен внизу при редактировании страницы и товаров.При установке Woocomerce в товарах также можно добавить любой созданный слайдер, а в категории товаров нет. В этом и проблема, что весь сайт будет со сладерами, а категории пустые. Добавление дополнительного описания под товарами нашел, прочитав статью (битая ссылка), понял, что это возможно, вопрос как. Т.е. добавить функционал редактирования страниц и товаров в редактирование категорий и рубрик
Здравствуйте, Анатолий!
Выбрал время, чтобы попробовать разобраться в вашем вопросе, но ссылка на материал по теме битая.
Мой пробный сайт art-phenix.ru
Да, вот текст оттуда для вставки описания категорий до и после в файл Function.php шаблона сайта. Может еще кому пригодится, в редактирование категорий добавляется доп. описание под товарами с редактором WP, что очень удобно для написания SEO текстов
add_action( ‘product_cat_edit_form_fields’, ‘wpm_taxonomy_edit_meta_field’, 10, 2 );
function wpm_taxonomy_edit_meta_field($term) {
$t_id = $term->term_id;
$term_meta = get_option( «taxonomy_$t_id» );
$content = $term_meta[‘custom_term_meta’] ? wp_kses_post( $term_meta[‘custom_term_meta’] ) : »;
$settings = array( ‘textarea_name’ => ‘term_meta[custom_term_meta]’ );
?>
Любой текст или банеры для каждой категории
term_id;
$term_meta = get_option( «taxonomy_$t_id» );
$term_meta_content = $term_meta[‘custom_term_meta’];
if ( $term_meta_content != » ) {
echo »;
echo apply_filters( ‘the_content’, $term_meta_content );
echo »;
}
}
только вот весь Html в коде выше вырезался
Для вставки кода воспользуйтесь преобразователем, что находится чуть выше формы комментирования.
Вот код
add_action( 'product_cat_edit_form_fields', 'wpm_taxonomy_edit_meta_field', 10, 2 ); function wpm_taxonomy_edit_meta_field($term) { $t_id = $term->term_id; $term_meta = get_option( "taxonomy_$t_id" ); $content = $term_meta['custom_term_meta'] ? wp_kses_post( $term_meta['custom_term_meta'] ) : ''; $settings = array( 'textarea_name' => 'term_meta[custom_term_meta]' ); ?> <tr class="form-field"> <th scope="row" valign="top"><label for="term_meta[custom_term_meta]">Любой текст или банеры для каждой категории</label></th> <td> <?php wp_editor( $content, 'product_cat_details', $settings ); ?> </td> </tr> <?php } add_action( 'edited_product_cat', 'save_taxonomy_custom_meta', 10, 2 ); add_action( 'create_product_cat', 'save_taxonomy_custom_meta', 10, 2 ); function save_taxonomy_custom_meta( $term_id ) { if ( isset( $_POST['term_meta'] ) ) { $t_id = $term_id; $term_meta = get_option( "taxonomy_$t_id" ); $cat_keys = array_keys( $_POST['term_meta'] ); foreach ( $cat_keys as $key ) { if ( isset ( $_POST['term_meta'][$key] ) ) { $term_meta[$key] = wp_kses_post( stripslashes($_POST['term_meta'][$key]) ); } } update_option( "taxonomy_$t_id", $term_meta ); } } add_action( 'woocommerce_after_shop_loop', 'wpm_product_cat_archive_add_meta' ); function wpm_product_cat_archive_add_meta() { $t_id = get_queried_object()->term_id; $term_meta = get_option( "taxonomy_$t_id" ); $term_meta_content = $term_meta['custom_term_meta']; if ( $term_meta_content != '' ) { echo '<div class="woo-sc-box normal rounded full">'; echo apply_filters( 'the_content', $term_meta_content ); echo '</div>'; } }но он добавляет только доп описание для категорий под товарами в Woocomerce с визуальным редактором и все, а вот как вставить возможность добавления встроенного в тему Customizr слайдера в категории не пойму. Слайдер можно добавить везде, кроме рубрик WP и категорий Woo. При редактировании товаров и страниц внизу есть кнопка добавить слайдер и настройки.
Анатолий, я покопался в коде темы, пока безрезультатно. Функционал слайдера сильно разбросан по файлам. Подумайте, может будет проще отделенный слайдер вывести для категорий товаров. Кстати вышла новая статья, как раз на тему Woocommerce.
Все равно спасибо большое за помощь, у меня была мысль вставить функционал редактирования товаров в редактирование категорий, покопаюсь еще сам. Посоветуйте, пож-та, хороший слайдер
Виталий. А можно ли подобным образом подключить визуальный редактор к полю «Биография» в профиле пользователя? Добавлять произвольные поля я уже научилась, а вот подключать к ним редактор пока нет.
Здравствуйте, Ольга!
Сходу ответить не могу. Будет время, попробую что-нибудь сделать.
Здравствуйте. Еще нет решения, как подключить визуальный редактор к полю «Биография»?
Как бы не пробовал текст в атрибутах встает над товарами. Как его переместить под них? Тема Leto
Здравствуйте Виталий Кириллов. Огромное спасибо и за эту статью в том числе. Простой (для вас) вопрос. В функции mayak_remove_category_description не понял этой переменой global $mk_description; которая нигде необъявлена и не используется + получаю notice в админке. Как я понимаю могу просто ее убрать?
Спасибо! Поправил.
Бывает остаются хвосты после экспериментов.
Благодарю, порадовали скоростью ответа. Я в php слабовато (имхо) разбираюсь, да и wp меньше месяца изучаю. Думал может какой то скрытый смысл функции, о котором не в курсе)
Здравствуйте!
Скажите пожалуйста, а есть ли разница добавления картинок через редактор или через миниатюры?
Как будет лучше?
https://seo-mayak.com/sozdanie-bloga/nastrojka-wordpress/kartinki-dlya-kategorij-rubrik-izobrazheniya-wordpress.html
Разница есть. На стандартных страницах записи, если вы помните, миниатюра задается отдельно, через интерфейс в правой боковой колонке, это позволяется легко определять заданную миниатюру. Тоже самое и с категориями.
Хорошо спасибо! У меня почему то не сработала кнопка ответить))
Кнопку поправил, спасибо!
Извините может не по теме но ни как не получается сделать красивый вид
Хочу сделать выравнивание по левому краю с картинкой и оптиканием описания. но ни как не получается вы можете сказать как это можно реализовать?
получается хочу сделать блок другого цвета в нем картинка и текст с оптиканием по левому краю, но пытаюсь выравнять картинку она вылазит за пределы блока, а текст как то сам по себе. уже и пытался описание в отдельный div засунуть, но все ни как. Буду очень благодарен если тыкните где капать)))
Благодарю вас за полезный материал!
Здравствуйте. Я создал frontend форму для пользователей. Вывел полное и краткое описание товаров в этой форме. Всё работает, пользователи добавляют через форму контент посредством полей полного и краткого описания товара, и добавленный контент успешно публикуется на странице товара. Из админки можно как обычно тоже редактировать добавленный посредством формы контент. Но, вот небольшой нюанс — добавленный скажем видео код из Youtube или аудио код из Яндекс.Музыки прекрасно выводиться только в полном описание товара, а вот в кратком описание товара код обрезается и выводится только текстовое содержание.
Подскажите как сделать так, чтобы в кратком описании добавленный видео или аудио код не обрезался.
Спасибо за труды, очень пригодилось; главное без плагина!