Вопрос или проблема
Я хотел бы дать своему клиенту возможность добавлять пользовательские классы элементам через редактор WYSIWYG. Например, добавить к тегу ссылки класс cta, чтобы он мог указать, что эта ссылка должна быть кнопкой призыва к действию. Я хочу, чтобы у них был контроль, чтобы не все ссылки обрабатывались таким образом, и чтобы кнопка CTA могла находиться в любом месте их текста, а не только в начале или в конце. Я пытаюсь сделать это многоразовым на сайте. Еще один пример: они могут указать, что хотят, чтобы элемент списка отображался в виде сеточного списка, добавив класс grid-list к одному из списков, которые они создают в своем тексте.
Я знаю, что они могут сделать это через HTML-редактирование в WYSIWYG, но было бы гораздо удобнее, если бы существовал способ просто выделить элемент и добавить класс. Однако не могу найти способ, как они могли бы это сделать. Кстати, я использую ACF, но не вижу никаких вариантов.
Вы всегда можете использовать шорткоды, такие как:
[cta]https://example.com[/cta]
Вот удобный генератор https://generatewp.com/shortcodes/
Что вы понимаете под редактором WYSIWYG? Это классический редактор, встроенный блочный редактор или редактор какого-то стороннего плагина? Если вы используете блочный редактор, там есть расширенный раздел в правой панели, где вы можете добавить столько классов, сколько хотите, разделяя их пробелом. Более удобным способом было бы зарегистрировать стиль блока для кнопки, чтобы пользователь мог выбрать “стандартную” кнопку или ссылку “Призыв к действию” через кнопку на правой боковой панели и тем самым легко выбрать тип ссылки.
Ответ или решение
Введение
Предоставление клиентам возможности добавления пользовательских классов к элементам с помощью редактора WYSIWYG — это важный аспект, который помогает настраивать внешний вид контента без необходимости редактирования HTML. В данном ответе мы рассмотрим несколько методов достижения этой цели, как в классическом редакторе, так и в новом блочном редакторе. Также обсудим возможность использования ACF (Advanced Custom Fields) и создания пользовательских шорткодов для более гибкой работы с контентом.
Решение проблемы добавления классов
1. Использование блочного редактора WordPress
Если вы используете блочный редактор (Gutenberg), существует несколько способов добавить классы ко всем элементам.
-
Дополнительные CSS-классы: На панели настроек блока, находящейся справа, вы найдете секцию "Дополнительные CSS-классы". Здесь вы можете вводить любые классы, разделяя их пробелами. Это решение позволит вашему клиенту добавлять классы, такие как
ctaилиgrid-list, к различным элементам на странице. -
Стилевые варианты блоков: Для создания более удобного интерфейса можно зарегистрировать стили для кнопок. Это можно сделать с помощью функции
register_block_style(). Ваши клиенты смогут выбирать между несколькими стилями (например, "Обычная кнопка" или "Кнопка призыва к действию") из выпадающего списка, что сделает процесс значительно проще.
Пример кода для регистрации стиля кнопки:
function my_custom_button_styles() {
register_block_style('core/button', [
'name' => 'cta-button',
'label' => __('Call to Action'),
]);
}
add_action('init', 'my_custom_button_styles');2. Использование классического редактора
Если ваш клиент использует классический редактор, можно использовать следующие подходы:
-
Включение режима HTML: Вы правы, клиент может использовать HTML-редактор для вставки классов. Однако это не всегда удобно. Важно обучить клиента основам HTML, чтобы он мог работать с кодом без затруднений.
-
Создание пользовательских шорткодов: Если вы хотите создать более удобный интерфейс, подумайте о создании шорткодов. Например, создайте шорткод
[cta], который будет автоматически добавлять необходимый HTML-код с классомcta. Ниже представлен простой пример регистрации шорткода.
function cta_shortcode($atts, $content = null) {
return '<a href="'. esc_url($atts['href']) .'" class="cta">'. do_shortcode($content) .'</a>';
}
add_shortcode('cta', 'cta_shortcode');Пользователь просто использует шорткод, как указано в вашем примере.
3. Использование ACF
Если вы используете ACF, можно предоставить клиентам дополнительные поля, которые позволят им вводить пользовательские классы. Создайте текстовые поля, в которые клиенты смогут вводить классы, а затем используйте эти данные для генерации HTML-кода в преобразованиях.
if( have_rows('custom_classes') ) {
while ( have_rows('custom_classes') ) {
the_row();
$class_name = get_sub_field('class_name');
echo '<div class="'. esc_attr($class_name) .'">Содержимое</div>';
}
}Заключение
Предоставление вашей клиенту возможности добавлять пользовательские классы увеличивает гибкость управления контентом и улучшает пользовательский интерфейс. Независимо от того, используете ли вы блочный редактор, классический редактор или ACF, имеются разные стратегии для достижения этой цели. Обязательно включайте обучение клиента, чтобы он понимал, как использовать эти инструменты, и поддерживайте его в вопросах и ответах по процессу. Это поможет улучшить ваш сервис и укрепить отношения с клиентом.
Оптимизация для SEO
При создании контента и внедрении функционала всегда помните о SEO-оптимизации. Используйте заголовки и подзаголовки (H1, H2, H3) с ключевыми словами, связанными с темой. Также подразумевайте использование внутренней и внешней ссылочной структуры для увеличения видимости в поисковых системах.