Перейти к содержимому

Реферальная программа Мегаплана


Как создать и настроить интернет-магазин на Wordpress?

#1 Sergey Chesnokov

Sergey Chesnokov
  • Пользователь
  • 17 сообщений
  • Репутация: -4
0

Отправлено 27 Ноябрь 2012 - 14:26

Как создать и настроить интернет-магазин на Wordpress?


Доброго времени суток! Моя статья посвящена популярной теме создания интернет-магазина. Мой опыт создания собственного интернет-магазина начался с изучения платформы Insales, с помощью которой я сделал свой первый магазин подарков (опыт оказался неудачным, сейчас этот магазин закрыт). Кроме того, чуть позже я узнал о существовании других платформ (например, StoreLand), которые предоставляли более менее рабочий функционал.


Но! За аренду этих платформ надо платить. На Insales, конечно же, есть бесплатный тариф, но он содержит значительные ограничения по количеству товаров и интерфейсу. Кроме того, Insales предлагает лишь несколько бесплатных тем для оформления интернет-магазина. Если честно, ни одна из них меня полностью не удовлетворила…


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


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


Скажу вам, что я уже полтора года веду свой блог на Wordpress (его адрес http://mobile-dom.ru). За это время я полюбил этот движок и изучил его если не досконально, то очень хорошо. Почему бы не попробовать сделать интернет-магазин на Wordpress? Бесплатных тем для Wordpress в Интернете ОГРОМНОЕ количество.


Хостинг, на котором лежит мой блог и за который я плачу 175 рублей в месяц, позволяет размещать до 5 сайтов, следовательно дополнительных затрат не нужно. Сумма, которую я потратил – 140 рублей за покупку домена. Всё!

В итоге у меня получился работающий интернет-магазин на Wordpress. Вы можете его оценить по адресу http://case-cover.ru.


Изображение


Почему именно Wordpress?


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


- Никаких затрат. Все расходы за интернет-магазин – это хостинг (если у вас уже есть сайт, то в этом случае просто добавите ещё один сайт на хостинг) и домен (хотя вначале можно использовать поддомен, за который не нужно платить ни копейки).


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


- Добавляйте столько товаров, сколько вам нужно. Ограничения ставите только вы сами.


- Простота и удобство в использовании. Движок Wordpress является одним из самых популярных, ведь на нём работает большинство сайтов в Интернете.


Как же сделать на Wordpress интернет-магазин? Вот об этом я вам сейчас и расскажу на примере того, как я делал свой магазин case-cover.ru.


Пошаговая инструкция создания интернет-магазина на движке Wordpress.


1.Первым делом нам необходим хостинг.


Если он у вас есть – всё в порядке. Главное, чтобы ваш тарифный план позволил добавить ещё один сайт. Если хостинга нет, то рекомендую вам Timeweb, которым пользуюсь сам. Выбрать тарифный план вы можете здесь: timeweb.ru/services/hosting/

Я пользуюсь тарифом Optimo (175 рублей в месяц). Вам же на первое время достаточно будет тарифа Year (120 рублей в месяц). Жмёте на кнопку «Заказать» и дальше делаете всё по инструкции.


Изображение


2. Далее нужно купить домен для интернет-магазина.


Повторюсь – если не хотите тратиться вовсе на домен, то можно создать поддомен. Этот вариант подойдёт лишь тем, у кого уже есть купленный домен.


Вот, например, я для своего домена mobile-dom.ru мог создать поддомен case.mobile-dom.ru и на нём разместить интернет-магазин.


Но если вы серьёзно решили заняться интернет-магазином, советую приобрести домен второго уровня (как case-cover.ru). Так будет лучше для продвижения сайта, к тому же короткий адрес выглядит намного красивее.

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

Заходите на timeweb.ru, вводите логин и пароль и жмёте «ВОЙТИ»


Изображение


Далее выбираете раздел «Управление доменами».



Изображение

Нажимаете «Зарегистрировать домен».



Изображение


Вводите желаемое имя домена, нажимаете оплатить и всё: вы счастливый владелец собственного домена.



Изображение


3.Третий этап – установка Wordpress на сайт.


Ничего общего с установкой Windows тут нет.


Скажу сразу, что если вы в курсе, как установить Wordpress, не сочтите, что моя инструкция лишком подробная и я пишу тут вещи, которые «даже дураку понятны». Я пишу для всех, включая новичков в этом деле. Если вам определённый этап известен, то вы можете его пропустить.


Для того, чтобы установить движок Wordpress на свой новоиспечённый сайт, необходимо перейти в раздел «Конструкторы сайтов».



Изображение


Далее – раздел «Блоги» – «Wordpress».



Изображение


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



Изображение


Это стандартная тема Wordpress. У вас она может быть немного другой.


Не забудьте логин и пароль от сайта!


Их вы найдёте в разделе «Конструкторы сайтов». Внизу будет кнопочка «Список установленных CMS».



Изображение


Выбираете сайт, нажимаете «Реквизиты» и выписываете логин и пароль себе в блокнотик, чтобы потом не искать.



Изображение


Вход в админ-панель сайта осуществляется по адресу:


ваш сайт/wp-admin



4. Переходим к оформлению сайта.


И первым делом нужно выбрать тему, которая будет устраивать нас по всем параметрам.

Выбирать бесплатную тему лучше всего на сайтах:


blogstyle.ru/

www.wptheme.us/


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

Мой совет: выбирайте тему с двумя сайдбарами (двумя колонками – справа и слева). Одного сайдбара вам будет не хватать, говорю по своему опыту.

Я выбрал тему HighTech. В своём первоначальном виде она выглядит так.



Изображение


Как только найдёте подходящую тему – скачайте её на компьютер. Файл с темой представляет собой ZIP-архив.


После этого заходим в админ-панель сайта и выбираем раздел меню «Внешний вид» – «Темы» – «Установить темы».


Изображение



Нажимаете «Загрузить», находите на компьютере архив с темой и жмёте «Установить».



Изображение


Процесс установки темы занимает несколько секунд.


5. Далее мы начинаем наполнять сайт нужным контентом и информацией.


Начнём с создания страниц и рубрик. Я, опять же, на примере своего сайта, покажу, что, как и куда нажимать, чтобы наш сайт на Wordpress превратился в интернет-магазин.


Страницы.


Страницы можете делать какие вам заблагорассудится, но я вам советую ОБЯЗАТЕЛЬНО сделать следующие:


- контакты,

- доставка,

- оплата,

- гарантии,

- обратная связь,

- как заказать товар.


Посмотрите, как это сделано на моём сайте.



Изображение


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


Страницы создаются и оформляются в админ-панели сайта («Страницы – Добавить новую»).



Изображение

Рубрики.


Рубрики нужны нам для того, чтобы сгруппировать товар в определённые категории. Проще говоря, рубрики – это группы товаров.

В моём случае это «Чехлы для iPad», «Чехлы для iPhone» и др.



Изображение


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

Для создания рубрики необходимо выбрать в админ-панели пункт «Записи» – «Рубрики» – «Добавить новую рубрику».



Изображение


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



Изображение


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

Как создать подрубрику? Выбираете пункт «Добавить новую рубрику» (как и при создании рубрики), прописываете название и во вкладке «Родительская» выбираете уже созданную рубрику, к которой будет относиться создаваемая подрубрика. Вот и всё.



Изображение


6. Добавление товара.


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

Сколько у вас товаров? 50? 100? Никаких ограничений нет – добавляйте хоть 200. Это лишь вопрос времени.


Что нам нужно прежде всего, чтобы выложить товар в интернет-магазине? Конечно же фото товара!

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


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


Например, в моём магазине можно было бы под каждым товаром написать, что это чехол, он нужен для того-то и того-то, без него вы как без рук и т.д. и т.п. Но зачем всё это? Сейчас все прекрасно представляют, для чего нужен чехол на мобильный телефон, поэтому данный товар не нуждается в описании. Единственное, что нужно сказать – это материал, из которого он сделан. У меня это описано в самом начале.



Изображение


Товар мы будем добавлять с помощью пункта меню «Записи» – «Добавить новую». В появившемся окошке мы описываем товар, добавляем фотографии, ставим цены.



Изображение


Далее выбираем рубрику, в которой будет размещена эта запись и нажимаем «Опубликовать».


Изображение


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


7. Оформление шапки сайта.


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

У меня же получилось поставить свою картинку в шапку!


Изображение


Как поменять шапку сайта?

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


Изображение


Если такой пункт в вашей теме отсутствует, не спешите паниковать. Для того, чтобы изменить изображение в шапке, вам необходимо открыть архив с вашей темой, который вы скачали себе на компьютер. В архиве есть папочка «images».


Изображение


Именно в ней обычно расположен файл с изображением шапки сайта (формат JPG). Этот файл вам необходимо заменить на тот, который вы хотите видеть на сайте. После этого нужно заново установить тему на сайт.


Важные правила:


Новое изображение должно быть точно такого же размера, как и исходное. (Например, исходное имеет размер 1500х600 пикселей. Новая картинка должна быть точно такая же. Создать новое изображение и подогнать нужное разрешение вам поможет программа Фотошоп).


Если вы не нашли в архиве темы нужную картинку, или после замены шапка на сайте отображается некорректно, то советую вам обратиться к фрилансерам на сайте Workzilla.ru или Free-lance.ru. За небольшую сумму (50-100 рублей) вам всё исправят и сделают.


Основные требования к шапке:

- понятный заголовок

- адекватная заголовку картинка,

- желательно номер телефона с указанием города.


8. Следующий этап – это оформление сайдбаров.


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


Для начала найдём в админ-панели сайта меню «Внешний вид» – «Виджеты».


Изображение


Что такое виджет? Это наглядно представлено на следующем скриншоте.


Изображение


Если вы хотите поместить в сайдбар какую-либо текстовую информацию, это можно сделать с помощью виджета «Текст».


Изображение


Перетащите его в колонку сайдбара.


Изображение


Напишите какой-либо текст и сохраните.


Изображение


Вроде готово, но…


То, как это будет выглядеть на сайте, не оставит положительного впечатления.


Изображение


Хочется ведь и пожирнее, и другим цветом, а может ещё и с картинкой. Именно поэтому мой вам совет:


Добавляйте в сайдбары картинки!


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

Посмотрите, как это сделано на моём сайте.


Изображение Изображение


Допустим, картинка готова. Как добавить её в сайдбар?


Заходим в админ-панель, меню «Медиафайлы» – «Добавить новый».


Изображение


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


Изображение


Нажимаем сохранить и переходим в раздел «Внешний вид» – «Виджеты». Выбираем виджет «Текст», перетаскиваем его в сайдбар и вводим следующий код:



<center>

<img style="width: 170px; height: 170px;" alt="название картинки"

src=" Abcdef ">

</a></center>


Abcdef – это скопированная чуть ранее строчка. Размер изображения указываем такой, чтобы картинка на сайте отображалась корректно и умещалась по размеру. У меня это размер 170х170 пикселей.

Готово!


Теперь ещё один важный момент. Если в сайдбаре моего сайта вы нажмёте на картинку «Сделать заказ», то перейдёте на страницу с описанием того, как заказать товар. Как это сделать?


Изображение


Всё делается по аналогии с добавлением картинки в сайдбар. Отличие лишь в коде:



<center>

<a href=" Cсылка на страницу "

<img style="width: 170px; height:100px;" alt="название товара"

src=" Abcdef ">

</a><center>


Ссылка на страницу – адрес странички, на которую будет осуществляться переход при нажатии на картинку.


9. Некоторые секреты и нюансы создания интернет-магазина на Wordpress.


Что отображать на главной странице сайта?

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


Создайте новую запись, которую вы хотите видеть на главной странице. Для этой записи выберите рубрику «Без рубрики» (она уже есть по умолчанию в теме).


Изображение


Зайдите в админ-панель, меню «Параметры» – «Чтение».


Изображение


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


Изображение


Нажмите «Сохранить изменения».


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


Изображение


Затем меняем у этой записи дату публикации.


Изображение


Допустим, все записи на сайт вы добавляли 7 ноября. Чтобы сделать именно эту запись последней, ставьте ей дату 8 ноября. Теперь на главной странице сайта будет отображаться именно она.


Как сделать так, чтобы при нажатии на рубрику сразу попадать на вложенную в неё запись?

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

Для этого необходимо выбрать меню «Внешний вид» – «Редактор» и найти в правой колонке файл functions.php.


Изображение Изображение


Открываем его и в самом конце добавляем следующий фрагмент кода:



function redirect_to_post() {
global $wp_query;
if ( is_category() && $wp_query->post_count == 1 ) {
wp_redirect( get_permalink($wp_query->post->ID) );
exit;
}
}
add_action('wp', 'redirect_to_post');


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


Я описал вам основные шаги по созданию интернет-магазина на движке Wordpress. Я старался сделать описание максимально подробным и понятным для новичков, которые только-только начинают изучать Wordpress.


Советую почитать статьи по Wordpress, которые вы без труда найдёте в интернете. Это даст вам больше знаний о нём, и, возможно, вы уже задумаетесь о том, чтобы сделать на Wordpress не только интернет-магазин или блог, но и какой-либо иной проект.



Удачных вам начинаний!


С уважением, Сергей Чесноков.


При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • -1

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Интернет-магазин на Wordpress - возможно, оцениваем
  2. Интернет магазин на wordpress
  3. Как создать сайт на wordpress за час — Инструкция для новичков
  4. Интернет магазин на вордпресс.
  5. Можно ли создавать большие сайты на Wordpress?

#2 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 27 Ноябрь 2012 - 14:56

Описание отличное, но позвольте - это ведь не интернет-магазин, а просто каталог товаров. Спасти ситуацию может создание формы заказа для каждого товара. Посетитель жмет Заказать. Открывается форма, в которой автоматом подставляется идентификатор товара (тайтл, пермалинк, айди или что еще), и ему остается только вбить фио, телефон и адрес. Вы перезваниваете, уточняете и отправляете.
  • 2

#3 Sergey Chesnokov

Sergey Chesnokov
    Topic Starter
  • Пользователь
  • 17 сообщений
  • Репутация: -4

Отправлено 27 Ноябрь 2012 - 17:02

Описывал на примере того, как я делал свой интернет-магазин. Всё, что вы говорите, довольно трудно реализовать начинающему пользователю. Придётся обращаться к фрилансерам, а это дополнительные затраты. Мой магазин всё-таки выполняет свои функции, несмотря на всю простоту. (Считаю, что правильнее называть интернет-магазин, а не каталог. Каталог не продаёт, а магазин продаёт...). Спасибо за комментарий!)
  • -2

#4 vervekin

vervekin
  • Пользователь
  • 38 сообщений
  • Репутация: 10

Отправлено 29 Ноябрь 2012 - 08:39

sae прав, интернет-магазин подразумевает возможность онлайн-оплаты, иначе это - каталог с ценами.
  • 2

#5 Sergey Chesnokov

Sergey Chesnokov
    Topic Starter
  • Пользователь
  • 17 сообщений
  • Репутация: -4

Отправлено 30 Ноябрь 2012 - 17:00

sae прав, интернет-магазин подразумевает возможность онлайн-оплаты, иначе это - каталог с ценами.

Это всё формальности. Есть куча магазинов, которые имеют форму оплаты на сайте, но их продажи находятся на плачевном уровне. Потому что владельцы таких магазинов концентрируют внимание на том, чтобы интернет-магазин обладал "правильной" структурой, т.е. содержал формы оплаты, заказа, кнопку "Купить" и пр... Но при этом они забывают о главном: простоте и удобстве для покупателя. А тут на первый план выходят такие моменты, как:
- понятные и красивые фотографии,
- наличие телефона и прочих контактов на видном месте,
- простота навигации по интернет-магазину.
Цель каждого интернет-магазина состоит не в том, чтобы быть шаблонным, а в том, чтобы ПРОДАВАТЬ и ещё раз ПРОДАВАТЬ.
Спасибо за комментарий!
  • -1

#6 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 30 Ноябрь 2012 - 17:34

Sergey Chesnokov, Вам пытаются сказать, что есть 2 различных типа сайтов - каталог и интернет-магазин. Интернет-магазин подразумевает корзину и это не формальность, а основа определения и основное отличие от каталога. Пусть этот сайт будет некрасивым, неудобным для покупателя, но... если на сайте есть корзина, то это уже интернет-магазин. То, что показали Вы - это, как ни крути, все же каталог товаров.
Посудите сами, ведь если мы таксу назовем пуделем, то от этого она пуделем совсем не станет... даже если мы на нее нацепим парик. Это я к тому, что Вы можете называть сайт интернет-магазином, но без корзины - это все же каталог цен. И если клиент закажет Вам интернет-магазин, а в готовом продукте не найдет корзины товаров, то Вы ему можете хоть сто миллионов раз говорить о том, какой удобный и красивый сайт... клиент этого не поймет и будет требовать доработки согласно требованиям.

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

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


#7 Sergey Chesnokov

Sergey Chesnokov
    Topic Starter
  • Пользователь
  • 17 сообщений
  • Репутация: -4

Отправлено 03 Декабрь 2012 - 11:13

Возможно, вы и правы. Но тема моей статьи не изменится. Она останется такой же: "Как создать и настроить интернет-магазин на Wordpress". Потому что в Wordpress реализации Корзины нет. Между тем, это самый простой движок для изучения. Поэтому новичкам, которые хотят что-то продавать в интернете, но не хотят вкладывать много денег в создание сайта, такой вариант отлично подойдёт.
  • 0

#8 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 03 Декабрь 2012 - 11:29

...Потому что в Wordpress реализации Корзины нет...

Почему нет. В WordPress при желании можно создать что угодно, в том числе и интернет-магазин. Например, я писал урок о создании интернет-магазина на WordPress.
А вот и "живое" подтверждение - интернет-магазин, созданный на основе указанного урока. Сайт бал написан буквально за 1-2 дня... точнее уж и не помню.
  • 2


#9 HueJack

HueJack
  • Пользователь
  • 118 сообщений
  • Репутация: 11

Отправлено 03 Декабрь 2012 - 15:14

Плагин WP_SHOP в связке плагином cForm решит все ваши проблемы с корзиной и формой заказа! Десять минут времени и ваш каталог превращается... превращается.. в интернет-магазин!;)

Но даже то, что это не достаточно полноценный магазин статья хорошая, уверен, новички почерпнут много полезного:) Хотя я делаю немного попроще все это..
  • 2

#10 Sergey Chesnokov

Sergey Chesnokov
    Topic Starter
  • Пользователь
  • 17 сообщений
  • Репутация: -4

Отправлено 05 Декабрь 2012 - 17:53

Почему нет. В WordPress при желании можно создать что угодно, в том числе и интернет-магазин. Например, я писал урок о создании интернет-магазина на WordPress.
А вот и "живое" подтверждение - интернет-магазин, созданный на основе указанного урока. Сайт бал написан буквально за 1-2 дня... точнее уж и не помню.

Спасибо за полезную информацию! В дальнейшем обязательно доработаю магазин!)
  • -1

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru