Совершенствование макета вашего сайта на WordPress может потребовать много работы, но это также важно для пользовательского опыта (UX), вовлеченности и конверсий. Поэтому может быть разочаровывающим, когда кажущаяся случайной ошибка вызывает нарушение отображения вашего сайта — например, когда боковая панель вдруг оказывается под содержимым, а не сбоку от него.
Хотя возможных причин может быть несколько, в основном это связано с проблемами с Hypertext Markup Language (HTML) или Cascading Style Sheets (CSS). К счастью, эти проблемы относительно легко исправить, поэтому вы можете быстро вернуть свой сайт в отличное состояние.
В этой статье мы рассмотрим распространенные причины этой ошибки, а затем покажем вам, как решить ее в три простых шага. Начать!
Распространенные причины опускания боковой панели ниже содержимого в WordPress
Боковые панели в WordPress предназначены для отображения контента с левой или правой стороны основной части страницы (или иногда с обеих). Они часто содержат виджеты, формы регистрации, ссылки на связанные записи или другой контент, который вы хотели бы разместить на всем сайте.
Из-за различных ошибок или сбоев, ваши боковые панели иногда могут отображаться в нижней части страницы, а не слева или справа. Нет необходимости говорить, что это может легко испортить хорошо спроектированный сайт.
Основной причиной этого поведения являются проблемы с HTML или CSS на вашем сайте. Обычно это результат прямых изменений, которые вы внесли в код вашего сайта, например, файл темы или плагина.
Например, возможно, на странице есть лишний или неуказанный <div> тег. Проблема также может быть связана с неправильными настройками ширины и обтекания в вашем CSS. К счастью, исправить эту ошибку достаточно просто.
Избегайте стресса
Избегайте устранения неполадок, когда вы регистрируетесь в DreamPress. Наши дружелюбные эксперты по WordPress доступны 24/7, чтобы помочь решить проблемы с сайтом — независимо от их размера.
Ознакомьтесь с планамиКак исправить ошибку сайдбара WordPress под контентом (в 3 шага)
Теперь, когда вы знаете возможные причины этой запутанной ошибки, пришло время исправить её. Мы рекомендуем выполнить следующие три шага по порядку, переходя к следующему только в случае, если предыдущий не сработал. Перед началом не забудьте сделать резервную копию вашего сайта на всякий случай.
Шаг 1: Отмените ваши последние изменения
Первый шаг также самый простой. Если ваша боковая панель переместилась после внесения изменения на ваш сайт — будь то установка нового плагина, добавление пользовательского кода или что-то другое — просто отмените это. Отмена действия возвращает макет в исходное состояние и помогает выявить причину проблемы.
Вы можете начать с отмены изменений и обновления вашего сайта, чтобы увидеть, вернулась ли боковая панель на свое место. Если это так, затем вы можете искать потенциальные проблемы с изменениями, которые вы пытались внести. Например, если вы установили новый плагин, проверьте альтернативы. Если вы изменили или добавили код на вашем сайте, ищите опечатки или синтаксические ошибки.
Шаг 2: Исправление незакрытых тегов <div> или удаление лишних тегов <div>
Часто причиной ошибки сайдбара WordPress является не закрытый или лишний <div> тег в коде вашего сайта. Эти HTML теги определяют границы разделов на вашем сайте. Если они расставлены некорректно, браузеры не смогут правильно отображать сайт (отсюда и проблема с перемещающимся сайдбаром).
Вот пример правильно оформленной страницы:
Вы можете видеть, что в закрывающем <div> теге отсутствует косая черта. В результате браузер не понимает, что тег должен быть закрыт, и содержимое, которое должно быть снаружи элемента, теперь внутри.
Чтобы исправить это, проверьте все измененные файлы шаблонов на наличие отсутствующих или лишних тегов. Обычно, эти ошибки можно найти в файлах “частей шаблона” вашей темы WordPress. Для этого перейдите в вашу панель управления WordPress и навигируйте в Внешний вид > Редактор тем.
Выберите подходящую тему из выпадающего меню вверху, а затем найдите раздел части шаблона в боковой панели.
Шаблоны, которые создают страницы и посты, обычно находятся в разделе content. Найдите нужный вам в списке, проверьте его и внесите любые корректировки. Затем вы можете нажать на Update File, чтобы сохранить изменения.
Если вы знаете, какой файл вы редактировали, вы можете перейти прямо туда. В противном случае, вам нужно будет проверить их все на наличие несоответствий.
Шаг 3: Исправление проблем с CSS
Еще одна частая причина этой ошибки находится в CSS вашего сайта. Раздел Дополнительный CSS настройщика WordPress позволяет добавлять пользовательский CSS на ваш сайт.
Если вы использовали эту функцию или редактировали CSS другими способами, возможно, вы неправильно отформатировали код. В случае перемещения боковых панелей наиболее частой причиной является свойство “width”.
Вам следует удостовериться, что сумма ширин элементов Content и Sidebar не превышает ширину элемента Wrap . Если это так, меньший элемент будет сдвинут вниз, чтобы поместиться.
Инструменты для упрощения устранения неполадок боковой панели
Вы также можете самостоятельно устранить проблему без использования кода. Существует несколько онлайн-инструментов, которые могут проверить ваш код на наличие ошибок.
Вы можете использовать Сервис валидации разметки W3C для проверки HTML кода. Сервис валидации CSS W3C является аналогом для CSS. Online Web Check также отличный инструмент, который работает как для HTML, так и для CSS.
Эти услуги также отлично подойдут, если вы просто хотите, чтобы кто-то ещё взглянул на ваш код, независимо от уровня навыков. Быстрая двойная проверка никогда не помешает!
Вы также можете исключить из списка дел устранение ошибок WordPress, используя нашу услугу DreamCare. Наша команда экспертов занимается всем на backend вашего сайта, чтобы обеспечить его безопасность, защиту и непрерывную работу.
Дополнительные ресурсы WordPress
Скажите прощайте разорванным ссылкам и сообщениям об ошибках! Мы подготовили несколько руководств, чтобы помочь вам устранить любые проблемы с WordPress:
- Обзор общих ошибок WordPress
- Как исправить ошибку 500 Internal Server Error в WordPress
- Как исправить синтаксические ошибки в WordPress
- Как исправить проблему с неработающей отправкой электронной почты в WordPress
- Как исправить ошибку подключения к базе данных в WordPress
- Как исправить ошибку 404 Not Found в WordPress
- Как исправить белый текст и исчезновение кнопок в визуальном редакторе WordPress[b]
Если вы ищете больше советов и хитростей по WordPress, посетите наши Учебные пособия по WordPress, коллекцию руководств, которые помогут вам ориентироваться в административной зоне WordPress как профессионал.
Устранение ошибки сайдбара
Если вы потратили время на создание красивого сайта на WordPress, вы, вероятно, не хотите, чтобы что-то испортило его — особенно внезапные ошибки. К счастью, если проблема заключается в том, что боковые панели отображаются под вашим контентом, решение довольно простое!
Чтобы исправить ошибку при которой боковая панель отображается под содержимым, вы можете следовать этим трем шагам:
- Отмените все изменения, которые вы сделали на вашем сайте непосредственно перед появлением ошибки.
- Проверьте наличие и исправьте не закрытые или лишние <div> теги в вашем коде.
- Убедитесь, что CSS вашего сайта корректен.
Если вы предпочитаете тратить время на развитие своего бизнеса, а не на устранение неполадок вашего сайта, рассмотрите возможность перехода на DreamPress. С нашими тарифными планами управляемого хостинга WordPress мы заботимся о возникающих проблемах за вас, чтобы вы могли сосредоточиться на действительно важных вещах.
