Виджеты – это неотъемлемая часть WordPress и чаще всего мы используем их в сайдбаре для вывода меню, контактной информации, баннеров, блоков социальных сетей и прочего. Дизайн таких блоков не всегда включает заголовок виджета. Если не нужен заголовок, то оставь поле пустым и задача решена, но на практике не всегда такой подход работает. Для стандартных виджетов, таких как категории, последние записи, пустое поле заголовка выведет дефолтную надпись для этого блока. Исходя из этого, в данной статье я покажу, как удалять, менять и стилизовать заголовки виджетов в WordPress.
Как удалить заголовок виджета вручную?
Добавлять код мы будем в файле functions.php вашей темы, предварительно не забудьте сделать бэкап данного файла. Открываем functions.php спускаемся вниз и добавляем следующий код.
add_filter( 'widget_title', 'hide_widget_title' );
function hide_widget_title( $title ) {
if ( empty( $title ) ) return '';
if ( $title[0] == '!' ) return '';
return $title;
}После добавления кода, переходим в раздел виджетов и в поле заголовок перед названием пишем «!», например «!Последние записи». Отмеченные таким образом заголовки не будут выводиться на сайте.
Как это выглядит в админке.
Это старый проверенный способ, который скрывает заголовок виджета.
Как скрыть заголовок виджета с помощью плагина?
Второй вариант не выводить заголовок для виджета – это использовать плагин. Есть очень удобный и многофункциональный плагин, который добавляет много опций к виджетам, он называется – «Widget Options». Одной из опций при редактировании виджетов является функция по скрытию заголовка конкретно выбранного блока.
Алгоритм работы тут следующий. Устанавливаем и активируем плагин «Widget Options».
После этого переходим в раздел меню «Внешний вид» — «Виджеты». Добавляем новый виджет, открываем его вкладку, и мы увидим новые настройки, которые собственно и добавляет плагин «Widget Options».
Выбираем вкладку настроек (шестеренку) и активируем чекбокс – «Check to hide widget title».
Нажимаем кнопку «Сохранить». Основной плюс плагина, что он позволяет отдельно для каждого виджета контролировать вывод заголовка, в отличие от кода, который был приведен выше.
Как добавить свою ссылку для заголовока виджета в WordPress?
Иногда разработчику нужно сделать заголовок виджета в виде ссылки. Например, вы выводите блоки популярных работ из портфолио в сайдбаре или на главной и вам нужно сделать ссылку в заголовке виджета на общую категорию с реализованными проектами.
Для решения этой задачи я буду использовать плагин – «HTML Widget Titles» (разработчик Jaimyn Mayer). Устанавливаем и активируем его. При поиске плагина в админке можете задавать фразу «HTML Widget Titles Jaimyn Mayer».
Переходим в раздел «Внешний вид» — «Виджеты».
Открываем интересующий виджет и добавляем в поле заголовок, следующий код.
[a href=http://www.yourlink.com]Your Title[/a]Вы указываете свое название виджета и ссылку.
Вот как это должно выглядеть. Нажимаем «Сохранить». В виджете сверху должна добавиться ваша ссылка, например вот так.
После этого ваш заголовок виджета отобразиться в виде ссылки.
Если хотите, чтобы ссылка открывалась в новом окне браузера, то укажите следующий код.
[a href=http://www.yourlink.com target=_blank]Your Title[/a]Как поменять html структуру заголовка виджета?
По умолчанию заголовок виджетов заключают в тег, к примеру, h3 или же h2. Это не очень правильно с точки зрения seo оптимизации страниц сайта. Есть два рабочих метода, которые помогут вам поменять структуру тегов и добавить свой класс.
Меняем шаблон заголовка при регистрации виджета
Для этого идем в файл functions.php и находим примерно следующий код.
function twentynineteen_widgets_init() {
register_sidebar(
array(
'name' => __( 'Footer', 'twentynineteen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your footer.', 'twentynineteen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'twentynineteen_widgets_init' );Для изменения структуры заголовков меняем html код в полях: «before_title», «after_title».
Если такого куска кода нет, то убедитесь, зарегистрирован у вас в теме хотя бы один сайдбар. Еще нужно проверить не подключаются ли виджеты в файл functions.php путем инклуда файлов из других папок вашей темы. Такой метод работает для виджетов в сайдбаре.
Код для изменения html структуры заголовка виджета
Для этого, также переходим в файл functions.php и внизу файла добавляем следующий код.
function my_custom_widget_title_tag( $params ) {
$params[0]['before_title'] = '<div class="widget-title widgettitle">' ;
$params[0]['after_title'] = '</div>' ;
return $params;
}
add_filter( 'dynamic_sidebar_params' , 'my_custom_widget_title_tag' );Этот код изменить теги для всех заголовков в виджетах сайдбара. Вы можете внутри функции делать проверку на конкретный виджет в формате: $params[‘widget_id] или $params[‘widget_name] и редактировать только один виджет.
Как видите, во всех случаях изменения кода вы можете добавлять свои классы для заголовков этих блоков и стилизовать их на свое усмотрение.
В статье мы не рассматривали вариант скрытия заголовков виджетов с помощью css, через display:none, поскольку это только визуально убирает элемент, но код остается и в случае с seo оптимизацией проблема не решена, поэтому лучше полностью удалять или изменять код блока.