четверг, 6 ноября 2014 г.

Как убрать теги h2, h3 из заголовков виджетов

Заголовки h1, h2 и h3










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




Я также считаю, что такое применение тегов h2, h3 является неправильным.  По моему мнению, заголовки нужно использовать для разбиения содержимого статьи (именно статьи, а не веб-страницы) на логические блоки для её лучшего восприятия и быстрого чтения “по диагонали”. В таком случае заголовок будет содержать суть последующего текста в статье и будет соответствовать её содержимому. А поскольку это удобно для читателя и, в то же время, хорошо сказывается на продвижении статей, то и является лучшим доказательством правильности использования заголовков.


В шаблоне этого блога заголовки виджетов тоже были заключены в теги h2.


С помощью сервиса pr-cy.ru я проанализировал wordpress-life.ru. У них есть раздел по анализу контента, в частности – заголовков. Вот такая картина была, до внесения исправлений, которые я опишу ниже.


Релевантность заголовков до внесения изменений



Когда же я убрал h2 для указанных заголовков, то  получил общую релевантность заголовков 100%.


Продолжим разбираться с правильным и наиболее эффективным использованием тегов заголовков h1, h2, h3.



after_title – после заголовка;


Свежие записи


1234




Обращаем внимание, что за стиль заголовка “Свежие записи” отвечает class=”widgettitle”.


  • Свежие записи

     


    2. На локальном компьютере (все изменения рекомендую сначала делать и поверять именно на локальной версии вашего блога) заходим в корневую папку вашего сайта и выполняем поиск текста ”widgettitle” по всем файлам (В Total Commander – это комбинация клавиш ALT+F7 с последующим указанием искомого текста).


    Указанный текст был найден в файле моего шаблона functions.php.



    Находим строку, в которой встречается “widgettitle”.


    В отмеченных ниже строках нужно заменить “h2” на “div”.




    if ( function_exists('register_sidebar') ) { register_sidebar(array( 'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', )); }

    1. В браузере смотрим код элемента “Свежие записи” или “Свежие комментарии” и т.п.





    12345678910

    3. Открываем и редактируем functions.php




    .sidebar h2 { margin: Нуль ; padding:6px Нуль 14px 2px; text-align: left; font-size: 16px; line-height: 16px; color: #303539; font-family: Georgia, Times New Roman Times, Serif, Arial; font-weight: bold; text-transform: uppercase; background: url(images/sidebar_tab.png) left bottom no-repeat; }
    if ( function_exists('register_sidebar') ) { register_sidebar(array( 'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '', 'after_title' => '', )); }
  •  if ( function_exists('register_sidebar') ) {   register_sidebar(array(   'before_widget' => '
  • ',   'after_widget' => '
  • ',   'before_title' => '

    ',   'after_title' => '

    ', ));} 


    before_title – это тот html-код, который выводится перед заголовком;


    После изменений должно быть так:







    В предыдущей статье мы узнали как заключить заголовки статей в теги h1. В своем комментарии Павлуха (pavluha.net) справедливо отметил, что верстальщики шаблонов необоснованно стали использовать теги заголовков для обозначения блоков на странице. Например, заголовки виджетов в сайдбаре, типа “Свежие записи”, “Популярные записи”, “Свежие комментарии” часто заключены в теги h2 или h3.



    12345678910
     if ( function_exists('register_sidebar') ) {   register_sidebar(array(   'before_widget' => '
  • ',   'after_widget' => '
  • ',   'before_title' => '',   'after_title' => '', ));} 

    С этого момента h2 убран, но у вас изменится и внешний вид заголовков в сайдбаре.


    Еще нужно внести изменения и в файл стилей.


    4. Редактируем style.css


    Находим фрагмент кода, в котором описывается внешний вид заголовка в сайдбаре – это .sidebar h2.


    Поскольку у нас теперь нет h2 в сайдбаре, то мы смело заменяем “.sidebar h2” на “.widgettitle”. И таким образом классу .widgettitle переходят все свойства и их значения, которые были у “.sidebar h2”.


    Т.е., в выделенной ниже строке, нужно заменить “.sidebar h2” на “.widgettitle”.






    Вы видите какая релевантность у заголовков “Популярные записи”, “Свежие записи” – 50%, а у “Свежие комментарии” вообще – 0%. Все потому, что эти заголовки были на каждой странице сайта, но не соответствовали содержимому этих страниц.



    1234567891011121314

     .sidebar h2 {   margin: Нуль ;   padding:6px Нуль 14px 2px;   text-align: left;   font-size: 16px;   line-height: 16px;   color: #303539;   font-family: Georgia, Times New Roman Times, Serif, Arial;   font-weight: bold;   text-transform: uppercase;   background: url(images/sidebar_tab.png) left bottom no-repeat;} 


    Вот и все изменения. Сохраняйте и проверяйте. Если все корректно, то выполните такие же изменения на хостинге или скопируйте туда файлы, которые были отредактированы.


    Таким образом, сделав минимум исправлений, мы убираем h2 (h3) из заголовков виджетов и, тем самым, избавляем наш сайт от некорректного использования тегов h2 (h3).


    Желаю всем достигать 100% во всем!


    Ответ в рисунках с сети

    Как убрать теги h2, h3 из заголовков виджетов
    Как убрать теги h2, h3 из заголовков виджетов