Как добавить собственные стили в визуальный редактор WordPress
Взгляните на свой визуальный редактор WordPress. Есть несколько стандартных вариантов форматирования и стилизации вашего контента, но их не так много с точки зрения настройки, чтобы ваши сообщения и страницы выглядели действительно необычно.
Теперь вы, возможно, знаете, что у вас есть возможность переключаться между текстовым и визуальным редакторами в WordPress, чтобы добавить некоторый CSS для создания таких вещей, как кнопки и текстовые блоки, но это проблема, и если у вас нет большой опыт редактирования кода Текстовый редактор кажется немного устрашающим.
Разве не было бы проще, если бы вы могли создавать свои собственные стили, помещать их в раскрывающееся меню в редакторе WordPress и использовать их всякий раз, когда они вам нужны? Да, это намного проще, поэтому мы хотим рассказать, как это сделать. Имейте в виду, что, хотя мы стараемся сделать этот процесс как можно более простым, немного знаний CSS помогает, если вы хотите раскрыть все преимущества пользовательских стилей.
Давайте посмотрим, как добавить собственные стили в визуальный редактор WordPress.
Добавление пользовательских стилей в визуальный редактор WordPress путем добавления кода
Этот первый вариант требует, чтобы вы немного знали о том, как включать и изменять CSS, но я дам вам небольшой обзор, который поможет вам изучить основы, чтобы вы могли использовать эти знания в будущем. Это хороший вариант, если вы не хотите перегружать свой сайт плагином.
Смысл этого в том, чтобы добавить новое раскрывающееся меню, которое включает в себя пользовательские стили в визуальном редакторе WordPress, что дает вам возможность выбирать элементы в вашем редакторе, а затем применять к ним пользовательские стили. Если вы разрабатываете новую тему, найдите свой файл functions.php и поместите в него приведенный ниже код, или если вы работаете с уже встроенной темой, вставьте этот код в файл functions.php дочерней темы.
function myprefix_mce_buttons_1( $buttons) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );Вернитесь в редактор в одной из ваших записей WordPress, и теперь вы должны увидеть новую кнопку «Форматы» в верхнем ряду редактора. Обратите внимание, как мы подключились к «mce_buttons_1? Это поместит кнопку меню форматов в первую строку редактора mce. Вы также можете использовать фильтр «mce_buttons_2», чтобы поместить его во вторую строку, или «mce_buttons_3», чтобы поместить его в 3-ю строку.
Итак, теперь, когда вы включили этот пункт меню, пришло время добавить свои собственные стили для использования в ваших сообщениях. Возьмите приведенный ниже код и вставьте его в свой файл functions.php, который добавит 2 новых стиля в раскрывающийся список «Форматы» – «Кнопка темы» и «Выделить».
Вы можете изменить название, чтобы показать различные имена ваших выпадающих пунктов меню, добавить / удалить из массива, и т.д. Вы можете изменить только о чем – нибудь в этом коде, чтобы показать свой собственные стили пользовательского формата, не забудьте проверить WordPress Codex для более подробное объяснение принятых параметров и возвращаемых значений.
Теперь, когда у вас есть новые стили, вы можете выделить контент в редакторе и применить стили. Обратите внимание, как у формата «Theme Button» есть параметр селектора? Это означает, что стиль может быть применен только к этому конкретному селектору (в данном случае к тегу «a» или «link»). Второй формат, который мы добавили «Highlight», не имеет параметра селектора, а скорее «встроенный» параметр, который сообщает ему, что нужно применить стиль к любому тексту, который вы выделили в редакторе, и заключить его в диапазон с вашим уникальным именем класса. Вы можете увидеть пример из нашей темы Total WordPress о том, как мы использовали форматы, чтобы пользователи могли легко применить контрольный список к любым маркерам в редакторе.
Итак, теперь вы можете использовать свои собственные форматы, но они не будут выглядеть иначе, пока вы не добавите на свой сайт какой-нибудь собственный CSS для их стилизации. Вы должны найти таблицу стилей для своей темы (если вы создаете свою собственную) или дочерней темы и вставить следующий код CSS в файл.
.theme-button {
display: inline-block;
padding: 10 15px;
color: #fff;
background: #1796c6;
text-decoration: none;
}
.theme-button:hover {
text-decoration: none;
opacity: 0.8;
}
.text-highlight {
background: #FFFF00;
}Теперь это добавит стиль к вашим новым форматам для интерфейса, чтобы после применения вы могли видеть их вживую. Ура! Но было бы неплохо видеть ваши стили в реальном редакторе, когда они применяются? Для этого вам нужно будет использовать функцию «Редактор таблиц стилей» в WordPress. Если вы создаете свою собственную тему, вам нужно будет создать в своей теме новый файл css под названием «editor-style.css» (вы можете назвать его как хотите, просто не забудьте соответствующим образом отредактировать фрагмент ниже) с помощью настраиваемого CSS. добавлен для ваших форматов, а затем добавьте функцию ниже, чтобы загрузить ее в бэкэнд.
function myprefix_theme_add_editor_styles() {
add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'myprefix_theme_add_editor_styles' );Если вы работаете с чужой темой, вам нужно будет добавить это в свою дочернюю тему, просто не забудьте дать ей уникальное имя, чтобы оно не конфликтовало с вашей родительской темой или если в вашей родительской теме уже есть файл CSS для редактор, вы можете фактически скопировать его и вставить в свою дочернюю тему (без добавления кода PHP выше), а затем добавить свой новый CSS, потому что WordPress сначала проверит дочернюю тему, прежде чем загружать файл CSS редактора родительской темы, и если он найдет его, он вместо этого загрузите его из дочерней темы.
Добавление пользовательских стилей в визуальный редактор WordPress с помощью приятного плагина
Если у вас нет времени поиграться с кодом или вы не можете вообразить его самостоятельно, есть хорошие новости. Существует плагин, который позволяет вам выполнить именно то, что мы только что сделали выше, без необходимости возиться с кодом.
Просто найдите, установите и активируйте плагин TinyMCE Custom Styles и активируйте его на своем сайте WordPress.
Перейдите в Настройки> Проф. Стили TinyMCE в левой части панели инструментов WordPress. Здесь вы изменяете свои настройки для плагина.
Плагин позволяет вам выбирать, где находятся ваши таблицы стилей или где вы хотите их разместить. Рекомендуется создать новый настраиваемый каталог. Выберите третий вариант и дайте своему каталогу имя, затем спуститесь по странице, чтобы выбрать параметр «Сохранить настройки», прежде чем переходить к следующему шагу.
После сохранения настроек прокрутите вниз и выберите кнопку «Добавить новый стиль».
Здесь вы настраиваете то, как должны выглядеть ваши пользовательские стили. По сути, это простой веб-редактор, который генерирует для вас код CSS. Введите заголовок для всего, что вы хотите отобразить в раскрывающемся меню. Выберите, хотите ли вы селекторный, встроенный или блочный тип. Не стесняйтесь использовать снимок экрана выше, чтобы заполнить классы и стили CSS или создать свои собственные, в зависимости от того, для чего вы планируете использовать раскрывающееся меню. После этого нажмите «Сохранить настройки» внизу страницы.
Теперь пора посмотреть, как новый пользовательский стиль выглядит в вашем редакторе. Откройте новое сообщение или страницу и найдите раскрывающееся меню «Форматы» в левой части визуального редактора. Он отображается во второй строке. Как только вы нажмете на раскрывающееся меню, откроется только что созданный вами новый стиль.
Нажмите на опцию «Большая синяя кнопка» или на то, что вы создали, чтобы увидеть ее в своем редакторе. Чтобы использовать его, просто выделите текст, который вы хотите отформатировать, затем нажмите на свой вариант и вуаля!
Заключение
На этом пока все! Вы всегда можете узнать больше о том, как использовать новые стили, просмотрев страницу кодекса WordPress, посвященную этой теме.
Дайте нам знать в разделе комментариев, если у вас есть какие-либо вопросы о том, как добавить пользовательские стили в визуальный редактор WordPress. И не стесняйтесь делиться любыми необычными стилями, которые вы создали, чтобы ваш сайт выглядел немного лучше!
Источник записи: https://www.wpexplorer.com