Самостоятельная разработка интернет-магазина на WordPress и WooCommerce

Здравствуйте, сегодня хочу дать подробную инструкцию на тему самостоятельного создания интернет-магазина на базе WordPress + WooCommerce. Многие считают WP чисто блоговым движком, раньше было именно так, но сейчас всё серьёзно изменилось. Движок поддерживает множество функций, является модульным, потому собрать можно практически что угодно.

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

Создаём интернет-магазин на базе WordPress и WooCommerce

Итог, конечно, получится немного тяжеловесный. Плагин для коммерции жрёт много ресурсов, прибавляет неплохое количество запросов к серверу, но для ИМ до 10 тыс. товаров подходит, дальше становится сложнее масштабировать, хотя неоднократно слышал про 100 тыс. товаров на сайтах. Но ссылку на таких монстров на WP+WC так никто и не сбросил.

Можно использовать PrestaShop для чистого ИМ, но блоговый функционал и возможности построения сложных многозадачных проектов у сей CMS оставляют желать лучшего. Попробуйте, например, впихнуть туда визуальный конфигуратор товара, приключений ожидает немало. Да и стоимость разработки заметно выше. Одни плагины, которые будут бесплатны для Ву, в Престе сожрут больше 200 долларов.

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

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

Этап 1: выбор домена

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

Например, мой домен coffeelake.ru однажды оказался проблемой только из-за того, что не все знают, как пишется слово coffee по-английски. Соответственно, вводят с одной f или e. Чем проще имя, тем лучше. Можно даже немного пошлое.

Когда занимались продажей сетевых систем хранения (Network storage system, NAS), то предлагал вообще выкупить домен nas.ru. Звучит забавно, но поверьте, люди бы запомнили, нагенерировали ссылок. В общем, были шансы, что домен неплохо бы зашел.
Но консерваторы от бизнеса не особо одобрили и до сих пор сидят с никому не нужным ИМ, на который заходит 20 человек в сутки. Впрочем, продажи есть, они довольны, но в сети позиционирование нулевое.

Так что домен берите простой, запоминающийся. Зоны берите наиболее популярные в вашем регионе (ru, ua, kz). Также можете использовать домены .com и .shop. Отлично работают и неплохо ранжируются в поиске.

Конечно, любой хостер предлагает купить домен у них. Но на данный момент более удобного места для приобретения доменного имени, чем у Рег.ру, не нашел. Вот, собственно и инструмент для массового выбора имен: https://www.reg.ru/domain/new/choose.

А вот покупать доменные имена лучше на Бегет, ибо там стоимость продления не 890 рублей, а 290 для зоны .ru. Разница существенная, верно? Я делал более подробную статью о покупке и продлении доменных имен. С таблицей цен.

В принципе, я и хостинг держу там же, так как мне они больше всего нравятся.

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

И если уж решили брать у Рег.ру, то держите промокод на скидку в 5% на покупку домена: 8404-F30B-D292-4306
Домен выбрали, теперь перейдём к не менее важным аспектам.

Этап 2: выбор хостинга

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

Хостинг, на котором доступен Redis – это Beget: https://beget.com/. Хотя, если честно, работать с данным хостингом не особо понравилось, а также облачный сервер Jelastic: https://www.reg.ru/cloud-services/jelastic/.

Последний показался довольно шустрым, а ещё порадовал тем, что платить нужно только за реальную работу сервера, соответственно, на обычном блоге у меня набегало не более 200 рублей в месяц. Сейчас ими не пользуюсь, ибо полностью переехал на Beget, ибо там мне удобнее.

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

На виртуальном хостинге от Бегет можно просто включить как отдельную услугу. Обойдётся в 2 и более рублей в сутки, зависит от нагрузки. А потом установить плагин Redis Object Cache. Даже базовый плагин даёт неплохой прирост к скорости сайта за счёт того, что исполняемые файлы будут кешированы с помощью Redis.

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

Этап 3: подготовка к установке

Теперь будем устанавливать всё непосредственно на хостинг. В этой статье рассмотрим именно установку стака WordPress с WooCommerce. Конечно, в пределах одной статьи всё не поместилось, но основную информацию предоставить получилось.

Для начала скачиваем архив с Вордпресс с официального сайта: https://ru.wordpress.org/download/. Там будет свежая версия движка. После рекомендую его распаковать у себя на компьютере, и дойти до корневой папки, где содержится файловая система WP.

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

