Тема Twenty Seventeen: настройка контента на всю ширину страницы с сайдбаром

В обновлении платформы WordPress версии 4.7 была добавлена новая официальна тема оформления под названием Twenty Seventeen (двадцать семнадцать – год выпуска). Она сразу стала довольно популярной, и на данный момент активных ее установок превышает более одного миллиона.

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

Ну вот, к примеру, слева идет название страницы, которое колонной занимает половину всего места. Выходит, так, что половина страницы совершенно пустая, и это не очень красиво смотрится. Естественно, другую половину занимает контент. А не лучше было бы вместо этого пустого места добавить сайдбар? Думаю, это будет к месту.

Мы создадим шаблон страницы с сайдбаром для того, чтобы просто на нужной нам странице, где требуется сайдбар, в атрибутах страницы выбрать необходимый шаблон. И сделаем так, чтоб сайдбар выводился на главной странице, в том случае, если сделаете главную страницу статичной. То есть на странице выбираем наш созданный шаблон, в настройках «Чтение» указываем статичную страницу с нашим шаблоном и только тогда будет сайдбар на главной.

Twenty Seventeen: Сайдбар на страницах

Все последующие действия настоятельно рекомендую делать в дочерней теме. Это нужно в целях безопасности и не терять наши внесенные изменения в очередном обновлении темы. Я опишу все шаг за шагом для удобства. Поехали!

Шаг 1

Копируем файл page.php и переименовываем его в page-sidebar.php. Вверху этого файла удаляем весь комментарий от строки 2 до 16, вместо него вставляем эту надпись:

/* Template Name: шаблон с сайдбаром */

В середине этого файла найдите такой код:

get_template_part( 'template-parts/page/content', 'page' );

Замените его на следующий:

get_template_part( 'template-parts/page/content', 'page-sidebar' );

Затем, в самом низу после закрывающего блока </div><!-- #primary --> вставляем функцию вызова сайдбара.

<?php get_sidebar(); ?>

Шаг 2

Теперь нам нужно скопировать папку template-parts, но все ее содержимое нам не нужно, поэтому удаляем в ней все кроме папки page, а в этой папке удалите файл content-front-page-panels.php. В итоге должно остаться два файла: content-front-page.php, content-page.php.

Переименовываем файл content-page.php в content-page-sidebar.php и сразу открываем его. В 16 строке меняем класс в теге header.

С:

<header class="entry-header">

На:

<header class="entry-header-sidebar-tem">

И в строке 20, блок контента, меняем класс.

С:

<div class="entry-content">

На:

<div class="entry-content-sidebar-tem">

Шаг 3

Открываем файл functions.php и вставляем небольшое условие.

function twentyseventeen_body_classes_child( $classes ){
if ( is_active_sidebar( 'sidebar-1' ) && is_page_template( 'page-sidebar.php' ) ) {
                $classes[] = 'has-sidebar';
        }
        return $classes;
}
add_filter( 'body_class', 'twentyseventeen_body_classes_child' );

Шаг 4

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

Копируем файл front-page.php (переименовывать не нужно). Открываем его и перед основным блоком <div id="primary" class="content-area"> добавляем свой блок <div class="wrap">.

Закрывающий тег — </div> <!-- .wrap --> добавьте после блока </div><!-- #primary -->. А теперь перед блоком wrap добавьте функцию вызова сайдбара.

<?php get_sidebar(); ?> 

В середине файла меняем этот код:

get_template_part( 'template-parts/page/content', 'front-page' );

На этот:

get_template_part( 'template-parts/page/content', 'front-page-sidebar' );

Шаг 5

В предпоследнем шаге возвращаемся в папку template-parts/page и в ней находим файл content-front-page.php. Переименовываем его в content-front-page-sidebar.php и сразу открываем. Меняем следующие классы:

Этот:

<div class="panel-content">

На:

<div class="panel-content panel-content-sidebar-tem">

Этот:

<header class="entry-header">

На:

<header class="entry-header-sidebar-tem">

И этот:

<div class="entry-content">

На:

<div class="entry-header-sidebar-tem">

Шаг 6

В последнем шаге добавьте просто эти стили в файл style.css

.twentyseventeen-front-page .site-content{
          padding-top: 5.5em;
}

.twentyseventeen-front-page .panel-content .wrap{
        padding-top:0;
}
.panel-content-sidebar-tem .wrap {
    padding-left: 0;
        padding-right: 0;
}

Twenty Seventeen: На всю ширину страницы

Шаг 1

Начинаем все сначала, а именно копируем файл page.php и переименовываем его в page-full-width.php. Открываем и меняем следующий код:

get_template_part( 'template-parts/page/content', 'page' );

На:

get_template_part( 'template-parts/page/content', 'page-full-width' );

Шаг 2

Копируем файл twentyseventeen/template-parts/page/content-page.php и меняем название на content-page-full-width.php. Открываем его и меняем строки.

Это:

<header class="entry-header">

На:

<header class="entry-header-full-width">

И это:

<div class="entry-content">

На:

<div class="entry-content-full-width">

Шаг 3

На последнем шаге добавьте стили в файл style.css.

body:not(.has-sidebar):not(.page-one-column) .page-header,
body.has-sidebar.error404 #primary .page-header,
body.page-two-column:not(.archive) #primary .entry-header-full-width,
body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
display: block;
width: 100%;
} 
.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content-full-width,
body.page-two-column #comments {
display: block;
width: 100%;
}

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

Скачать twentyseventeen-child