Удосконалення макету вашого сайту WordPress може бути нелегкою справою, але це також важливо для Користувацького досвіду (UX), залучення уваги та конверсій. Тому може бути розчаровуючим, коли здається, що випадкова помилка призводить до порушення відображення вашого сайту — наприклад, коли бічна панель раптово з’являється під змістом, а не збоку.
Хоча можливі кілька причин, переважно це пов’язано з проблемами з мовою гіпертекстової розмітки (HTML) або каскадними таблицями стилів (CSS). На щастя, ці проблеми відносно легко виправити, тому ви швидко зможете повернути свій сайт до ідеального стану.
У цій статті ми розглянемо поширені причини цієї помилки, а потім покажемо, як її вирішити у трьох простих кроках. Розпочнемо!
Поширені причини опускання бічної панелі нижче вмісту в WordPress
Бічні панелі в WordPress – це зони вмісту, призначені для відображення ліворуч або праворуч від основного сегменту сторінки (або іноді обох). Вони часто містять віджети, форми для реєстрації, посилання на пов’язані публікації або подібний вміст, який ви хотіли б включити на свій сайт.
Через різні помилки або збої, ваші бічні панелі іноді можуть з’являтись у нижній частині сторінки, а не зліва чи справа. Зайве казати, що це легко може зіпсувати добре спроектований вебсайт.
Основною причиною цієї поведінки є проблеми з HTML або CSS на вашому сайті. Зазвичай це наслідок прямих змін, які ви внесли до коду вашого сайту, таких як файл теми або plugin.
Наприклад, можливо на сторінці є зайвий або незазначений <div> тег. Проблема може бути також пов’язана з некоректними налаштуваннями ширини та обтікання в вашому CSS. На щастя, виправити цю помилку досить просто.
Уникніть стресу
Уникайте усунення проблем, коли реєструєтеся на DreamPress. Наші дружелюбні експерти з WordPress доступні 24/7, щоб допомогти вирішити проблеми з сайтом — великі чи малі.
Перевірте планиЯк виправити помилку з бічною панеллю WordPress нижче вмісту (у 3 кроках)
Тепер, коли ви знаєте можливі причини цієї заплутаної помилки, настав час її виправити. Ми рекомендуємо пройти наступні три кроки по порядку, переходячи до наступного, тільки якщо попередній не спрацював. Перед початком не забудьте зробити резервну копію вашого сайту на випадок непередбачених обставин.
Крок 1: Скасувати останні зміни
Перший крок також є найпростішим. Якщо ваш бічний бар перемістився після внесення змін на ваш сайт — чи то встановлення нового плагіна, додавання користувацького коду, або чогось іншого — просто скасуйте це. Відміна дії повертає ваш макет до первісного формату та допомагає визначити причину проблеми.
Отже, ви можете почати з того, що повернете зміни та оновіть свій сайт, щоб перевірити, чи повернулася бічна панель на своє місце. Якщо так, то ви можете пошукати потенційні проблеми з тими змінами, які ви намагалися внести. Наприклад, якщо ви встановили новий плагін, перевірте альтернативи. Якщо ви змінили або додали код на свій сайт, шукайте будь-які помилки або синтаксичні помилки.
Крок 2: Виправлення незакритих тегів <div> або видалення зайвих тегів <div>
Часто причиною помилки бічної панелі WordPress є незакритий або зайвий <div> тег у коді вашого сайту. Ці HTML теги визначають межі секцій на вашому вебсайті. Якщо вони розміщені некоректно, браузери не зможуть правильно відображати сайт (звідси і блукання бічної панелі).
Ось приклад правильно оформленої сторінки:
Нижче наведена та сама сторінка з незакритим <div> тегом:
Ви можете побачити, що у відсутньому закриваючому тезі <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 внутрішнього сервера в WordPress
- Як виправити синтаксичні помилки в WordPress
- Як виправити проблему з невідправленням електронної пошти у WordPress
- Як виправити помилку підключення до бази даних у WordPress
- Як виправити помилку 404 WordPress
- Як виправити білий текст і відсутні кнопки у візуальному редакторі WordPress[b]
Якщо ви шукаєте більше порад та хитрощів для WordPress, ознайомтеся з нашими Посібниками по WordPress, колекцією керівництв, які допоможуть вам навігувати адміністративною зоною WordPress як професіонал.
Усунення помилки бічної панелі
Якщо ви витратили час на створення красивого сайту WordPress, ймовірно, ви не хочете, щоб щось відволікало від нього — особливо раптові помилки. На щастя, якщо проблема полягає в тому, що бічні панелі з’являються під вашим контентом, рішення відносно просте!
Щоб виправити помилку з бічною панеллю, яка відображається нижче вмісту, ви можете виконати ці три кроки:
- Скасуйте будь-які зміни, які ви внесли на свій сайт перед появою помилки.
- Перевірте наявність та виправте незакриті або зайві <div> теги у вашому коді.
- Переконайтеся, що CSS вашого сайту коректний.
Якщо ви волієте витрачати свій час на роботу над своїм бізнесом, а не на усунення проблем з вашим сайтом, розгляньте можливість переходу на DreamPress. З нашими керованими хостинг-планами WordPress ми дбаємо про проблеми за вас, тож ви можете зосередитися на тому, що дійсно має значення.
