Pull to refresh

Продвинутые шаблоны редактора Wordpress

Reading time 6 min
Views 30K
Original author: David Hansen
Допустим, у вас стоит задача предоставить вашему клиенту для заполнения заранее сверстанный макет или форму, куда он может смело добавить текстовый материал, будь-то описание товара или услуги, разделенный на колонки. Да, эту задачу можно решить многими способами, но хотелось бы, что бы и человеку было проще пользоваться редактором, и к вам вопросов было поменьше. В конце концов WYSIWYG и был создан для того, что бы даже сферическая секретарша в вакууме понимала, что именно будет отображено на сайте в результате её работы в редакторе. Но, пойди, найди такую «секретаршу».

image

Будучи Веб-дизайнером сайтов на базе WordPress в разработке я часто сталкиваюсь с тем, что поддержкой и обновлением сайтов, в конечном счете, занимаются сами клиенты, практически не имеющие навыков работы с HTML. Хотя TinyMCE достаточно функциональный редактор, предоставляющий менеджеру любого уровня квалификации все необходимые инструменты для оформления и публикации статей, создание чего-либо сверх одноколоночного текст с несколькими картинками с выключкой требует хотя бы базового навыка владения HTML.

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

Создание пользовательского шаблона

Все, что мы собираемся сделать — ввести несколько HTML-элементов в окне редактирования и задать им стиль оформления. Фильтр WordPress, именуемый default_content, позволяет вставить предопределенное заранее содержимое в любую создаваемую запись, дабы клиентам не пришлось изучать тонкости блочной верстки. Этот фильтр также отлично подходит для добавления «рыбы» в новую запись.

Back End

Добавив следующую строку в functions.php, каждая новая запись, созданная пользователем, будет предварительно снабжена двумя блоками div со стилями content-col-main и content-col-side, соответственно. Должен отметить, в настоящее время этот код был проверен только в WordPress версии 3.0 и выше:

<?php
	add_filter( 'default_content', 'custom_editor_content' );
	function custom_editor_content( $content ) {
		$content = '
		<div class="content-col-main">
			This is your main page content
			&nbsp;
		</div>
		<div class="content-col-side">
			This is your sidebar content

			&nbsp;

		</div> &nbsp; &nbsp;
		';

		return $content;
	}
?>

Пара заметок на полях:
Фильтр default_content запускается только при создании новой записи; любая запись или страница созданная прежде не будет изменена. Отбивка строк и дополнительны теги &nbsp; не являются необходимыми, но я счел их полезными, так как иногда TinyMCE чудит.

Теперь нам нужно добавить стили оформления. Впишите следующее в ваш functions.php:

<?php
   add_editor_style( 'editor-style.css' );
?>

Функция add_editor_style() прикрепляет применяемый для оформления заданный стиль к содержимому окна редактора TinyMCE. Если вы не зададите параметров функции, она сама прикрепит editor-style.css, используемый по умолчания, но для целей этой статьи я написал свой стиль. Создайте файл стиля editor-style.css и поместите его в папку темы оформления. Содержимое файла будет следующим:

body {
   background: #f5f5f5;
}

.content-col-main {
   float:left;
   width:66%;
   padding:1%;
   border: 1px dotted #ccc;
   background: #fff;
}

.content-col-side {
   float:right;
   width:29%;
   padding:1%;
   border: 1px dotted #ccc;
   background: #fff;
}

img { /* Убеждаемся, что изображение останется внтури колонки */
   max-width: 100%;
   width: auto;
   height: auto;
}

Теперь, создавая запись на сайте, вы увидите две колонки для редактирования и вставки в них текста:

image
Этот многоколончатый шаблон будет появляться всякий раз
при создании новой записи или страницы.


И вот оно — заветный шаблон для вашего редактора. Вы можете вернуться и отредактировать код default_content и стиль editor-styles.css под ваши цели:

image
Используйте этот прием для создания собственных шаблонов, исходя из
ваших задач.


Front End

