Тема 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. Забираем ссылку
Подключение шрифтов
Чтобы не грузить лишние шрифты отключаем шрифты родительской темы и подключаем выбранные
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 удобна наличием в ней множества 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. Все изменения вносятся через дочернюю тему, а хуки и фильтры позволяют не изменять файлы.
Как-то так, вопросы и предложения оставляем в комментариях.
Всем пока-пока!
