Почему на базе wp shop — это пока единственный плагин в рунете который развивается. Второе — мне понравилась его логика работы организованная через стандартные записи и дополнительные поля. Третье — с версии 3 авторы реализовали возможность подключения к robokassa, webmoney.

Изначально я планировал создать огромное руководство о том как с нуля сделать на базе wp shop красивый, яркий инет магазин. Даже для этого отрисовал универсальный современный темплейт — но потом подумал, что сделаю ошибку. Ведь если создавать все с нуля, то большинству людей это сложно будет сделать, потому что нужно как минимум знать хорошо html+css, и разбираться хорошо в wordpress, чтобы это реализовать. Кто это все умеет, то он и сам сможет сделать, а кто не умеет, то вряд ли руководство будет полезным. Поэтому, я лучше напишу как сделать инет магазин уже на основе готового сайта с любой темой, что может сделать любой новичок.

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

Допустим у вас уже есть рабочий сайт и в нем уже есть статьи, рубрики, много материала и вы хотите сделать отдельный раздел с магазином. Реализуем мы это при помощи кастомных типов записей(post type). Есть еще одно преимущество установки магазина в отдельный раздел — это то, что вы сможете отдельно оформлять записи с товарными позициями от остальных записей на сайте. Для этого просто создайте в папке шаблона файлик single-yourpost.php, где yourpost — название созданного типа записей о котором ниже. Если ничего не создавать, то оформление самой товарной позиции будет в стандартном файле single.php

Чтобы не ковыряться в файлах движка для создания нового типа записей, можно воспользоваться готовыми плагинами. Мне нравится плагин custom post type ui, его я и опишу.

Активируем плагин и добавляем новый тип записей «Товары».

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

Advanced Label Options — здесь вы можете настроить руссификацию различных названий, вроде «добавить» и т.д. Advanced Options — здесь вы увидите функциональные опции, обязательно поставьте true напротив Has Archive — так будет доступен архив этого типа данных. Т.е. если вы перейдете по ссылке ваш_сайт/product — в нашем случае, то увидите список ваших товаров в виде ленты. В поле supports будут доступны разные системные поля которые будут выводится при добавлении записи, отключите здесь все ненужное вам. Сделать это также вы можете и уже в самой админке на странице добавления. Для этого нажмите на кнопку настройки экрана в правом углу.

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

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

Заметьте, я отметил галочкой attach to post type свой созданный ранее кастомный тип записей, тем самым привязав таксономию к нему.

Теперь когда тип записей — товары и таксономия созданы, то нужно добавить пару категорий в нашу таксономию. Если вы создавали такие же имена как на скринах, то в админке вы увидите, что появилась новая вкладка «Товары» и имеет подвкладку Категории товаров — переходим на неё и создаем пару категорий, которые будут самыми частыми у вас. В название пишем название, в ярлык пишем урл на латинице. Я добавил для примера 2 категории — компьютеры и телефоны.

Как я и говорил, создание новых типов записей и таксономии нужно только если вы хотите создать отдельный раздел на сайте. Если это не нужно, то пропускайте этот шаг и переходите к следущему — создание набора произвольных полей в админке. Это опять же проще реализовать при помощи плагинов, которых очень много для этих целей. Я покажу на примере magic fields 2. Вы можете взять и другой, но будьте осторожны, некоторые плагины добавляют в название поля свой префикс, в итоге инет-магазин работать не будет.

После установки плагина, когда перейдете на вкладку magic fields, то увидите список всех ваших типов записей и найдете там ранее созданный «Товары» — наведите мышкой и нажмите edit. Далее на странице нажимайте create a group и создавайте группу, после этого создаете поля в этой группе. Только не промахнитесь, чтобы создать поля именно в нужной группе, нужно нажимать на ссылочку рядом с группой.

Еще очень важный пункт, во всех плагинах, при создании любого нового типа будь чего, обязательно нужно указывать Name и Label. В первом нужно указывать имя латиницей, оно нужно будет для использования в шаблоне, а label — это название которое будет выводится в админке, тут пишите что угодно.

Теперь отвлечемся немного от произвольных полей и расскажу о работе плагина wp shop.

Он устроен так, что любую запись будет считать как товарную позицию если в ней вы укажите дополнительное поле с определенным именем. Если у вас все организовано по типу — один товар — одна цена, т.е. у каждого товара не будет различных модицикаций, то вам хватит всего одного созданного поля cost_1, в котором вы будете писать цену. Если каждый товар будет иметь несколько разновидностей с разными ценами, то вам нужно создать несколько доп полей. Для начала подумайте сколько максимально у вас будет разновидностей с ценой и создайте нужное количество полей. Имена у них должны быть строго name_1, name_2, name_3 — здесь будете писать наименование, cost_1, cost_2, cost_3 — здесь цену. Т.е. для name_1 будет установлена цена cost_1 и т.д.

Вернемся к созданию полей.

Для цен и наименований нужно выбрать тип поля -textbox, так как здесь будем вводить всего пару слов или цифр. В настройках отображения справа — уберите галочку с Evaluate Max Length — тогда не будет вводиться ограничение на длину символов в этом поле. Для первой цены — отметьте галочку required, ведь у каждого товара должна быть хоть одна цена, чтобы все нормально работало. Для второй и дальше — можете не ставить, ведь не у каждого товара будут модификации, там где не будет, то просто не будете заполнять эти поля.

К стати, у этого плагина есть хорошее вики

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

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

Если все будет правильно, то на странице товара вы увидите в углу

Добавьте еще несколько товаров, если их у вас очень много, то в плагине есть возможность загружать позиции через excel, подробнее об этом.

Расскажу о еще одной полезной мелочи с доп. полями — например, добавим чекбокс о том есть ли товар на складе в данное время. Для этого создадим при помощи плагина поле c типом chekbox. Назовем его sclad. Теперь в файле отвечающим за вывод товара (по умолчанию это single.php), в нужном месте (обычно это после тега the_content()) внесем такой код

    На складе:
<? $value = get('sclad');?>
<? if($value):?>
да
<? else:?>
отсутствует
<? endif?>

Теперь если вы отмечаете чекбокс на странице добавления, то внизу автоматом появится надпись На складе: да, или же отсутствует — если не отмечаете.

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

Wp shop имеет функцию создания дополнительных свойств товара, как это выглядит — можете увидеть на демо. Как это реализовать описано здесь. К стати, реализовать поле комментарии как на демке в инструкции не указано. Это делается добавлением в описание метки

<!--wp-shop text_fied['Комментарий к заказываемому товару']-->

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

Сделаем сначала страницу с корзиной, для этого в любой странице вставьте в виз редактор код [сart] — все, теперь на сайте, вместо этого тега появится корзина.

Чтобы добавить мини-корзину, например, в сайдбар через виджет, то выберите текстовый виджет, а в содержании вставьте тег [minicart]. Более подробно о вставке корзины

Вот и вся основная работа, я в 10 раз дольше писал, чем это все делать.

Теперь можно перейти к дополнительным настройкам, для начала, если вы хотите установить разные способы оплаты, то в настройках плагина поставьте галочку «Показывать способ оплаты:», все способы можно настроить в вкладке WP Shop Payments. Все сообщения, формы заказа можно настроить в cforms — плагин автоматически создает все нужные формы, но вы их можете изменить по желанию. Описание всех настроек вы найдете на страничке. Дополнительные возможности плагина можно глянуть здесь

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

300:5;500:30

где, 300 — это сумма выше которой устанавливается 5 % скидка, 500 — сумма выше которой скидка будет 30 % и т.д. Теперь скидка будет подсчитываться на странице корзины.

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

// отображение статей на главной
add_filter( 'pre_get_posts', 'my_get_posts' );
function my_get_posts( $query ) {
     if ( ( is_home() && false == $query->query_vars['suppress_filters'] ) || is_feed() )
     $query->set( 'post_type', array( 'post', 'product' ) ); // ВАЖНО! product меняешь на свой тип
     return $query;
}

Или же просто укажите ссылку на архив вашего раздела с товарами, в моем примере это мой_сайт/product.

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

<ul>
<?php wp_list_categories('title_li&taxonomy=product'); ?>
</ul>

Удачи в освоении инет-магазинов.

Мониторинг сети. Практика продвижения сайтов на авторском блоге tytto.ru — понятно даже для новичка.

Способов очень много для этого, я опишу тот, которым пользуюсь чаще всего.

Что представляет собой обычно слайдер — это набор изображений и ссылки с этих изображений, иногда описание. Поэтому я чаще всего, чтобы интегрировать слайдер — использую обычный плагин для организации баннеров wp-bannerize.

В чем его преимущества? Он довольно прост в использовании, а главное позволяет управлять html кодом выводимых изображений и поддерживает прокрутку. Я не буду описывать все преимущества плагина, их довольно много и скажу, что это единственный из где-то 5 опробованных плагинов, который прост в использовании и не разу нt глючил ни на одном хостинге.

Давайте разберем на примере.

По просьбе одного комментатора — возьмем плагин orbit.

Для начала подключим все нужные скрипты к шаблону (предварительно конечно же залив его в папку темы)

<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.orbit.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/orbit.css">

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

<div id="featured">
     <img src="overflow.jpg" alt="Overflow: Hidden No More" />
     <img src="captions.jpg"  alt="HTML Captions" />
     <img src="features.jpg" alt="and more features" />
</div>

Как видим просто слой с id=»featured» и в нем просто изображения без каких либо дополнительных слоев. Значит вставляем в шаблон туда, где вам нужно вывести слайдер сам слой и подключаем к нему скрипт, будет вот так

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>
<div id="featured"></div>

Пока оставим так, теперь нужно настроить плагин баннеров. Идем в настройки плагина и добавляем Add new — загружаем сюда изображение, и если нужно, то ссылку куда будет вести изображение. Также пишем group на латинице и что важно, все последующие картинки нужно будет загружать и прописывать им одну и ту же группу название которой предварительно где-то запишите.

Допустим группа будет slider.

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

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>
<div id="featured"><?php if(function_exists( 'wp_bannerize' )) wp_bannerize('group=slider&no_html_wrap'); ?></div>

Немного объяснений.

no_html_wrap-убирает все оформления, которые идут в плагине по умолчанию

group- это та группа, которой ранее мы присваивали изображения

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

Идем в settings плагина и если нужно убрать сбор статистики кликов, то убираем первые 2 галочки, также убирайте галочку с Support WP Bannerize, если не хотите, чтобы на вашем сайте появилась ссылка на сайт автора плагина. Некоторые дополнительные настройки еще доступны на вкладке tools. В нашем примере они не нужны, но если, допустим верстка самого слайдера имеет другой вид и сами изображения нужно обернуть в слой какой-то, то это можно указать в этих настройках в графе HTML Tag before banner и HTML Tag after banner:

К стати, в качестве плагина менеджеров баннеров, этот плагин тоже весьма хорош. В качестве дополнительных преимуществ — это то, что можно использовать не только картинки, но и флеш ролики и вообще любой html код.

Но выход найден, о нем и речь в статье

Итак, сам плагин Nivo Slider for WordPress

Плагин основан на одном из самых распространенных и отличных плагинов для слайдера изображений на jquery — nivo slider.

Установка плагина — очень проста. После активации, вам нужно вставить в файл темы (в то место, где будет выводится слайдер) такой код.

<?php if (function_exists('nivoslider4wp_show')) { nivoslider4wp_show(); } ?>

Теперь нужно настроить плагин в админке. Идем на страницу настроек плагина, устанавливаем там высоту и ширину картинок и смотрим другие доступные настройки

Сохраняем. Теперь переходим на страничку добавления фоток. После выбора фото на компьютере, нажимайте Send picture and configure — попадаете на страничку настройки изображения. Здесь выбираете отображаемую область, описание для изображения (если нужно) и ссылку (тоже опционально). Вот и все.