Недавно один из наших читателей спросил нас, как изменить боковую панель темы WordPress?

Обычно мы получаем этот вопрос от пользователей, которые хотят изменить расположение своей боковой панели слева направо или справа налево.

В этом уроке мы покажем вам, как изменить расположение боковой панели в WordPress.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

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

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

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

Узнайте, если должен ли ваш блог на WordPress иметь боковые панели

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

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

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

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

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

Изменение боковой панели с помощью CSS

Прежде чем вносить какие-либо изменения в свою тему WordPress, вы должны сначала рассмотреть создание детской темы, Используя дочернюю тему, вы сможете обновить родительскую тему, не теряя своих изменений.

Откройте для себя Как отобразить другую боковую панель для каждого элемента на WordPress

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

Вам понадобится FTP-клиент для редактирования файлов темы WordPress. Проконсультируйтесь с руководство о том, как использовать FTP.

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

 / YourSite / WP-содержание / темы / ваш-тематический каталог / 

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

Откройте для себя как управлять файлами и папками WordPress

В этом файле найдите класс CSS вашей боковой панели. Вообще этот класс есть боковая панель ». В этом примере мы используем тему WordPress по умолчанию " двадцать пятнадцать У кого есть этот класс для боковой панели:

.sidebar {float: left; margin-right: -100%; максимальная ширина: 413px; положение: относительное; ширина: 29.4118%; }

Как вы можете видеть, боковая панель плавает влево с полем -100%. Мы изменим поплавок справа:

.sidebar {float: right; поле слева: -100%; максимальная ширина: 413px; положение: относительное; ширина: 29.4118%; }

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

демо-сайт изменить врезку

Действительно, мы переместили боковую панель, но мы не переместили область содержимого. " Двадцать Пятнадцать Использует этот CSS для определения положения области содержимого.

.site-content {display: block; плавать: слева; поле слева: 29.4118%; ширина: 70.5882%; }

Мы изменим его, чтобы переместить контент вправо. Следующим образом:

.site-content {display: block; плавать: слева; поле справа: 29.4118%; ширина: 70.5882%; }

Вот как будет выглядеть ваш сайт после применения этого CSS-кода.

новая презентация перенесена на боковую панель сайта

Как видите, мы изменили расположение области содержимого и боковой панели. Тем не менее, слева все еще есть белый блок.

Идите дальше, открывая для себя как управлять файлами и папками WordPress

Вы часто будете сталкиваться с этими ошибками при работе с CSS. Требуется некоторая детективная работа, чтобы понять, что вызывает это и как это исправить.

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

инспектировать инструмент браузера

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

Откройте для себя 5 WordPress плагины для визуального редактирования CSS в вашем блоге

Поэтому CSS, соответствующий выделенному элементу, должен быть перенастроен.

@media screen and (min-width: 59.6875em) {body: before {background-color: #fff; тень блока: 0 0 1px rgba (0, 0, 0, 0.15); содержание: ""; дисплей: блок; высота: 100%; минимальная высота: 100%; положение: фиксированное; верх: 0; слева: 0; ширина: 29.4118%; z-индекс: 0; / * Исправлена ​​ошибка с прокруткой в ​​Safari * /}

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

@media screen and (min-width: 59.6875em) {body: before {background-color: #fff; тень блока: 0 0 1px rgba (0, 0, 0, 0.15); содержание: ""; дисплей: блок; высота: 100%; минимальная высота: 100%; положение: фиксированное; верх: 0; справа: 0; ширина: 29.4118%; z-индекс: 0; / * Исправлена ​​ошибка с прокруткой в ​​Safari * /}

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

Новый веб-сайт взгляд боковая панель справа

Работа с CSS может сбивать с толку новичков. Если вы не хотите делать всю ручную работу, то вы можете попробовать Плагин WordPress CSS Hero. Он позволяет редактировать CSS без написания кода и работает со всеми темами WordPress.

Откройте для себя также несколько премиальных плагинов WordPress  

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Zxeion

Zxeion — мощный Плагин Wordpress премиум отвечает за повышение безопасности вашего сайта. Этот плагин содержит набор средств защиты и безопасности, которые защитят ваш сайт от возможных атак.Плагины Zxeion для wordpress защищают сайт от вредоносных вирусных атак

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

Узнайте также наш 7 плагинов для повышения вашей боковой панели на WordPress

Его функции: защита в реальном времени, отличная поддержка клиентов, регулярные обновления, блокировка IP-адресов, отличная документация, современный и профессиональный интерфейс, специализированная поддержка клиентов и другие.

скачать | Демонстрация | веб-хостинг

2. Slaido 

Слайдо — это Плагин Wordpress Premium, который позволяет вам выбирать из почти 320 адаптивных шаблонов слайдеров и импортировать один из них на свой веб-сайт всего за несколько кликов. Это полный набор шаблонов, идеально подходящий для Слайдер революция. Поэтому вам придется сначала установить его, чтобы полностью использовать это Плагин WordpressПакет шаблонов Slaido для революции слайдеров wordpress

Его основными особенностями являются: адаптивная компоновка слайдеров, простота импорта или экспорта слайдеров, регулярные обновления, круглосуточная поддержка клиентов, плавная и очень крутая анимация, доступность видеоуроки для быстрого старта, поддержка шрифтов Google и многое другое.

скачать | Демонстрация | веб-хостинг

3. Форма обратной связи

Contact Us Form - это адаптивный плагин WordPress премиум-класса и простой инструмент, но с богатыми возможностями настройки, который позволяет отображать понятную и обнадеживающую форму, в которой ваши посетители могут связаться с вами, оставив свое сообщение.

Свяжитесь с нами через плагин контактной формы wordpress

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

Мы также приглашаем вас прочитать: 10 WordPress плагины для создания и управления веб-сайтом ресторана

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

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.

Заключение

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

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...