Архив рубрики: WordPress

Первичное SEO для WordPress

Список мероприятий по первичной поисковой оптимизации сайта.

  1. Добавить файл robots.txt
  2. Настроить SEO-плагин
    • Для формирования карты сайта
    • Для заполнения метатегов по шаблону
  3. Установить счётчики аналитики:
    • Яндекс.Метрика
    • Google Analytics
  4. Добавить сайт в панель вебмастера
    • Яндекс Вебмастер
    • Google Search Console
  5. Очевидные мероприятия, но вдруг

Добавить robots.txt

Файл robots.txt — это простой текстовый файл с инструкциями для поисковиков, какие раздела сайта можно индексировать, а какие нельзя. Например, в интернет-магазине не нужно индексировать страницы корзины и оформления заказа.

Как настроить:

Правильный robots.txt для WooCommerce

Настроить SEO-плагин

Мы, в студии, используем плагин Yoast SEO. Но, в принципе, подобные плагины позволяют генерировать карту сайта sitemap.xml и заполнять мета-теги Title и Description с помощью шаблонов.

Как настроить:

Яндекс Вебмастер

Подтверждаем права на сайт, привязываем счётчик Яндекс Метрики.

  • Загружаем xml-фид для товаров
  • Добавляем региональность сайта
  • Получаем знак проверенного магазина

Очевидные мероприятия

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

  • Установить SSL-сертификат
  • Добавить favicon
  • Проверить, что дизайн адаптивный

Сообщение Первичное SEO для WordPress появились сначала на Веб-студия Юсота.


Source: usota.ru knowledge-base

WooCommerce — как сократить длинные названия товаров

Полные названия товаров

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

Сократить до одной строки с многоточием

Названия товаров в одну строчку
Названия товаров в одну строчку

В настройках стилей темы изменить CSS свойства заголовка товаров:

h2.woocommerce-loop-product__title {
	white-space: nowrap; /* Отключаем перенос строк */
	overflow: hidden; /* Скрываем текст за пределами блока */
	text-overflow: ellipsis; /* Добавляем троеточие */
}

Сократить названия товаров до нескольких строк

Показывать полное наименование при наведении
Показывать полное наименование при наведении

Если предыдущий способ не подходит, можно сократить до нескольких строк. Да, мы теряем красивое троеточие. Но можем показывать полное название при наведении на карточку товара.

@media (min-width: 768px) {
	h2.woocommerce-loop-product__title {
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Покажем полное название при наведении на карточку */
	.site-main ul.products.columns-4 li.product:hover h2.woocommerce-loop-product__title {
		color: grey;
		font-size: 1em!important;
		white-space: normal;
	}

	.site-main ul.products.columns-4 li.product:hover {
		box-shadow: 0px 5px 5px #ccc;
	}
}

Обратите внимание на медиа-запрос @media (min-width: 768px) . Это означает, что данные CSS-свойства будут работать только на десктопах. На планшетах и мобильных устройствах свойство hover не должно работать, так как нет эффекта наведения мышью.

Сообщение WooCommerce — как сократить длинные названия товаров появились сначала на Веб-студия Юсота.


Source: usota.ru woocommerce

WooCommerce – изображение по ссылке для внешних/партнёрских товаров

Для сайтов с большим количеством партнёрских товаров можно не загружать изображения на хостинг, а использовать фотографию по ссылке.

Плюс – экономим место на хостинге. Помните, что WordPress при загрузке изображения, создаёт от 3 и выше копий разных размеров. Это нужно для оптимизации загрузки изображений на различных страницах сайта. Используя внешнее изображение, вы не создаёте лишние копии.

Минус – адрес изображение со временем может измениться, поэтому нужно эту ситуацию отслеживать. Фото может быть удалено, переименовано, перенесено на другой адрес или по другим причинам.

Этапы работы:

  • создаём произвольное поле, в котором будем хранить url изображения
  • включаем сохранение информации в базу данных
  • выводим изображение в карточке товара
  1. Добавим произвольное поле в “Данные о товаре” на вкладку “Основные”:
add_action( 'woocommerce_product_options_pricing', 'usota_add_to_products_external_image_url' );      
function usota_add_to_products_external_image_url() {          
    woocommerce_wp_text_input( array( 
        'id' => '_external_image_url', 
        'class' => 'short', 
        'label' => 'Image URL',
        'data_type' => 'url', 
    ));      
}
Поле для ссылки на внешнее изображение
Поле для ссылки на внешнее изображение

2. Включаем сохранение данных:

add_action( 'save_post_product', 'usota_save_external_image_url' );
  
function usota_save_external_image_url( $product_id ) {
    global $typenow;
    if ( 'product' === $typenow ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
        if ( isset( $_POST['_external_image_url'] ) ) {
            update_post_meta( $product_id, '_external_image_url', $_POST['_external_image_url'] );
        }
    }
}

3. Выводим на странице товара. Также добавим Alt-текст для изображения.

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'usota_public_image_external_image', 100, 2 );
 
