Вопрос или проблема
У меня есть сетка Bootstrap на некоторых страницах, которую я сделал видимой в редакторе, стилизовав ее в стилях редактора.
Есть ли способ сделать так, чтобы div колонки не было возможно удалить в визуальном редакторе, как это происходит с ячейкой таблицы, когда ее нельзя удалить с помощью клавиши Backspace? Чтобы, когда клиент удаляет текст в div и продолжает нажимать Backspace, это не удаляло сам div? Однако я хочу, чтобы код можно было редактировать, когда вы переключаетесь на вкладку “Текст”.
Также есть ли способ сделать весь div доступным только для чтения, чтобы его нельзя было редактировать на визуальной вкладке?
Я не думаю, что это можно реализовать в стандартном визуальном редакторе. Вы можете попробовать одно из решений плагинов, которые есть на выбор. Наиболее популярные из них:
- https://wordpress.org/plugins/beaver-builder-lite-version/ (фремиум)
- Visual Composer (осторожно, по-моему, есть проблема с 4.5)
- https://wordpress.org/plugins/tinymce-advanced/screenshots/ (просто упрощает добавление HTML элементов)
Другой подход для решения проблемы — создать свой собственный индивидуальный шаблон. Тогда вы сможете использовать пользовательские поля для заполнения контента в шаблоне:
https://developer.wordpress.org/themes/basics/template-hierarchy/
Вам понадобятся навыки PHP и разработки WordPress, чтобы осуществить это. Удачи.
Ответ или решение
Чтобы сделать элементы недоступными для редактирования в визуальном редакторе, вам нужно рассмотреть несколько методов. Ниже представлены различные подходы к этому вопросу, а также рекомендации для достижения желаемого результата.
1. Использование пользовательских классов и CSS
Одним из способов предотвращения удаления определенных элементов, таких как <div>, является применение пользовательских классов и CSS. Вы можете использовать следующую концепцию:
- Задайте классы для колонн Bootstrap, которые вы хотите защитить.
- В файле стилей добавьте правило, чтобы скрыть курсор в этих элементах.
Пример CSS:
.non-editable {
cursor: not-allowed;
}Таким образом, когда пользователь попытается взаимодействовать с этими элементами, курсор покажет, что редактирование невозможно.
2. JavaScript для предотвращения удаления
Еще одним методом является использование JavaScript. Это решение можно реализовать с помощью обработки событий клавиатуры, чтобы предотвратить удаление элементов.
document.addEventListener('keydown', function(event) {
if (event.key === 'Backspace') {
const activeElement = document.activeElement;
if (activeElement.classList.contains('non-editable')) {
event.preventDefault();
}
}
});3. Пользовательские метабоксы и пользовательские поля
Создайте пользовательские метабоксы для ввода контента. Таким образом, клиент сможет редактировать контент через админ-панель, но не сможет изменять HTML напрямую в визуальном редакторе. Для создания метабоксов нужно использовать PHP и знать основы WordPress.
Пример кода для создания метабокса:
function my_custom_meta_box() {
add_meta_box(
'my_meta_box_id',
'Мой метабокс',
'my_meta_box_callback',
'post'
);
}
add_action('add_meta_boxes', 'my_custom_meta_box');
function my_meta_box_callback($post) {
$value = get_post_meta($post->ID, 'my_meta_key', true);
echo '<textarea style="width:100%">' . esc_textarea($value) . '</textarea>';
}4. Использование плагинов
Если вышеуказанные методы кажутся сложными, вы можете рассмотреть использование плагинов, которые уже реализуют необходимую функциональность. Некоторые популярные плагины:
- Beaver Builder Lite: позволяет создавать адаптивные макеты и предоставляет блоки, которые можно защищать от редактирования.
- Visual Composer: предлагает множество опций для управления элементами страницы.
- TinyMCE Advanced: может упростить процесс редактирования HTML элементов.
5. Создание пользовательских шаблонов
Если у вас есть навыки PHP и разработки для WordPress, вы можете создать собственный пользовательский шаблон, что даст вам полный контроль над контентом и его отображением. Это подход требует больше работы, но он обеспечивает максимальную гибкость.
Заключение
Данная проблема имеет несколько решений, каждое из которых подходит для разных уровней опыта и требований проекта. Выбор метода зависит от вашего комфорта с программированием и архитектурой WordPress. Более простой подход требует использования плагинов, в то время как более сложные (но гибкие) варианты включают использование кастомных метабоксов и создание пользовательских шаблонов.
Таким образом, приняв во внимание описанные методы, вы сможете эффективно управлять редактируемостью элементов в визуальном редакторе, обеспечивая при этом удобство для клиентов.