Теперь откройте админ-панель вашего хостинга и создайте WWW-домен для вашего сайта. Не забудьте поменять NS-серверы при привязке домена к хостингу. Они могут обновляться до 24 часов. Укажите NS-серверы вашего хостинга. Их можно уточнить у вашего провайдера услуги. На Reg.ru можете сделать следующее:

1. Нажать на никнейм вашего аккаунта в правом верхнем углу экрана → кликнуть по «Мои домены» → выбрать ваш домен.

2. Далее можете прям из панели привязать ваш домен к хостингу. В левом меню переведите переключатель в положение ON, если хостингов несколько, укажите, какой именно нужен.

3. Если провайдер другой или предпочитаете руками поработать, то выберите в правой колонке DNS-серверы, после чего в открывшемся окне укажите NS-сервера вашего поставщика услуги.

Готово, теперь сайт привязан к хостингу и после обновления DNS можно приступать к работе.

Далее создаём WWW-домен для сайта. На ISPmanager это делается довольно просто:

• в правом меню кликаем по кнопке «WWW-домены»;

• тыкаем в кнопку создать.

После у вас появится интересное окошко, в котором нужно указать параметры сайта.

Давайте разберём по порядку:

1. В качестве имени укажите ваш корневой домен. Лучше без www. А вот как псевдоним можно указать домен с www или ваш технический домен.

2. Для корневой директории укажите папку, в которой планируете разместить сайт.

3. Включите SSL и перенаправление с HTTP в HTTPS. И сразу создайте новый Let’s Encrypt сертификат, он бесплатен. Если у вас есть платный сертификат, например, Comodo, то он устанавливается иначе. Но это уже отдельная история, инструкцию хостер вам даст, либо сделайте самостоятельное присоединение через TXT-записи.

4. Далее, выбираем режим PHP, например, FastCGI или другой веб-сервер, тот же LSAPI.

5. Версию PHP укажите 8.2 (или актуальную на текущий момент). Она самая шустрая.

6. Если желаете, можете пролистать чуть ниже и настроить сжатие и кэширование. Сжатие выставляйте на максимум. А кеширование поставьте сроком на 5 дней.

Подготовка WWW-домена окончена. Учтите, у вашего хостера может быть иначе, ведь админ-панели разные. Данная инструкция будет актуальна для хостингов Reg.ru и Fozzy с ISPmanager.

Теперь нужно закинуть архив с файловой базой WP, который ранее сделали в корневую папку сайта. В моём случае /www/test/. У вас может быть иначе. Чаще всего путь к корневой папке будет выглядеть так: httpd/site.name/ или www/site.name. Если не знаете точно, уточните в поддержке хостинга. Вам помогут.

Файловую базу распакуйте непосредственно в корневую папку сайта.

После распаковки должно выглядеть так.

Отлично, теперь перейдём к следующему этапу. Нужно создать новую базу данных. На скриншоте указываю, куда необходимо ткнуть в случае ISPmanager.

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

У вас появится окошко, в котором нужно будет указать имя базы данных, создать пользователя и указать пароль. Запомните, а лучше запишите эти данные, в процессе установки они понадобятся.

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

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

Этап 4: установка

Теперь давайте установим WordPress, а после подключим плагин для электронной коммерции WooCommerce. Это сделать будет нетрудно. Так что вперёд и с песней!

Итак, запуск инсталляции довольно прост. После распаковки файлов вам достаточно ввести адрес своего сайта в таком виде: https://ваш-сайт.ru. Если устанавливать решили без ssl, то протокол будет http, но не рекомендую использовать небезопасный протокол для интернет-магазина, его будет тяжелее продвигать в поисковых системах, а также безопасность данных пользователей окажется под угрозой.

После ввода адреса вашего сайта появится такое диалоговое окно:

Нажмите кнопку «Вперёд!». Появится следующее окно. Тут понадобятся имя, логин и пароль базы данных.

Заполните поля. Обычно сервер БД — localhost. Если вылезет ошибка, то причиной может оказаться нестандартная конфигурация хостинга или неправильно настроенный VPS, обратитесь в поддержку или вкурите мануалы хостера. Префикс таблиц менять необязательно, только в случае, если в одной БД расположено сразу несколько сайтов.

