Как изменить расположение сайдбара в WordPress

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

Зачем изменять расположение сайдбара в WordPress

Эксперты по юзабилити верят, что люди рассматривают страницу слева направо. Они рекомендуют помещать важный контент с левой стороны, чтобы пользователи сначала видели нужный вам контент. Однако, может быть и наоборот, если ваш сайт содержит материалы на языке с чтением справа налево.

Многие сайты WordPress используют типовую структуру блога с двумя столбцами. Одна для контента, а вторая — для сайдбара.

Если вы только начинаете создавать сайт, тогда стоит выбрать тему WordPress, которая располагает сайдбаром с нужной вам стороны.

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

Давайте же посмотрим как можно легко изменить местоположение сайдбара в WordPress с помощью небольших кусочков CSS кода.

Изменяем расположение сайдбара в WordPress с помощью CSS

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

Во-вторых, всегда стоит создавать резервную копию своего WordPress сайта до внесения изменений в текущую тему.

Вам потребуется FTP клиент для редактирования файлов.

Подключаемся к своему WordPress сайту с помощью FTP клиента и переходим в папку темы. Обычно она расположена по адресу:

/yourwebsite/wp-content/themes/your-theme-folder/ 

Теперь вам потребуется скачать и открыть свой файл таблицы стилей в текстовом редакторе. Этот файл называется style.css и расположен в корне папки с темой.

Внутри этого файла находим CSS класс своего сайдбара. Обычно это .sidebar. В нашем примере мы будем использовать дефолтную тему WordPress Twenty Fifteen, в которой есть такой CSS для определения сайдбара:

.sidebar {
		float: left;
		margin-right: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}

Как вы видите, код прижимаем сайдбар к левой стороне с отступом -100% справа. Мы изменим float на right и margin-left вот таким образом:

.sidebar {
		float: right;
		margin-left: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}

Сохраните свои изменения и загрузите файл style.css обратно на свой сайт с помощью FTP клиента. Теперь перейдите на свой сайт, он будет выглядеть вот так:

Так произошло потому, что мы переместили сайдбар, но не переместили область контента. Twenty Fifteen использует следующий класс CSS для определения позиции области контента.

.site-content {
		display: block;
		float: left;
		margin-left: 29.4118%;
		width: 70.5882%;
	}

Мы изменим его так, чтобы поместить контент справа. Вот так:

.site-content {
		display: block;
		float: left;
		margin-right: 29.4118%;
		width: 70.5882%;
	}

А вот как будет выглядеть наш сайт после применения изменений.

Как вы видите, мы поменяли расположение как для области контента, так и области сайдбара. Однако, все равно остался какой-то белый блок слева.

Вам придется сталкиваться с подобными вещами при работе с CSS. Придется провести немного исследовательской работы, чтобы выяснить, что вызывает проблему и как ее исправить.

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

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

Мы выяснили, что этот CSS в нашей таблице требует доработки.

@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

Этот CSS код добавляет пустой блок контента шириной 29.4118% и высотой 100% справа вверху. Вот как мы переместим его в правую сторону.

@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

После сохранения и загрузки таблицы стилей обратно на сервер наш сайт будет выглядеть вот так:

Мы надеемся, что эта статья помогла вам изменить расположение сайдбара в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.