Последние новости:

Поиск по сайту:

Жестокость законов препятствует их соблюдению (Ш. Монтескьё).

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

FavoriteLoadingДобавить в избранное
12.09.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. Таблицы стилей могут находиться в вашей теме или дочерней теме, или вы выберете другое расположение ваших собственных.

Читать  Каков процент созданных сайтов на WordPress в 2019 году

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

function andreyex_mce_buttons_ex($button) {
	array_unshift($button, 'styleselect');
	return $button;
}
add_filter('mce_buttons_2', 'andreyex_mce_buttons_ex');

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

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

Читать  Nginx показывает пустые страницы PHP с FastCGI или PHP-FPM

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

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

/*
* Функция обратного вызова для фильтрации параметров MCE
*/

function andreyex_mce_before_ex_insert_formats( $init_array ) {  

// Определить массив style_formats

	$style_formats = array(  
/*
* Каждый массив - это Формат со своими настройками
* Обратите внимание, что каждый массив имеет title, block, classes и wrapper
* Название ярлыка который будет виден в меню форматов
* Блок определяет, является ли это span, div, selector, или inline стиль
* Классы позволяет определить классы CSS
* Wrapper или нет, чтобы добавить новый элемент уровня блока вокруг выбранных элементов
*/
		array(  
			'title' => 'Contents Blocks',  
			'block' => 'span',  
			'classes' => 'contents-blocks',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Blues Buttons',  
			'block' => 'span',  
			'classes' => 'blues-buttons',
			'wrapper' => true,
		),
		array(  
			'title' => 'Reds Buttons',  
			'block' => 'span',  
			'classes' => 'reds-buttons',
			'wrapper' => true,
		),
	);  
	// Создайте массив, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Прикрепить обратно вызов 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'andreyex_mce_before_ex_insert_formats' );

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

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

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

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

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

.content-blocks { 
    border: 2px solid #eee; 
    padding: 5px;
    background: #ccc;
    max-width: 260px;
    float: right; 
    text-align: center;
}
.content-blocks:after { 
    clear: both;
} 
.blue-buttons { 
	background-color: #33beef;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border: 1px solid #057fe0;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	padding: 10px 25px;
	text-decoration: none;
}

.red-buttons {
	background-color: #bc3316;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border: 2px solid #942912;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	padding: 10px 25px;
	text-decoration: none;
}

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

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

Читать  Использование WordPress для создания веб-сайта (не блог)

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

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

function andreyex_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'andreyex_theme_add_editor_styles' );

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Поделиться в соц. сетях:

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Это может быть вам интересно

Статьи партнеров:

Рекомендуемое
Одно-страничный сайт очень популярен в последние годы, так что я нахожу все…
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

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

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

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

close

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

close