Главная » Дизайн » Сайт съезжает – почему шаблон блога рушится?
сайт съезжает - рушится шаблон

Сайт съезжает – почему шаблон блога рушится?

Недавно ко мне обратился один человек с вопросом почему у него съезжает сайт. То есть рушился шаблон блога на WordPress – сайдбар, форма комментариев и другие элементы сайта выводились не на своем месте, то есть в самом низу. Диагноз оказался довольно простым, и поразмыслив мне удалось его угадать. Именно об этой проблеме и пойдет речь.сайт съезжает - рушится шаблон

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

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

Разметка блога.

Дело в том, что все элементы сайта расположены в своих контейнерах. Один большой контейнер может включать множество маленьких. Чтобы наглядней представить это посмотрите на эту картинку (каждый блок – это один прямоугольник):разметка блога

Давайте опишем, что мы видим:

  • Для шапки и подвала сайта выделено по контейнеру – с этим все понятно;
  • Все, что находится между ними – это один большой контейнер под весь контент;
  • По контейнеру выделено для основного контента и боковой колонке;
  • Статья и комментарии так же расположены в своих блоках.

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

Как такое может быть?

Сайт съезжает на страницах некоторых записей.

Дело в том, что при написании статей мы используем не только текст, но и различные другие элементы. Трудно заметить, если в HTML коде большой статьи прописан лишний закрывающийся тег – то есть контейнер выше закрывается и получается например вот такая картина:Плохая разметка - сайт съезжаетКак видите мы просто закрыли основной большой блок раньше времени и форма комментариев вместе с сайдбаром стали выводится не на своих местах – все уехало вниз.

Справиться с такой проблемой очень просто:

Открываете статью в административной панели, переходите в режим HTML и ищете лишний закрывающий тег, который скорее всего выглядит вот так:

</div>

Но стоит учитывать, что если в тексте блок открывается – <div>, то он должен и закрываться – </div>. Нужно удалять лишь лишние теги.

Проблема со счетчиками.

Видели ли вы хоть раз на блогах такую проблему:счетчики внизу

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

Затем правят файл footer.php (подробнее о файлах темы WordPress) и после абсолютно всего вставляют код. Чтобы этого избежать нужно найти где закрывается футер (</div>) и установить код счетчика прямо перед ним, то есть внутри самого подвала сайта, а не где-то на задворках.

Сайт съезжает: другие причины.

При резиновом шаблоне (меняет ширину при изменении разрешения экрана) часто на больших разрешениях происходит смещения того же сайдбара, но разбирать эту тему сейчас не будем, так как большинство шаблонов на WordPress имеют именно фиксированную ширину.

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

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

Комментировать через ВКонтакте:
Отзывов к посту "Сайт съезжает – почему шаблон блога рушится?" уже 23:
  • Максим | 18.04.2013 в 17:13

    Привет, Антон! Полезная и нужная статья у тебя получилась! Вот у меня такое было с моим старым бесплатным шаблоном. Мои знания по HTML и CSS далеки от идеала, поэтому методом “научного тыка” я так и не смог исправить свои ошибки. Спасибо друг, помог разобраться.
    А вот отдельная страница для сабскрайя у меня до сих пор пылится – не получается у меня “аленький цветочек”. Кстати, может поможешь разобраться в чем дело, Антон? Не за бесплатно, конечно. :)

    • admin | 18.04.2013 в 21:33

      Можно попробовать :|

      • Максим | 18.04.2013 в 21:34

        Антон, как ты смотришь на то, чтобы мы пообщались на эту тему в это воскресенье?

        • admin | 18.04.2013 в 21:40

          Вот на счет воскресенья точно сказать не могу. А так пиши в любое время – как увижу, сразу отвечу

  • Лариса | 21.04.2013 в 23:19

    Да, полезная статья, спасибо :). Про описанные проблемы знаем не по наслышке.

  • Владимир Жданов | 25.04.2013 в 18:06

    Отличным помощником в поиске незакрытых тегов является notepad++. Он отлично подсвечивает парные теги. Достаточно скопировать в него код и во вкладке – синтаксис – выбрать html

  • иван | 30.04.2013 в 9:23

    ДА действительно иногда это проблема когда сайт рушиться,тоже была такая история когда то с шаблоном на ворд пресс тоже сехал бегал искал информацию как исправить :sad:

  • Лариса | 01.05.2013 в 2:03

    Антон, подскажи, что делать. У меня в превьюшках от get.2leep.com завелся спам. Одна и та же картинка с девушкой на каждой странице вылезает. Пароль я у них поменяла. Поддержка не отвечает (может, им надо на инглише писать?).

    • admin | 01.05.2013 в 14:04

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

      • Лариса | 02.05.2013 в 11:25

        Я бы с удовольствием не пользовалась, если б знала, как превьюшки вставить в “похожие статьи”… Спасибо, попробую на англицком им написать.

        • Лариса | 03.05.2013 в 23:50

          О, не успела переводчиком воспользоваться. Уже убрали :)
          Значит, понимают по-нашенски :shock:

  • Игорь | 05.07.2013 в 0:25

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

    • admin | 05.07.2013 в 0:30

      Угодить IE вообще сложно, если речь идет о 7 или еще хуже 6 версии. Даже разработчики уже отказываются от поддержки оного (например последняя версия библиотеки jquery – когда узнал был в шоке, как это так? отказались? :) ) Ну и вспоминается забавная подборка самых популярных сайтов (вконтакте, фейсбук, …, и собственно сайт майкрософта (создателя IE)) – в древних версиях и они “едут”)))

  • Игорь | 05.07.2013 в 1:31

    )) я пока блог не стал делать, почему то думал, что браузерные holy wars, какие были между NetScape и IE давно в прошлом. Надеюсь хуже чем сейчас не будет, а то без особого знания кода ковырятся в тэгах как крот в трехлитровой банке не особо радует =)

  • rni | 22.11.2013 в 10:58

    ;-) вот и я поставил на своем сайте тему, плагин, а корзина, когда в ней товар, залезает на сайдбар. Ручками ведь ничего не правил, что делать?

    • admin | 22.11.2013 в 16:33

      Сначала выяснить причину почему так происходит

  • Юра | 26.02.2014 в 0:50

    Спасибо огромное! Всю голову сломал, а дело было в закрывающем диве. Копировал код, и не усмотрел, как див утянул вместе с нужным куском кода. Теперь я счастлив :mrgreen:

  • Ирина Иванькина | 19.04.2015 в 5:58

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

    • admin | 19.04.2015 в 11:22

      Посмотрел блог – вы там со стилями что-то видимо делали.
      1) надо задать общую ширину у #wrapper (сейчас стоит 1100, можно просто дописать к этой цифре px).
      2) задать ширину – например 800px и выравнивание float:left у контента #content.
      ну и сайдбар сам должен встать справа – у него ширина и выравнивание есть. А там видимо кто-то вмешался и поудалял все

  • Миннур | 04.02.2016 в 13:22

    Подскажите, пожалуйста,Антон. Сайт мой, посмотришь через браузер Гоогле Хроме, показывает нормально. А через Мозиллу неправильно, в некоторых местах записи съезжают с места. Как можно исправить?

    • admin | 04.02.2016 в 19:22

      первое, что бросается в глаза: строка “Болезни, которые можно остановить” не помещается, уменьшите размер шрифта

  • Миннур | 06.02.2016 в 11:46

    Спасибо большое, Антон ! Помогло.

  • Наталья | 14.11.2016 в 11:37

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: