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

Сервис обмена электронных валют


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

#1 sae

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

Отправлено 25 Октябрь 2012 - 20:21

Изображение

Изображение
  • Введение – ода Wordpress'у и хорошим клиентам.
  • Постановка задачи – понимаем, что для каталога нам нужны всего лишь пользовательские поля в записях.
  • Magic Fields – можно его прямо сейчас скачать и пощупать.
  • Простой пример работы плагина – если вам не нужен каталог, а просто хочется выводить дополнительную информацию в записях блога.
  • Разработка каталога – обращаем внимание на мелочи и нюансы.
  • Вывод – подводим, резюмируем, приступаем к действиям.


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

Однако со временем примерно в 50% случаев встает вопрос о расширении функционала сайта: выводе дополнительной информации, разработке фотогалерей и каталогов. Иногда заказчики сами предлагают создать новый сайт – видимо таким людям просто нравится захватывающий процесс одобрения макетов, проработки структуры и т.п. Но в большинстве своем существующее решение просто масштабируется.


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


Изображение
Казалось бы, Wordpress – блоговая CMS, и для создания каталога лучше заново построить сайта хотя бы на связке Joomla + VirtueMart. Но вспоминая проведенные курсы обучения по такому решению, закончившиеся написанием пошаговых мануалов «для чайников», я решил во что бы то ни стало сохранить существующую простоту администрирования.

Изображение


  • Нужен вывод товаров с возможностью их самостоятельного добавления и редактирования.
    В Wordpress данная функция реализована в инструменте Записи.
  • Товары надо поместить в определенные категории.
    Да-да, и Категории тоже уже есть.
  • У каждого товара должны должна быть таблица характеристик: габариты, вес, вкус, цена и т.п.
    Облом. Вот тебе Заголовок, вот Категории, вот Теги. Других полей нет.
Добавить свои поля конечно можно. Но вручную, ковыряя код и базу. Попробуем найти готовое решение. Ну не заставлять же клиента вставлять html-код в текст записи!


Изображение
Люблю Wordpress за его репозиторий плагинов. После долгого изучения результатов поиска я выбрал на мой взгляд лучшее из возможного. Встречайте – Magic Fields 2.

Изображение


Существует две версии плагина Magic Fields – первая и вторая. Я рекомендую вам использовать вторую – она не намного сложнее, но доставит вам гораздо больше удовольствия. Ну а в целом кардинальное их отличие состоит в том, что вторая версия позволяет создать наряду с Записями еще один отдельный тип материалов.

Изображение


После установки плагина в боковом меню консоли появится пункт Magic Fields, кликаем и попадаем на такую вот страничку:

Изображение


Здесь мы видим два подраздела:

  • Post Types – типы материалов, присутствующих на сайте. Еще раз повторюсь, что если вы уже используете Записи для вывода новостей, то можете создать новый тип. Он отобразится в боковой панели консоли сразу после Записей.
  • Custom Taxonomy – наряду с Категориями и Тегами можнj сделать свою таксономию. Полезная функция для сложных проектов.

Наводим курсор на тип материала Записи и кликаем по появившейся ссылке Edit Fields/Groups.

Изображение


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

Изображение


Дальнейшие действия лучше описать по ходу их применения на практике.


Изображение
Давайте потренируемся! Кстати, если у вас блог, и вам отродясь не нужен каталог, а выводить свою информацию хочется, то на данном примере как раз можно разобраться с общими принципами работы Magic Fields 2. Совсем недавно я решился-таки, и сделал на скорую руку блог, где пишу заметки и уроки по Wordpress. Да-да, понеслась, что называется, от скуки.

Изображение


И удумалось мне выводить сложность уроков, ну эдак где-нибудь под заголовком. Как-нибудь вот так:

Изображение


Ну не заставлять же себя вставлять html-код в текст записи!

Сказано – сделано. Устанавливаем Magic Fields 2 и приступаем к созданию нужного поля. Открываем в боковой панели консоли Magic Fields, заходим в Записи и нажимаем + Create a Field.

Изображение


В открывшемся редакторе заполняем поочердно поля:
  • Label – название вашего поля в админке. В моем случае – Сложность. Будьте готовы, что после заполнения Label в поле Name отобразится вот такая околесица. Ничего страшного, все дело в кириллице. Просто очистите это поле перед заполнением.
  • Name – это имя вашего поля, которое мы будем использовать в запросе вывода значения. Поэтому здесь используйте только латинские символы. Идеальный вариант – префикс, подчеркивание, осмысленное и короткое имя поля. У меня это urok_slozhn.
  • Help text необязателен к заполнению, он будет отображаться при наведении на иконку справки при заполнении поля в консоли. Я заполняю эти поля всегда, чтобы облегчить клиенту задачу.
  • Type of Custom Field – самое интересное. Здесь для вашего поля вы можете выбрать определенный тип, исходя из того, какого рода информация в нем будет. Это может быть и обычный текст, и выпадающий список, и изображение, и картинка, и аудиоплеер, и просто прикрепленный файл.

Изображение


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

Осталось еще два чекбокса:
  • required - сделать поле обязательным для заполнения.
  • Can be duplicated – может ли поле в одной записи использовано несколько раз.

Если ничего такого не требуется, нажимаем Save Custom Field.

Создаем новую или редактируем уже созданные Записи и определяем значение поля «Сложность» и сохраняем её. Полдела сделано.

Изображение


Теперь нам нужно прописать в шаблоне вывод значения вашего поля. В моем случае это необходимо сделать везде, где выводится заголовки записей. То есть в файлах шаблона:
  • index.php – вывод у каждой записи в цикле на главной странице;
  • archive.php – вывод у каждой записи в цикле архива;
  • category.php – вывод у каждой записи в цикле категории;
  • single.php – вывод на странице записи.
Начнем с файла index.php. Находим нужное место между строчками:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

и

<?php endwhile; ?>

и вставляем туда следующий код:

<? echo get('urok_slozhn'); ?>

Где urok_slozhn – это то самое имя поля (Name), которое мы указали при его создании. Сохраните index.php и проверьте, изменилось ли что-нибудь на главной странице. Если вы все сделали правильно, то в определенном вами месте появится цифра, то есть то значение сложности, которое вы выбрали при создании записи.

Изображение


Но этого недостаточно, немного усложним вывод значения. Добавим слово сложность и заключим все это в блок div со своими стилями. Заменяем предыдущий код следующим:

<div class="slozhn">Сложность: <? echo get('urok_slozhn'); ?></div>

В файле style.css шаблона указываем нужные стили блока:

.slozhn {
font-size:12px;
width:150px;
height:12px;
margin: 10px 0 20px 0;
line-height:12px;
}

Теперь понятно, что это за цифра после заголовка:

Изображение


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

Изображение


Рисуем пять картинок png в Photoshop'e и даем им одинаковые имена с разным индексом, например: file1.png, file2.png, file3.png, file4.png, file5.png. Создаем в корне сайта папку images, в которую эти картинки и помещаем.

Теперь продумываем логику.

Изображение


Если значение равно 0, то не надо выводить ничего. Нулевиками у меня будут просто новости и заметки. Им сложность не нужна.

Если значение равно 1, нужно выбрать для отображения файл file1.png, если 2 – то file2.png и так далее.

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

Вместо ранее вставленного кода прописываем в index.php следующее:

<?
$urok_slozhn = get('urok_slozhn');
$url = get_bloginfo('url');
$slozhn_vivod = "<div class="slozhn" style="background: url('".$url."/images/file".$urok_slozhn.".png') top right no-repeat;" >Сложность:</div>";
switch ($urok_slozhn) {
case "0":
    echo "<div class="noslozhn"></div>";
    break;
case "1":
case "2":
case "3":
case "4":
case "5":
    echo $slozhn_vivod;
    break;
}
?>

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

Есть одно «но», в коде мы добавили пустой блок с классом noslozhn. Это для того, чтобы при отсутствии сложности у материала не терялся отступ между заголовком и контентом. В файл style.css нужно добавить:

.noslozhn {
font-size:1px;
height:1px;
margin: 9px 0 15px 0;
}

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

Не забудьте внести такие же изменения в файлы archive.php, category.php и single.php. Если вам нужно выводить данную информацию там. А можете создать два пользовательских поля. И одно выводить в index.php, а другое в single.php. Здесь ваша фантазия не ограничена.


Изображение

Вы точно потренировались на предыдущем пункте? Все основы там, если что. А теперь мы приступим к самому интересному – создаем каталог на Wordpress.

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

Во-первых, создаем категории нашего каталога. Заходим в Записи, выбираем там Рубрики. Я создал две категории для примера: Мобильные телефоны и Книги. Сразу где-нибудь черкните себе ID этих категорий.

Изображение


Посмотреть ID можно в адресной строке, если открыть категорию для редактирования.

Изображение


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

Начинаем создавать поля. Заходим в консоли в Magic Fields, выбираем Записи. У нас есть одно общее поле – цена. Остальные поля специфичные, поэтому их мы распределим по группам соответственно категорий.

Создаем поле «Цена» с именем kat_cena. Тип выбираем textbox. Ограничение в 25 символов можно убрать, а можно оставить.

Изображение


Далее создаем группу полей для Мобильных телефонов. В поле Name пишем на латинице mob (не указывайте длинные слова). Ну а в Label название категории «Мобильные телефоны».

Изображение


Теперь начинаем добавлять поля по аналогии с предыдущим, но уже тыкая на ссылку (create field) справа от заголовка группы.

Изображение


Создаем поле количества сим-карт. После заполнения Label, видим что в поле Name появился префикс mob_. Дополняем его именем sim. Таким образом имя поля должны выглядеть как mob_sim. Тип поля выбираем dropdown. Так как аппараты существуют только с одной, двумя или тремя симками, то мы можем просто выбрать значение из выпадающего списка, а не писать самим. Заполняем Options значениями в столбик:
  • неизвестно
  • 1 сим-карта
  • 2 сим-карты
  • 3 сим-карты
Значение по умолчанию (Default value) указываем неизвестно. То есть при создании нового товара у вас изначально будет стоять значение неизвестно. Можно вместо этого слова поставить знак минуса.

Изображение


Создаем поле «Вес». Присваиваем полю имя mob_ves и выбираем тип textbox.

Аналогично проделанному создаем группу Книги с именем books.

Поле «Вариант переплета» создаем с именем books_per и типом dropdown. Прописываем значения:
  • неизвестно
  • Твердая обложка
  • Мягкая обложка

По умолчанию опять указываем неизвестно.

Поле «Количество страниц» создаем с именем books_stran и типом textbox. Здесь все просто.

Итого, у нас получается:

Изображение


Фуф, можно переходить к работе с версткой. Для начала создайте две картинки одинакового размера (в примере 150х100 пикселей) и положите их в папку images в корне сайта (та самая, в которую мы уже закинули картинки для сложности уроков). Пусть это будут файлы: mob.jpg и books.jpg.

Изображение


Теперь создайте новую страницу и назовите её Каталог. Это будет стартовая страница, на которой мы расположим наши категории. Войдите в режим HTML и вставьте следующий код. Да-да, так как вариант самый простой, придется заставить себя вставить немного кода:

<div style="width: 400px; height: 150px; margin: 30px auto;">
<div style="width: 150px; float: left;"><img src="http://ваш_сайт.ru/images/mob.jpg" alt="" />
<p style="width: 150px; margin: 0; padding: 0; line-height: 50px; font-size: 12px; text-align: center;"><a href="http:// ваш_сайт.ru /?cat=X">Мобильные телефоны</a></p>
</div>
<div style="width: 150px; float: right;"><img src="http://ваш_сайт.ru/images/books.jpg" alt="" />
<p style="width: 150px; margin: 0; padding: 0; line-height: 50px; font-size: 12px; text-align: center;"><a href="http:// ваш_сайт.ru /?cat=Y">Книги</a></p>
</div>
</div>

Заметьте, что в данном коде вам необходимо заменить ваш_сайт.ru на домен вашего сайта, а буквы X и Y на ID созданных вами категорий мобильных телефонов и книг соответственно.

Проверьте работоспособность данной вставки. При клике на называние категории вы должны перейти в данную категорию.

Изображение


Дело осталось за малым. Нужно вывести все созданные поля в файлах шаблона category.php и single.php.

Начнем с вывода товаров в категории. Откройте файл category.php и добавьте в нужное место блоки с выводом созданных нами полей. Помните, что вставлять нужно обязательно между строк:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

и

<?php endwhile; ?>

И так вставляем код, который в зависимости от категории выводит тот или иной набор характеристик.

