Настраиваем шаблон оформления в редакторе WordPress
Опубликовано: 01.09.2018
В этой статье предлагаю вам узнать о том, как легко перейти к расширенной настройке шаблонов вывода контента с поддержкой нескольких колонок в верстке и при этом сэкономить ресурсы, время и сделать все при помощи обычного WYSIWIG-редактора . Эта инструкция подойдет не только для новичков, но и для продвинутых пользователей, которые хотят стандартизировать и поставить на поток работу с контент-проектами.
Создаем свой формат отображения контента на странице
Все, что нам понадобится сделать на данном этапе, — это добавить несколько HTML-элементов в окно редактора и оформить их стилями. Фильтр WordPress default_content , установленный по умолчанию, позволяет нам добавить блок определенного контента в любой пост сразу после его создания, чтобы нашему заказчику не пришлось делать это самостоятельно при настройке темы оформления. Этот фильтр отлично подходит для добавления готового текста к постам.
Wordpress уроки - Изменяем шаблон (внешний вид) в Вордпресс
Работа "под капотом"
Добавим код, который вы видите ниже, в файл 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 </div> <div class="content-col-side"> This is your sidebar content </div> '; return $content; } ?>
Несколько важных примечаний :
Фильтр по умолчанию default_content будет применяться после его создания только к новым постам; все посты и страницы, созданные до того, как вы внесли правки в код, не будут оснащены этим фильтром. Пробелы между строками и дополнительная вставка   не критичны, но их стоит применять, чтобы избежать небольших сбоев при работе в редакторе TinyMCE .Теперь оформим все в новом стиле. Добавим следующий код в файл functions.php :
<?php add_editor_style( 'editor-style.css' ); ?>Функция add_editor_style() будет производить поиск по заданному типу оформления страницы и применять указанный стиль CSS к контенту, который отображается в окне редактора 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 { /* Makes sure your images stay within their columns */ max-width: 100%; width: auto; height: auto; }Теперь при создании нового поста вы увидите 2 колонки, в которых можно набирать / вставлять текст или другой контент:
Этот базовый шаблон будет появляться каждый раз, когда вы создаете новую запись или страницу в блоге.
И вот у нас теперь есть базовый шаблон с несколькими колонками, который сразу отображается в редакторе постов. Вы можете вернуться к предыдущему этапу и отредактировать 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; } ?>Все элементы оформления контента можно по умолчанию задать при помощи файла 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] названием вашего типа публикаций. Приведенный выше код можно расширить за счет добавления новых параметров и вариантов для каждого дополнительного типа постов.
Как альтернативный вариант, вы можете использовать следующий код для автоматического поиска таблицы стилей вида 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 , указанной для конкретного поста.
Заключение
Хотя у рассмотренного нами метода есть свои недостатки, — в частности, редактировать новую структуру оформления может быть непростой задачей для вашего заказчика, — он позволяет создавать на базе проекта интересную "песочницу" для экспериментов с возможностями оформления контента и его стандартизации.