Теперь, когда ваша запись будет отображаться на сайте, ее содержимое по прежнему отображается в один столбик как и прежде? Не забудьте в style.css добавить стили, использованные нами раннее в функции custom_editor_content(). Откройте style.css (или любую другую таблицу стилей, используемую в вашей теме оформления) и оформите блоки div как вам вздумается.

image
Эта техника применима не только к оформлению записи. С помощью JavaScript
вы так же можете привратить в «карусель» или добавить другие динамические
эффекты на лету.


Выжмите из вашего шаблона еще немного

Кроме новых возможностей оформления, этот метод может также использоваться для создания объектов, к которым позднее будет обращаться ваш JavaScript-код.

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

Шаблоны для шаблонов

Приведенный ранее код позволит вам применять один и тот же стиль ко всем записям, страницам и пользовательским типам записей где используется редактор TinyMCE. Скорее всего это не самое лучшее решение. Вы можете изменить это, задав условие на использование того или иного custom_editor_content(), определяя различные шаблоны для каждого вида записи:

<?php
   add_filter( 'default_content', 'custom_editor_content' );
      function custom_editor_content( $content ) {
         global $current_screen;
         if ( $current_screen->post_type == 'page') {
            $content = '

               // ШАБЛОН ДЛЯ СТРАНИЦ (PAGES)

            ';
         }
         elseif ( $current_screen->post_type == 'POSTTYPE') {
            $content = '

               // ШАБЛОН ДЛЯ ПОЛЬЗОВАТЕЛЬСКИХ ТИПОВ ЗАПИСЕЙ (CUSTOM POST TYPE)

            ';
         }
         else {
            $content = '

               // ШАБЛОН ДЛЯ ВСЕГО ОСТАЛЬНОГО (EVERYTHING ELSE)

            ';
         }
         return $content;
       }
?>

Так же вы можете задавать индивидуальный стиль оформления по умолчанию в файле editor-style.css, но если вам понадобится применять свои стили оформления для каждого из типов записей, вы можете сделать это, используя следующий снипет от WPStorm:

<?php
   function custom_editor_style() {
      global $current_screen;
      switch ($current_screen->post_type) {
         case 'post':
         add_editor_style('editor-style-post.css');
         break;
         case 'page':
         add_editor_style('editor-style-page.css');
         break;
         case '[POSTTYPE]':
         add_editor_style('editor-style-[POSTTYPE].css');
         break;
      }
   }
   add_action( 'admin_head', 'custom_editor_style' );
?>

Добавьте этот код в functions.php вашей темы, и, затем, создайте файл/ы editor-style-[POSTTYPE].css что бы использовать стили оформления специально созданные для каждого случая. Просто замените [POSTTYPE] на имя произвольного типа записи (custom post type). Расширьте приведенный код выше, добавив в него другие типы для каждого дополнительного типа записи.

Как вариант, вы можете использовать следующий код, что бы автоматически искать подходящий тип editor-style- отталкиваясь от типа редактируемой записи. Внимание, убедитесь в том, что добавляемый суффикс нового файла стиля совпадает с именем типа записи.

<?php
 function custom_editor_style() {
   global $current_screen;
   add_editor_style(
   array(
      'editor-style.css',
      'editor-style-'.$current_screen->post_type.'.css'
    )
   );
 }
 add_action( 'admin_head', 'custom_editor_style' );
?>

(В приведенном коде editor-style.css будет также включен во всех типах редактируемых материалов, в добавок к дополнительным стилям, определенным для данного типа записи/страницы и имеющий имя editor-style-[POSTTYPE].css.)

Послесловие

Хотя эта техника обладает своими недостатками (нужно заранее узнать вид шаблонов оформления), и клиент не сможет самостоятельно переопределить структуру (еще этого не хватало прим.пер.), она позволяет вам создавать еще более интересные «песочницы» для ваших клиентов, где они смогут резвиться, при этом сохранив стандартизированный формат содержимого.

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

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

P.S. Пост довольно долго валялся в черновиках, но актуальности не потерял. Об ошибках буду рад услышать в личном порядке (через внутреннюю почту). Спасибо.
Tags:
Hubs:
+38
Comments 44
Comments Comments 44

Articles