function usota_public_image_external_image( $html, $post_thumbnail_id ) {
    global $product;
    if ( ! $product->is_type( 'external' ) ) return $html;
   
    $external_image_url = get_post_meta( $product->get_id(), '_external_image_url', true );

    if ( $external_image_url ) {
        
        $alt_text = $product->get_title();

        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( $external_image_url ), $alt_text );
        $html .= '</div>';
    } else {
        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }
    
    return $html;
}

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

Но можно загрузить только уменьшенную копию. Этого будет достаточно, чтобы товары смотрелись красиво, но и фотографии много места не занимали.

Весь код полностью, чтобы сразу добавить в functions.php

/**
 * Выводим изображение в карточке товара по внешнией ссылке
 * для внешних/партнёрских товаров
 */
  
// Добавляем произвольное поле external_image_url в данные о товаре
  
add_action( 'woocommerce_product_options_pricing', 'usota_add_to_products_external_image_url' );      
function usota_add_to_products_external_image_url() {          
    woocommerce_wp_text_input( array( 
        'id' => '_external_image_url', 
        'class' => 'short', 
        'label' => 'Image URL',
        'data_type' => 'url', 
    ));      
}
  
// Сохраняем произвольное поле external_image_url
  
add_action( 'save_post_product', 'usota_save_external_image_url' );
  
function usota_save_external_image_url( $product_id ) {
    global $typenow;
    if ( 'product' === $typenow ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
        if ( isset( $_POST['_external_image_url'] ) ) {
            update_post_meta( $product_id, '_external_image_url', $_POST['_external_image_url'] );
        }
    }
}
  
// Выводим external_image_url в карточке товара на месте изображения товара
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'usota_public_image_external_image', 100, 2 );
 
function usota_public_image_external_image( $html, $post_thumbnail_id ) {
    global $product;
    if ( ! $product->is_type( 'external' ) ) return $html;
   
    $external_image_url = get_post_meta( $product->get_id(), '_external_image_url', true );

    if ( $external_image_url ) {
        
        $alt_text = $product->get_title();

        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( $external_image_url ), $alt_text );
        $html .= '</div>';
    } else {
        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }
    
    return $html;
}

Сообщение WooCommerce – изображение по ссылке для внешних/партнёрских товаров появились сначала на Веб-студия Юсота.


Source: usota.ru woocommerce

Python — как подключиться к базе данных MySQL на хостинге

Для работы с MySQL в Python используется библиотека pymysql. Но чтобы подключиться с локальной машины к базе данных, которая расположена на сервере, используем библиотеку sshtunnel.

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

Перед подключением убедитесь, что на хостинге разрешен доступ по SSH. Читать

WooCommerce — экспорт дерева категорий с помощью API

В предыдущей статье мы рассмотрели как получить дерево категорий с помощью стандартного экспорта WooCommerce.

Но этот способ с кучей недостатков:

  • медленно
  • у товара может быть несколько категорий
  • неизвестно id категории

А вот с помощью API мы можем получить удобную таблицу с ID и полным путём категории.

Пример таблицы экспорта дерева категорий

Скрипт написан на языке Python.

Возможно написано топорно, но задачу свою решает.

Сообщение WooCommerce — экспорт дерева категорий с помощью API появились сначала на Веб-студия Юсота.


Source: usota.ru python

Как бесплатно ускорить WordPress

Скорость веб-сайта – одна из самых важных вещей, о которых вам следует помнить, когда вы ведете бизнес с использованием веб-сайта. Если время загрузки вашего сайта задерживается, всего за одну секунду вы можете столкнуться со следующими последствиями:

 

  • Просмотр страницы уменьшился на 11%
  • Удовлетворенность клиентов снижается на 16%
  • Конверсия снизилась на 7%

Читать