Как добавить собственные шаблоны и дизайн в форматы сообщений в блогах Divi (часть 1 из 3)

Опубликовано: 2017-05-02

Добро пожаловать в день 1 из 3 нашей серии статей о том, как добавлять собственные стили в форматы сообщений в блогах Divi. По умолчанию Divi поставляется с шестью форматами сообщений в блогах: Standard, Video, Audio, Quote, Gallery и Link. В этой серии мы научим вас настраивать их с помощью php и css.

В течение следующих 3 дней я проведу вас через настройку всех форматов сообщений в блоге Divi: Standard, Quote, Link, Video, Audio и Gallery. Для редактирования всего этого (для проектов, которые я имею в виду) требуется отредактировать файл шаблона single.php. Чтобы сделать это правильно, мы должны создать дочернюю тему Divi, которая будет содержать наш измененный файл шаблона Single.php. И прежде чем мы это сделаем, мы также должны создать локальную установку WordPress с помощью Desktopserver. Это предоставит нам безопасное пространство для разработки, чтобы мы могли поиграть, ничем не рискуя на действующем веб-сайте.

Как следует из названия этого поста, нам понадобится три дня, чтобы охватить все от начала до конца. Сегодня я собираюсь показать вам, как создать локальную установку WordPress с помощью Desktopserver и создать дочернюю тему, которую мы будем использовать для размещения наших измененных форматов сообщений в блогах.

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

Давайте начнем!

Краткий обзор того, что будет дальше

Вот краткий обзор дизайнов, которые мы будем реализовывать в этой серии. После того, как мы заложим для них основу в сегодняшнем посте, я покажу вам, как редактировать файл single.php (шаблон для всех форматов наших сообщений в блоге), а затем как дополнительно стилизовать этот шаблон для каждого формата с помощью CSS. Это будет настоящее путешествие!

Подготовка ваших ресурсов разработки

Вот то, чему вам нужно будет следовать вместе с сегодняшним учебником и учебными пособиями, которые я создал на следующие 2 дня:

  • Редактор кода, такой как Atom, Sublime, Brackets или Notepad + + (что вам больше нравится)
  • Локальная установка WordPress с использованием DesktopServer (если у вас его еще нет)
  • Дочерняя тема Divi, которую мы создадим!

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

Если вы не знаете, как настроить локальную установку WordPress для разработки, я рекомендую использовать бесплатную версию desktopserver. Он должен заставить вас работать с локальной установкой WordPress всего за несколько минут (без преувеличения).

Настройка DesktopServer на вашем компьютере

Вот несколько шагов, чтобы начать работу с DesktopServer.

Посетите их веб-сайт и загрузите бесплатную версию, нажав кнопку «Бесплатно - Добавить в корзину» в правом столбце.

На странице оформления заказа введите свои личные данные, примите их условия и нажмите «Купить».

На странице подтверждения покупки выберите загрузку, подходящую для вашей операционной системы. Я предлагаю установить последнюю версию Mac или Windows.

Разархивируйте загрузку и запустите установку приложения на свой компьютер.

Теперь вы можете найти приложение DesktopServer в папке с именем «xampplite» в корне вашего локального диска (C :) Drive.

После того, как вы установили Desktopserver, прочтите их инструкции, которые помогут вам начать настройку локальной установки WordPress.

Создание вашей дочерней темы Divi для этой серии

Чтобы создать дочернюю тему Divi, вам необходимо получить доступ к файлам темы WordPress. Если при установке DesktopServer вы следовали настройкам по умолчанию, файлы вашей темы должны находиться в папке документов внутри папки с надписью «Сайты».

Найдите папку тем и добавьте новую папку под названием «ребенок».

Теперь вы собираетесь добавить файл style.css в папку дочерней темы. Это первый из трех файлов, из которых состоит ваша дочерняя тема.

Откройте текстовый редактор и создайте новый файл со следующим заголовком CSS в самом верху документа. 

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

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

Сохраните новый файл с именем и расширением «style.css». И добавляем в папку дочерней темы:

Следующий файл, который вам нужно добавить в папку дочерней темы, - это файл functions.php.

Вернитесь в текстовый редактор, создайте еще один новый файл и добавьте следующий php-код в самый верх документа: 

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Сохраните файл с точным именем и расширением «functions.php» и добавьте его в свою дочернюю папку:

Последний файл, который вам понадобится для дочерней темы, - это файл Divi single.php. Наряду с добавлением нового CSS в файл style.css вашей дочерней темы, мы будем использовать копию файла single.php Divi для редактирования макета для различных типов сообщений.

Чтобы найти файл single.php, перейдите в папку темы Divi (родительская).

Скопируйте файл single.php и вставьте его в папку дочерней темы:

Теперь мы готовы внести изменения в файл single.php вашей дочерней темы.

Активируйте свою новую дочернюю тему

Прежде чем мы начнем настраивать файл шаблона single.php, активируйте свою новую дочернюю тему.

На панели инструментов WordPress перейдите в Внешний вид → Темы и нажмите кнопку Активировать в своей новой дочерней теме под названием Divi Child.

На этом пока все!

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

Что будет завтра?

Теперь, когда ваша локальная установка WordPress и дочерняя тема активированы, вы готовы к следующей части этой серии. Завтра я покажу вам, как отредактировать файл single.php Divi, чтобы создать совершенно уникальный макет для форматов ваших сообщений в блоге.

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

Ваше здоровье!