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

Если вы используетет визуальный редактор, то наверняка оценили удобства выделения текста, вставки различных заголовков. Делается все это с помощью кнопки Формат. Однако часто этих возможностей не достаточно, чтобы вставить какой-нибудь визуальный элемент собственной разработки (например, вставить кнопку или сделать текст выделенным определенным цветом). Поэтому приходится вставлять код кнопки или подсветки, переключаясь в режим редактирования HTML. Можно помочь себе вставлять индивидуальный код, создав в визуальном редакторе выпадающее меню с индивидуальными элементами.

Откройте файл functions.php, вставьте в него следующий код:

function themeit_mce_buttons_2( $buttons ) {
  array_unshift( $buttons, 'styleselect' );
  return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );
function themeit_tiny_mce_before_init( $settings ) {
  $settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,';
  $style_formats = array(
      array( 'title' => 'Кнопка', 'inline' => 'span', 'classes' => 'button' ),
      array( 'title' => 'Зеленая кнопка', 'inline' => 'span', 'classes' => 'button button-green' ),
      array( 'title' => 'Круглая кнопка', 'inline' => 'span', 'classes' => 'button button-rounded' ),
      array( 'title' => 'Другие настройки' ),
      array( 'title' => '½ Первая колонка', 'block' => 'div', 'classes' => 'one-half' ),
      array( 'title' => '½ Вторая колонка', 'block' => 'div', 'classes' => 'one-half last' ),
      array( 'title' => 'Подсветка', 'inline' => 'span', 'classes' => 'highlight' )
  );
  $settings['style_formats'] = json_encode( $style_formats );
  return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );

Вы можете создать столько вариантов оформления, сколько вам нужно. Не забудьте добавить в файл style.css классы вашего индивидуального оформления, перечисленные атрибутами classes.