<div style="height:20px;line-height:20px;width:100%;border-bottom:1px dotted #333;">Цена: <? echo get('kat_cena'); ?></div>
<?php if ( in_category('X') ): ?>
<div style="height:20px;line-height:20px;width:100%;border-bottom:1px dotted #333;">Количество сим-карт: <? echo get('mob_sim'); ?></div>
<div style="height:20px;line-height:20px;width:100%;border-bottom:1px dotted #333;">Вес: <? echo get('mob_ves'); ?></div>
<? elseif  ( in_category('Y') ): ?>
<div style="height:20px;line-height:20px;width:100%;border-bottom:1px dotted #333;">Переплет: <? echo get('books_per'); ?></div>
<div style="height:20px;line-height:20px;width:100%;border-bottom:1px dotted #333;">Количество страниц: <? echo get('books_stran'); ?></div>
<?php endif; ?>

Обратите внимание, что буквы X и Y нужно опять заменить на ID категорий. X – это Мобильные телефоны, а Y – это Книги. Вот так это будет выводиться на примере категории Книги:

Изображение


Проверьте работоспособность кода. Если все в порядке, повторите данную вставку в файле single.php.

Согласитесь, логично создать намного больше характеристик. Тогда в category.php можно выводить только базовые, а в single.php полный перечень.

В общем виде наш каталог готов. Вы можете привести его к профессиональному виду добавив больше полей и применив css-стили. Еще раз подчеркну, что данная статья содержит самый-самый простой пример, раскрывающий логику работы с плагином Magic Fields.


Изображение
Цель данной статьи – показать перспективность и универсальность движка Wordpress. Конечно, можно поспорить, целесообразно ли с нуля создавать сложные сайты на данной CMS. Однако все выше указанное говорит о том, что при необходимости самый простой сайт-визитка масштабируется до уровня средней сложности сайта с каталогом. Вы можете применять описанные приемы для вывода самой разной информации. Все зависит от вас и от вашего желания. Удачи!

Изображение


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

Изображение

 

 

  • 3

#2 Vermilion

Vermilion
  • Пользователь
  • 21 сообщений
  • Репутация: 6

Отправлено 26 Октябрь 2012 - 01:12

очень подробно, даже слишком!!! хорошая статья
  • 0

#3 sae

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

Отправлено 26 Октябрь 2012 - 10:51

Vermilion, спасибо. Старался преподнести материал как можно проще. Чтобы новичок мог пошагово разбираться и копипастить с минимальными правками.
  • 0

#4 Rulik

Rulik
  • Пользователь
  • 26 сообщений
  • Репутация: 5

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

Хорошая статья. Поздравляю с призовым местом ;)
  • 0

#5 Очередной вебмастер

Очередной вебмастер
  • Пользователь
  • 13 сообщений
  • Репутация: 0

Отправлено 07 Декабрь 2012 - 18:02

А что с картинками, я так хотел почитать ;) можете перезалить на нормальный фотохостинг?
  • 0

#6 sae

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

Отправлено 07 Декабрь 2012 - 18:23

Rulik, Спасибо!

А что с картинками, я так хотел почитать ;) можете перезалить на нормальный фотохостинг?


А у вас не отображаются? Заливал на радикал. У меня сейчас все видно. Может быть у них временно что-то отваливалось.
  • 0

#7 SeredinPlus

SeredinPlus
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 12 Январь 2013 - 12:24

Есть информация о том, как на главной странице (НЕ в сайдбарах) выводить самые популярные товары, а ниже новые? Также интересует, где лучше подобрать шаблон для каталога?
  • 0

#8 sae

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

Отправлено 12 Январь 2013 - 12:38

Есть информация о том, как на главной странице (НЕ в сайдбарах) выводить самые популярные товары, а ниже новые?


Создайте рубрику Популярные товары и выведите на главной loop с указанием id этой категории и количества выводимых товаров (например 3). Новинки делаются также - указываете в loop'е основную рубрику каталога и ограничиваете количество.

При выводе нескольких лупов на одной странице есть свои нюансы, посмотрите кодекс.


Также интересует, где лучше подобрать шаблон для каталога?


Чтобы было все по чину, придется допиливать любой шаблон. Как минимум - прописывать вывод полей.
  • 0

#9 SeredinPlus

SeredinPlus
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 12 Январь 2013 - 12:54

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


  • 0

#10 sae

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

Отправлено 12 Январь 2013 - 13:05

Без редактирования кода здесь не обойтись. Я дал вам ссылку на русский кодекс по вп. loop (луп) - это цикл. Не ленитесь, почитайте и разберитесь. Там все расписано. Если возникнут конкретные вопросы по реализации описанных в кодексе методов, обращайтесь.
  • 0

robot

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


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