Настраиваем шаблон оформления в редакторе WordPress

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

Создаем свой формат отображения контента на странице

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

Работа "под капотом"

Добавим код, который вы видите ниже, в файл 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' );
?>

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 { /* Makes sure your images stay within their columns */
   max-width: 100%;
   width: auto;
   height: auto;
}

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

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

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

Работа с внешним оформлением

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

Используйте JavaScript для указания специфических "контейнеров", задания динамических эффектов и других опций оформления.

Как получить еще больше от шаблонов

Помимо простой настройки стилей, есть еще несколько возможностей для расширенного оформления вашего контента на сайте: для этого надо использовать создание объектов и обращение к ним при помощи JavaScript.

Серию блоков контента можно превратить в серию "табов", которые администратор сайта может группировать, перемещать и обновлять на одной странице. Это лишь один из многих способов простого администрирования контента и шаблонов для 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 = '

               // TEMPLATE FOR YOUR PAGES

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

                // TEMPLATE FOR YOUR CUSTOM POST TYPE

            ';
         }
         else {
            $content = '

               // TEMPLATE FOR EVERYTHING ELSE

            ';
         }
         return $content;
       }
?>

<?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' );
?>

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

Заключение

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

Источник: Smashing Magazine

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/