[img]http://s47.radikal.ru/i115/1210/7a/0ef7e42bf9bc.jpg[/img]
[IMG]http://s019.radikal.ru/i612/1210/0d/ac7f08ac4375.jpg[/IMG]
- Введение – ода Wordpress'у и хорошим клиентам.
- Постановка задачи – понимаем, что для каталога нам нужны всего лишь пользовательские поля в записях.
- Magic Fields – можно его прямо сейчас скачать и пощупать.
- Простой пример работы плагина – если вам не нужен каталог, а просто хочется выводить дополнительную информацию в записях блога.
- Разработка каталога – обращаем внимание на мелочи и нюансы.
- Вывод – подводим, резюмируем, приступаем к действиям.
[IMG]http://s017.radikal.ru/i435/1210/91/aeb38c05a57f.jpg[/IMG]
Согласитесь, для сайта-визитки Wordpress подходит просто идеально! С точки зрения разработчика это минимальные временные затраты в настройке и крайняя легкость верстки шаблона. А заказчиков всегда удивляет, как админка может быть такой простой и понятной.
Однако со временем примерно в 50% случаев встает вопрос о расширении функционала сайта: выводе дополнительной информации, разработке фотогалерей и каталогов. Иногда заказчики сами предлагают создать новый сайт – видимо таким людям просто нравится захватывающий процесс одобрения макетов, проработки структуры и т.п. Но в большинстве своем существующее решение просто масштабируется.
Так вот примерно с месяц назад мне позвонил один хороший клиент и попросил дополнить его визитку небольшим каталогом продукции. Мы прикинули, что там и как должно быть, оговорили сроки, и вскоре он наполнял сайт своими товарами.
Все было сделано быстро и просто. С помощью всего только одного плагина.
[IMG]http://s017.radikal.ru/i414/1210/53/bd699ad7b666.jpg[/IMG]
Казалось бы, Wordpress – блоговая CMS, и для создания каталога лучше заново построить сайта хотя бы на связке Joomla + VirtueMart. Но вспоминая проведенные курсы обучения по такому решению, закончившиеся написанием пошаговых мануалов «для чайников», я решил во что бы то ни стало сохранить существующую простоту администрирования.
[IMG]http://s59.radikal.ru/i163/1210/dd/c5335072766b.jpg[/IMG]
- Нужен вывод товаров с возможностью их самостоятельного добавления и редактирования.
В Wordpress данная функция реализована в инструменте Записи. - Товары надо поместить в определенные категории.
Да-да, и Категории тоже уже есть. - У каждого товара должны должна быть таблица характеристик: габариты, вес, вкус, цена и т.п.
Облом. Вот тебе Заголовок, вот Категории, вот Теги. Других полей нет.
Добавить свои поля конечно можно. Но вручную, ковыряя код и базу.
Попробуем найти готовое решение. Ну не заставлять же клиента вставлять html-код в текст записи![IMG]http://s017.radikal.ru/i428/1210/83/6554dfbbb1ad.jpg[/IMG]
Люблю Wordpress за его репозиторий плагинов. После долгого изучения результатов поиска я выбрал на мой взгляд лучшее из возможного. Встречайте –
Magic Fields 2.
[img]http://s48.radikal.ru/i121/1210/8f/eb31f152d718.jpg[/img]
Существует две версии плагина Magic Fields –
первая и
вторая. Я рекомендую вам использовать вторую – она не намного сложнее, но доставит вам гораздо больше удовольствия. Ну а в целом кардинальное их отличие состоит в том, что вторая версия позволяет создать наряду с Записями еще один отдельный тип материалов.
[img]http://i003.radikal.ru/1210/ef/6b01e6e1abdb.jpg[/img]
После установки плагина в боковом меню консоли появится пункт
Magic Fields, кликаем и попадаем на такую вот страничку:
[img]http://i077.radikal.ru/1210/e7/10dda87d5a79.jpg[/img]
Здесь мы видим два подраздела:- Post Types – типы материалов, присутствующих на сайте. Еще раз повторюсь, что если вы уже используете Записи для вывода новостей, то можете создать новый тип. Он отобразится в боковой панели консоли сразу после Записей.
- Custom Taxonomy – наряду с Категориями и Тегами можнj сделать свою таксономию. Полезная функция для сложных проектов.
Наводим курсор на тип материала Записи и кликаем по появившейся ссылке
Edit Fields/Groups.
[img]http://s40.radikal.ru/i088/1210/20/1fcbd07becc2.jpg[/img]
Как понятно из названия ссылки, откроется страница редактирования полей и групп полей для Записей. Группы нужны для удобства. Так например, если у вас в каталоге у разных категорий будут разные характеристики, то для каждой из категорий вы можете создать свою группу таких характеристик.
[img]http://s004.radikal.ru/i207/1210/28/6a78ab8a2481.jpg[/img]
Дальнейшие действия лучше описать по ходу их применения на практике.
[img]http://s013.radikal.ru/i323/1210/87/8fbdab8e67b9.jpg[/img]
Давайте потренируемся! Кстати, если у вас блог, и вам отродясь не нужен каталог, а выводить свою информацию хочется, то на данном примере как раз можно разобраться с общими принципами работы Magic Fields 2. Совсем недавно я решился-таки, и сделал на скорую руку блог, где пишу заметки и
уроки по Wordpress. Да-да, понеслась, что называется, от скуки.
[img]http://s019.radikal.ru/i628/1210/e7/0711404b08f9.jpg[/img]
И удумалось мне выводить сложность уроков, ну эдак где-нибудь под заголовком. Как-нибудь вот так:
[img]http://s018.radikal.ru/i500/1210/13/c6ea8a0b5892.jpg[/img]
Ну не заставлять же себя вставлять html-код в текст записи!
Сказано – сделано. Устанавливаем
Magic Fields 2 и приступаем к созданию нужного поля. Открываем в боковой панели консоли
Magic Fields, заходим в
Записи и нажимаем
+ Create a Field.
[img]http://s42.radikal.ru/i098/1210/e3/e90ed53155f4.jpg[/img]
В открывшемся редакторе заполняем поочердно поля:
- Label – название вашего поля в админке. В моем случае – Сложность. Будьте готовы, что после заполнения Label в поле Name отобразится вот такая околесица. Ничего страшного, все дело в кириллице. Просто очистите это поле перед заполнением.
- Name – это имя вашего поля, которое мы будем использовать в запросе вывода значения. Поэтому здесь используйте только латинские символы. Идеальный вариант – префикс, подчеркивание, осмысленное и короткое имя поля. У меня это urok_slozhn.
- Help text необязателен к заполнению, он будет отображаться при наведении на иконку справки при заполнении поля в консоли. Я заполняю эти поля всегда, чтобы облегчить клиенту задачу.
- Type of Custom Field – самое интересное. Здесь для вашего поля вы можете выбрать определенный тип, исходя из того, какого рода информация в нем будет. Это может быть и обычный текст, и выпадающий список, и изображение, и картинка, и аудиоплеер, и просто прикрепленный файл.
[img]http://s001.radikal.ru/i194/1210/ad/d3f71749963e.jpg[/img]
Я же выбрал для своего примера тип
Slider и установила в открывшемся справа меню настроек разбег значений от 0 до 5 и шаг в единицу. В админке будет отображаться удобный инструмент, по клику мышки определяющий нужное значение.
Осталось еще два чекбокса:
- required - сделать поле обязательным для заполнения.
- Can be duplicated – может ли поле в одной записи использовано несколько раз.
Если ничего такого не требуется, нажимаем
Save Custom Field.
Создаем новую или редактируем уже созданные
Записи и определяем значение поля
«Сложность» и сохраняем её. Полдела сделано.
[img]http://s017.radikal.ru/i401/1210/b8/f953b3694ebf.jpg[/img]
Теперь нам нужно
прописать в шаблоне вывод значения вашего поля. В моем случае это необходимо сделать везде, где выводится заголовки записей. То есть в файлах шаблона:
- 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 и проверьте, изменилось ли что-нибудь на главной странице. Если вы все сделали правильно, то в определенном вами месте
появится цифра, то есть то значение сложности, которое вы выбрали при создании записи.
[img]http://s016.radikal.ru/i336/1210/2f/eab0608661e9.jpg[/img]
Но этого недостаточно, немного усложним вывод значения. Добавим слово сложность и заключим все это в блок
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;
}
Теперь понятно, что это за цифра после заголовка:
[img]http://s018.radikal.ru/i511/1210/8b/14339d9f027d.jpg[/img]
Давайте сделаем «сложность посложнее». Пусть она выводится в виде изображения, как рейтинг.
[img]http://s018.radikal.ru/i500/1210/13/c6ea8a0b5892.jpg[/img]
Рисуем пять картинок
png в Photoshop'e и даем им
одинаковые имена с разным индексом, например:
file1.png, file2.png, file3.png, file4.png, file5.png. Создаем в корне сайта папку
images, в которую эти картинки и помещаем.
Теперь продумываем
логику.
[img]http://i021.radikal.ru/1210/25/53fc71934051.jpg[/img]
Если значение равно 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. Здесь ваша фантазия не ограничена.
[img]http://s019.radikal.ru/i605/1210/60/f7448886c78e.jpg[/img]
Вы точно
потренировались на предыдущем пункте? Все основы там, если что. А теперь мы приступим к самому интересному –
создаем каталог на Wordpress.
Я приведу
самый быстрый и простой практический пример. А то, вы наверное уже заскучали так много читать.
Во-первых, создаем
категории нашего каталога. Заходим в
Записи, выбираем там
Рубрики. Я создал две категории для примера:
Мобильные телефоны и
Книги. Сразу где-нибудь черкните себе
ID этих категорий.
[img]http://s018.radikal.ru/i518/1210/42/a391e3b0bf13.jpg[/img]
Посмотреть
ID можно в адресной строке, если открыть категорию для редактирования.
[img]http://s017.radikal.ru/i416/1210/14/d8ff1ceb0b25.jpg[/img]
Теперь подумаем, какие поля нам нужны для данных категорий. У
мобильных телефонов будут выводиться
цена,
количество сим-карт и
вес. У
книг –
цена,
вариант переплета и
количество страниц.
Начинаем создавать поля. Заходим в консоли в
Magic Fields, выбираем
Записи. У нас есть одно общее поле –
цена. Остальные поля специфичные, поэтому их мы распределим
по группам соответственно категорий.
Создаем поле
«Цена» с именем
kat_cena. Тип выбираем
textbox. Ограничение в 25 символов можно убрать, а можно оставить.
[img]http://s003.radikal.ru/i202/1210/59/61476b78e941.jpg[/img]
Далее создаем группу полей для
Мобильных телефонов. В поле
Name пишем на латинице
mob (не указывайте длинные слова). Ну а в
Label название категории «Мобильные телефоны».
[img]http://s003.radikal.ru/i203/1210/ef/827dd1820a2b.jpg[/img]
Теперь начинаем добавлять поля по аналогии с предыдущим, но уже тыкая на ссылку (
create field) справа от заголовка группы.
[img]http://s019.radikal.ru/i619/1210/d0/d84384272e0a.jpg[/img]
Создаем поле
количества сим-карт. После заполнения Label, видим что в поле Name появился префикс
mob_. Дополняем его именем
sim. Таким образом имя поля должны выглядеть как
mob_sim. Тип поля выбираем
dropdown. Так как аппараты существуют только с одной, двумя или тремя симками, то мы можем просто выбрать значение из выпадающего списка, а не писать самим. Заполняем
Options значениями в столбик:
- неизвестно
- 1 сим-карта
- 2 сим-карты
- 3 сим-карты
Значение по умолчанию (
Default value) указываем
неизвестно. То есть при создании нового товара у вас изначально будет стоять значение неизвестно. Можно вместо этого слова поставить знак минуса.
[img]http://s019.radikal.ru/i600/1210/b2/ff9b899bd477.jpg[/img]
Создаем поле «
Вес». Присваиваем полю имя
mob_ves и выбираем тип
textbox.
Аналогично проделанному создаем группу
Книги с именем
books.
Поле «
Вариант переплета» создаем с именем
books_per и типом
dropdown. Прописываем значения:
- неизвестно
- Твердая обложка
- Мягкая обложка
По умолчанию опять указываем
неизвестно.
Поле «
Количество страниц» создаем с именем
books_stran и типом
textbox. Здесь все просто.
Итого, у нас получается:
[img]http://s40.radikal.ru/i088/1210/1e/ac49dcee4cca.jpg[/img]
Фуф, можно переходить к работе с версткой. Для начала создайте
две картинки одинакового размера (в примере 150х100 пикселей) и положите их в папку
images в корне сайта (та самая, в которую мы уже закинули картинки для сложности уроков). Пусть это будут файлы:
mob.jpg и
books.jpg.
[img]http://i008.radikal.ru/1210/aa/04eea6d57f37.jpg[/img]
Теперь
создайте новую страницу и назовите её
Каталог. Это будет стартовая страница, на которой мы расположим наши категории. Войдите в
режим 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 созданных вами категорий мобильных телефонов и книг соответственно.
Проверьте работоспособность данной вставки. При клике на называние категории вы должны перейти в данную категорию.
[img]http://s04.radikal.ru/i177/1210/60/c0e3cc8d10c9.jpg[/img]
Дело осталось за малым. Нужно вывести все созданные поля
в файлах шаблона 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 – это
Книги. Вот так это будет выводиться на примере категории
Книги:
[img]http://s59.radikal.ru/i166/1210/2a/cdf5fed3fe96.jpg[/img]
Проверьте работоспособность кода. Если все в порядке, повторите данную вставку в файле
single.php.
Согласитесь, логично создать намного больше характеристик. Тогда в
category.php можно выводить только базовые, а в
single.php полный перечень.
В общем виде наш каталог готов. Вы можете привести его к профессиональному виду добавив больше полей и
применив css-стили. Еще раз подчеркну, что данная статья содержит
самый-самый простой пример, раскрывающий логику работы с плагином
Magic Fields.
[img]http://s018.radikal.ru/i501/1210/f8/8f7940f13e90.jpg[/img]
Цель данной статьи – показать перспективность и универсальность движка Wordpress. Конечно, можно поспорить, целесообразно ли с нуля создавать сложные сайты на данной CMS. Однако все выше указанное говорит о том, что при необходимости самый простой сайт-визитка масштабируется до уровня средней сложности сайта с каталогом. Вы можете применять описанные приемы для вывода самой разной информации. Все зависит от вас и от вашего желания.
Удачи![img]http://s61.radikal.ru/i173/1210/40/a3579e8f2f39.jpg[/img]
При поддержке:
SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой.
Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]