Привет! В этом видеоуроке я
покажу, как создать интернет-магазин на wordpress. С нуля, по шагам, без
программирования или специальных навыков. Я буду показывать процесс создания
интернет-магазина от начала до конца, поэтому видеоурок будет состоять из нескольких выпусков.
В первом выпуске мы купим хостинг и зарегистрируем домен, установим и настроим wordpress, а также
все необходимые инструменты и выберем тему. В следующих выпусках будем менять дизайн сайта, потом добавим товары, подключим оплату и доставку. А также создадим логотип и установим SSL-сертификат,
чтобы люди могли безопасно расплачиваться у вас на сайте картой. В итоге у вас получится полноценный
интернет-магазин, в котором вы сможете продавать абсолютно любые товары. И ещё один момент, друзья,
чтобы следующие видео получались лучше, для меня важно получить обратную связь. Поэтому после
просмотра оставьте, пожалуйста, в комментариях свой отзыв. Если возникнут вопросы или что-то не
получится - тоже оставьте комментарий. Постараюсь всем ответить и подсказать.
А теперь давайте переключаться на экран и начинать. Вот такой интернет-магазин мы с вами будем делать. У меня это магазин одежды. Но вы можете адаптировать его под себя, чтобы продавать абсолютно любые товары. Давайте покажу, что же будет на этом сайте.
Это у нас главная страница. Здесь будет такой большой
баннер на всю ширину экрана, сюда можно поставить название магазина, какой-то дополнительный текст, кнопку, которая может вести на любую страницу. Вверху у нас будет хедер. Здесь логотип.
Меню. В меню ссылки на отдельные категории товаров. Также будет аккаунт и корзина. Идем дальше. Дальше
у нас будет такая вот карусель с брендами, за ней дополнительные баннеры. Видите, на каждом баннере
есть тексты, кнопка. Эта кнопка тоже может вести на любую страницу на сайте. Например, на конкретную
категорию, которую вы хотели бы продвигать. Возможно, на новую коллекцию или акцию. Баннеры можно
время от времени менять, чтобы продвигать разные категории товаров. В общем, можно экспериментировать.
Дальше у нас будет блок с товарами. Здесь можно показывать новинки, либо товары, которые
продаются чаще всего. Можно также вручную поставить конкретные товары на ваш выбор. Обратите
внимание, также у нас будет значок "Распродажа", будет функционал скидок. После товаров будет такой вот
интересный баннер с эффектом прокрутки. Как будто бы изображение находится не на самом сайте, а как
бы за ним, да? Как будто мы смотрим на этот баннер через дырку в сайте. Дальше четырех колонник. В нем
кратко ответы на важные вопросы, которые могут интересовать покупателей. Например: доставка, возврат
товара, оплата и в конце - футер. В футере - ссылки на второстепенные страницы, информация о магазине,
условия оплаты, доставки, страницы с контактами. Также ссылки на отдельные разделы магазина и
кнопки соцсетей. Получается такая базовая главная страница. Любые блоки на ней вы можете поменять
местами, заменить, удалить либо наоборот - добавить блоки, которых не хватает. Что еще? Еще у нас будет
полноценный интернет-магазин. Давайте я его покажу. Вот так он будет выглядеть. Большинство
товаров сейчас на английском, потому что они шли вместе с шаблоном. Я не стал их
переводить, чтобы не тратить время, но добавил несколько новых товаров на русском.
В этом видео я, конечно же, покажу как это сделать. Также покажу как настроить фильтры
товаров. Вот они - слева, видите, здесь. Бренды, категории, различные размеры, цена. Вы сможете
добавить свои атрибуты, например: цвет, тип ткани, фасон, все что понадобится. Идем дальше.
У каждого товара будет своя страница. Вот так она выглядит. Видите, здесь можно
выбрать размер, ниже параметры товара, артикул, категории, к которым он относится, бренд.
Еще ниже - описание, детали. Сейчас здесь только одна строка, но я просто не стал составлять
огромную таблицу. Вообще деталей, конечно, может быть больше: материал, цвет, длина подошвы, все,
что вы посчитаете нужным добавить. Также у покупателей будет возможность оставить отзыв
о товаре. И чуть ниже - блок с похожими товарами. Что еще? Давайте добавим товар в корзину
и посмотрим, как устроен процесс заказа. Вот так будет выглядеть корзина. В принципе,
здесь все стандартно. Покупатель видит свой заказ, может удалить лишние товары, изменить их
количество, также может выбрать способ доставки. В этом видео я покажу, как настроить самовывоз и
как добавить доставку Новой почтой. Идем дальше. Так будет выглядеть страница оформления
заказа. Здесь покупатель оставляет свои контактные данные. Если он выбрал доставку
Новой почтой, здесь также появятся поля для выбора отделения. Вот они. Ну, и конечно, оплата.
Смотрите - по умолчанию в wordpress нет удобного способа оплаты картой для украинского рынка. Есть
оплата при доставке и прямой банковский перевод. Но можно подключить дополнительные варианты
оплаты отдельно. Конкретно в этом видео я покажу как подключить LiqPay. Такой момент - LiqPay и
Новая почта - это решение которое актуально только для украинского рынка. Если вы из другой страны -
ничего страшного, погуглите, наверняка популярные сервисы доставки и оплаты в вашем регионе
можно интегрировать с wordpress. Обычно это несложно, у них у всех плюс-минус одинаковый
принцип работы. Идем дальше. Также мы с вами сделаем несколько второстепенных страниц. Одна
из них - это страница с информацией о магазине. Здесь будет небольшой текст о вашем магазине и его
фотография в физическом мире. Конечно, если у вас нет магазинов в физическом мире, можете рассказать о
вашем ведении бизнеса без фотографий или оформить страницу как-нибудь по-своему. Что еще? Еще сделаем
страницу с условиями оплаты. Будет такая вот совсем базовая страница, только текст, коротко и по сути.
В таком же стиле сделаем страницу с условиями доставки и возврата. Также страницу с контактами.
Здесь у нас будет форма, с которой любой человек сможет нам написать. А также добавим сюда карту
с координатами магазина. В результате вы своими силами без лишних затрат сделаете полноценный
интернет-магазин, в котором сможете продавать все, что угодно. В процессе видеоурока будем
делать все по частям. Для удобства я закрепил в комментарии под видео тайм-коды, с их помощью
вы всегда сможете быстро перейти в нужный момент урока. Ну что, давайте начинать. Первое, что
нам нужно сделать - это заказать хостинг и зарегистрировать домен. Если кто-то не в курсе,
что это такое - в двух словах: хостинг - это место, где сайт будет храниться. По сути это мощный
компьютер, который круглосуточно подключён к сети и готов показать ваш сайт другим людям. А
домен - это адрес сайта, который люди будут вводить в браузере. Например, google.com или hostiq.ua.
Конкретно этот сайт расположен на домене hostiq.tk. Все это вы можете купить у нас. Для этого
в новой вкладке переходим на сайт hostiq.ua. Попадаем на главную страницу. Здесь расположены
ссылки на популярные виды хостинга. Как видите, есть даже специальный хостинг для сайтов на wordpress.
По сути это тоже самое, что виртуальный хостинг, но из него убрали все лишнее и оставили только, то
что нужно для работы wordpress. Поэтому он стоит дешевле. Для начала такого хостинга будет более,
чем достаточно. Нажимаем "Хочу". На этой странице нас интересуют тарифы. Чтобы их посмотреть, нажмите
кнопку на баннере. Как видите, есть три тарифа. В принципе для интернет-магазина подойдет любой из
них. Я лично рекомендую один из двух вариантов: либо взять хостинг на бесплатный тестовый период, либо
заказать центральный тариф сразу на полгода или дольше. Почему именно центральный? Этот вариант
выгоден тем, что при покупке такого тарифа на полгода или дольше, вы бесплатно получите домен и
ssl-сертификат на год. Так можно сэкономить. Если берете хостинг на тест домена, сертификат придётся
покупать отдельно. Какой вариант выбрать зависит от того, насколько решительно вы настроены. Возможно, вы просто хотите попробовать получится/не получится. Тогда берите тестовый хостинг. Если же вы твердо
решили запустить интернет-магазин во что бы то ни стало, выгоднее будет купить. Я покажу процесс
покупки на примере второго сценария, т.е. буду покупать. Для этого, нажимая "Заказать", обратите
внимание, если вы все-таки решите взять хостинг на тест - вам нужно будет нажать не на эту кнопку
а на ссылку "Тестировать 30 дней". Я буду покупать, поэтому жму "Заказать", появляется форма регистрации
на сайте. Здесь укажите ваше имя, электронную почту. Также здесь есть два поля, отмеченных галочкой. Первое - это полезная рассылка. Если не хотите получать письма о всяких акциях или специальных
предложениях - то снимаете ее. Второе поле - уведомление по sms. Эту галочку лучше не снимать.
В принципе это удобно, когда срок действия вашего хостинга будет подходить к концу, вы получите
уведомление по sms. Дальше нажмите "Продолжить". У меня уже есть аккаунт, поэтому я просто
войду в него на вкладке "Я существующий клиент". Вот мы на этапе оформления заказа. Сначала
выбираем период оплаты. По умолчанию здесь стоит "Ежегодно". Можно выбрать другой период, но помните,
что право на бесплатные домены, ssl-сертификаты у вас появится при заказе на полгода и более.
Я оставлю расчетный период "Ежегодно", потому что таким образом сэкономлю почти 600 гривен.
Дальше выбираем домен. Зарегистрировать его бесплатно можно только в определенных зонах.
Время от времени они могут незначительно меняться, но здесь всегда есть популярные
зоны вроде com или net. Чтобы увидеть в каких конкретно зонах можно регистрировать
бесплатный домен, наведите курсор на иконку с подарком. Сейчас это вот такие зоны. Я не
буду ничего выдумывать и зарегистрирую имя в самой популярной зоне com. Пусть будет магазин
одежды.com. Вписываю домен в проверочное поле и нажимаю "Проверить". Отлично, домен свободен. Как видите, его
регистрация стоит 0 гривен, поскольку я покупаю хостинг сразу на год. Также здесь
появились некоторые дополнительные параметры заказа, например, защита WHOIS-информации. Мне
это не нужно. Так же есть возможность выбрать дата-цент, где будет храниться мой сайт. Есть
три варианта: Украина, Нидерланды, США. Я оставлю Украину. Также можно заказать бесплатный перенос
сайта. У меня сайта еще нет, поэтому переносить нечего и можно заказать выделенный ip-адрес.
Мне это тоже не нужно. Иду дальше. Установить cms автоматически. Wordpress - это то, что нужно. Больше
здесь ничего нет, поэтому нажимаю "Оформить заказ". Система выписала счет на оплату. Нажимаю "Оплатить". Теперь нужно выбрать метод оплаты. Можно оплатить
заказ банковской картой. Подойдет карта любого банка, есть приват24, прямой банковский перевод,
PayPal, есть также Яндекс.Деньги, QIWI Кошелек. Можно даже пополнить наличными через терминал. Мне подходит вариант по умолчанию, поэтому сразу нажимаю "Оплатить". На этой странице остается ввести
детали карты и снова нажать "Оплатить". После оплаты вы увидите вот такую страницу. Обратите
внимание, здесь сказано, что на активацию заказа может уйти несколько часов. Обычно это
происходит быстрее. Когда заказ активируют, на почту, с которой вы создали аккаунт, придет
письмо о том, что все готово. Увидеть ваш хостинг с доменом вы можете уже сейчас на главной
странице вашего аккаунта. Давайте туда перейдем. Хостинг с доменом находится в разделе Продукты
и Сервисы. Вот хостинг, который только что купил. Он уже светится зеленым, а значит активация прошла
и можно работать. Наш следующий этап после покупки - перейти в Панель управления хостингом и установить
wordpress. Для этого в строке с только что купленным тарифом нужно нажать кнопку "Контрольная
панель". Вот так выглядит место, где вы будете управлять хостингом. Здесь есть множество различных
приложений для управления. Они разбиты на категории. Есть приложение для работы с файлами, резервными
копиями, базами данных, доменами, электронной почтой. Есть множество других приложений, я не
буду подробно останавливаться на каждом из них. Можете ознакомиться с ними самостоятельно.
Сейчас нам нужно опуститься в самый низ и найти приложение Softaculous apps installer. В нем
находится wordpress. Вот как раз здесь сразу есть wordpress. Также есть раздел установки, где уже
есть цифра 1,заходим в этот раздел. Для нашего сайта wordpress уже установлен. Помните, во время
заказа у нас был пункт "Автоматическая установка CMS" и там был выбран wordpress. Вот это как
раз он и есть. В этой строке есть некоторые опции. Можно клонировать сайт, создать его
резервную копию, удалить установку, а вместе с ней и весь сайт, а также редактировать параметры
установки. Что еще? Есть так же такая вот иконка с человечком, если вы по ней перейдете, то сразу
попадете в панель управления wordpress. Нажимаем. Вот так выглядит панель управления wordpress
или консоль. Здесь мы будем работать с сайтом. Но сначала давайте я немного расскажу, как тут все
устроено. Здесь на главной странице находится общая информация о состоянии сайта. По мере того, как
вы устанавливаете дополнительные компоненты на сайт, здесь будут появляться новые блоки. Все это
можно убрать, чтобы на главной странице всегда был порядок. До этого нажимаем вверху "Настройки
экрана", тут нам нужно снять галочки с пунктов, которые мы больше не хотим здесь видеть. Я уберу
все галочки, кроме пунктов "Активность" и "На виду". Теперь на главной странице нет ничего лишнего,
только блок с последними действиями и список последних опубликованных материалов. Сейчас, как
вы видите, у нас на сайте опубликована одна запись, одна страница и один комментарий. Давайте перейдем
на сайт и посмотрим как это выглядит. Наводим курсор на слова "Мой блог" в черной шапке и
нажимаем "Перейти на сайт". Вот так он выглядит сразу после установки. Это и есть та единственная
запись. Вот ее единственный комментарий и вверху ссылка на единственную страницу. Сейчас это все
выглядит довольно некрасиво. Но ничего, пока что на сайте стоят настройки по умолчанию, скоро мы
это изменим. Что еще мы видим на этой странице? Вверху страницы, по-прежнему, видна черная плашка,
она называется "Панель быстрого доступа". Когда вы входите в панель управления wordpress, эта шапка
будет отображаться на всех страницах, чтобы вы могли быстро совершать определенные действия.
Другие посетители ее видеть не будут. В шапке, как вы видите, есть возможность добавить запись,
медиафайл, страницу или пользователя. Также есть возможность просмотреть комментарии,
настроить внешний вид и вернуться обратно в консоль или какие-то конкретные ее разделы.
В общем эта плашка удобна тем, что вы заходите на конкретную страницу, если видите, что с ней что-то
не так, можете быстро это исправить. Теперь вернёмся назад в консоль и посмотрим, что там есть еще.
Слева вы видите боковую панель. В ней есть много разных разделов. Давайте я кратко расскажу
о каждом из них. Сначала "Обновления". Здесь будут появляться сообщения, если какой-то из компонентов
вашего сайта нужно будет обновить. Например, когда выйдет новая версия wordpress, или плагина, или
темы. Мы с вами только установили wordpress, поэтому никаких обновлений пока нет. Видите, тут
сказано: "Ваши плагины не требуют обновления", "Ваши темы не требуют обновления", "Переводы не требуют
обновления". С этим понятно. Идем дальше. Записи. Записи - это как бы посты на вашем сайте. Сейчас на
нем всего одна запись "Hello, world" или "Привет, мир". Мы только что видели ее на самом сайте. Тут дело
вот в чем - изначально wordpress задумывался как платформа для блогов, поэтому одна из основных
функций "Добавление новых статей или записей". Видите, кроме них тут еще есть рубрики и метки.
Нам этот функционал не понадобится, но вообще, если вы решите вести на сайте блог, создавать статьи
будете в этом разделе. Идем дальше. Медиафайлы. В этом разделе будут храниться любые файлы, которые
вы загрузите на ваш сайт. Например, в нашем случае тут будут изображения товаров. После того, как вы
загрузили картинку с товаром, вы можете зайти в этот раздел и отредактировать ее описание или
стиль. С этим разделом понятно. Дальше - Страницы. Здесь у нас находятся отдельные страницы сайта. Тут
важно понимать, что запись и страница - это разные вещи. Чтобы понять, чем они отличаются, снова представим
блог. Каждая статья в блоге - это на вид полноценная страница, но хранится она в разделе "Записи". Это
потому, что у всех статей плюс-минус одинаковый дизайн. Текст, изображения, комментарии, конечно,
разные, но именно дизайн один на всех. Например, во всех статьях есть одинаковые по стилю заголовок
или блок с похожими статьями, или комментарии. А страница - это сущность с уникальным дизайном и
уникальным расположением блоков. Например, главная страница. Опять же, если представить блог, то его
главная страница обычно отличается от того, как выглядит статья. Например, на ней нет блока
с комментариями или нет бокового меню, как это есть статьях. С этим вроде понятно. Теперь
идем дальше. Комментарии. Когда кто-то оставит комментарий к записи, этот комментарий появится
здесь и будет ждать вашего одобрения. Пока вы его не одобрите, он не появится на странице.
Тут вы можете ответить на комментарий, удалить его или пометить как спам, если его оставил
какой-то бот. Идем дальше. Внешний вид. В этом разделе вы можете настроить все, что касается
дизайна сайта. Как видите в выпадающем списке, здесь можно выбрать тему, настроить ее. Этим
мы займемся чуть позже. Также можно настроить виджеты. По сути - это специальные блоки, которые
добавляют на сайт для удобства пользователей. Например, если мы перейдем на сайт, то увидим
внизу страницы специальные блоки. Видите, свежие записи, комментарии, какие-то архивы, рубрики -
это и есть виджеты. Вернёмся назад в консоль. Также в разделе "Внешний вид" вы можете создать меню, которое потом будет где-нибудь на сайте. Например, в шапке или футере. Также можете поменять
фон. И есть такой раздел - "Редактор тем"- это раздел для продвинутых пользователей, которые
разбираются в программировании и хотят вручную изменить структуру темы. Сегодня мы еще вернемся
к разделу "Внешний вид" не раз и поработаем с ним подробнее. А пока идем дальше. Плагины. Здесь
вы можете установить разные дополнения для сайта или панели управления, чтобы расширить их
стандартный функционал. Например, чуть позже при помощи нескольких плагинов, мы превратим наш сайт
в интернет-магазин, а потом подключим доставку и оплату. Вообще в wordpress есть тысячи разных
плагинов платных и бесплатных, от простых блоков "Подпишитесь на рассылку" и красивых кнопок
с соцсетями до конструкторов сайтов и целых разделов панели управления с дополнительным
функционалом. Ради интереса можете нажать "Добавить новый" и посмотреть какие плагины там
есть. Главное - устанавливаете только те плагины, которые добавляют критически необходимый
функционал. Дело в том, что каждый плагин создает дополнительную нагрузку на сервер,
поэтому из-за большого количества плагинов сайт может начать работать медленнее. Двигаемся
дальше. Пользователи. Здесь вы можете изменить имя и пароль вашего пользователя. Сейчас
имя и пароль от вашего пользователя хостер сгенерировал автоматически и прислал вам на почту,
можете изменить как минимум пароль, чтобы каждый раз не открывать это письмо. Также вы можете
создавать здесь дополнительных пользователей, у них могут быть такие же или ограниченные
возможности управления. Это удобно, если вы хотите переложить часть обязанностей по работе
с сайтом на другого человека, но не хотите, чтобы ему были доступны все функции. Все это вы будете
настраивать в этом разделе. Идем дальше. Инструменты. В этом разделе вы можете проверить
здоровье сайта, а также импортировать или экспортировать его содержимое. Нам
этот раздел не понадобится, поэтому давайте не будем заострять на нём
внимание. Двигаемся дальше. Настройки. Здесь вы найдете основные настройки вашего
сайта. На этом разделе наоборот остановимся подробнее и сразу же поменяем настройки
в некоторых подразделах. Пойдем по порядку. Общие настройки. Здесь мы видим название сайта и
его краткое описание. Название сайта "My Blog" мы видим в панели быстрого доступа, также название и
описание тоже люди будут видеть у себя во вкладке в браузере, когда будут находиться на главной
странице магазина. Давайте я открою готовый магазин. Перейду на главную страницу и покажу, как это будет
выглядеть. Видите, здесь во вкладке написано "Магазин одежды от популярных брендов". Магазин - это название сайта, "одежды от популярных брендов" - это его краткое описание. Возвращаюсь в консоль. Сейчас у нас здесь
стоит текст по умолчанию, давайте его поменяем. Для примера я написал просто "Магазин". Вы же
впишите сюда реальное название вашего магазина. Видите, в панели быстрого доступа уже все
поменялось. Можем идти дальше. В описании напишите в двух словах что вы продаете.
Например, "Одежда от популярных брендов". Идем дальше. Адрес wordpress и адрес сайта -
эти поля пока не трогаем, здесь все в порядке. Административный адрес e-mail - это адрес, на
который будут приходить важные системные оповещения, поэтому важно, чтобы он был рабочим.
Идем дальше. Членство. Если вы поставите здесь галочку, любой человек сможет зарегистрироваться
у вас на сайте. Набор действий, которые он сможет совершать, определяет следующая строка - "Роль
нового пользователя". Здесь есть несколько разных ролей: подписчик, участник, автор,
редактор и администратор. В нашем случае эта настройка не понадобится, поэтому
здесь ничего не меняем. Идем дальше. Язык сайта. Здесь все понятно. Если нужно, можете
поменять язык на украинский, как вам удобно. Часовой пояс - здесь тоже все понятно.
Конкретно в нашем случае часовой пояс неправильный, поэтому давайте
его поменяем. Здесь можно выбрать часовой пояс по разнице с Гринвичем
или найти по городу. Находим Киев. Отлично. Дальше формат даты. Здесь стоит вот такой
формат даты. На предварительном просмотре видно, как будет выглядеть дата. Мне кажется, такой
формат не очень привычный, поэтому я поменяю его на какой-нибудь такой. Дальше - Формат времени.
Здесь тоже стоит время с буквами до полудня. Мне такой вариант не очень близок, поменяю его на
более привычный 12 часовой формат. Дальше - Первый день недели. Тут все правильно - понедельник. На
этом все, нажимаю "Сохранить изменения". Дальше у нас идет подраздел "Написание". Здесь ничего
менять не нужно. Можно переходить в следующий раздел - "Чтение". Здесь тоже, в принципе, ничего
менять не нужно. Единственное - можно закрыть сайт от поисковых систем. Это удобно, если
вы понимаете, что будете какое-то время экспериментировать с дизайном и наполнением.
Просто, чтобы поисковики не проиндексировали сайт, пока он еще не готов. Главное - не забудьте
потом снять эту галочку. Нажимаем "Сохранить", идем дальше. Обсуждение. Здесь хранятся
настройки, которые касаются комментариев. В этом видеоуроке для нас это не актуально,
поэтому двигаемся дальше. Медиафайлы. Здесь вы найдете ограничение по максимально
допустимому размеру изображений. В принципе, это оптимальное значение, поэтому тут
ничего не меняем. Дальше. "Постоянные ссылки" - это очень важный раздел. Смотрите, здесь указано
как будет выглядеть ссылка на вашем сайте. По умолчанию в нее входят цифры, есть
также ссылки, в которых содержатся дата, архивы, опять какие-то цифры. На мой взгляд - это
слишком длинно и некрасиво. Я рекомендую выбрать вариант "Название записи". В нем нет ничего
лишнего, ссылка выглядит аккуратно, никаких цифр. Можете зайти в любой интернет-магазин
и посмотреть, как выглядят ссылки у них. Я ни разу не видел, чтобы использовали формат с числами.
Пока что тут все, но когда мы добавим функционал интернет-магазина, здесь можно будет также
выбрать формат ссылок для товаров, категорий и прочего. Не забываем сохранить изменения и
двигаемся дальше. Конфиденциальность. В этом подразделе вы можете посмотреть или изменить
страницу с политикой конфиденциальности. По идее такая страница должна быть на каждом сайте,
который собирает персональные данные. Например, в случае с интернет-магазином, это имена и фамилии
клиентов, также их номера телефонов, адреса, в общем вся личная информация. Точно не знаю, но возможно,
без политики конфиденциальности в будущем могут возникнуть проблемы. Не хочу никого пугать, просто
упоминаю, что есть такой момент. Если мы зайдем на страницу, мы увидим, что сейчас тут все на
английском, поэтому текст по-любому придется поменять. Погуглите, наверняка в интернете есть
какой-то шаблон, в которой нужно только подставить информацию о вашей компании. Подробно мы на
этом моменте останавливаться не будем, просто чтобы вы понимали, где конкретно это все можно
изменить. Хорошо. Ну что, по настройкам все. Будем двигаться дальше. Как вы уже наверно успели
заметить, в Панели управления пока что нет функционала интернет-магазина. Нет ни товаров, ни
корзины. Давайте этот функционал добавим. Делать это мы будем при помощи специального плагина
woocommerce. Woocommerce - это самый популярный бесплатный плагин для интернет-магазинов. Несколько
лет назад его выкупила компания Automatic, которая владеет сайтом wordpress.com. То есть, по сути
это - официальный плагин от разработчиков движка. Кроме того, у этого плагина много разных удобных
дополнений для доставки и оплаты. В общем решение - рабочее. Теперь давайте установим и настроим
его. Для этого переходим в раздел "Плагины". Здесь у нас уже есть два плагина, они не
активны и в принципе не нужны, поэтому можно смело их удалить, чтобы не занимали место.
Нажимаю "Удалить", "Ок" и снова "Удалить", "Ок". Теперь нажимаю "Добавить новый". В
этом разделе есть десятки тысяч разных плагинов, можно поклацать по
вкладкам, посмотреть что тут есть, и можно сразу найти конкретный плагин по названию.
Вот я вижу здесь уже показывается woocommerce. Этот плагин нам как раз и нужен. Но если у вас
он не отображается здесь, просто введите в строке поиска woocommerce. Вот и он. А это все дополнения,
о которых я говорил. Видите, более семи с половиной тысяч различных дополнений, с помощью которых можно расширить функционал вашего интернет-магазина. Мы еще установим несколько из них, но чуть позже. А
пока нажимаю "Установить". Нужно немного подождать. Готово. Теперь нажимаю" Активировать". Попадаем на страницу настройки woocommerce.
Здесь нам предлагают запустить интернет-магазин, используя новый интерфейс настройки. Нажимаем "Да,
пожалуйста", попадаем в Мастер настройки. Видите, здесь есть несколько этапов, мы сейчас на первом
этапе "Сведения о магазин". Посмотрим, что здесь есть. Где базируется ваш магазин? Сюда введите почтовый
адрес вашего магазина, если вы так же продаете в оффлайне, или оставьте поле пустым. Я укажу
здесь для примера выдуманный почтовый адрес. В этой строке может быть корпус, подъезд, этаж, еще что- то. Но можно ничего не указывать. Здесь выберите
вашу страну, в моем случае - это Украина, пишите город и почтовый индекс. Нажмите "Продолжить", появляется такое всплывающее
окно, где нам предлагают установить средства отслеживания использования плагина, чтобы
улучшить возможности woocommerce. Если вы его установите, выберите здесь "Я тоже хочу", то
некоторые данные об использовании плагина будут отправляться разработчикам woocommerce. Делать это
не обязательно, поэтому просто нажимаю "Продолжить". Следующий этап - Отрасль. В какой отрасли работает
магазин? У меня магазин одежды, поэтому я выбираю первую отрасль. Нажимаю "Продолжить". Дальше типы
товаров. Какой тип продукции будет указан в списке. В списке - имеется в виду в ассортименте. Здесь
есть физические продукты, загрузки, дальше идут какие-то платные типы продуктов, скорее даже не
продуктов, а услуг, бронирование, тарифные планы. Я не планирую в своем магазине предлагать подобные
типы услуг, поэтому просто выбираю "Физические продукты", нажимаю "Продолжить". Сведения о бизнесе.
На этом этапе нужно ответить на два вопроса. "Сколько товаров должно отображаться?" Здесь можно выбрать
приблизительное количество товаров, которое будет в вашем магазине. На всякий случай выберу больше
чем 1000. "В настоящее время продаете в другом месте?" Это не критический вопрос для работы плагина,
поэтому можете ответить так, как считаете нужным. Поскольку в видео я притворяюсь, что магазин
существуют в физическом мире, выберу "Да лично физических магазинах и/или мероприятиях".
Появляются дополнительные вопросы. "Какой ваш текущий годовой доход?". Выберу "До трех
тысяч долларов". Также woocommerce предлагают установить некоторые дополнительные приложения,
которые могут пригодиться для интернет-магазина. Конкретно - Маркетинг на Facebook, Mailchimp -
это сервис отправки рассылок и контекстная реклама Google Ads. Мне это пока
что не нужно, поэтому я все это отключаю и нажимаю "Продолжить". На последнем этапе
woocommerce предлагает выбрать тему, но мы поговорим об этом моменте отдельно, поэтому пока
что я просто нажимаю "Оставить выбранную тему". И в конце нам предлагают расширить возможности
магазина с помощью сервиса Jetpack и службы woocommerce. Здесь говорится Jetpack и службы
woocommerce будут установлены и активированы бесплатно. Но для нас это не актуально, поэтому
нажимаем "Нет ,спасибо". На этом настройка woocommerce закончена. Появляется такое всплывающее окно, где
говорят что осталось несколько завершающих задач, после этого ваш магазин будет готов к запуску. Нам
это не нужно, поэтому просто закрываю. Это как раз и есть та страница с дополнительными шагами
для запуска магазина. То есть можно добавить первый продукт, изменить дизайн сайта, настроить
доставку, налоги и платежи. Нам это не нужно, я сам вам покажу как это все сделать, поэтому
просто нажимаем "Пропустить настройку магазина". Это, как бы, панель управления вашим магазином.
Здесь вы можете видеть эффективность магазина, сумма продаж, графики, сейчас здесь
пусто, потому что никаких продаж еще не было, но по мере того, как вы запуститесь и
начнете продавать, здесь появятся данные и вы сможете анализировать здесь вашу прибыль
и увидеть какую-то активность клиентов. Идем дальше. Давайте перейдём в Консоль
и посмотрим, что нового в ней появилось. И так, что нового мы тут видим? Вверху
появилось сообщение о том, что магазин не использует защищенное соединение. Пока что
это действительно так. Видите, у доменного имени стоит отметка "Не защищено". У вас браузере может
быть перечеркнутый замочек или какой-то другой значок. До этого wordpress не ругался, потому
что у нас был обычный сайт. Сейчас мы добавили функционал интернет-магазина, а это значит,
что мы будем собирать персональные данные, а без сертификата это делать не безопасно. Вот
поэтому тут появилось такое уведомление. В этом уроке я обязательно покажу, как установить
ssl-сертификат, а пока нажимаем "Закрыть". Смотрим, еще что поменялось. Появились
дополнительные блоки, связанные с магазином. Видите, "Недавние отзывы о товарах" и "Статус
woocommerce". В этом блоке будут отображаться заказы в разных статусах и также объем
чистых продаж в этом месяце. Правда, сумма сейчас долларах, но ничего, это можно легко
исправить. Только давайте сначала закончим здесь. Эти новые блоки мы убирать не будем, они
наглядные, они полезные, просто давайте перетянем их вправо, чтобы они не стояли в одной колонке и было
удобно смотреть. Просто берем и перетаскиваем блоки, располагаем их как нам удобно. Вот так, отлично. Идем
дальше. Обратите внимание, в меню слева появились новые разделы. Видите, woocommerce, товары, аналитика и маркетинг. Пару слов о них. Сначала woocommerce. Здесь на главной странице, как я уже
говорил, будет общая статистика о работе вашего магазина, также есть подразделы. В
них вы можете управлять заказами, создавать купоны, просмотреть информацию о клиентах, увидеть
более подробную статистику. Также есть настройки. В этом подразделе будет все, что касается
настроек именно магазина. Например, валюта, в которой отображаются цены. Давайте зайдем
сюда и поменяем валюту на гривну. Здесь мы видим адрес, который указывали во время
установки woocommerce, а также некоторые другие настройки. И внизу "Настройки валюты", меняем
валюту на гривну и нажимаем "Сохранить изменения". Также вверху есть вкладки, на них вы
найдёте ещё больше настроек. Я сейчас не буду останавливаться на этом разделе,
вы можете сами посмотреть что здесь есть и выбрать настройки, которые вам больше
нравятся. Дальше у нас раздел с товарами. Здесь, как вы уже поняли, все, что связано с
товарами в вашем магазине. Можно добавить новый товар, создать категории товаров,
добавить к товарам метки или атрибуты. В этот раздел мы ещё вернёмся, когда будем работать
непосредственно с наполнением магазина. А пока идем дальше. "Аналитика". Здесь тоже из названия
примерно понятно, что тут будет. Это целый раздел с различными отчетами и показателями, в
котором вы можете отслеживать, как идут дела в вашем магазине, делать на основе этой информации
какие-то выводы, менять подход и так далее. Видите, здесь тоже куча подразделов для конкретных
показателей: аналитика по заказам, товарам, категориям, использованию купонов, налогам,
загрузкам, запасам товаров на вашем сайте. И последний раздел - Маркетинг. Этого раздела раньше
не было, он появился с последними обновлениями. В целом, здесь пока довольно скудно - какие-то
статьи о маркетинге на английском, ничего действительно полезного. Возможно, в будущем
тут появятся какие-то полезные инструменты. Ну что, это все новые разделы. К некоторым из
них мы ещё вернёмся в ходе работы над сайтом, некоторые в этом видео не затронем. Опять же,
вы можете потом самостоятельно пробежаться по функционалу, посмотреть что, где и как, а
пока давайте двигаться дальше. Мы добавили в панель управления wordpress функционал
магазина, теперь давайте поменяем тему, на которой наш магазин будет работать. Для этого
переходим в раздел Внешний вид - подраздел Темы. Смотрите, тут у нас уже установлены три стандартные
темы от wordpress: Twenty Twenty, которая активно сейчас, а также Twenty Nineteen и Twenty Seventeen.
Wordpress каждый год выпускает новую тему и называет ее по номеру года. Нам эти темы
не нужны, поэтому давайте их удалим. Как это сделать - нажимаю "Информация о теме" и вот здесь
в углу появляется кнопка "Удалить", нажимаю "Ok". Точно также удаляю старую тему. Окей, остается
только текущая тема. Ее удалить нельзя, потому что она сейчас активна, но после того, как
мы установим новую тему, можно будет удалить и эту. Чтобы установить новую тему нажимаю в верху
кнопку "Добавить". Здесь есть несколько вкладок: Избранные, Популярные, Свежие и Любимые. Давайте
откроем Популярные темы. Как видите, только на этой вкладке есть почти четыре тысячи разных тем.
Можете прокрутить вниз и посмотреть что тут есть. Все это бесплатные темы с примерами того,
каким ваш сайт может быть в итоге. Не все они подойдут конкретно для интернет-магазина,
некоторые из них создавали специально для блогов, промо-страниц, портфолио или других
сайтов, но суть в том, что среди тысяч разных вариантов можно найти такой, который подойдет
именно вам. Важный момент - это то, что у разных тем разный функционал по настройке внешнего
вида. То есть то, что есть в одной теме, не факт, что будет другой. Для некоторых тем
разработчики создают специальные плагины, которые помогают изменить дизайн,
сделать его таким, как вы хотели. Такие плагины обычно работают только с
этими темами и для других не подходят. Конкретно в этом видео-уроке мы будем
делать магазин на теме Astra. Вот она здесь на вкладке Популярные. Но если она у вас здесь
не отображается, пишите ее название сюда - astra. Чем хороша эта тема? У нее богатый функционал и
она прекрасно подходит для интернет-магазинов. Так же с этой темой совместим один удобный
плагин Elementor. Это конструктор страниц, при помощи которого вы сможете быстро менять
дизайн магазина в визуальном редакторе. И так, нажимаем "Установить" немного ждем, пока
тема установится и нажимаем "Активировать". Вверху появляется сообщение, что тема
активирована, значит все хорошо. Теперь давайте перейдем на сайт и посмотрим, как
поменялся дизайн. Как мы видим на сайте, поменялось расположение блоков, шрифт, появилась
шапка, появились ссылки сбоку, пока что сайт все еще выглядит пусто и даже немного страшно, но
это пока. Скоро это изменится. Перед тем, как мы начнем наводить красоту, нам нужно установить
один плагин. Для этого возвращаемся в Консоль, переходим в раздел Плагины
и нажимаем "Добавить новый". Нам нужен плагин, который называется Astra Starter Sites. Это плагин от официального разработчика темы astra, с его помощью мы
сможем быстро применить к нашей теме уже готовый красивый дизайн, практически
полноценный сайт, а потом подправить его в удобном визуальном редакторе. На всякий
случай я добавил название плагина в описании к этому видео. Итак, вводим в строке поиска
Astra Starter Sites, вот он появился. Вот так выглядит его логотип, буковка А, нажимаем "Установить",
немножко ждем и нажимаем "Активировать". Открывается страница с установленными
плагинами. Все на месте, все готово к работе. Теперь можем установить шаблон
нашего будущего сайта. Для этого идем в раздел Внешний вид и находим
в нем пункт Starter templates. С английского это переводится как шаблоны
для старта. Здесь нам предлагают выбрать инструктор страниц, при помощи которого
мы потом будем работать с сайтом. Выбираем Elementor, попадаем в Библиотеку шаблонов. Это
примеры уже готовых сайтов, которые сделаны на теме astra и которые можно установить
на свой сайт. Для примера нажмем на первый шаблон. Здесь вы можете посмотреть
как выглядит весь сайт, какие есть страницы, какие блоки на них. Для полноценного
просмотра нажмем кнопку "Превью" внизу страницы. По сути - это полностью готовый сайт. Можете
зайти на разные его страницы, посмотреть как он выглядит. Смысл в том, чтобы установить
подобный сайт себе, потом отредактировать и использовать. Закрою превью и вернусь назад к
Списку шаблонов. Смотрите, на некоторых сайтах есть такая вот плашечка AGENCY. Видите, это значит,
что шаблон доступен только в платной версии темы astra pro. В платной версии больше возможностей,
можно менять вообще все, что угодно. Но даже в бесплатной набор инструментов позволяет сделать
симпатичный рабочий сайт. Здесь наверху можно отфильтровать шаблоны и выбрать только те, которые
доступны бесплатно. Давайте так и сделаем. Ставим переключатель на "Free". Как видите, среди бесплатных
шаблонов тоже много вариантов. Есть travel blog, интернет-магазин, сайт студии йоги, персональный сайт какого-то фитнес-тренера, сайт
стоматологической клиники, персональный сайт какого-то адвоката, fashion blog, сайт по аренде домов, автомойка. В общем масса всего. Конкретно
в этом видеоуроке мы будем делать магазин на шаблоне Brandstore, вот он.
Нажимаем на него. Вот такой сайт у нас получится. На его примере
мы будем делать свой магазин. Чтобы начать менять дизайн сайта под свои нужды, его нужно импортировать. Для этого
нажимаем внизу Import Complete Site. Всплывает окно, в котором нас просят выбрать
что именно нужно импортировать: настройки , виджеты, плагины, контент. Оставляем все эти
галочки по умолчанию и нажимаем "Импорт". Началась установка шаблона. Нам пишут,
что процесс может занять от 2 до 10 минут. Подождем, пока установка
закончится, а потом продолжим. Готово. Установка прошла успешно и нам предлагают
нажать кнопку "Посетить сайт" и посмотреть, что получилось. Давайте нажмем и посмотрим. Все выглядит отлично. Ну что, мы с вами сделали уже довольно много работы: установили wordpress, настроили
woocommerce, установили тему, выбрали и загрузили из нее шаблон. В следующем выпуске начнем работать
с дизайном сайта, а именно: переделаем меню на прозрачной плашке. Ссылка на выпуск сейчас появится
на конечном экране. Спасибо вам за просмотр! Расскажите, пожалуйста, в комментариях все ли у
вас получилось и задайте вопросы, если они есть.