Убираем нелогичные и вредные заголовки сайдбара h3-h4-h5 – заменим на div класс

Такой парадокс (гений зла) несут в себе теги h3 – h4 – h5, если на них взглянуть от разных углов (тем, которые читали статью о seo-догматике и пояснять не нужно, но я всё же несколько повторюсь…).

…если подсмотреть от угла правил SEO, то увидим следующее: например, тег h3 необходим для выделения подзаголовков статьи или, к примеру, каких-то ВАЖНЫХ админу тем блога в навигации сайта, но!! только с административно-тщательного дозволения, – иначе КАША ранжирования информации сайта…

 

 

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

 

 

Сегодня мы и займёмся техническим SEO нашего блога: поубираем эти теги, а заместо них обернём имена виджетов в ласковые для Поисковых Систем DIV классы.

 

 

Для этого придётся немного потрудится и нам понадобится:

Файл functions.php – решайте где и как станете править этот документ: я правлю прямо в online, а вам советую открыть нотепад++ например. О настройках программы здесь: http://complitra.ru/kak-nastroit-notepad/

 

 

 

 

 

 

И далее…

 

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

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

…сегодняшний же лёгенький пост будет для любителей эпистолярного жанра.

 

 

Приступим к проверке

 

 

 

 

как проверить шаблон сайта на предмет валидности

 

 

 

 

Я буду показывать на примере инструментария для web-разработчиков браузера Mozilla Firefox, но тем кто пользуется иным обозревателями – ничего страшного: принцип одинаков.

 

 

Значит, наводим курсор на интересуемое ИМЯ виджета и щёлкаем правой кнопочкой “мышки”; во всплывшем окошке выбираем “исследовать элемент” – жмём!

 

Смотрите фото: (картинки кликабельны)

 

 

 

 

 

 

1-я картинка для примера:

Посмотрите внимательнее – имя выделено div-классами – приблизительно таким макаром должен обозначаться widgettitle (имя виджета) и у вас.

НО, вероятно, в вашем открытии кода) всё иначе т.е имя обозначено h3 – это НЕ совсем ВЕРНО, шаблон не оптимизирован.

 

 

Приступаем к правке кода:

 

 

 

 

как изменить вредные теги h3 h4 в имени виджета на div-класс

 

 

 

 

 

Открываем свой файл functions.php и отыскиваем строки кода, показанного чуть ниже…

 

Путь таков:   ДОМЕН.ru/wp-content/themes/Ваш_шаблон  И functions.php

 

 

 

А я приведу ОБА варианта примеров в теме кода: верный и неверный!  которые отвечают (скажем так) за прописку и вывод сайдбаров –

у вас может что-то отличаться, но это не суть… вникайте в принцип).

 

 

 

 

 

Теперь сравните вариации:

 

НЕВЕРНЫЙ ВАРИАНТ обозначения имени виджета !!

 

register_sidebar(array(
        'name' => __('Primary Sidebar', 'themater'),
        'id' => 'sidebar_primary',
        'description' => __('The primary sidebar widget area', 'themater'),
        'before_widget' => '<ul class="widget-container"><li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li></ul>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>'
    ));

 

 

 

ВЕРНЫЙ ВАРИАНТ обозначения имени виджета!!

 

register_sidebar(array(
        'name' => __('Secondary Sidebar', 'themater'),
        'id' => 'sidebar_secondary',
        'description' => __('The secondary sidebar widget area', 'themater'),
        'before_widget' => '<ul class="widget-container"><li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li></ul>',
        'before_title' => '<div class="widgettitle">',
        'after_title' => '</div>'
    ));

 

 

 

Обратите внимание на 7 и 8 строки: в первом случае у нас обозначено тегами h3 – а во втором – наше имя сайдбарного виджета обёрнуто в DIV-класс <div class="widgettitle"> КОД </div> с именем-селектором CSS widgettitle.

 

Что и требовалось доказать!

 

 

 

 

 

С теорией разобрались!

 

И теперь вам предстоит подобно примерам выше, всё изменить и у себя в документе functions.php, чтобы при случае, открыв страничку блога “инструментом вебразработчика” ваш код сайдбара был завёрнут в ДИВ.

 

 

<div class="widgettitle"> КОД </div> – не забываем о закрывающем теге – косая черта – слэш.

 

 

 

 

 

 

 

подстройка стилистики заглавий сайдбаров в селекторах CSS

 

 

 

 

И как тольче всё и везде аккуратненько поправите (обычно бывает 3 подобных примера в файле функций, настройте величину шрифта заглавий сайдбара соответственно стилистике шаблона (вашего сайта).

Например, вот такой код CSS в помощь. Прилагаю полный вариант (мож кому потрэбу), – а в общем можете ненужные свойства убрать.

 

 

Вся эта цветовая-размерная операция правки кода совершается в файле темы style.css.

 

.widgettitle{
font-weight:700;/*яркость текста, насыщенность*/
color:#544F3F;/*цвет текста*/
font-size:16px;/*размер шрифта*/
line-height:16px;
font-family:'Oswald',sans-serif;
text-decoration:none;
text-align:center;
text-transform:none;
font-style:italic;/*курсив-наклонный*/
}

 

 

.widgettitle a,.widgettitle a:hover – эти селекторы (смена св-св ссылки при прикосновении курсора – если link используются в виджете) обозначаются соответственно желаниям админа.

 

 

 

 

Возникнут трудности, пишите, разберёмся.

 

А пока, думаю, вам будет полезны статьи необходимые НАЧАЛЬНЫЕ настройки свежего сайта на WordPress

И…

Как убрать тег h3 фразы перед формой комментирования

 

 

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

 

А вот и видео о монетизации обновлений сайта))