Java, UX, HTML, CSS, WEB-design

Расширенные шаблоны макетов в редакторе контента WordPress

Краткое описание по статье Расширенные шаблоны макетов в редакторе контента WordPress

Название: Расширенные шаблоны макетов в редакторе контента WordPress . Краткое описание: [ad_1] ⭐ Дэвид Х . Дата публикации: 20.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Дэвид Хансен

  • 0 Комментарии

Расширенные шаблоны макетов в редакторе контента WordPress

  • 7 минут чтения

  • WordPress, Методы, Шаблоны

Краткое резюме ↬

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

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

многоцветный макет

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

Дальнейшее чтение на SmashingMag:

  • Мощные советы для разработчиков шаблонов WordPress
  • Подробное руководство по шаблонам пользовательских страниц WordPress
  • Как создать и настроить дочернюю тему WordPress
  • Как сделать WordPress трудным для клиентов, чтобы они испортились

Еще после прыжка! Продолжить чтение ниже ↓

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

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

Бэкэнд

Добавив следующее к functions.phpкаждый новый пост, который мы создаем, будет предварительно снабжен двумя разделами, классифицированными 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>    
   ";
   return $content;
   }
?>

Несколько замечаний:

  • То default_content фильтр срабатывает только при создании нового поста; любые сообщения или страницы, которые существовали до того, как вы добавили этот код, не получат этот контент.
  • Межстрочный интервал и доп. &nbsp; не являются обязательными, но я нашел их полезными для предотвращения некоторых небольших причуд TinyMCE.

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

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

То add_editor_style() Функция ищет указанную таблицу стилей и применяет любой CSS, который она содержит, к содержимому в нашем окне редактирования TinyMCE. Если вы не укажете имя таблицы стилей, она будет искать редактор-style.css по умолчанию, но для целей этой статьи я записал его. Создайте таблицу стилей с именем редактор-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;
}

Теперь, когда вы создаете новый пост, вы увидите два столбца, в которые вы можете ввести или вставить свой контент:

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

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

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

Передняя часть

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

Пример поста WordPress, созданного с настраиваемым макетом из нескольких столбцов.
Этот прием касается не только визуального оформления контента. Используйте JavaScript для таргетинга на определенные контейнеры, чтобы создавать слайд-шоу «на лету» и другие динамические эффекты.

Получите больше от ваших шаблонов

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

Пример поста с расширенным макетом WordPress, в котором используются разные разделы для вкладок с поддержкой 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;
       }
?>

Вы можете стилизовать все элементы содержимого по умолчанию в редактор-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 файл, а затем создайте стиль редактора-[POSTTYPE].css файлы, чтобы использовать разные таблицы стилей для соответствующих типов сообщений. Просто замените [POSTTYPE] с названием вашего пользовательского типа сообщений. Расширьте приведенный выше код, добавив новые случаи для каждого дополнительного типа сообщений.

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

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

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

Заключение

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

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

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

Дополнительные ресурсы

  • «Стили редактора для пользовательских типов записей в WordPress 3.0», WPStorm
  • «Убийственные хаки для улучшения редактора WordPress» Жан-Батист Юнг
  • «Пользовательские типы записей в WordPress», Джастин Тэдлок
  • «Новые советы по WordPress Power для разработчиков шаблонов и консультантов», Джейкоб Голдман.
Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Расширенные шаблоны макетов в редакторе контента WordPress

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»