Нажимайте кнопку «Отправить» и пред вами предстанет следующее окошко.

В этом окне нужно ввести данные пользователя:

• название сайта (потом можно поменять);

• имя пользователя (запомните его, нужно для входа);

• пароль (тоже понадобится, ваш Кэп);

• email администратора, желательно такой, доступ к которому не потеряете.

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

Всё готово, осталось только ткнуть по кнопке «Установить WordPress». Через минуту (даже меньше), сайт будет готов. Нажмите в следующем окне кнопку «Войти». Далее появится окно входа в панель администратора. Здесь нужно ввести логин и пароль, которые вы ранее указали. И снова «Войти».

Отлично, вы попали в панель администратора WordPress. Осталось совсем чуть-чуть.

Этап 5: подключаем WooCommerce

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

Там во всплывающем меню нажмите «Добавить новый». В этом окне в поисковую строку, отмеченную стрелкой, введите «WooCommerce» (без кавычек).

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

Дальше перейдите в «Плагины» → «Установленные».

Отметьте указанные чекбоксы. И в отмеченном месте выберите «Активировать», затем нажмите «Применить».

Теперь появилось вверху экрана диалоговое окно. В нем нажмите кнопку «Запустить помощника установки». Либо можете сей этап пропустить, но все равно придётся это сделать позже.

Итак, запустили, появляется первый этап настройки. Здесь нужно указать место базирования магазина и валюту, а также тип товаров, который планируете продавать. В моём случае это будет Франция, город Тулуза. На скриншоте наглядно показал. Не переживайте, Российская Федерация и рубль тоже поддерживаются.

В плане продажи товаров можно продавать как физические, так и цифровые, также отметьте чекбокс «Я буду также продавать товары или услуги лично.». Это понадобится для того, чтобы администратор мог контролировать финансовые операции.

Далее нажмите кнопку «Поехали». Позволить отслеживать работу WooCommerce разработчикам или нет, решать вам. Никакие коммерческие данные к ним утекать не должны.

Теперь перед нами следующее окно. Если желаете принимать онлайн-платежи, то обязательно установите модуль для WC Stripe, это позволит работать с безналичной оплатой. В том числе и на территории России. Также можно подключить модуль для PayPal. Офлайн-оплата нужна для возможности оплаты чеками или при подключении терминала.

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

Здесь оставьте как есть. Для того чтобы использовать более сложные методы доставки, вам придётся добавить парочку расширений. Потом вы попадете в окно рекомендаций. Оставьте там всё по желанию. Лично убираю Mailchimp и Facebook.

Продолжаем. Плагин JetPack ни в коем случае не устанавливаем. Ходят слухи, что он полезен, но это монстр, серьёзно замедляющий сайт. Проверено. Так что «Жутьпак» ни к чему. Тыкаем по еле заметной надписи, отметил её на скрине.

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

Этап 6: выбор темы

Пора закончить эпопею. Остался последний шаг — выбор темы. Кстати, официально WC рекомендует тему Storefront, на мой взгляд, неплохая. Простенькая и со вкусом. Но если не понравилась, то поступить придётся так:

1. В правом меню выбрать «Внешний вид» → «Темы».

2. В левом верхнем углу «Добавить новую».

3. Дальше нажимаем на «Фильтр характеристик».

4. В левом меню выбираем «Магазин».

5. Кликаем «Применить фильтры».

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

Ищем тему, которая понравится. Встроенные демки будут выглядеть неказисто, так что смотрите либо на сайте разработчика, либо устанавливайте на собственный сайт. Но он пустой, так что выглядеть будет не лучше, чем на демке.

Для себя выбрал Blossom Feminine, ибо разработка ведётся для компании, которая продаёт цветы, соответственно, тема очень даже в тему. Но учтите, это дочерня тема, так что пришлось её форкануть, чтобы она не обновлялась.

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

А теперь рекомендую посмотреть и другие материалы из раздела WooCommerce. Там вы найдёте инструкции по созданию товаров, а также некоторые полезные лайфхаки по кастомизации интернет-магазина.

Интернет-магазин почти готов!

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

В следующих статьях научу делать главную статическую страницу, создавать товары, а также делать отслеживание событий с помощью Яндекс Метрика и Google Analytics. Когда преодолеем все трудности, вы сможете создать самостоятельно полноценный магазин для себя без найма разработчика.