» » » Title, description, keywords и h1 для категорий товаров Woocommerce
logotip

Title, description, keywords и h1 для категорий товаров Woocommerce

Всем привет! Сегодня на seo-ayak.com по многочисленным просьбам читателей я начну разбирать плагин Woocommerce.

Не люблю я плагины, тем более те, что свои таблицы в БД создают, но Woocommerce, конечно, исключение, так как это не обычный плагин, а целый отдельный движок, со своим кодексом.

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

У меня нет действующего интернет-магазина на Woocommerce, но я его создал на локальном сервере (как создать локальный сервер) и теперь буду над ним издеваться в свое удовольствие.

Сегодня, так сказать, по горячим следам, я расскажу как вывести отдельные: title, description, keywords и h1 для категорий товаров Woocommerce. Поехали!

Мета-поля на странице редактирования категории Woocommerce

Надо сказать, что в Woocommerce, также как и в самом WordPress, предусмотрено масса различных хуков, с помощью которых, не трогая код плагина, можно воздействовать на его функционал.

Для вывода мета-полей на странице редактирования категорий товаров мы будем использовать хук product_cat_edit_form_fields.

Открываем для редактирования файл functions.php, что находится в папке с темой и вставляем такую функцию.

/* Мета-поля для категорий товаров */
add_action("product_cat_edit_form_fields", 'mayak_meta_product_cat');
function mayak_meta_product_cat($term){
	?>
		<tr class="form-field">
			<th scope="row" valign="top"><label>Заголовок (title)</label></th>
			<td>
				<input type="text" name="mayak[title]" value="<?php echo esc_attr( get_term_meta( $term->term_id, 'title', 1 ) ) ?>"><br />
				<p class="description">Не более 60 знаков, включая пробелы</p>
			</td>
		</tr>
		<tr class="form-field">
            <th scope="row" valign="top"><label>Краткое описание (description)</label></th>
			<td>
				<input type="text" name="mayak[description]" value="<?php echo esc_attr( get_term_meta( $term->term_id, 'description', 1 ) ) ?>"><br />
				<p class="description">Краткое описание (description)</p>
			</td>
		</tr>
		<tr class="form-field">
			<th scope="row" valign="top"><label>Заголовок h1</label></th>
			<td>
				<input type="text" name="mayak[h1]" value="<?php echo esc_attr( get_term_meta( $term->term_id, 'h1', 1 ) ) ?>"><br />
				<p class="description">Заголовок страницы</p>
			</td>
		</tr>
		<tr class="form-field">
			<th scope="row" valign="top"><label>Ключевые слова</label></th>
			<td>
				<input type="text" name="mayak[keywords]" value="<?php echo esc_attr( get_term_meta( $term->term_id, 'keywords', 1 ) ) ?>"><br />
				<p class="description">Ключевые слова (keywords)</p>
			</td>
		</tr>
	<?php
}

Если кто делал мета-поля для обычных категорий WordPress по моей статье, то наверное обратили внимание, что функция отличается только названием и хуком, поэтому вторую функцию можно не создавать, а просто подключить хук product_cat_edit_form_fields.

В итоге на странице редактирования категорий товаров должно появиться четыре новых поля:

Теперь нам надо сохранить данные в БД. Для это вставляем еще одну функцию:

/* Сохранение данных в БД */
add_action('edited_product_cat', 'mayak_save_meta_product_cat');  
add_action('create_product_cat', 'mayak_save_meta_product_cat');
function mayak_save_meta_product_cat($term_id){
	if (!isset($_POST['mayak']))
		return;
	$mayak = array_map('trim', $_POST['mayak']);
	foreach($mayak as $key => $value){
		if(empty($value)){
			delete_term_meta($term_id, $key);
			continue;
		}
		update_term_meta($term_id, $key, $value);
	}
	return $term_id;
}

Эта функция тоже отличается только названием и хуками, здесь также можно не создавать лишнего, а просто подключить хуки edited_product_cat и create_product_cat.

На этом сходства заканчиваются. Идем дальше.

Title для категорий товаров Woocommerce

Также, как в случаи со стандартными категориями WordPress, мы просто подменим title Woocommerce на свой.

В Woocommerce, впрочем как и в WordPress, для вывода title на страницах категорий товаров используется функция single_term_title(), в которой предусмотрен одноименный хук single_term_title, его-то мы и будем использовать для вывода своего title.

Вставляем ниже в файл functions.php:

