Здравствуйте, сегодня продолжим изменять стандартную тему wordpress – Twenty Twelve, а именно: создадим в ней два левых сайдбара (боковых колонок с виджетами) или же два правых сайдбара.

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

1. Добавляем к Twenty Twelve еще один сайдбар.
Так как в стандатной теме Twenty Twelve только один сайдбар (боковая колонка), то для начала нужно добавить к ней еще один сайдбар.

Более подробно о создании 2-ого сайдбара в Twenty Twelve читайте в моей предыдущей статье – Настраиваем тему Twenty Twelve: 2 сайдбара слева и справа

Выполняем 4 пункта вышеуказанной статьи по порядку, а 5-ый пункт выполняем частично, то есть добавляем в файл стилей только следующий код:

/* Increase theme width to 1000px */
@media screen and (min-width: 960px) { 
    .site {
        max-width: 1000px;
        max-width: 71.4285rem;
    }
}
.ie .site { max-width: 1000px; }

footer[role="contentinfo"] {
    max-width: 1000px;
    max-width: 71.4285rem;
}

А далее выбираем – какую тему мы будем делать – с 2-мя левыми сайдбарами или же с 2-мя правыми сайдбарами:

2. Два левых сайдбара:

Для двух левых сайдбаров в теме Twenty Twelve нужно вставить в файл стилей – style.css – следующий код:

/* ===[ Two Left Sidebars ]=== */
@media screen and (min-width: 600px) { 
    .custom-layout .site-content {
        float: right;
        width: 49%;
    }
    .custom-layout .widget-area {
        width: 25%;
        float: left;
        margin-left: 10px;
    }
    .custom-layout #extra-sidebar {
        word-wrap: break-word;
        width: 20%;
        float: left;
        margin-left: 2%;
    }
}
/* IE8 and IE7 - Two Left Sidebars */
.ie .custom-layout .site-content {
    float: right;
    width: 49%;
}
.ie .custom-layout .widget-area {
    width: 25%;
    float: left;
    margin-left: 10px;
}
.ie .custom-layout #extra-sidebar {
    word-wrap: break-word;
    width: 20%;
    float: left;
    margin-left: 2%;
}

Здесь строчка “margin-left: 10px;” – регулирует расстояние между сайдбарами – можно вообще ее удалить если не получается 2 сайдбара.

3. Два правых сайдбара:

Для двух правых сайдбаров в теме Twenty Twelve нужно вставить в файл стилей – style.css – следующий код:

/* ===[ Two Right Sidebars ]=== */
@media screen and (min-width: 600px) { 
    .custom-layout .site-content {
        float: left;
        width: 49%;
    }
    .custom-layout .widget-area { 
        width: 25%;
        margin-right: 10px;
    }
    .custom-layout #extra-sidebar {
        margin-top: 1.8rem;
        word-wrap: break-word;
        width: 20%;
        float: right;
        margin-right: 2%;
    }
}
/* IE8 and IE7 - Two Right Sidebars */
.ie .custom-layout .site-content {
    float: left;
    width: 49%;
}
.ie .custom-layout .widget-area { width: 25%; }
.ie .custom-layout #extra-sidebar {
    margin-top: 1.8rem;
    word-wrap: break-word;
    width: 20%;
    float: right;
    margin-right: 2%;
}

Здесь строчка “margin-right: 10px;” – регулирует расстояние между сайдбарами – можно вообще ее удалить если не получается 2 сайдбара.

На этом на сегодня все – красивых вам и успешных сайтов!