Учебники

Как добавить собственные стили в визуальный редактор WordPress

Как добавить собственные стили в визуальный редактор Wordpress

Взгляните на свой визуальный редактор 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 новых стиля в раскрывающийся список «Форматы» – «Кнопка темы» и «Выделить».

/** * Add custom styles to the mce formats dropdown * * @url https://codex.wordpress.org/TinyMCE_Custom_Styles * */ function myprefix_add_format_styles( $init_array) { $style_formats = array( // Each array child is a format with it's own settings - add as many as you want array( 'title' => __( 'Theme Button', 'text-domain' ), // Title for dropdown 'selector' => 'a', // Element to target in editor 'classes' => 'theme-button' // Class name used for CSS ), array( 'title' => __( 'Highlight', 'text-domain' ), // Title for dropdown 'inline' => 'span', // Wrap a span around the selected content 'classes' => 'text-highlight' // Class name used for CSS ), ); $init_array['style_formats'] = json_encode( $style_formats ); return $init_array; } add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Вы можете изменить название, чтобы показать различные имена ваших выпадающих пунктов меню, добавить / удалить из массива, и т.д. Вы можете изменить только о чем – нибудь в этом коде, чтобы показать свой собственные стили пользовательского формата, не забудьте проверить WordPress Codex для более подробное объяснение принятых параметров и возвращаемых значений.

Теперь, когда у вас есть новые стили, вы можете выделить контент в редакторе и применить стили. Обратите внимание, как у формата «Theme Button» есть параметр селектора? Это означает, что стиль может быть применен только к этому конкретному селектору (в данном случае к тегу «a» или «link»). Второй формат, который мы добавили «Highlight», не имеет параметра селектора, а скорее «встроенный» параметр, который сообщает ему, что нужно применить стиль к любому тексту, который вы выделили в редакторе, и заключить его в диапазон с вашим уникальным именем класса. Вы можете увидеть пример из нашей темы Total WordPress о том, как мы использовали форматы, чтобы пользователи могли легко применить контрольный список к любым маркерам в редакторе.

Как добавить собственные стили в визуальный редактор 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 с помощью приятного плагина

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

Как добавить собственные стили в визуальный редактор Wordpress

Просто найдите, установите и активируйте плагин TinyMCE Custom Styles и активируйте его на своем сайте WordPress.

Как добавить собственные стили в визуальный редактор Wordpress

Перейдите в Настройки> Проф. Стили TinyMCE в левой части панели инструментов WordPress. Здесь вы изменяете свои настройки для плагина.

Как добавить собственные стили в визуальный редактор Wordpress

Плагин позволяет вам выбирать, где находятся ваши таблицы стилей или где вы хотите их разместить. Рекомендуется создать новый настраиваемый каталог. Выберите третий вариант и дайте своему каталогу имя, затем спуститесь по странице, чтобы выбрать параметр «Сохранить настройки», прежде чем переходить к следующему шагу.

Как добавить собственные стили в визуальный редактор Wordpress

После сохранения настроек прокрутите вниз и выберите кнопку «Добавить новый стиль».

Как добавить собственные стили в визуальный редактор Wordpress

Здесь вы настраиваете то, как должны выглядеть ваши пользовательские стили. По сути, это простой веб-редактор, который генерирует для вас код CSS. Введите заголовок для всего, что вы хотите отобразить в раскрывающемся меню. Выберите, хотите ли вы селекторный, встроенный или блочный тип. Не стесняйтесь использовать снимок экрана выше, чтобы заполнить классы и стили CSS или создать свои собственные, в зависимости от того, для чего вы планируете использовать раскрывающееся меню. После этого нажмите «Сохранить настройки» внизу страницы.

Как добавить собственные стили в визуальный редактор Wordpress

Теперь пора посмотреть, как новый пользовательский стиль выглядит в вашем редакторе. Откройте новое сообщение или страницу и найдите раскрывающееся меню «Форматы» в левой части визуального редактора. Он отображается во второй строке. Как только вы нажмете на раскрывающееся меню, откроется только что созданный вами новый стиль.

Как добавить собственные стили в визуальный редактор Wordpress

Нажмите на опцию «Большая синяя кнопка» или на то, что вы создали, чтобы увидеть ее в своем редакторе. Чтобы использовать его, просто выделите текст, который вы хотите отформатировать, затем нажмите на свой вариант и вуаля!

Заключение

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

Дайте нам знать в разделе комментариев, если у вас есть какие-либо вопросы о том, как добавить пользовательские стили в визуальный редактор WordPress. И не стесняйтесь делиться любыми необычными стилями, которые вы создали, чтобы ваш сайт выглядел немного лучше!

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Добавление отвлекающего чтения в WordPress

Учебники

Как исключить таксономию из типа сообщения WordPress

Учебники

Добавление пользовательских QuickTags WordPress

Учебники

Как добавить встроенную контентную рекламу в WordPress