WordPress

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

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

В этом уроке мы пройдем процесс установки и первичной настройки магазина на WooCommerce.

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

WooCommerce предлагает возможность создания категорий товаров. Каждой категории можно указать ее название, описание, а также прикрепить изображение категории. Кроме того, плагин позволяет сортировать категории и управлять вариантами отображения категорий. Обо всех этих возможностях вы узнаете из данного урока.

WooCommerce из коробки предлагает сразу четыре типа товаров: простой, вариативный, сгруппированный и партнерский. В этом уроке мы рассмотрим первый тип товара – простой. По сути – это стандартный товар любого интернет-магазина. Для этого товара можно указать название и описания, стандартную и акционную цены, изображения, атрибуты, запасы, габариты и многое другое.

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

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

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

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

Следующим типом товара, который будет рассмотрен в предлагаемом уроке, будет сгруппированный товар. По сути, сгруппированный товар – это несколько простых товаров, которые вы можете захотеть представить в группе, чтобы предоставить покупателю возможность приобрести эти товары в рамках группы. Простой пример: телефон + чехол. Это два отдельных товара, которые можно объединить в группу.

Третий тип товара – товар вариативный. С ним вы познакомитесь в текущем уроке. Данный тип товара предполагает вариации одного и того же товара, отличающиеся атрибутами. Например, одна и та же модель телефона может иметь несколько вариаций цветов или же объема памяти. При этом каждая вариация может иметь свою цену. Чтобы не создавать несколько товаров, WooCommerce позволяет создавать один товар и в рамках этого товара создать нужное количество его вариаций.

В этом уроке вы познакомитесь с последним типом товара в WooCommerce – это внешний или партнерский товар. Это самый простой тип товара. На самом деле этот товар не продается на сайте, а просто представлен в виде рекламы, т.е. ваш магазин просто рекламирует товар другого магазина и предлагает приобрести этот товар у партнера.

Как уже отмечалось, WooCommerce предлагает огромное количество самых разных настроек. Это настройки магазина, настройки товаров, настройки доставки и оплаты, настройки пользователей и многие другие. В этом уроке будут рассмотрены ключевые настройки интернет-магазина на WooCommerce.

Кроме основных настроек, WooCommerce также предлагает отдельно настроить варианты доставки и оплаты. При этом уже из коробки плагин предлагает достаточно гибко это сделать и в большинстве случаев вам даже не придется искать дополнительные расширения для этих настроек. В уроке вы увидите, как настроить варианты доставки и оплаты в интернет-магазине на WooCommerce.

Одной из интересных возможностей, которые из коробки предлагает WooCommerce, является возможность продавать виртуальные и скачиваемые товары. Виртуальный товар – это, по сути, услуга. А скачиваемый товар – это файл, который можно скачать по ссылке. Отличие виртуальных товаров от прочих типов заключается в том, что данный вид товара не требует доставки. Из этого урока вы узнаете, как создать виртуальный товар.

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

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

Разрабатывая тему для WooCommerce, мы фактически начинаем с разработки темы для WordPress. Нюанс заключается в том, что эта тема должна поддерживать WooCommerce и его возможности. Как включить поддержку плагина WooCommerce в теме WordPress – вы узнаете из данного урока.

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

В данном уроке мы рассмотрим оба этих способа.

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

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

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

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

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

Очередные два урока будут отведены реализации карточки товара. Речь идет не о странице отдельного товара, а о карточке товара в списке товаров категории, витрины или же блоках типа блока рекомендуемых товаров. В уроках мы воспользуемся возможностью переопределения шаблонов, а также будем использовать хуки WooCommerce, чтобы в конечном счете получить карточку товара с нужным нам оформлением.

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

Одни из элементов юзабилити любого интернет-магазина является мини-корзина. Оформлен этот элемент может быть по-разному, но задача его одна – показывать краткую информацию о содержимом корзины и давать возможность пользователю перейти на страницу корзины. В данном уроке мы реализуем мини-корзину, используя одну из функций WooCommerce.

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

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

Сразу семь уроков будут отведены под реализацию страницы товара. Это достаточно объемная по функционалу страница. Здесь необходимо не только вывести всю возможную информацию о товаре: название, рейтинг, описание, цены, атрибуты, отзывы, фотографии. Но здесь также нужно предусмотреть возможность просмотра различных вариантов товара: простой, вариативный, сгруппированный или партнерский.

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

Дизайн нашего магазина предполагает простой вариант мини-корзины, в котором показывается только количество товаров и предоставляется ссылка для перехода на страницу корзины. Однако нередко мини-корзина реализуется с показом списка товаров в popup-окне. В этом уроке будет показана возможная реализация данного функционала.

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

Последние несколько уроков курса будут посвящены страницам пользователя. И в данном уроке будут созданы страницы регистрации и авторизации. На самом деле в WooCommerce они представлены одной странице. Пользователь на одной странице видит формы регистрации и авторизации. Соответственно, через форму входа он сможет авторизоваться на сайте, а через форму регистрации – зарегистрировать новый аккаунт.

В этом уроке будет создана страница аккаунта пользователя. На эту страницу пользователь попадает сразу после авторизации на сайте. Здесь представлены все необходимые ссылки типового личного кабинета пользователя.

Одной из ключевых страниц личного кабинета пользователя является страница просмотра заказов и страница отдельного заказа. На странице заказов покупатель может увидеть список всех совершенных заказов с краткой информацией о каждом из них. А при переходе к конкретному заказу покупатель уже увидит всю информацию о совершенном заказе.

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

WooCommerce – это плагин с хорошей поддержкой, а это значит, что он достаточно часто обновляется. Из этого урока вы узнаете, как обновить плагин до последней актуальной версии (в курсе – с версии 6.9 до версии 7.0).

Тема для WooCommerce фактически готова. Остается последний шаг – локализация темы, чтобы ее можно было использовать на разных языках. В этом уроке тема будет подготовлен для перевода и реализована ее локализация на английском и русском языках.