WooCommerce с шорткодами: Простая интеграция в WordPress

Каждому, кто хочет продавать товары онлайн, нужен магазин, либо как отдельное решение, либо пристыкованный к существующему сайту. Инструмент электронной коммерции WooCommerce является одним из самых популярных решений для магазинов. Он был запрограммирован как плагин для интернет-магазинов в CMS WordPress, причем базовая версия бесплатна. С помощью так называемых шорткодов компоненты WooCommerce можно легко интегрировать в другие элементы сайта. Мы покажем вам некоторые важные шорткоды, а также дадим советы по их использованию для вашего онлайн-бизнеса.

По сути, шорткод — это большие участки кода в более короткой форме. Шорткоды программируются как функции и получают уникальное имя. С помощью этих «шорткодов» определенные компоненты или процессы могут быть интегрированы в элементы сайта без особых знаний программирования. Структура шорткодов в WordPress закреплена в CMS. Они записываются в квадратных скобках. Например, чтобы использовать плагин WordPress «Responsive Lightbox & Gallery» для вставки галереи в любое место существующей страницы или поста:

Строка «rl_gallery» — это фактический шорткод, а именно заполнитель для инструкции «поместить галерею в эту позицию на странице или в посте». ID» определяет, какая галерея будет вставлена из существующих. Форма [shortcode attribute=»123″ argument=»abc» … ] используется для всех шорткодов.

Другая форма шорткода состоит из строки

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

В системе магазинов WooCommerce шорткоды используются для выборочного отображения содержимого магазина. Благодаря разнообразию дополнительной информации в отдельных шорткодах можно создать множество специальных изображений для продвижения продажи товаров из магазина. Например, это компоненты на страницах сайта с таким содержанием, как «Клиенты, купившие X, также купили Y и Z», «Самое продаваемое устройство в этой категории» или «На этой распродаже осталось всего 3 дня — успейте купить». Как это реализуется в деталях, будет показано ниже на примере небольшого магазина WooCommerce.

Для практического использования WooCommerce после установки плагина уже созданы страницы с такими шорткодами, как «Мой аккаунт», «Корзина» или «Оформление заказа». Если вы откроете страницу «Корзина» в панели управления, визуальный редактор покажет шорткод напрямую. Если посмотреть в текстовом редакторе, то можно увидеть, что этот код заключен в скрытый HTML-код, что указывает на то, что шорткод встроен. Таким образом, шорткод также виден в визуальном редакторе:

Основой любого интернет-магазина являются товары. Так обстоит дело и с WooCommerce, доступным через приборную панель WordPress.

Первый шорткод с аргументами уже может быть использован с этим идентификатором продукта. Чтобы добавить товар на страницу или в пост, используя его индивидуальный ID, вы будете использовать:

Если необходимо отобразить несколько товаров, идентификаторы должны быть объединены в строку и разделены запятыми:

Аргумент «ids» всегда пишется во множественном числе, независимо от того, используется один или несколько ID. Размещение отдельных продуктов все еще является исключением, так как несколько продуктов вместе обычно имеют больше смысла.

Другие аргументы могут быть использованы с шорткодом products:

Отдельные аргументы вызывают:

• limit: ограничение количества отображаемых продуктов
• orderby: различные способы сортировки вывода, например, по ID, дате, популярности (если используется в магазине), встречаемости в постах или случайным образом
• порядок: сортировка по возрастанию или убыванию (ASC/DESC) выбранного аргумента orderby
• видимость: определяет, будут ли продукты видны в магазине и в результатах поиска
• paginate: включает постраничную сортировку для обширных предложений товаров. Атрибут активации — «true». Значение «false» является предустановленным.
• columns: количество колонок на странице товара магазина. Важный атрибут для четкой организации страниц.

Дополнительные аргументы, такие как «атрибут», «условия», «категория» или «тег», помогают выбрать отображение товара с помощью специальных критериев в соответствии с содержанием. Важным аргументом является так называемый SKU (Stock Keeping Unit) — термин, используемый в розничной торговле. Это уникальный код, который присваивается одному товару. Аргумент «sku» также применим к шорткодам товаров WooCommerce. В то же время SKU — это проверенное средство систематического управления всеми товарами.

Шорткод в примере магазина:

Это отобразит только два продукта, именно те, которые имеют название категории «Фотооборудование». Аргумент правильно работает с обозначением категории «фотооборудование», а также со слизью «фотооборудование». Если затем ввести «цифровые консультации», разделенные запятыми, то на сайте магазина будут перечислены все соответствующие товары. Это пример плавного перехода для шорткодирования категорий.

Для этой задачи используйте [product_category]. Таким образом, категория отображается в совокупности, которая должна быть представлена атрибутами, разделенными запятыми, такими как «ids» или «category».

Шорткод [product_categories] во множественной форме перечисляет все имеющиеся в магазине категории. Это может быть полезно, например, в качестве обзора по одному товару, чтобы создать дополнительные стимулы для покупки.

То, что работает с продуктами, может быть так же легко реализовано с дополнительным контентом во вселенной WooCommerce. С помощью этого шорткода вы можете интегрировать отдельный продукт в качестве страницы:

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

Если продукт описан по-другому, функция «Добавить в корзину» (на иллюстрации справа) также может быть интегрирована в нужную страницу или пост WordPress с помощью этого шорткода:

Доступ к (красиво заполненной) корзине осуществляется с помощью шорткода [woocommerce_cart]:

Поэтому этот раздел процесса покупки можно использовать в любом месте сайта. То же самое относится и к оформлению заказа, которое интегрируется с помощью шорткода [woocommerce_checkout].

Используя [woocommerce_order_tracking], покупатель может увидеть статус своего заказа после входа в магазин. Для этого покупатель должен ввести данные своего заказа. Этот шорткод не имеет аргументов.

Все заказы отображаются на странице «мой счет» с помощью шорткода [woocommerce_my_account]. Количество отображаемых заказов может быть ограничено. Значение «-1» показывает все заказы.

Чтобы использовать собственные шорткоды в WordPress, необходимо изменить файл functions.php. Именно здесь вы можете определить нужные шорткоды с помощью собственных функций, которые вы запрограммировали сами.

Один из вариантов может выглядеть следующим образом. Это было проверено на существующем сайте WordPress без сообщения об ошибке:

На каждой странице и в каждом посте, где используется определенный шорткод [myshortcode], в качестве заголовка появляется вывод «Здравствуйте, владелец программирует сам себя».

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

Этот плагин поможет вам настроить магазин WooCommerce с помощью более чем 60 функций и шорткодов. С их помощью можно создать красивые страницы магазина и благодарности в дополнение к стандартным страницам. Среди других возможностей — ограничение контента, адаптация к Общему регламенту защиты данных или функции безопасности. Также можно отправлять сообщения после определенного количества заказов. Этот плагин не работает сам по себе. Он привязан к установке WooCommerce.

Плагин шорткодов для WooCommerce Shortcode Ultimate позволяет использовать более 50 шорткодов, включая живой предварительный просмотр. Плагин работает с Gutenberg, а также является достаточно отзывчивым. Разработчик обещает, что он будет работать с любой темой. Существует также платная, премиум-версия (без подписки).

Этот плагин позволяет оформлять процессы, которые сохраняются в виде четкого списка, аналогично постам или страницам в WordPress. Шорткоду присваивается имя (аналогично заголовку в посте), после чего он становится доступным в списке шорткодов, которые можно вставить. Сами шорткоды всегда начинаются следующим образом:

Содержимое может быть HTML, JavaScript или CSS. Дополнительные параметры расширяют возможности этого плагина шорткодов WooCommerce. Редактирование может осуществляться в виде кода, текста или в визуальном режиме, что делает этот плагин многофункциональным.