Молодость — не ошибка, старость — не заслуга (Немецкая поговорка).

Добавление пользовательских стилей для WordPress Visual Editor

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Статья опубликована: 12 сентября 2016

Добавление пользовательских стилей для WordPress Visual Editor
Вы хотите добавить пользовательские стили в визуальном редакторе WordPress? Добавление пользовательских стилей позволяет быстро применять форматирование, не переключаясь в текстовом редакторе. В этой статье мы покажем вам, как добавить пользовательские стили в визуальном редакторе WordPress.

Примечание: Этот учебник требует базовые знания CSS.

Почему и когда вам нужно пользовательские стили для WordPress в визуальном редакторе.

По умолчанию, визуальный редактор в WordPress работает с некоторыми основными параметрами форматирования и стиля. Тем не менее, иногда вам может понадобиться пользовательские стили, самостоятельно добавить кнопки CSS, содержание блоков, слоганы и т.д.

Вы всегда можете переключиться с визуального в текстовом редакторе и добавить пользовательский HTML и CSS. Но если вы регулярно использовать некоторые стили, то это было бы лучше, чтобы добавить их в визуальном редакторе, так что вы можете легко использовать их.

Это позволит вам сэкономить время, затрачиваемое на переключение назад и вперед между текстом и визуальным редактором. Это также позволит вам последовательно использовать одни и те же стили по всему вашему сайту.

Самое главное, что вы можете легко настроить или обновить стили без необходимости редактировать постов на вашем сайте.

Сказав это, давайте посмотрим, как добавлять пользовательские стили в визуальном редакторе WordPress.

Метод 1: Добавление пользовательских стилей в визуальном редакторе, используя плагин

Первое , что вам нужно сделать, это установить и активировать плагин TinyMCE Custom Styles. Для получения более подробной информации см наше руководство шаг за шагом руководство о том, как установить плагин WordPress.

После активации, посетите страницу для настройки параметров плагина: Настройки » TinyMCE Custom Styles.

Настройки TinyMCE Custom Styles

Плагин позволяет выбрать расположение файлов css. Таблицы стилей могут находиться в вашей теме или дочерней теме, или вы выберете другое расположение ваших собственных.

Для сохранения изменений нажмите на кнопку “Save All Settings».

Теперь вы можете добавить свои собственные стили. Вам нужно прокрутить вниз немного к разделу стиля и нажмите на кнопку Добавить новый стиль.

Прежде всего, необходимо ввести название для стиля. Это название будет отображаться в выпадающем меню. Далее, вам нужно выбрать, является ли он встроенный, блок или элемент селектора.

После добавление класса CSS, а затем добавить свои правила CSS, как показано на рисунке ниже.

Добавление нового пользовательского стиля

После того, как вы добавили стиль CSS, просто нажмите на кнопку “Save All Settings» для сохранения изменений.

Теперь Вы можете редактировать существующую запись или создать новую. Вы заметите формат выпадающего меню во второй строке WordPress визуального редактора.

Пользовательский стиль TinyMCE в меню

Просто выберите какой-нибудь текст в редакторе, а затем выбрать свой собственный стиль в меню Форматы, чтобы применить его.

Теперь вы можете просмотреть свой пост, чтобы увидеть, что пользовательские стили применяются правильно.

Способ 2: Добавление пользовательских стилей в визуальном редакторе WordPress вручную

Этот метод требует, чтобы вручную добавить код в файлы WordPress. Если это ваш первый раз добавляете код в WordPress, то смотрите наше руководство по вставки фрагмента кода из интернета в WordPress .

Шаг 1: Добавьте пользовательские стили выпадающего меню в визуальном редакторе WordPress

Во-первых, мы добавим форматы выпадающего меню в визуальном редакторе WordPress. Это выпадающее меню позволит нам выбирать и применять наши собственные стили.

Вам нужно добавить следующий код в файл редактируемой темы  functions.php или в специфический плагин.

Шаг 2: Добавить пункт выпадающего меню

Теперь вам нужно добавить пункт выпадающего меню, которую вы только что создали. После этого вы сможете выбрать и применить эти параметры форматов в раскрывающемся меню.

Ради этого урока, мы добавляем три пользовательских стиля для создания блока и кнопок контента.

Вам нужно будет добавить следующий код в файл редактируемой темы functions.php или в специфический плагин.

Теперь добавьте новый пост в WordPress и нажмите на выпадающего меню “Форматы” в визуальном редакторе. Вы заметите, что ваши пользовательские стили теперь видны под форматами.

Тем не менее, выбирая их не делает никаких изменений в редакторе постов прямо сейчас.

Шаг 3: Добавление стилей CSS

Теперь последний шаг, чтобы добавить правила стиля CSS для пользовательских стилей.

Вам нужно будет добавить этот CSS в вашу редактируемую тему: в файл style.css или файл style.css дочерней темы.

Пользовательские стили в WordPress редакторе постов

Редактор таблиц стилей контролирует внешний вид вашего контента в визуальном редакторе. Обратитесь к документации вашей темы, чтобы узнать местоположение этого файла.

Если ваша тема не имеет файла редактора таблиц стилей, то вы всегда можете создать. Просто создайте новый файл CSS и назовите его custom-editor-style.css.

Вам нужно загрузить этот файл в корневой каталог вашей темы, а затем добавить этот код в файл functions.php вашей темы.

Это все. Вы успешно добавили свои пользовательские стили в визуальный редактор WordPress. Не стесняйтесь работать с кодом, добавляя свои собственные элементы и стили.

Мы надеемся , что эта статья помогла вам узнать, как добавлять пользовательские стили в визуальном редакторе WordPress.


Читайте также

    Добавить комментарий

    Войти с помощью: 

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

    badge
    Обратный звонок 1
    Отправить
    galka

    Спасибо! Ваша заявка принята

    close
    galka

    Спасибо! Ваша заявка принята

    close