Мы тут решили уделить внимание рабочему функционалу админ-панели с созданием и оптимизацией товара в WordPress.
Итак, структура материала разбивается на две части:
- предварительная подготовка, сбор данных о товаре;
- перенос данных на страницу товара WordPress.
Важно обратить внимание на то, что этот материал носит сугубо прикладной информационный характер — мы показываем, как добавить товар на ВордПресс вручную, кейсы по работе с автоматами и парсерами вам придётся находить и тестировать самостоятельно.
Сбор данных о товаре и их техническая подготовка
Шаг 1 — размер фото
По умолчанию у нас уже есть фотографии, и нам необходимо проработать их размер для корректного вывода на категории и в карусели на карточке.
Например, у нашего клиента путём проб и ошибок оптимальный размер заглавной фотографии имеет размер 403х604 в вертикальном отображении, под который мы подстраиваем все иллюстрации.
При этом, если основное фото — горизонтальное, то самым правильным решением было наложение горизонтального фото на вертикальное в сервисе любого редактора. Визуально это выглядит так, что по верху и по низу фотографии присутствуют белые горизонтальные плашки.
В таком случае ссылки под фото и значки на странице “не пляшут”, а выглядят красиво и аккуратно.
Шаг 2 — вес фото
Как только вы закончили проработку фото (размер, водяные знаки, обрезка, наложение слоёв, корректировка в редакторе и проч.), необходимо сжать их вес.
Это — наиболее важный шаг в оптимизации скорости загрузки страниц, поэтому пропускать этот пункт не советуем.
Ищем подходящие сервисы по обжатию фото без потери качества и пропускаем через него все наши иллюстрации.
Шаг 3 — название фото
Все иллюстрации необходимо назвать. Допустим, у нас на компьютере они имеют имя “b06e909778d719e8b1ef7283ed0845e5.jpg”.
Если есть семантика на товар, берём самый высокочастотный запрос и переводим его в латиницу и сохраняем файл получившимся именем. Если запросов нет — переводим в транслит название товара или артикул.
Шаг 4 — тексты и мета теги
Мета теги возможно сгенерировать, а можно прописать индивидуально под каждый товар, но в первом и втором случае у нас должны быть либо паттерны, либо индивидуальные описания.
Тексты для карточек товаров не обязательны, но крайне важны уникальные характеристики каждого конкретного товара.
Создание карточки товара в WordPress
В нашем примере используются решения, которые мы оптимально подобрали под задачи и необходимости клиента, поэтому рекомендовать тот или иной плагин для какой-либо цели в рамках этого материала не будем.
Для функционала магазина мы используем универсальный доработанный нами плагин WooCommerce, который при установке превращает любой шаблон в интернет-магазин с базовым набором опций.
Плагин создаёт для нашего удобства в левом вертикальном меню пункты управления товарными категориями, нам нужно выбрать только “Товары” -> “Добавить новый”.
Если товары уже есть на сайте, мы можем с лёгкостью копировать подходящий как шаблон: в пункте “Все товары” наводим на нужный и жмём “Дублировать”. Создаётся и открывается новое окно с копией, в котором легко меняете необходимое.
В верхнем правом углу страницы мы управляем полями для заполнения информацией и, чтобы не путаться, советуем настроить эти поля один раз и забыть о них. Просто нажмите на стрелку с названием “Настройки экрана”.
Далее у нас остались лишь самые важные поля, которые нам и предстоит заполнить. Пройдёмся по каждому блоку.
Пустое поле “Название товара” означает анкор ссылки в категории и тег Н1 на самой карточке товара. Это — имя товара.
Обратите внимание, после заполнения поля у нас автоматически генерируется ссылка с копией текста из тега Н1.
Далее идёт блок описания товара. Мы работаем в режиме html-кода (вкладка “Текст”). Прописываем характеристики товара. При необходимости добавляем контент другого вида (фото внутри текста, видео, формы и проч.)
Ниже у нас выводятся мета-теги с помощью плагина Platinum Seo Pack. На данный момент скачать плагин в магазине нельзя, но мы дописали его под клиента и обновлений не делали, поэтому он отлично работает. Вам необходимо воспользоваться тем решением, который подойдёт под ваш проект.
Прописываем title и description, теги индексации index, follow всегда стоят по умолчанию.
Поле ниже о данных товара формирует плагин WooCommerce. Здесь мы выставляем тип товара, цену (конечную и со скидкой, если необходимо), артикул, статус наличия на складе, условия доставки, сопутствующие товары, примечания, атрибуты (цвет, размер, вариации) и т.д.
В нашем случае нам необходим сбор лидов на товар, которого физически нет, поэтому заполняем пункт только “Запасы” -> “Статус остатка” -> “Нет в наличии”.
Переходим из центральной части редактора в вертикальное правое меню. Здесь в блоке “Категории товаров”, которые и далее формируется с помощью ВуКоммерц отмечаем категории, к которым присваиваем данный товар.
В поле “Изображение товара” загружаем обложку товара. Она по умолчанию является основной на карточке и превью в категории.
Жмём “Задать изображение товара”, загружаем файл с компьютера или из библиотеки, если фото уже было загружено ранее. Загрузили, прописали сразу же тег Alt. Жмём “Задать изображение товара.” Аналогично добавляем фотографии в галерею.
Можно опубликовать получившийся товар и проверить его корректное отображение на сайте.
После того, как товар появился на сайте, открылось для редактирования поле работы с урл (мы писали ранее объёмный материал по работе с урлами, ознакомьтесь и действуйте). Заполняем и нажимаем “Обновить”. Проверяем на сайте.
Отображение и вид адресов вы можете настроить в меню “Постоянные ссылки”.
Мы научили вас как быстро добавить товар в WordPress вручную с попутной оптимизацией. После того, как вы закончите эту работу, не забудьте отправить все созданные товары и изменившую ассортимент категорию на переобход в Вебмастер Яндекс и сгенерировать новую карту сайта (как это сделать читайте наш полный мануал по sitemap.xml).
Успехов!
Материал написан агентством Sphinx IT специально для канала Дзен.