Проверьте Ваш блог на валидность HTML-кода!

2 комментария

W3C валидация

Да, проверьте обязательно! Пусть нет достоверных данных, говорящих нам о том, что валидный html-код — залог высоких позиций блога WordPress в поисковых системах, но все же проверьте. Более того, было бы странно так утверждать, учитывая, что сам Яндекс говорит о наличии 800 различных факторов ранжирования. Но при прочих равных нам надо оказаться чуть-чуть впереди. Первый вопрос, который мы должны закрыть — это работоспособность нашего блога в различных браузерах. Про IE 6 речи тут не идет, его даже сам Яндекс со скрипом поддерживает . Например, ссылка на Яндекс.Карты просто не работает. Однако, если код не валиден, есть вероятность, что и в современных браузерах наша замечательная верстка «поедет» и опять ничего не будет работать. Когда вы выполните первый шаг из данной статьи, поймете, что скорее всего ковыряться придется долго. А может и нет, тогда можете собой гордиться  .

Переходим на сайт валидации html-кода, в строку, указанную на рисунке ниже, вводим адрес конкретной страницы нашего сайта. Я набрала адрес корня.

валидатор html

Нажимаем «Check» и … сейчас у меня все выглядит вот так:

валидатор html ошибки

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

  1. Ошибки самой CMS WordPress
  2. Ошибки html-кода шаблона WordPress
  3. Ошибки генерации html-кода плагинами
  4. Собственные кривые руки

Кратко разберем каждую группу и назначим «лечение».

Ошибки самой CMS WordPress

Как писалось в статье ранее, начиная с определенной версии, в WordPress внедрили поддержку microformats.org. Для того, чтобы выделить микроразметкой вложение, в тег <a href=»….»>тут картинка</a> добавляется атрибут rel=»attachment». Ссылка в коде страницы выглядит примерно следующим образом:

Валидатор html активно ругается на вторую часть значения атрибута — на wp-att-456. Действительно, спецификация HTML5 подразумевает наличие атрибута rel со следующими значениями:

  • stylesheet
  • nofollow
  • external
  • author
  • search
  • icon
  • next
  • help
  • noreferrer
  • pingback
  • prefetch
  • license
  • prev
  • sidebar
  • alternate
  • bookmark
  • tag

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

Заходим в папку с шаблоном блога, находим там файл functions.php, и в самый его конец ДО символов ?> добавляем следующие строки:

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

Ошибки html-кода шаблона WordPress

Как ранее указывалось, в качестве шаблона была выбрана тема Reverie. Она меня особенно привлекла тем, что она адаптивная. Однако, видно, что валидатор ругается на атрибуты max-device-width и min-device-width. Идем в гугл, узнаем, что данные атрибуты давно deprecated. Короче говоря, «дядя Иося уже давно на пенсии» ©  .

Дядя Иося уже давно на пенсии

Открываем файл header.php, пишем на месте указанных атрибутов max-width и min-width соответственно.

Ошибки генерации html-кода плагинами

В моем случае виновником торжества был плагин WP Lightbox 2. На форуме разработчика неоднократно просили исправить описанный ниже баг, но разработчики не хотят ничего менять, хотят поддерживать имеющуюся версию. К счастью, все легко поправимо.

Баг состоит в том, что в уже упомянутый атрибут rel затолкали еще и lightbox[111], где 111 — внутренний номер картинки для плагина. Как было описано выше, данное значение не предусмотрено спецификацией HTML5. Выход состоит в том, чтобы это значение перетащить в другой атрибут — data-rel.

Открываем файл /wp-content / plugins / wp-lightbox-2 / wp-lightbox-2.php. Находим функцию jqlb_do_regexp. Переменную $pattern переписываем так:

Далее находим функцию wplbtwo_do_regexp, переменная $pattern переписывается так:

Переходим в файл wp-lightbox-2.min.js, находящийся в той же папке. Нам необходимо в нем найти строку, начинающуюся с «a[rel^=», rel необходимо заменить на data-rel, чтобы стало «a[data-rel^=». В противном случае наши картинки будут открываться не во всплывающем окне, а в новой вкладке, чего можно было добиться и безо всяких плагинов .

Собственные кривые руки

Незакрытая угловая скобочка у одного из тегов — это бич многих верстальщиков. Не дай бог что-то случайно будет пропущено — обнаружить можно будет либо через валидатор, либо увидеть собственными глазами у заказчика, как у него все внезапно поехало в Interner Explorer, тогда как остальные браузеры разметку молча проглотили…

Но помимо этого валидатор кричал о том, что атрибуты itemprop как бы заданы, но они не имеют родителя. Причем данный тип ошибок был только на главной странице блога, на остальных страницах подобной проблемы не встречалось. Дело в том, что HTML5 требует явного указания namespace микроразметки. Иными словами, валидатор не мог понять, откуда взялся этот itemprop, ведь выше только http://schema.org/WPHeader. Поэтому, если главная страница Вашего блога — это список тем с началом статей, то, чтобы убрать эти ошибки, надо в явном виде прописать в php-файле, который описывает отображение краткого содержания статьи на главной, itemscope itemtypehttp://schema.org/Article«. У меня это файл content.php, я использовала для этого тег <article>.

Итог

В итоге у меня получилось сделать html-код валидным за исключением пары warning’ов. Если описанное здесь кому-нибудь поможет, буду рада.

 Update 17.02.2016

Забавное видео по теме одного из скриншотов 

2 комментария “Проверьте Ваш блог на валидность HTML-кода!”

  1. essay-zone

    Шаблон можно сделать валидным, но есть такие вещи как плагины которые тоже вносят свои какашки в код сайта. За всем не уследишь.Проще тогда на голом HTML вести блог чтоб было все валидно.

    Ответить
    • Admin

      Да, я полностью согласна с тем, что наличие плагинов усложняет процесс наведения порядка на сайте. Но в частности поэтому советуют ставить только основные, самые нужные плагины. Я поддерживаю данный совет. За бурной деятельностью 50 плагинов вряд ли уследишь http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aa.gif.

      Ответить

Оставьте комментарий

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> <img src="" alt="" class="" width="" height="">

http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ab.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ac.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ag.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ah.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ai.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ak.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/am.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/an.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ao.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aq.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ar.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/at.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/av.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aw.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ay.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/az.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bb.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bc.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bd.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/be.gif 
больше...