Налаштовуємо шаблон оформлення у редакторі 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 буде застосовуватись після його створення тільки до нових постів; всі пости та сторінки, створені до того, як ви внесли редагування в код, не будуть оснащені цим фільтром.
• Пробіли між рядками та додаткова вставка   не критичні, але їх варто застосовувати, щоб уникнути невеликих збоїв під час роботи в редакторі 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/