Бурашников Роман Александрович

    Рекомендую данный хостинг:

Как создать каталог товаров на WordPress

Каталог товаров на WordPress

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

Т.е. задача следующая: на статичной странице должны выводится записи из определённой рубрики в три колонки. Перерыл множество плагинов интернет-магазинов, все они не устроили, во всех плагинах есть только функции автоматизации (корзина, приём платежей и пр.), но не было главного - вывод товаров сеткой, т.е. красивой витрины товаров в несколько колонок. Сетку товаров видел лишь в одном плагине, но он платный. Да и смысла нет - ставить огромный плагин ради одной витрины. Поэтому витрину решил сделать сам. 

Для начала нужно установить плагин Allow PHP in Posts and Pages, он нужен для того чтобы на страницах можно было вставлять php код, который сайт будет исполнять.
Плагин работает следующим образом: в настройках плагина пишем php код, плагин формирует шорткод, этот шорткод вставляем на нужной странице. Один нюанс, плагин автоматически подставляет код <?php, поэтому начало php кода указывать не нужно (если вы пользуетесь другим плагином обработчиком php кода, возможно вам нужно будет вставить код <?php перед кодом, который указан ниже).

Для вывода каталога товаров в три колонки нужно вставить следующий код:

   query_posts('cat=2&posts_per_page=99999&caller_get_posts=1'); ?>
<?php $col = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($col == 1) echo "<div class=\"row\">"; ?>
   <div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php if ( has_post_thumbnail()) { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(array(200,200)); ?>
</a>
<?php } ?>
  <?php the_excerpt(); ?>
<br>
  </div>
<?php if ($col == 1) echo "</div>"; if($col == 1) {$col = 2;}  else { if($col != 1) { if($col == 3) {$col = 1;} if($col == 2) {$col =  3;} } } ?>
<?php endwhile; else : ?>
   <h2>Не найдено</h2>
   <p>Здесь ничего нет, попробуйте поискать:</p>
   <?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; wp_reset_query();

а в css нужно добавить этот код (он нужен для вывода трёх колонок, 130px это размер ширины колонки, отредактируйте его под свой шаблон):

.row  { clear: both; }
.col1 { width: 130px; float: left; padding: 0 10px; }
.col2 { width: 130px; float: left;  padding: 0 10px; }
.col3 { width: 130px; float: left;  padding: 0 10px; }

чтобы не править оригинальный код css можно воспользоваться плагином Simple Custom CSS.

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

query_posts('cat=2&posts_per_page=99999&caller_get_posts=1'); ?>

- вместо 2-ки подставьте ID рубрики, узнать можно наведя на рубрику в админской панели (в ссылке указан ID), либо при помощи плагина Reveal IDs, плагин отобразит номера ID в админской панели в списке рубрик;
- вместо 99999 укажите сколько записей должно выводится;
- вместо 1-ки можно указать с какой записи начинать вывод, т.е. в данном случае - с первой.

<div id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php if ( has_post_thumbnail()) { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(array(200,200)); ?>
</a>
<?php } ?>
  <?php the_excerpt(); ?>
<br>
  </div>

В данном коде идёт вывод данных, т.е. здесь можно добавить какие-либо данные, удалить, либо оформить с помощью html.

Такую витрину я делал для этого сайта - buoni-doni.ru, можете наглядно посмотреть.

Дополнение:

Чтобы вывести в 4-е колонки, нужно строчку:

<?php if ($col == 1) echo "</div>"; if($col == 1) {$col = 2;}  else { if($col != 1) { if($col == 3) {$col = 1;} if($col == 2) {$col =  3;} } } ?>

Заменить на:

<?php if ($col == 1) echo "</div>"; if($col == 1) {$col = 2;}  else { if($col != 1) { if($col == 3) {$col = 1;} if($col == 2) {$col =  3;} {$col =  4;} } } ?>

А код в CSS будет таким:

.row  { clear: both; }
.col1 { width: 220px; float: left; padding: 0 10px; }
.col2 { width: 220px; float: left;  padding: 0 10px; }
.col3 { width: 220px; float: left;  padding: 0 10px; }
.col4 { width: 220px; float: left;  padding: 0 10px; }

Если вам нужно выводить в 2-е колонки, то нужно заменить строчку:

<?php if ($col == 1) echo "</div>"; if($col == 1) {$col = 2;}  else { if($col != 1) { if($col == 3) {$col = 1;} if($col == 2) {$col =  3;} {$col =  4;} } } ?>

на:

<?php if ($col == 1) echo "</div>"; (($col==1) ? $col=2 : $col=1); ?>

А код в CSS будет таким:

.row { clear: both; }
.col1 { width: 200px; float: left; padding: 0 10px; }
.col2 { width: 200px; float: right;  padding: 0 10px; }

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

VN:F [1.9.22_1171]
Рейтинг: +6 (голосов: 8), Понравилось: 7, Не понравилось: 1

Вопросы, уточнения и пожелания к записям оставляйте в комментариях ниже.

Поделиться в:
Вы можете поблагодарить автора рублём, за понравившуюся статью, при помощи этой формы (нажать для открытия):

8 комментариев: Как создать каталог товаров на WordPress

  • привет а во посмотрите у меня как - http://alecs-work-club.ru/goods_category/info/ это всё плагином только вот картинки не слушаются и стандарт аватарки но я это давненько делал .... сечас делаю киноблог много вопросов по сео но с кем проконсультироваться вот вопрос :?:

    VA:F [1.9.22_1171]
    Рейтинг: +1 (голосов: 1)
    • ага, видел этот плагин, как раз таки не устроил он меня сложностями с картинками. Пока с ним разбирался - понял, что проще самому написать вывод витрины :)

      VN:F [1.9.22_1171]
      Рейтинг: +1 (голосов: 1)
      • Да. описание как создать витрину на вордпрес отличное, но согласитесь, это для профи. а вот для чайников, которые только начинают, ничего не поймут, я думаю, если бы вы сняли видео инструкцию, вот это было бы отличное поучительное видео! Не спорю,есть платные плагины, но они не для тех кто только начинает свой бизнес в нете!
        Роман, спасибо вам за полезную инфу! удачи вам в вашем бизнесе!
        с ув. Александр !

        VA:F [1.9.22_1171]
        Рейтинг: 0 (голосов: 0)
  • нуда там косичек с картинками а без них просто стандартные как то некатит ... там вроди еще плагин доп-й ставишь чтоб картинки добавл-гь но незнаю ставил и доп.. плагин добавляю обновляю страничу чищу куки в блоге - картинки нет .. вот так. да мне он не горит ... я если и создам то чтонить проще. ща не до этого а товара особенно партнерского его постоянно море ......... меня больше интересует сео оптимизация - у вас показатели норм - чем наращивали если не секрет?

    VA:F [1.9.22_1171]
    Рейтинг: 0 (голосов: 0)
    • наращивал при помощи miralinks.ru, на мой взгляд - единственная достойная система для продвижения. В ней же зарабатываю с некоторых сайтов, этот сайт немного продвигаю.

      VN:F [1.9.22_1171]
      Рейтинг: 0 (голосов: 0)
  • слышал про нее ну тогда рефку кидайте а если подскажите как внутри ориентироваться дуду благадарен тоже ато в сапе я так и непонял как их мудрые коды ставить ........ чтоб тиц 10 поднять сколько в тут вложить надо примерно?

    VA:F [1.9.22_1171]
    Рейтинг: 0 (голосов: 0)
    • рефералка http://www.miralinks.ru/users/registration/from:215125
      По вложениям - не подскажу, как-то не засекал. Я для себя взял за правило - каждый месяц примерно одну и ту же сумму скидывать на продвижение.
      Внутри в системе всё довольно таки интуитивно понятно, к счастью, разработчики системы её постоянно дорабатывают для удобства, но если возникнут вопросы - задавайте, подскажу что знаю.

      VN:F [1.9.22_1171]
      Рейтинг: +1 (голосов: 1)
      • хорошо спасибо как дойдет дело до мералинкса напишу. спасибо за инфо.

        VA:F [1.9.22_1171]
        Рейтинг: 0 (голосов: 0)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Бурашников Роман АлександровичБурашников Роман Александрович
Лучшие записи
Рекомендую
  • Beget — лучший хостинг для сайтов в России
  • Umi — единственный нормальный конструктор сайтов
  • Топвизор — проверка позиций сайта в поисковых системах
  • Pozvonim.com — обратный звонок на сайт
  • Модульбанк — лучший банк для предпринимателей

Создать сайт бесплатно