Как сделать каталог с изображениями товаров

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

На wordpress, изначально предназначенном для блога, теперь создают различные сайты – от агентства недвижимости до каталога, доски объявлений или магазина.
Для таких нестандартных сайтов может потребоваться самый разный функционал, например, вот такой алфавитный каталог растений для дачи с изображениями этих растений.

Содержание:

Как вы думаете, как создан такой каталог?

Ни за что не догадаетесь!
Это обычное облако меток (тегов), ну не совсем обычное, а немного модифицированное.

Благодаря меткам можно создать:

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

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

Как сделать каталог товаров самому с помощью меток? ↑

Начать нужно с вывода облака меток. Код вывода я публиковать не буду – вы можете скачать архив с кодом по ссылке внизу поста.
Распакуйте архив и загрузите файл Catalog.php в папку с темой.

Создайте страницу с нужным вам названием и, в качестве шаблона для нее, выберите Catalog.php.

Немного пояснений по созданию каталога ↑

  • Размер картинок можно указать в строке:
    <img width="300" height="250" src="/wp-content/uploads/Tags/'. $tag->slug .'.jpg" alt="'. $tag->name.'" />

    width="300" – это ширина картинки, а height="250" – это высота.

    Вместо 300 и 250 впишите свои размеры.

Вывод изображений в каталоге ↑

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

Как это работает?
Создайте папку на хостинге, например, внутри папки uploads и назовите ее Tags.
Далее, нужно подготовить изображения для каждой метки.

Важно, чтобы каждое изображение имело название метки, которое отображается в адресной строке на ее странице.

Перейдите в ваш каталог и кликните по любой метке.
После того, как загрузится страница, найдите в адресной строке название тега по английски – так называемый, слаг.
Я кликнула по тегу "Бальзамин" и перешла на эту страницу.

Слаг тега «Бальзамин» - balzamin.
Следовательно, фотография, привязанная к этому тегу, будет называться balzamin.jpg.
Обратите внимание, как выглядит часть названия, которая находится после точки - она называется расширением файла.
Расширение ваших файлов должно быть .jpg.

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

Как сделать красивый каталог при помощи CSS ↑

При помощи CSS можно придать нашему каталогу любой вид, например, такой:

Как сделать каталог товаров на wordpress

Файл стилей вы также можете скачать по ссылке внизу поста.
Перенесите код из файла Catalog.css в style.css вашей темы.

Вы можете использовать эти стили, как они есть или изменить ширину блока с изображением.

Сделать это можно здесь:

#catalog ul li {  
  width: 14.5%;
  height: auto;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 15px;
  padding: 0;
  list-style: none;
  display: inline-block;
  box-sizing: border-box;
}

При ширине 14.5% картинки будут показываться шестью колонками.
Если вы хотите увеличить или уменьшить количество колонок, разделите 100% на ваше количество колонок. Например, так:

100:5=20%

От 20 отнимите 2% (отступы по 1% с каждой стороны) и 0.5% для нашей уверенности, что все блоки поместятся на страницу:

20%-2%-0.5%=17.5%

Значит, чтобы картинки выводились пятью колоноками, ширина каждой должна быть 17.5%.

Измените цифру 14.5% параметра width на 17.5%.

Проверьте, чтобы размер ваших изображений был не меньше ширины колонки!

Немного об оптимизации (куда же без нее?) ↑

Как правило, страницы меток содержат анонсы постов (так же, как категории и архивы).

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

Для этого:

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

    Описание можно вывести функцией tag_description(), вот так:

    <div id="tag-desc">
          <?php $descr = tag_description(); 
                 if ($descr != '') echo $descr; 
           ?>
    </div>

    Это код нужно добавить в файл, отвечающий за вывод меток. Обычно, это index.php или archive.php.

    Добавьте в это описание минимум 1000 знаков оригинального текста.

  3. Если вы используете теги для удобства пользователей, а не для увеличения количества страниц сайта, можно закрыть их от индексации в robots.txt.

Маленькая справка по использованию категорий и меток ↑

  • Теги и Категории это равноценные сущности.
  • Категории, обычно, используют для глобального структурирования сайта, например, на этом блоге есть категории Индексация сайтов, Оптимизация, Продвижение сайта.
  • Теги создают дополнительное разделение постов на темы, например, «Seo-оптимизация», «Микроразметка» и другие темы, относящиеся к оптимизации сайта.
  • Категории более глобальны, чем Теги.

Это все.
Пишите в комментариях, если этот пост помог вам расширить функционал вашего сайта.

↓ Как всегда, архив с файлами для каталога доступен для загрузки моим подписчикам

Уже скачали 26 раз(а)

Открыть ↓

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Людмила! Спасибо большое за статью! Как раз работаю над новым проектом для Краевого центра образования нашашкола27.рф думаю сделать курс по системной инженерии (читай робототехники). Желаю удачи в нашем интересном и нужном труде.

    • Спасибо.
      И вам удачи в разработке вашего сайта.

  2. Ксаночка! Большое спасибо!

  3. Классная вещь для расширения функционала сайта. Спасибо, Людмила. Вы продолжаете удивлять творческим изобилием.

  4. Интересно, интересно... Для новичков пойдет. Но кое с чем несогласен. Вы вообще откуда взяли этот код?
    Вы вообще знаете какие допустимы параметры в функции get_tags? На счет orderby и orde я соглашусь.
    Но параметры exclude и include вообще не относятся к функции вывода меток. Параметр exclude больше относится к выводу выпадающий список категорий, это функция wp_dropdown_categories. И параметр exclude означает не скрыть метки, а "ID категорий, которые нужно исключить. Указывать через запятую" - Это дословно из документации вордпресс. Может даже так и будет работать, но так делать нельзя, потому что в функции get_tags параметр exclude не объявлен. Конечно PHP все скушает, но до поры до времени, пока не вылезит какая нибудь зараза. то как чистить зубы только когда гости приходят, а что все нормально, не десна ни зубы не болят, но до поры до времени и рано или поздно не только заболят а и еще и могут выпасть или сломаться раньше времени.
    Если вы хотите, к примеру чтоб параметр exclude всегда нормально работал в функции вывода меток get_tags, то нужно сделать хак, то есть переписать функцию к себе где указаны эти параметры и добавить новый, а потом прикрепить эту функцию к своему хаку.
    Если вам непонятно что я написал, тогда идем в доки вордпресс и читаем. Да, в вашем файле для скачивания параметра exclude нет. Но в своем посте не нужно пудрить мозги новичкам. А то накопипастят, а потом ходят по форумам и просят помощи что у них что то не так работает. Если вы уж припесали этот параметр, тады и напишите хук и функцию, чтоб все работало как надо и в дальнейшем не было проблем.
    Вот вы наверно в курсе что означают параметры orderby и order в функции get_tags. А вы вообще знаете сколько там параметров и для чего они?
    Ладно, пост все равно интересный, но прежде чем учить думаю надо самому немного подучится.

    • Вы правы.
      Но, критикуя - предлагайте :). Можете сами доработать вывод меток и прислать мне ваш вариант - я опубликую со ссылкой на вас.

  5. Ксана, спасибо! Очень интересно. Позже обязательно вернусь к этому вопросу, а пока создаю свой блог.
    Купила Вашу тему, разбираюсь с ней.

  6. Здравствуйте, Людмила!
    Очень заманчиво выглядит такой красочный каталог!
    Давно хотелось сделать что-то подобное
    А можно ли сделать так, чтобы выводились не все метки, а выборочно?

    • Можно.

      • А каким образом? Объясните, пожалуйста.

        • Переписать вывод меток, используя другую функцию, у которой есть параметры сортировки меток.
          Навскидку предложить код не могу, нужно поэкспериментировать.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 194
Отзывов 4295