/* Вывод title для категорий товаров */
add_filter('single_term_title', 'mayak_filter_single_cat_title', 10, 1);
add_filter( 'single_term_title', 'mayak_poduct_cat_title', 10, 1); 
function mayak_filter_single_cat_title() {
    $pci =  get_queried_object()->term_id;
    return get_term_meta ($pci, 'title', true);
}
function mayak_poduct_cat_title($pct){
    if(empty($pct)){
	    $pct = get_queried_object()->name;
	}
	return $pct;
}

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

Заголовок h1 для категорий товаров Woocommerce

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

В конце концов h1 предназначен больше для пользователей и заголовок целой рубрики должен отличаться от названия в меню и давать белее развернутое представление о странице.

Сегодня мы исправим эту ситуацию. Функция:

if(strpos($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'], '/product-category/'))
add_filter ( 'woocommerce_show_page_title' , 'mayak_woocommerce_product_cat_h1' , 10 , 2 ); 
function mayak_product_cat_h1(){
	$pch = get_term_meta (get_queried_object()->term_id, 'h1', true);
    echo '<h1 class="woocommerce-products-header__title page-title">'.$pch.'</h1>';
	if(empty($pch)){
	   echo	'<h1 class="woocommerce-products-header__title page-title">'.get_queried_object()->name.'</h1>';
	}
}
function mayak_woocommerce_product_cat_h1(){ 
    return  mayak_product_cat_h1($pch);     
}

Здесь также предусмотрен вывод заголовка h1 из названия категории товаров в случаи, если поле h1 по каким-то причинам окажется пустым.

В Woocommerce есть хук woocommerce_show_page_title, который срабатывает перед выводом заголовка из названия на экран и если это хук задействован, то заголовок из названия уже браться не будет, а будет выводится наш h1.

Очень удобный хук, в сборке WordPress такого нет.

В функции для h1 я задал css-классы, взятые из самого плагина, но если есть необходимость, можно вписать свои.

Отделенный description для категорий Woocommerce

Тут я не буду вдаваться в подробности, скажу лишь, что, если поле «Краткое описание» не будет заполнено, то description будет выведен по умолчанию, т.е. взят из описания категории.

/* Вывод description для категорий товаров */
add_action('wp_head', 'mayak_description_product_cat', 1, 1);
function mayak_description_product_cat(){
	if(is_product_category()){ 
	$pcd = get_term_meta (get_queried_object()->term_id, 'description', true);
	if(!empty($pcd)){
	$meta = '<meta name="description"  content="'.$pcd.'"/>'."\n";
	}
    else {		   
	   $pcd = wp_filter_nohtml_kses(substr(category_description(), 0, 280));
	   $meta = '<meta name="description"  content="'.$pcd.'"/>'."\n";	   
	}
	echo $meta;
	}
}

У нас осталось вывести ключевые слова. Кто-то может сказать, что поле keywords можно и не делать и отчасти они правы, но только отчасти, так как Яндекс и другие менее значительные поисковики возможно, повторяю, возможно, учитывают ключевые слова, если они составлены по правилам.

Поэтому и нам не стоит пренебрегать keywords.

Keywords для категорий товаров Woocommerce

Функция простая и расписывать тут нечего:

/* Вывод keywords для категорий товаров */
add_action('wp_head', 'mayak_keywords_product_cat', 1, 1);
function mayak_keywords_product_cat(){
	if(is_product_category()){
	$pck = get_term_meta (get_queried_object()->term_id, 'keywords', true );
	$aut = '<meta name="keywords" content="'.$pck.'">'."\n";
	}
	echo $aut;
}

На этом у меня все. Если что-то не получается, пишите в комментариях, постараюсь помочь и подписывайтесь на обновления блога, будет интересно!

Дополнение

После внедрения вышеописанного функционала, многие веб-мастера сетовали, что на стартовой странице магазина в заголовок h1 выводиться слово «Product» (по умолчанию «Магазин»).
Причина: просто отключается перевод.
Я написал функцию, в тело которой можно вписать любой текст заголовка (Строка №3):

add_filter ( 'woocommerce_show_page_title' , 'mayak_product_shop_h1' , 10 , 2 );
function mayak_product_shop_h1(){
$product = "Сюда можно вписать любой текст";
if(strpos($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'], '/shop'))
echo '<h1 class="woocommerce-products-header__title page-title">'.$product.'</h1>';
}

Также надо заново скопировать функцию вывода заголовка h1 для категорий, так как в нее были внесены изменения, а именно первой строкой было добавлено условие:

if(strpos($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'], '/product-category/'))

До встречи!

С уважением, Виталий Кириллов

Статьи по теме:

Title, description, keywords и h1 для категорий (рубрик) WordPress
Картинки для категорий (рубрик) — изображения WordPress
Редактор для категорий (рубрик), меток и произвольных таксономий
Шаблоны для категорий WordPress. Как сделать каталог из рубрики
Категории WordPress — термы и таксономии
wp_list_categories() — как выводить рубрики WordPress

Комментарии: 40

  1. Kowalski:

    Виталий, зря вы плагины не любите. Многие приносят много пользы и никакого торможения, как некоторые говорят 😀

    Ответить
    • Виталий Кириллов:

      Дело в том, что WordPress постоянно обновляется и некоторые плагины просто не успевают за этими обновлениями, что приводит к разным проблемам.
      Также некоторые плагины после удаления плохо за собой подчищают, оставляя таблицы в БД и прочие хвосты.
      Про различные конфликты я вообще молчу.
      Тут опять же плагин плагину рознь…

      Ответить
  2. Егор:

    Здравствуйте, Виталий. Давно пора разобрать Woocommerce WordPress. Буду следить за обновлениями статей. Кстати, не пробовали Open Server вместо Denver? Намного интересней сервак, и обновляется по мере выхода PHP версий и прочего. Альтернатива данным кодам Yoast Woocommercе по моему?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Егор!
      Насколько я знаю h1 Yoast Woocommercе не выводит.
      Что касается Open Server, просто не пробовал, возможно стоит.

      Ответить
  3. AutoGlass:

    Спасибо

    Ответить
  4. Дима:

    Добрый день!
    Почему то не получает имя категории для h1. Если в новом поле заполненно то всё хорошо выводит. А если поле H1 не заполненно то должен брать из заголовка страницы. Чего не происходит.

    Ответить
    • Виталий Кириллов:

      Здравствуйте, Дмитрий!
      Функцию поправил, проверьте.

      Ответить
  5. Roman:

    Подскажите, а есть ли аналогичное решение для товаров непосредственно?

    Ответить
    • Виталий Кириллов:

      Я думаю можно попробовать, будет время поэкспериментирую.

      Ответить
  6. felix:

    Приветствую.

    Добавление скриптов в фанкшн пхп не двёт результатов? С чем может быть связано?

    WordPress 4.4.14 с темой оформления Nova WP.
    WooCommerce Версия 2.5.5
    В системе установлен All in One SEO Pack.

    Ответить
    • Виталий Кириллов:

      Скорее всего связано с темой. Я уже сталкивался с такими проблемами.
      Попробуйте вставить код в один из подключенных к functions.php файлов.

      Ответить
  7. Николай:

    Не работает вывод h1. Вставил в functions.php но ничего в админке не появилось

    Ответить
    • Виталий Кириллов:

      Функцию поправил, проверьте.

      Ответить
      • Pavel:

        Все также и не работает метод с H1(если внедрять только код связанный с ним)
        Посмотрел в исходном коде страницы, поискал H1 — там, название категории товара просто уходит за сам тег. А при добавлении еще одного H1 в админке ручным способом — будет просто два тега H1

        Ответить
        • Pavel:

          Возможно есть альтернативный способ решения проблемы?
          Необходимо просто внедрять вручную H1 тег для категории, чтобы лучше индексировались страницы

          Ответить
          • Виталий Кириллов:

            Функцию вывода h1 поправил.
            У меня все ровно отображается.
            Вроде все протестил.

            Ответить
  8. Александр:

    Вроде все вставил, а выдает такую ошибку

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘mayak_meta_product_cat ‘ not found or invalid function name in /home/rbsa/mirstankov.com/www/wp-includes/class-wp-hook.php on line 288

    Ответить
  9. Дмитрий:

    Виталий, здравствуйте! Текст внизу категорий у меня стоит, но не могли бы Вы помочь с выводом текста в атрибутах. Чтобы от тоже был снизу. А то описания производителя и других атрибутов хорошо двигают сайт, но мешают посетителям. napitkistore.ru/proizvoditel/mountain_dew/

    Ответить
  10. Ромчик:

    Спасибо, это то, что я искал! НО как сделать так, чтобы если поля не заполнены, то не выводились пустые метатеги, типа ? Просто вдруг это может повлиять на индексацию страницы, которая уже проиндексирована без метатегов?

    Ответить
  11. Егор:

    Внес изменения в functions.php. К редактировании категорий поля для ввода мета-поля НЕ появились, но появилось следующее сообщение:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘mayak_meta_product_cat ‘ not found or invalid function name in /home/elettrico/public_html/wp-includes/class-wp-hook.php on line 300

    Подскажите, как поправить. Спасибо.

    Ответить
    • Виталий Кириллов:

      Вы функцию полностью скопировали?

      Ответить
      • Егор:

        да весь код, а есть значение куда вставлять? я попробовал в самый низ (после всего кода) и в самый верх сразу после «<?php». Я только не вставил часть про запись в базу данных, боюсь что-то испортить в базе.

        Сейчас заново добавил код, но выдает туже ошибку.
        Сейчас код выглядит так с самого начала файла:

        Заголовок (title)

        <input type="text" name="mayak[title]" value="term_id, ‘title’, 1 ) ) ?>»>
        Не более 60 знаков, включая пробелы

        Краткое описание (description)

        <input type="text" name="mayak[description]" value="term_id, ‘description’, 1 ) ) ?>»>
        Краткое описание (description)

        Заголовок h1

        <input type="text" name="mayak[h1]" value="term_id, ‘h1’, 1 ) ) ?>»>
        Заголовок страницы

        Ключевые слова

        <input type="text" name="mayak[keywords]" value="term_id, ‘keywords’, 1 ) ) ?>»>
        Ключевые слова (keywords)

        term_id;
        return get_term_meta ($pci, ‘title’, true);
        }
        function mayak_poduct_cat_title($pct){
        if(empty($pct)){
        $pct = get_queried_object()->name;
        }
        return $pct;
        }

        add_filter ( ‘woocommerce_show_page_title’ , ‘mayak_woocommerce_product_cat_h1’ , 10 , 2 );
        function mayak_product_cat_h1(){
        $pch = get_term_meta (get_queried_object()->term_id, ‘h1’, true);
        echo ».$pch.»;
        if(empty($pch)){
        echo get_queried_object()->name;;
        }
        }
        function mayak_woocommerce_product_cat_h1(){
        return mayak_product_cat_h1($pch);
        };

        /* Вывод description для категорий товаров */
        add_action(‘wp_head’, ‘mayak_description_product_cat’, 1, 1);
        function mayak_description_product_cat(){
        if(is_product_category()){
        $pcd = get_term_meta (get_queried_object()->term_id, ‘description’, true);
        if(!empty($pcd)){
        $meta = ».»\n»;
        }
        else {
        $pcd = wp_filter_nohtml_kses(substr(category_description(), 0, 280));
        $meta = ».»\n»;
        }
        echo $meta;
        }
        }

        /* Вывод keywords для категорий товаров */
        add_action(‘wp_head’, ‘mayak_keywords_product_cat’, 1, 1);
        function mayak_keywords_product_cat(){
        if(is_product_category()){
        $pck = get_term_meta (get_queried_object()->term_id, ‘keywords’, true );
        $aut = ».»\n»;
        }
        echo $aut;
        }

        Далее начинается изначальный код файла:

        /*
        * theme functions
        */

        // Define theme name
        define( …

        Ответить
        • Виталий Кириллов:

          Ну вот ошибку вижу:

          echo get_queried_object()->name;;

          Два раза точка с запятой прописана.

          Ответить
          • Егор:

            Спасибо большое за ответ, исправил «;;» на «;», но все равно на странице категории не появились поля для мета данных и давет туже ошибку Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘mayak_meta_product_cat ‘ not found or invalid function name in /home/elettrico/public_html/wp-includes/class-wp-hook.php on line 300

            (P.S. вы используете какую-то программу для поиска ошибок кода (могли бы поделиться названием?) или просто опыт и наметанный глаз позволяет найти ошибки кода?)

            Сейчас код functions.php выглядит так:

            Заголовок (title)

            <input type="text" name="mayak[title]" value="term_id, ‘title’, 1 ) ) ?>»>
            Не более 60 знаков, включая пробелы

            Краткое описание (description)

            <input type="text" name="mayak[description]" value="term_id, ‘description’, 1 ) ) ?>»>
            Краткое описание (description)

            Заголовок h1

            <input type="text" name="mayak[h1]" value="term_id, ‘h1’, 1 ) ) ?>»>
            Заголовок страницы

            Ключевые слова

            <input type="text" name="mayak[keywords]" value="term_id, ‘keywords’, 1 ) ) ?>»>
            Ключевые слова (keywords)

            term_id;
            return get_term_meta ($pci, ‘title’, true);
            }
            function mayak_poduct_cat_title($pct){
            if(empty($pct)){
            $pct = get_queried_object()->name;
            }
            return $pct;
            }

            add_filter ( ‘woocommerce_show_page_title’ , ‘mayak_woocommerce_product_cat_h1’ , 10 , 2 );
            function mayak_product_cat_h1(){
            $pch = get_term_meta (get_queried_object()->term_id, ‘h1’, true);
            echo ».$pch.»;
            if(empty($pch)){
            echo get_queried_object()->name;
            }
            }
            function mayak_woocommerce_product_cat_h1(){
            return mayak_product_cat_h1($pch);
            };

            /* Вывод description для категорий товаров */
            add_action(‘wp_head’, ‘mayak_description_product_cat’, 1, 1);
            function mayak_description_product_cat(){
            if(is_product_category()){
            $pcd = get_term_meta (get_queried_object()->term_id, ‘description’, true);
            if(!empty($pcd)){
            $meta = ».»\n»;
            }
            else {
            $pcd = wp_filter_nohtml_kses(substr(category_description(), 0, 280));
            $meta = ».»\n»;
            }
            echo $meta;
            }
            }

            /* Вывод keywords для категорий товаров */
            add_action(‘wp_head’, ‘mayak_keywords_product_cat’, 1, 1);
            function mayak_keywords_product_cat(){
            if(is_product_category()){
            $pck = get_term_meta (get_queried_object()->term_id, ‘keywords’, true );
            $aut = ».»\n»;
            }
            echo $aut;
            }

            Далее начинается изначальный код файла:

            /*
            * theme functions
            */

            // Define theme name
            define( …

            Ответить
          • Егор:

            Работает, спасибо!

            только H1 не отображается, я так понял я не единственный у кого такая проблема. В конце кода для Н1 стоит «};», эта «;» не лишняя?

            Ответить
            • Виталий Кириллов:

              Вы правы Егор, точка с запятой лишняя, поправил.
              Спасибо!

              Ответить
  12. Алекс:

    Все сделал, как написано. Меняю h1 в категории, на странице — ничего не меняется

    Ответить
    • Виталий Кириллов:

      Была лишняя точка с запятой на конце функции, вот и ошибка.
      Видимо недоглядел при публикации.

      Ответить
  13. Александр:

    Добрый день. Такая проблема возникла. На главной странице каталога, это либо /categories/ либо /shop/ почему-то выводится H1 как Products. Найти не могу в коде, не подскажете куда копать? Заранее спасибо.

    Ответить
    • Антон:

      И у меня такая же проблема… Подскажите, как от этого избавиться?

      Ответить
  14. Павел:

    Добавил хук, работае, спасибо. А если на сайте 1000 категорий и постоянно обновляется ассортимент. Как проще выгружать их и заливать обратно после корректировки?

    Ответить
  15. Марат:

    Спасибо тебе добрый человек, очень все помогло и вроде встало сразу как надо, респект

    Ответить
  16. Александр:

    Спасибо за статью, на выходных попробую вставить. При проверке аудита сайта пишет: «ключевые слова не найдены». Хотя ключевые везде вставлялись. Попробую с вашим хуком вставить и проверить.
    На woocommerce еще при проверке показывает всегда, кеш браузера, js в верхней части и т.д. Хотя уже оптимизировал по нескольку раз. То нормально, то опять начинает показывать. С этими проблемами не подскажите, статьи нет у Вас про них?

    Ответить
  17. Александр:

    А и еще……… Для созданных товаров при Вашем хуке………опять в каждом товаре придется ключи, заголовки и т.д. вводить? А если 100…….1000.. товаров и т.д. Есть способ как-то «пачками» вводить?

    Ответить
  18. Ибрагим:

    А как быть если я не хочу выводить на страницу всех товаров(не категории) не хочу выводить h1, сейчас выводится стандартно «Product», даже не знаю откуда взялось…

    Ответить
    • Виталий Кириллов:

      Статью дополнил.

      Ответить
  19. Руслан:

    Спасибо!

    Ответить
  20. Михаил:

    Спасибо большое, помогли очень. А еще подскажите пожалуйста, как можно сделать так чтобы в H1 в карточке товаров выходило еще и краткое описание или какой-либо дополнительный текст?

    Ответить
    • Виталий Кириллов:

      Функция вывода краткого описания в карточку товара:

      add_action( 'woocommerce_after_shop_loop_item_title', 'mayak_preview_product_cat', 9 );
      function mayak_preview_product_cat() {
      	  echo the_excerpt();
      }
      Ответить
  21. Александр:

    К сожалению, результатов с морды сайта не наблюдается… Код вставился, в админке все нормально, а title вообще непонятно откуда берется, таких слов-то нет на сайте.

    Ответить

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

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS