О создании магазина на WordPress’е — Фотографии. И не только фотографии

О создании магазина на WordPress’е

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

Wikipedia.
WordPress — система управления содержимым сайта с открытым исходным кодом, распространяемая под GNU GPL. Написана на PHP, в качестве базы данных использует MySQL. Сфера применения — от блогов до достаточно сложных новостных ресурсов и интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты.

А тут вздумалось мне сделать площадку по реализации своих фотографий. И вот тут-то всё и началось. Нет, вы не подумайте, на самом деле, на всё про всё, у меня ушло не больше десяти рабочих дней чистого времени. В это входило: узнать, как попроще сделать свой интернет-магазин, установить-настроить, разобраться с системами оплаты и настроить их и ещё по мелочи. И, конечно, главное — минимум финансовых затрат. Как вы уже поняли, решения на базе WordPress’а оказались самыми подходящими.

Вот об этом и расскажу. Возможно, мой опыт кому-то и пригодится. А что получилось за эти полторы рабочих недели можно посмотреть здесь: PhotoStore. И не только посмотреть.

Я не думал, что магазин можно сделать и на WordPress’е, но поиск в Инете довольно быстро привёл меня к нему. Есть несколько плагинов позволяющих сделать инет-магазин без особых сложностей. После некоторого рассмотрения вариантов я остановился на WooCommerce. Он бесплатен, но, конечно, разработчик продаёт к нему разные расширения и вкусности, но существуют их бесплатные аналоги, да и задача у меня не такая сложная.

Сначала я пошёл по не совсем корректному пути — поставил ещё одну копию WordPress’а в дополнению к уже существующему для моего блога и на него стал устанавливать магазин. Но потом подумал, что плодить сущности, это не наш путь. И разобрался с вопросом создания мультисайтов. Суть мультисайтов в том, что у вас всего один движок WordPress’а, который ведёт несколько сайтов. При этом производится единое управление всеми плагинами и темами. Дополнительным побудительным мотивом стала мысль, что возможно придется сделать ещё несколько сайтов кроме блога и магазина и зачем мне несколько движков?

Т.к. при установке мультисайта выбрал вариант на поддоменах, то попутно обновил знания о DNS и веб-сервере Apache, что явилось приятным бонусом к процессу. Кстати, все это оказалось не так сложно, как может показаться. Даже если вы не являетесь владельцем собственного веб-сервера, решить эти вопросы с вашим хостером не представляется сложным. Конечно, в каждом конкретном случае надо разбираться отдельно. Но будем считать, что вы можете управлять не только веб-сервером, но и самим сервером, на котором он расположен.

И так, сначала устанавливается сам WordPress. Причем, можете установить русский вариант, даже если планируете делать сайты с расчетом на иностранную аудиторию. Затем, ознакомившись с описанием перехода на мультисайтность, переходите на нее.

Небольшое отступление в терминологию. При установке мультисайта вводится понятие сети. Под ней подразумевается набор (сеть) ваших сайтов находящихся под единым управлением с центральной (сетевой) консоли. Так что не пугайтесь, встретив дальше по тексту фразу «сетевая консоль». Это просто консоль управления всеми вашими сайтами.

Теперь создаете свой первый сайт. Вот тут есть нюанс. Если вы планируете использовать сайт для аудитории отличной от локализации используемого WordPress’а, то сразу после создания сайта нужно в консоли сайта зайти в настройки и в разделе Настройки-Общие выставить «Язык сайта» для вашего нового сайта. Например, в моём случае, при использовании русской версии движка, для сайта на английском языке в разделе «Настройки-Общие» я изменил значение с «Русский» на  «English (United States)».

Если вы планируете использовать сайт для аудитории отличной от локализации используемого WordPress’а, то сразу после создания сайта нужно в консоли сайта зайти в настройки и в разделе Настройки-Общие выставить «Язык сайта» для вашего нового сайта.

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

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

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

У меня установлены следующие плагины общего назначения:

  • Acunetix WP Security — полезный плагин для проверки безопасности.
  • Akismet — очень полезный плагин контролирующий комментарии на предмет спама и прочих вредоносных вещей. Бесплатен для некоммерческого использования.
  • BackWPup — позволяет делать бэкапы баз, в том числе и по расписанию. Его достаточно активировать на одном сайте, в ситуации с мультисайтами всё равно будут бэкапиться все базы.
  • Cyr to Lat enhanced — осуществляет транслитерацию русских букв в ссылках в латинские. Полезно при выборе некоторых типов постоянных ссылок.
  • Disqus Comment System — система, заменяющая штатное комментирование.
  • Facebook Auto Publish — осуществляет репост из вашего блога в facebook.
  • Google XML Sitemaps — строит sitemap.xml в помощь поисковикам.
  • Limit Attempts — контролирует вход в систему. При заданных условиях блокирует попытки входа с ip-адресов.
  • LiveJournal Crossposter — репостит новые записи из блога в LiveJournal. Плагин не без приколов, срабатывает через раз.
  • Media Library Assistant — расширяет возможности штатной библиотеки файлов. Например, позволяет добавлять категории файлам.
  • Page Links To — позволяет вместо страницы вставлять постоянную ссылку на другой ресурс.
  • Regenerate Thumbnails — перегенерирует тумбнаил-файлы (это такие маленькие копии больших изображений).
  • Super Socializer — добавляет кнопки соцсетей для того, что бы ваши пользователи могли радовать своих пользователей в соцсетях вашими произведениями, а так же обеспечивает логининг через соцсети.
  • Use Google Libraries — включает оптимизированные библиотеки от google. Полезно для оптимизации работы сайта.
  • WP Simple Adsense Insertion — помогает легко вставлять рекламу от Google Adsense в ваши посты. Если оно вам надо.
  • WP Super Cache — плагин позволяющий оптимизировать работу WordPress’а за счёт кэширования контента сайта.

Для работы магазина установил следующие плагины:

  • Form Maker — хороший генератор разнообразных форм. Использовал при подготовке страницы обратной связи.
  • Saphali Woocommerce Russian — русифицирует и добавляет некоторый функционал к WooCommerce.
  • WooCommerce — собственно движок магазина.
  • WooCommerce Customizer — помогает что-то улучшить. Но либо это что-то улучшается другими плагинами, либо я не понял что он кастомизирует.
  • Woocommerce Poor Guys Swiss Knife — управление страницами оплаты, можно указать, какие поля при заказе обязательны, какие не очень, какие вообще убрать, какие добавить. Полезен в случае, если вы не используете Saphali Woocommerce Russian, например, на англоязычном варианте магазина.
  • WooThemes Helper — управляет лицензиями продуктов от WooThemes, автора WooCommerce. У меня от них стоит бесплатная тема, поэтому плагин полезный.
  • XO10 — WooCommerce Categories widget — на момент написания этого текста совсем свежий плагин, но помог легко сделать виджет с перечнем категорий товаров-фотографий.

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

Но WooCommerce, это движок, который обеспечивает работу магазина. А вот для того, что бы организовать «витрину» и «торговый зал», к нему ещё нужно поставить какую-либо тему. Найти бесплатную тему для магазина оказалось очень сложно. В итоге я зарегистрировался на сайте WooThemes и скачала их бесплатную тему MyStile. У них есть ещё одна бесплатная тема и большое количество платных. Так что есть в чём повыбирать. Так же в Интернете есть рекомендации о том, как прикрутить обычные блоговые темы к магазину, но я не стал тратить на это время.

Настройка собственно магазина дело нудноватое, но не сложное. В Интернете много статей о настройке WooCommerce и заведении первых товаров. Полазьте в настройках самого магазина (WooCommerce — Settings). В принципе, там всё прозрачно. Затем покрутите настройки темы (в моём случае, это MyStile — Settings). Не буду на этом останавливаться. Лучше расскажу о разных нюансах.

Поддержка нескольких языков.

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

Попробовал плагин Stella для перевода. В принципе, всё шло нормально, но, во-первых, локализация проведена не до конца, нужно дозатачивать. Но и это не самое неприятное. Во-вторых, в какой-то момент начали сбоить ссылки: вместо, например, «ggg&lang=en» в строку адреса стало вставляться «ggg&lang=en», что приводило к перебросу на страницу с дефолтовым языком. И в итоге приводило к проблемам в работе самого магазина. В итоге я его снёс. После чего использование других бесплатных плагинов перестало вызывать у меня воодушевление. Поэтому, я пошёл по пути наименьшего сопротивления — просто сделал копию сайта на английском языке. Возможно, когда-нибудь я разбогатею и позволю себе попробовать платный плагин WPML. Но пока я согласен на двойную работу по ведению товаров. Даже третий язык потяну, не проблема. Но другого варианта пока не вижу.

Далее. Несмотря на то, что использование Saphali Woocommerce Russian достаточно неплохо в целом русифицирует магазин, а тема MyStile так же имеет русскую локализацию,  но, опять же она сделана не до конца. И пришлось вспоминать, как пользоваться poedit’ом. Эта программа, которая позволяет подготавливать файлы с переводом для ПО. Вот статья, которая популярно рассказывает, как это делать: Правильный перевод темы WordPress с помощью POT-файла.

Заодно пришлось разбираться с тем, где лежат соответствующие файлы с переводами. Темы и сам плагин магазина очень плотно переплетены. Поэтому переводить придётся как файлы для темы, так и для WooCommerce. И обратите внимание, что для WooCommerce требуется определённое название файла с переводом (тот, что подготавливается poedit’ом), отличное от общепринятого типа ru_RU.mo. Как оно выглядит прочтите в файле wp-content/plugins/woocommerce/i18n/languages/README.md. В моей версии (на момент написания статьи) его пришлось назвать woocommerce-ru_RU.mo.

Самое интересное, это перевод с английского на английский специфичности магазина. В моём случае, например, нужно было изменить слово product на photo. Оказывается, вполне можно создавать и такие переводы. Прям с английского на английский. Легко.

Дочерние темы.

Следующее о чём стоит рассказать, это дочерние темы. Если вы вносите изменения в оформление темы, а вносить их придётся, то лучше это делать в дочерних темах. Они, по сути, являются отдельной папкой, в которой лежат ваши файл style.css, functions.php и т.п. Прелесть таких дочерних тем в том, что при обновлении основной темы, ваши изменения не пропадут, а сразу начнут работать с обновлённой темой.

Подробней прочитать о дочерних темах можно здесь:

Сюда же можно положить ваши специфичные фонты, файлы стилей и прочая. А так же и описание изменений, которые, паче чаяний, придётся вносить в файлы основной темы.

Связь с соцсетями.

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

Плагин, поддерживающий оба этих требования был найден быстро. Это Super Socializer. Он и кнопочки позволяет разместить и залогиниться с помощью учётных записей из соцсетей. Правда, что бы реализовать вторую функцию вам придётся для начала самому зарегистрироваться во всех соцсетях, с которых вы хотите разрешить вход в ваш магазин/блог. Команда разработчиков Super Socializer’а подготовила подробные инструкции с картинками по настройке плагина, так что проблем у вас не должно быть.

Но я всё же расскажу и о плагинах позволяющих делать репост из блога в соцсети, возможно, это вам пригодится.

Я перепробовал кучу всяких плагинов для работы в соцсетях. Основным моим требованием была возможность автоматического репоста нового сообщения в facebook, twitter и livejournal. Самым идеальным вариантом был NextScripts: Social Networks Auto-Poster. Он полностью соответствовал требованиям и работал в моём персональном блоге очень долго и устойчиво. Но вот беда, в бесплатной версии он не работает в мультисайтном варианте и, скрипя душой, пришлось от него отказываться.

Вот плагины, которые я пробовал ему на замену:
SharePress — не смог отправить данные, сообщал об ошибке «SharePress Error: Object at URL ‘http://blog.babakov.photos/archives/4149’ of type ‘website’ is invalid because a required property ‘og:title’ of type ‘string’ was not provided.; while sending «Тест» to Facebook for post 4149″. Отказался от него.
Microblog Poster — странное поведение при настройке — не показывает, что и как настроил, нет возможности просмотреть введённую информацию и не репостил. Отказался от него.
LiveJournal Crossposter — часто выдаёт ошибку: «Could not connect to www.livejournal.com. This post has not been crossposted. (-32300 : transport error — HTTP status code was not 200)Could not crosspost. Please reenter your www.livejournal.com password in the options screen and try again. (101 : Invalid password)». Но найти ему нормальную замену пока не удаётся, поэтому терплю и в случае ошибки просто размещаю пост в ЖЖ ручками.
Facebook Auto Publish — приколов в работе пока не замечено. Работает на блоге.

Мелкие приколы в работе софта.

С пользователями. Удаление пользователей в консоли на сайте где они зарегистрировались, эффекта не даёт. Их ещё явно надо удалять и в сетевой консоли. Скорее всего, это особенность выбранного мной варианта мультисайтовости — субдоменного. Возможно, на варианте с субдиректориями этого прикола не будет.

Полезные ссылки.

Благодарности.

Хочется выразить благодарность людям, благодаря которым всё это удалось довести до ума:

  1. Alex Nedovizii — за неоценимую регулярную помощь в моих разборках, как с css, так и с фотографиями.
  2. Максиму Захарову — за помощь с apache и общесистемными вопросами. А так же за то, что согласился быть «подопытным кроликом», протестировал работу магазина на себе, дал хорошие советы по настройке и помог с переводом.
  3. Марию Спасскую — за советы по дизайну

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

0