Меняем местами сайдбар и основное текстовое поле

Сайдбаром (sidebar) называется специальное поле на сайте, куда встраиваются виджеты. Иными словами — это колонка с динамическим содержимым. Практически все шаблоны имеют такие колонки и их количество может быть различным. Зачастую используется от 1 до 4 колонки.

Смена мест sidebar и колонки основного текста

Чтобы максимально уникализировать какой-либо шаблон, или просто улучшить внешний вид или выделиться — можно в стандартных, бесплатных и платных шаблонах для Вордпресс сменить расположение колонок относительно основного текстового поля, чем и займёмся в этой статье.

Смена расположения сайдбара и основного текста

Итак, допустим, что в шаблоне, который мы используем, есть одна колонка под виджеты, то есть один сайдбар, и одна основная колонка, где размещается текст наших статей и страниц:

razmetka-stranici-wp

Пусть колонка с виджетами располагается справа, а нам нужно переместить её влево до самого края. Соответственно колонка с основным текстовым содержимым переместиться вправо до самого края.

Чтобы всё это сделать, нужно немного изменить стили. Текстовое содержимое зачастую имеет стиль #content, а содержимое с виджетами — #sidebar. Всё что нужно — это сменить свойства у первого с float: left; на float: right; и в другой последовательности для второго.

Смена расположения сайдбара в теме Twenty Twelwe

Рассмотрим всё вышесказанное на примере стандартной адаптивной темы для Вордпресс:

  1. Открываем в админке сайта файл Таблица стилей (style.css) — это можно сделать, пройдя по пути «Внешний вид» — «Редатор».
  2. Ищем стиль .site-content — это стиль колонки с основным контентом site-content
  3. Заменяем в .site-content свойство float: left; на float: right;.
  4. Ищем стиль .widget-area widget-area
  5. Заменяем в этом стиле свойство float: right; на float: left; и сохраняем сделанные изменения.
  6. Готово!

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

2 комментария

  1. Большое спасибо!
    Всё гениальное просто: поменять расположение основного текста и всё :))

  2. Спасибо!!! Применил на своём сайте)

Оставить комментарий

Your email address will not be published. Required fields are marked *