3 — Создание необходимых CSS для кнопок

Кнопки уже годны к употреблению. Вы можете попробовать их, создав новую статью, а затем, используя новую функцию. Тем не менее, кнопки не похожи на кнопки еще; немного CSS для этого нужно.

Скопируйте CSS в style.css вашей темы WordPress, или создайте собственную таблицу стилей для них.

.blue-button { 

	background-color:#33bdef;

	-moz-border-radius:6px;

	-webkit-border-radius:6px;

	border-radius:6px;

	border:1px solid #057fd0;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	padding:6px 24px;

	text-decoration:none;

}



.green-button { 

	background-color:#30AC38;

	-moz-border-radius:6px;

	-webkit-border-radius:6px;

	border-radius:6px;

	border:1px solid #219328;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	padding:6px 24px;

	text-decoration:none;

}



.red-button {

	background-color:#bc3315;

	-moz-border-radius:6px;

	-webkit-border-radius:6px;

	border-radius:6px;

	border:1px solid #942911;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	padding:6px 24px;

	text-decoration:none;

}                                 

.blue-button:hover, .red-button:hover, .green-button:hover {opacity: .8}

4 — Мы все еще нуждаемся в CSS для редактора

Для нас, чтобы быть в состоянии увидеть правильно отформатированные кнопки в визуальном редакторе, нам нужен editor-style.css.

Вы найдете файл в корневой каталоге вашей темы, или в папке с именем CSS. Если нет, то я рекомендую вам создать сейчас. Это не очень сложно. Просто создайте пустой файл с именем CSS в editor-style.css при помощи редактора HTML.

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

<?php

// Ab hier kopieren

function ah_theme_add_editor_styles() {

    add_editor_style( 'editor-style.css' );

}

add_action( 'init', 'ah_theme_add_editor_styles' );

Конечный результат: Наши новые кнопки

Новые кнопки очень просты в использовании, и только в один щелчок мыши при написании новой статьи.

В крошечном редакторе MCE, отформатированные кнопки теперь будет выглядеть красиво:

Новые кнопки в редакторе WordPress

То же самое можно увидеть при использовании их в статье.

Кнопки в статье

Как использовать новые кнопки

Мы установили кнопки, используя достаточно простые методы, вы не в состоянии использовать удобный генератор. Тем не менее, новые кнопки управляются довольно легко. Просто напишите текст кнопки в редакторе, отметьте текст, а затем нажмите на новый пункт меню «formats.» и выберите кнопку.

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

Добавление других элементов — Made Simple

Вы можете добавить другие элементы, когда вы хотите. Может быть, вы, как и я, используете код тега более чем один раз? Или вы хотите создать цветную рамку для выделенного текста? Нет проблем, снимок экрана показывает вам, что надо изменить в PHP коде в пункте два.

Добавление собственных стилей

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

Вывод

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