Свой интернет-магазин с нуля под ключ и самостоятельно. Пошаговая инструкция.

Автор курса Анфиса Бреус.

Пошаговая инструкция. Урок №1.

1-1. Покупка хостинг и доменного имени для интернет-магазина.

На примере хостинга Timeweb >>>

Подсказка: 13 правил по выбору хостинга для блога/интернет-магазина на WordPress

Подсказка: Как выбрать доменное имя для блога/интернет-магазина. 

Как купить хостинг и доменное имя для интернет-магазина

1-2. Создание почтового ящика с доменным именем блога

Как создать почтовый ящик на хостинге Timeweb.

1-3. Установка бесплатно или платно SSL сертификата безопасности для перевода интернет-магазина на https

Бесплатный метод: с помощью бесплатного SSL Let’s Encrypt – сертификата безопасности.

Как подключить к домену бесплатный SSL Let’s Encrypt-сертификат на хостинге Timeweb.

Подсказка: SSL Let’s Encrypt – сертификат выдается на 90 дней с продление каждые 90 дней автоматически. Он не работает на очень старых браузерах (редкое явление). Рекомендуем установить именно этот сертификат , если интернет-магазин только создан и не еще приносит достаточный доход..

Платный метод: с помощью платного COMODO POSITIVE SSL – сертификата безопасности.

Как подключить к домену платный COMODO POSITIVE SSL-сертификат на хостинге Timeweb.

Подсказка: Для интернет-магазинов  подойдет SSL сертификат с проверкой домена [DV] – COMODO POSITIVE SSL (выдается за 5 минут). Стоимость: 564 рубля – на год или 470 рублей при оплате за три года, а также SSL сертификаты с проверкой организации [OV]  – COMODO INSTANT SSL (проверка организации (требуется предоставление документов и проверка занимает несколько дней)). Стоимость: 5291 рубль – на год или 4409 рублей при оплате за три года

Для того, чтобы купить дешево платные  COMODO POSITIVE SSL  или COMODO INSTANT SSL кликните на эту ссылку >>> 

Подсказка: Как купить дешево платный COMODO POSITIVE SSL-сертификат. 

1-4. Установка WordPress, настройка и проверка работы WordPress после установки SSL-сертификата.

Как установить WordPress на хостинге Timeweb.

Как настроить и проверить интернет-магазин на WordPress после установки SSL-сертификата.

Сервис проверки: https://www.sslshopper.com/

1-5. Установка шаблон AB-Inspiration, плагинов WooCommerce и AB-WooCommerce.

Файлы для урока №1 – скачать

Содержание папки urok 1:

  1. папка localization
  2. папка plugins
  3. архив – ab-inspiration.zip
  4. файл – dummy-data.xml

Как установить шаблон AB-Inspiration.

Подсказка:  Как решить проблемы которые могут возникнуть при установке шаблона AB-Inspiration

1. Во время активации шаблона AB-inspiration исчез сайт появилась ошибка 500
Эта проблема связана с устаревшей версией PHP.
Чтобы исправить нужно сделать следующее:
1. Зайти на хостинг под своим логином и паролем
2. Перейти в раздел “Управление сайтами”
3. Напротив домена нажать на значок шестеренки
4. Выбрать из списка версию PHP 5.6 или 7.0
Сохранить изменения


2. Во время загрузки архива с шаблоном появилась ошибка о недостаточном количестве памяти: “The uploaded file exceeds the upload_max_filesize directive in php.ini”

Необходимо увеличить размер загружаемого файла

1. Нужно зайти на хостинг в файловый менеджер в корневую папку сайта
2. Открыть файл .htaccess
3. Вставить следующий код:

php_value upload_max_filesize 64M
php_value post_max_size 64M

4. Сохранить изменения

После этого повторите загрузку шаблона


3. Ошибка 502 во время импорта данных (файл dummy-data.xml) демонстационных товаров интернет-магазина

Это серверная ошибка. Нужно просто обновить страницу и загрузить файл еще раз.

 

Как установить плагин WooCommerce для создания Интернет-магазина.

Как установить плагин интеграции AB-WooCommerce.

1-6. Установка демонстрационных товаров

Как импортировать демонстрационные товары в интернет-магазин.

1-7. Установка плагинов для шаблона AB-Inspiration

Как установить 9 плагинов для интернет-магазина.

 

Пошаговая инструкция. Урок №2.

Для выполнения заданий 2-го урока Вам потребуется:

  • Своя фотография (фотопортрет) размером мин 640х640 пикселей
  • Картинка логотипа сайта или любое фото размером 640х640 пикселей, отражающее суть вашего проекта.
  • Email аккаунта в Google и пароль к нему
  • Email аккаунта в Yandex и пароль к нему

Ссылки на свои аккаунты в социальных сетях:

2-1.  Базовая настройка. Разделы  WordPress “Настройки” и “Пользователи”

Как сделать базовые настройки интернет-магазина. Раздел “Настройки”.

формат даты

[cc lang=”html”]
j F Y
[/cc]

сервисы обновления

[cc lang=”html”]
http://blogsearch.google.com/ping/RPC2
http://blogsearch.google.ru/ping/RPC2
http://ping.blogs.yandex.ru/RPC2
http://rpc.pingomatic.com/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://submissions.ask.com/ping
http://api.my.yahoo.com/rss/ping
http://api.my.yahoo.com/RPC2
http://api.moreover.com/ping
http://api.moreover.com/RPC2
http://ping.feedburner.com/
[/cc]

 

Как создать и настроить граватар. Раздел “Пользователи”.

Потребуется Ваш фото портрет размером 640х640 пикселей

2-2. Настройка плагинов и установка файла robots.txt

Как бесплатно установить и настроить плагин Akismet

Как настроить плагин All In One Seo Pack и файл robots.txt

файл robots.txt:

ДоменВашегоСайта.ru заменить на свой домен сайта!

[cc lang=”html”]

User-agent: *
Disallow: /wp-admin/
Disallow: /*/feed
Host: https://ДоменВашегоСайта.ru
Sitemap: https://ДоменВашегоСайта.ru/sitemap.xml

User-agent: Googlebot-Image
Allow: /wp-content/uploads/

User-agent: YandexImages
Allow: /wp-content/uploads/

User-agent: Twitterbot
Allow: /wp-content/uploads/

[/cc]

 

Как настроить плагин ответа на комментарии ReplyMe.

Email Subject

[cc]
На Ваш комментарий к этой записи <[posttitle]> есть новый ответ!
[/cc]

Email Content (HTML enable)

[cc]
На ваш комментарий к статье [posttitle] есть ответ.

Ваш комментарий:

[commentmsg]

[commenter] —— [commenttime]

Ответ на ваш комментарий:

[newcommentmsg]

[newcommenter] —— [newcommenttime]
Посмотреть комментарий на блоге: [newcommenturl]

Спасибо за комментарии на блоге [blogname] 🙂
[blogurl]

[/cc]

 

Как настроить плагин SEO Friendly Images

 

2.3. Настройка шаблона AB-Inspiration”.  Раздел “Вставки” (Раздел WordPress “Внешний вид”, далее, “Настройка шаблона”).

Как добавить иконку сайта Favicon в адресную строку браузера

Потребуется квадратная картинка логотипа интернет-магазина или Ваше фото

Подсказка: Сервис для создания Фавикона: http://pr-cy.ru/favicon/

Как для соцсетей установить картинку по умолчанию

Потребуется картинка логотипа сайта или любое фото размером 640х640 пикселей, отражающее суть вашего проекта.

Установка ключевой фразы блога и интернет- магазина

Как получить и установить в разделе Вставки ID Twitter

Подсказка: Соцсеть Твиттер: https://www.twitter.com/

Как получить и установить в разделе Вставки ID профиля Facebook

Подсказка: Соцсеть Фейсбук: https://www.facebook.com/

Как получить и установить в разделе Вставки ID приложения Facebook

Подсказка: Управление приложениями Фейсбук: https://developers.facebook.com/apps/

Как получить и установить в разделе Вставки ID приложения VKontakte

Подсказка: Управление приложениями ВКонтакте: https://vk.com/apps?act=manage

Как получить и установить в разделе Вставки ID группы в Одноклассниках

Подсказка: Соцсеть Однокласники: https://ok.ru/

Как получить и установить в разделе Вставки ID профиля GOOGLE+

Подсказка: Соцсеть Гугл Плюс: https://plus.google.com/

Как получить и установить в разделе Вставки ID Feedburner для ленты RSS

Подсказка: Сайт FeedBurner: https://feedburner.google.com/

Google Webmasters Tools. Как подтвердить право собственности.

Подсказка: Сайт Google Webmaster Tools: https://www.google.com/webmasters/tools/home

Яндекс.Вебмастер. Как подтвердить право собственности.

Подсказка: Сайт Яндекс.Вебмастер: https://webmaster.yandex.ru/

Как настроить и установить на сайт интернет-магазина код счетчика Google Analytics

Подсказка: Сайт Google Analytics: https://analytics.google.com/analytics/web/

Как настроить и установить на сайт интернет-магазина код счетчика Яндекс Метрика

Подсказка: Сайт Яндекс Метрика: https://metrika.yandex.ru/

Как установить Email для формы обратной связи и reCAPTCHA

Подсказка: Сайт reCAPTCHA: https://www.google.com/recaptcha/intro/invisible.html

Пошаговая инструкция. Урок №3.

Для выполнения заданий 3-го урока Вам потребуется:

Ссылки на свои аккаунты в социальных сетях:

3.1. Создание страниц “О нас/О магазине “, “Контакты/Связатся с нами”, Карта сайта”

Как создать страницу “О нас”

Как создать страницу “Контакты”
Подсказка:   Пример   |   Шаблон-заготовка ( копировать-вставить-редактировать)

Пример текста страницы “Контакты” в упрощенном виде
[cc lang=”html”]
Название компании:
Телефон:
Почтовый адрес:
Фактический адрес:
Юридический адрес:
Email:
Отправьте ваше сообщение через форму ниже:
[/cc]

Подсказка: Как создавать различные формы с помощью плагина Contact Form 7

Как создать страницу “Карта сайта”

3.2. Создание страниц “Блог “и “Магазин”. Настройка меню.

Как создать страницы “Блог” и “Магазин”, и настроить меню для их отображения

3.3. Настойка виджетов Боковой колонки блога интернет-магазина

Обзор виджетов для настройки боковой колонки блога и интернет-магазина.

Как настроить виджет “Приветствие автора”

Как настроить виджет соцсетей “Следуй за мной”

Как настроить виджет “Facebook Like Box”

Подсказка: Как открыть фанстраницу в Facebook

Как настроить виджет “Группа В Контакте”

Подсказка: Как открыть группу в ВКонтакте

Как настроить виджет “Группа в Одноклассниках”

Как настроить виджет “Профиль в Google+”

Как настроить виджет “Twitter лента”

Как настроить виджет “Подписка на канал YouTube”

Как настроить виджет “Фото Инстаграм”

Как настроить виджет “Свежие записи с миниатюрами”

Как настроить виджет “Топ комментарии”

Как настроить виджет “Свежие комментарии”

Как настроить виджет “Рекомендую”

Как создать баннер для виджета “Баннер на всю ширину”

Как настроить виджет “Управление”

Как настроить виджет “Рубрики”

3.4. Виджеты WooCommerce для боковой колонки блога

Как и какие виджеты интернет-магазина WooCommerce можно разместить в боковой колонке блога

3.5. Настройка виджета “Видет в шапке” 

Как настроить виджет “Виджет в шапке”

3.6. Настройка виджетов боковой колонки интернет-магазина WooCommerce

Как настроить виджеты боковой колонки интернет-магазина на WooCommerce

 

Пошаговая инструкция. Урок №4.

4.1.  Раздел “Товары” плагина WooCommerce 

Настройка – подготовка магазина к загрузке товара

Обзор функций

4.2.  Простой товар. 

Как создать простой товар с заголовком, описание, картинкой и ценой

Как к товару добавить картинку, чтобы он отображался в виде галереи

Как к товару добавить дополнительное описание

Как сделать скидку на прстой товар

Как на товар запланировать скидку на определенное время

Как управлять запасами товаров, если товар ограничен

Как указать вес и габариты товара

4.3.  Апселл (Up-sell)

Как к основному товару настроить Апселл (Up-sell)

4.4. Кросселл (Cross-sell)

Как к основному товару настроить Кросселл (Cross-sell)

4.5.  Атрибуты.

Как разместить на странице товара его дополнительные характеристики

Как отредактировать значение атрибута

4.6. Сообщение для покупателя 

Как для покупателя добавить примечание к товару

4.7. Порядок отображение товаров

Как определить порядок отображение товаров на странице с товарами

4.8. Отзывы

Как отключить отзывы в товаре в начале продаж

4.9. Вариативный товар

Как создать вариативный товар

4.10. Cгруппированный товар

Как создать сгруппированный товар

4.11. Партнерский товар

Как создать партнерский товар для продажи товара по партнерской ссылке

4.12. Цифровой товар для скачивания

Как создать товар для скачивания

4.13. Категории товаров

Как создавать категории для товаров

Как редактировать категорию товара

Как удалять категории товаров

Как добавить изображение категории

Как настроить виджет категории товаров на странице магазина

Как сортировать категории в виджете боковой колонки магазина

Как отобразить текст описание категорий на странице с категориями

Как на странице с товарами отобразить рубрики (категории)

4.14. Удаление демонстрационных товаров и категорий

Как удалить демонстрационные товары и категории

 

 

Пошаговая инструкция. Урок №5.

Для выполнения заданий пятого урока необходимо:

  1. Кликнуть по ссылке и  скачать  архив плагина “Живая Форма+Слайдер” (нераспаковывать!):   wpform.zip
  2. Для трех рубрик с товарами подготовить 3-и картинки размером 770 пикселей по ширине × 660 пикселей по высоте.
  3. Подготовить картинку для оформление шапки интернет-магазина размером 1100 пикселей, по ширине х 450 пикселей по высоте. По высоте картинка может быть другого размера.

Подсказка: 

Бесплатные фотостоки:
https://pixabay.com/
http://www.stockvault.net/
https://stocksnap.io/
https://www.pexels.com/
http://www.stockvault.net/
https://www.vectorstock.com/
http://openphoto.net/

Платные фотостоки:

https://www.shutterstock.com/
https://ru.depositphotos.com/
https://ru.dreamstime.com/
https://photodune.net/
https://www.dollarphotoclub.com/
https://www.istockphoto.com/

Как проверить картинку на уникальность:

https://tineye.com/
https://images.google.ru
https://images.yandex.ru

Как создать свое изображение:
http://pixlr.com/editor/ — онлайн фотошоп
https://www.canva.com/ — создать свое изображение с текстом

Оптимизация изобажений: 
https://tinypng.com/
https://developers.google.com/speed/pagespeed/insights/

 

5.1. Создания обязательных страниц интернет-магазина

Как создать страницу “Оплата и доставка”
Подсказка:   Пример  |  Шаблоны-заготовки ( копировать-вставить-редактировать)

Как создать страницу “Гарантия возврата товара или отказа от услуги”
Подсказка:   Пример  |    Шаблоны-заготовки ( копировать-вставить-редактировать)

Как создать страницу “Политика конфиденциальности”
Подсказка:   Пример  |   Шаблон-заготовка ( копировать-вставить-редактировать)

Как создать страницу “Правовая информация”
Подсказка:   Пример  |  Шаблоны-заготовки ( копировать-вставить-редактировать)

Как создать страницу “Согласие с рассылкой”
Подсказка:   Пример  |  Шаблон-заготовка ( копировать-вставить-редактировать)

Как создать страницу “Главная”

Как переименовать рубрику “Без рубрики” в “Акции и новости”

Как назначить страницы “Главной” и “Блог” для главной магазина и вывода статей блога

Как создать страницу “Войти в личный кабинет”

5.2. Настройка меню: верхнего, основного и нижнего.

Как создать меню в верхней части интернет-магазина

Как создать “Главное меню”, которое идет под шапкой

Как создать меню в нижней части интернет-магазина

5.3. Создание и настройка произвольного меню для списков страниц в нижней части сайта

Как создать три произвольных меню для виджета в футере

5.4. Редактирование меню

Как редактировать уже созданные меню

5.5. Информация об ИП в нижней части сайта

Как добавить произвольную строку в нижней части интернет-магазина
Подсказка:
[cc lang=”html”]

ИП ВАШЕ ФИО. ОГРН 300034200184301

[/cc]

5.6. Настройка шапки магазина с помощью плагина WP Form  “Живая Форма +Слайдер”

Как загрузить, активировать и настроить плагин WP Form

5.7. Настройка главной страницы (витрины) с помощью плагина AB-WooCommerce

Какие есть настройки для страницы с товарами

Обзор настроек главной страницы ( витрины ) интернет-магазина

Как настроить первый уровень главной страницы – категории

Как настроить второй уровень главной страницы – реклама

Как настроить третий уровень главной страницы – наши товары 

Как настроить четвертый уровень главной страницы – форма подписки

Как настроить пятый уровень главной страницы – отзывы пользователей

Как на главной странице менять местами уровни

5.8. Настройка и изменение внешнего вида интернет-магазина

Как быстро и просто изменить цветовую гамму внешнего вида интернет-магазина

Первый вариант, как подобрать гармоничные цвета сайта используя одно фото слайда
Подсказка: 
http://www.cssdrive.com/imagepalette/index.php      
https://colorscheme.ru/
http://colllor.com/

Второй вариант подбора цвета

Как настроить цвет уровня с рекламой

Как отрегулировать расположение заголовка (лого) в шапке магазина

Как отрегулировать расположение виджета в шапке магазина

Как заменить текстовое название сайта на картинку логотип

Как посередине шапки разместить меню вместо виджета в шапке

Как заменить цвет в шапке интернет-магазина

5.9. Поиск изображения для слайдов главной страницы

Как искать изображение для слайдов главной страницы

 

 

Пошаговая инструкция. Урок №6.

 

6.1. Основные настройки

Основные настройки. Как настроить куда продавать и куда доставлять товары.

Как настроить общие параметры доставки товара

Как настроить зоны и методы доставки товара

6.2. Местная доставка товара

Как настроить местную доставку – самовывоз

Как настроить местную доставку – курьером по городу 

Как настроить местную доставку – курьером по городу и бесплатно

Как проверить правильность настройки местной доставки

6.3. Доставка по стране

Как настроить доставку товара по стране (на примере России)

Подсказка: Плагин Почта России и EMS для WooCommerce

Как настроить доставку товара по России Почтой России

Как настроить доставку Почтой России ценной бандероли первого класса

Как настроить доставку товара курьерской службой EMS

Как проверить правильность настройки методов доставки по России

6.4. Доставка по странам мира

Как настроить доставку товара по странам мира

6.5. Бесплатная доставка

Как настроить доставку товара в маленьком городке, которого нет в общем списке городов

Как настроить бесплатный метод доставки за минимальную стоимость заказа

Как настроить бесплатную доставку товара по купону

Как объединить бесплатную доставку и доставку по купону

Как сделать так, чтобы все платные доставки исчезали, если в списке есть бесплатная доставка

 

Пошаговая инструкция. Урок №7.

 

Для подключения платежных систем подготовить:
1.СКАНЫ 2-Х СТРАНИЦ СВОЕГО ПАСПОРТА
основную и страницу с пропиской.
(формат картинок – PDF, или JPG, или PNG)
2. ПАСПОРТНЫЕ ДАННЫЕ
3. ИНН(свой) и/или ИНН(организации)
4. РЕКВИЗИТЫ РАСЧЕТНОГО СЧЕТА

 

7.1. Регистрация аккаунта в PayPal (для физических и юридических лиц)

Как настроить способ оплаты товара – PayPal

Инструкция – скриншоты: Подключение интернет-магазина к платежному сервису PayPal 

Подсказка: Ссылка для регистрации –  https://www.paypal.com/ru/webapps/mpp/account-selection

7.2. Регистрация аккаунта в ЮKassa (для юридических лиц)

Инструкция – скриншоты:  Подключение интернет-магазина к платежному сервису ЮKassa

Подсказка: Ссылка для регистрации –  https://yookassa.ru

7.3. Платежи.

Как активировать настройку купонов

Процесс оформления заказа 

Настройка страницы оформление заказа 

Как подключить безналичный перевод

Как настроить оплату для доставки товара курьером 

Как настроить наложенный платеж почтой России и EMS

Как поменять местами способы оплаты на странице “Оформление заказа”

Как отключить не нужный способ оплаты

 

 

Анфиса Бреус

About the author: Анфиса Бреус - разработчик сайтов на Wordpress с 2007 года. Создатель и разработчик универсального шаблона - конструктора "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов на WordPress. Основатель клуба "Мастер WordPress". Спикер. Путешественница

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *