Тема Basic. Правильное внесение изменений

Тема Basic от WP Puzzle — быстрая, удобная и одна из самых популярных тем в репозитории WordPress. Многие разворачивают свои сайты на этой теме, но вот изменения зачастую вносятся не верно. Так что будем разбирать как правильно вносить изменения в эту тему.

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

Дочерняя тема

Что такое дочерняя тема и для чего она нужна смотрим в видео

Создание дочерней темы — процесс не сложный и действовать надо по такому алгоритму:

  • создать папку с названием темы;
  • создать в этой папке файл style.css;
  • создать там же файл functions.php.

Теперь надо в файл style.css добавим нужные теги

/*
 Theme Name:   Basic Child
 Theme URI:     https://wpruse.ru/
 Description:  Дочерняя тема для Basic. Изменены шрифты, добавлен верхний бар с поиском и иконками на соцсети
 Author:       Артем Абрамович
 Author URI:   https://wpruse.ru/
 Template:     basic
 Version:      1.0
*/

Формально, теперь можно активировать тему и все будет работать. Вот только внешний вид хромает, требуется подрубить стили родительской темы. Для этого в файл functions.php добавляем следующее:

add_action( 'wp_enqueue_scripts', 'basic_child_enqueue_style' );
function basic_child_enqueue_style(){
   wp_enqueue_style('parent', get_template_directory_uri() . '/style.css');
}

Вот теперь все как надо…

к содержанию

Изменение шрифтов

Выбор шрифта

Давайте, например, изменим шрифты. В теме Basic используются шрифты от Google Fonts, выберем и настроим шрифтовую пару. Это будет Oswald и Roboto. Забираем ссылку
Тема basic. Правильное использование

к содержанию

Подключение шрифтов

Чтобы не грузить лишние шрифты отключаем шрифты родительской темы и подключаем выбранные

add_action( 'wp_enqueue_scripts', 'basic_child_enqueue_font',99);
function basic_child_enqueue_font(){
   wp_dequeue_style('basic-fonts');
   wp_enqueue_style( 'basic-fonts-child', '/fonts.googleapis.com/css?family=Oswald:300,500|Roboto:300,300i,700,700i&subset=cyrillic', array(), true );
}

Осталось только изменить семейство шрифтов в стилях дочерней темы. Ищем в родительской теме старые семейства и заменяем на новые

Тема basic. Правильное использование

Профит. Шрифты изменены.

к содержанию

Верхний бар

Тема Basic удобна наличием в ней множества action и filter, а значит можно не изменять файлы, а просто воспользоваться хуками. Для примера, подключим верхний бар над логотипом

add_action( 'basic_before_header', 'basic_child_top_nav', 10 );
function basic_child_top_nav(){
   ?>
   <div class="top-bar">
      <div class="maxwidth grid flex-line">

      </div>
   </div>
<?php
}

В баре можно вывести все, что угодно. Например номер телефона или поиск

add_action( 'basic_before_header', 'basic_child_top_nav', 10 );
function basic_child_top_nav(){
   ?>
   <div class="top-bar">
      <div class="maxwidth grid flex-line">
            <div class="search-top-bar">
               <?php $s = get_search_query(); ?>
               <form method="get" class="search-form-top-bar" action="<?php echo esc_url( home_url( '/' ) ); ?>/">
                  <input type="text" value="" placeholder="<?php _e("Search", 'basic'); ?>" name="s" class="s" />
                  
               </form>
            </div>
      </div>
   </div>
<?php
}

Добавим немножко стилей

.top-bar .flex-line {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

Вот и все…

к содержанию

Бонус

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

Резюме

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

Как-то так, вопросы и предложения оставляем в комментариях.

Всем пока-пока!

7 комментариев
  • Максим

    16.12.2017

    Добрый день.
    В родительской теме есть папка inc.
    И нужно внести изменение в один и файлов в этой папке.
    Как правильно сделать в дочерней теме изменения этого файла?
    Спасибо.

    • Артем

      16.12.2017

      Добрый! Для этого надо скопировать всю папку и нужные файлы в ней

  • Михаил

    17.12.2017

    Добрый день!
    Применение дочерних тем обусловлено необходимостью обновлений первоначальной темы или из-за претензий её авторов?

    • Артем

      06.01.2018

      Доброго! Именно обновлениями родительской темы, авторы наоборот всегда говорят, что надо использовать дочерки

  • Максим

    14.01.2018

    Добрый вечер.
    А как вместо поля поиска прикрутить туда еще одно меню?

    • Артем

      16.01.2018

      Доброго! Зарегать меню, убрать поиск и вывести зареганное меню

      • Максим

        16.01.2018

        Чуть больше подробностей.
        Как найти и где тот кусок кода который зареганное меню, чтобы вывести его вместо поиска?
        Сбивает с толку, что в теме есть такое понятие как «места для вывода меню».

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *
php js HTML CSS Code