правый сайдбар twenty fifteen

Настраиваем Twenty Fifteen: правый сайдбар вместо левого

Здравствуйте, сегодня будем перенастраиваем стандартную wordpress тему, а именно: перенесем сайдбар (боковую колонку) слева направо.

Скачать исходники для статьи можно ниже

1. Создаем дочернюю тему.

1.1. Нужно создать папку с названием нашей дочерней темы (в нашем примере «twentyfifteen-child») в папке «themes»:

— public_html
-wp-content
-themes (папка со всеми темами)
— twentyfifteen (папка родительской темы Twenty Ten)
— twentyfifteen-child (папка нашей дочерней темы; может быть названа как угодно)

1.2. Далее создадим в папке дочерней темы (twentyfifteen-child) 2-а файла: файл стилей style.css и файл функции темы — functions.php

Для создание этих 2-х файлов вам понадобиться редактор кода — можно воспользоваться бесплатным — NotePad++ — скачать его можно здесь — «notepad-plus-plus.org/download»

Файл стилей будет выглядеть так:

/*
Theme Name: Twenty Fifteen Child
Description: Дочерняя тема для темы Twenty Fifteen
Author: Ваше имя
Template: twentyfifteen
*/

А файл functions.php так:

<?php

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

В файле functions, мы указали родительские стили для нашей дочерней темы.

2. Прописываем в файле стилей (style.css) еще строчки:

@media screen and (min-width: 59.6875em) {
    .site-content {
        float: left; margin-left: 0px; width: 70.5882%;
    }   
    
    .sidebar {
        float: right; margin-right: 0px; max-width: 413px; position: relative !important; width: 29.4118%; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    }

    body:before { 
        right: 0; left:auto;
    }       
    .site-footer { 
        margin: 0 0 0 6.1%;
    }
}

Активируем дочернюю тему (админка — пункт «Внешний вид» — подпункт «Темы»).

Все готово!

PS: Можете скачать уже готовую дочернюю тему с правым сайдбарам для Twenty Fifteen с моего сайта по следующей ссылке — дочерняя тема с правым сайдбарам темы Twenty Fifteen.

Вот ещё одна альтернативная дочерняя темя с правым сайдбаром — «tipsandtricks-hq.com/wp-content/uploads/themes/2015-child-right-sidebar.zip»

О дочерних темах, как их создать, можно почитать тут — «codex.wordpress.org/Дочерние_темы»

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

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