На wordpress, изначально предназначенном для блога, теперь создают различные сайты – от агентства недвижимости до каталога, доски объявлений или магазина.
Для таких нестандартных сайтов может потребоваться самый разный функционал, например, вот такой алфавитный каталог растений для дачи с изображениями этих растений.
Содержание:
- Как сделать каталог товаров самому с помощью меток?
- Немного пояснений по созданию каталога
- Вывод изображений в каталоге
- Как сделать красивый каталог при помощи CSS
- Немного об оптимизации (куда же без нее?)
- Маленькая справка по использованию категорий и меток
Как вы думаете, как создан такой каталог?
Ни за что не догадаетесь!
Это обычное облако меток (тегов), ну не совсем обычное, а немного модифицированное.
Как сделать алфавитный каталог самомуБлагодаря меткам можно создать:
- каталог товаров для интернет-магазина,
- каталог книг для онлайн-библиотеки или жанров фильмов для онлайн-кинотеатра,
- каталог рецептов различных видов тортов на кулинарном сайте или
- каталог мастер классов по типам (например, шапки, платья, варежки) на рукодельном сайте.
Вообще, при правильном использовании, метки могут служить для дополнительного структурирования контента сайта.
А о том, как красиво или необычно вывести их на сайте, я расскажу в этом посте.
↑ Как сделать каталог товаров самому с помощью меток?
Начать нужно с вывода облака меток. Код вывода я публиковать не буду – вы можете скачать архив с кодом по ссылке внизу поста.
Распакуйте архив и загрузите файл 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 можно придать нашему каталогу любой вид, например, такой:
Файл стилей вы также можете скачать по ссылке внизу поста.
Перенесите код из файла 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%.
Проверьте, чтобы размер ваших изображений был не меньше ширины колонки!
↑ Немного об оптимизации (куда же без нее?)
Как правило, страницы меток содержат анонсы постов (так же, как категории и архивы).
По сути, это дублирующийся контент, что не есть хорошо.
Исправить это мы не можем, но, можем смягчить последствия этого явления для своего сайта.
Для этого:
- Не создавайте много меток.
Если вы используете метки, как дополнительный способ структурирования контента, добавляйте только по одной к каждому посту. - На странице метки опубликуйте описание по типу того, какое вы обычно делаете для категорий.
Описание можно вывести функцией tag_description(), вот так:<div id="tag-desc"> <?php $descr = tag_description(); if ($descr != '') echo $descr; ?> </div>Это код нужно добавить в файл, отвечающий за вывод меток. Обычно, это index.php или archive.php.
Добавьте в это описание минимум 1000 знаков оригинального текста. - Если вы используете теги для удобства пользователей, а не для увеличения количества страниц сайта, можно закрыть их от индексации в robots.txt.
↑ Маленькая справка по использованию категорий и меток
- Теги и Категории это равноценные сущности.
- Категории, обычно, используют для глобального структурирования сайта, например, на этом блоге есть категории Индексация сайтов, Оптимизация, Продвижение сайта.
- Теги создают дополнительное разделение постов на темы, например, «Seo-оптимизация», «Микроразметка» и другие темы, относящиеся к оптимизации сайта.
- Категории более глобальны, чем Теги.
Это все.
Пишите в комментариях, если этот пост помог вам расширить функционал вашего сайта.
Людмила! Спасибо большое за статью! Как раз работаю над новым проектом для Краевого центра образования нашашкола27.рф думаю сделать курс по системной инженерии (читай робототехники). Желаю удачи в нашем интересном и нужном труде.
Спасибо.
И вам удачи в разработке вашего сайта.
Ксаночка! Большое спасибо!
Классная вещь для расширения функционала сайта. Спасибо, Людмила. Вы продолжаете удивлять творческим изобилием.
Интересно, интересно... Для новичков пойдет. Но кое с чем несогласен. Вы вообще откуда взяли этот код?
Вы вообще знаете какие допустимы параметры в функции get_tags? На счет orderby и orde я соглашусь.
Но параметры exclude и include вообще не относятся к функции вывода меток. Параметр exclude больше относится к выводу выпадающий список категорий, это функция wp_dropdown_categories. И параметр exclude означает не скрыть метки, а "ID категорий, которые нужно исключить. Указывать через запятую" - Это дословно из документации вордпресс. Может даже так и будет работать, но так делать нельзя, потому что в функции get_tags параметр exclude не объявлен. Конечно PHP все скушает, но до поры до времени, пока не вылезит какая нибудь зараза. то как чистить зубы только когда гости приходят, а что все нормально, не десна ни зубы не болят, но до поры до времени и рано или поздно не только заболят а и еще и могут выпасть или сломаться раньше времени.
Если вы хотите, к примеру чтоб параметр exclude всегда нормально работал в функции вывода меток get_tags, то нужно сделать хак, то есть переписать функцию к себе где указаны эти параметры и добавить новый, а потом прикрепить эту функцию к своему хаку.
Если вам непонятно что я написал, тогда идем в доки вордпресс и читаем. Да, в вашем файле для скачивания параметра exclude нет. Но в своем посте не нужно пудрить мозги новичкам. А то накопипастят, а потом ходят по форумам и просят помощи что у них что то не так работает. Если вы уж припесали этот параметр, тады и напишите хук и функцию, чтоб все работало как надо и в дальнейшем не было проблем.
Вот вы наверно в курсе что означают параметры orderby и order в функции get_tags. А вы вообще знаете сколько там параметров и для чего они?
Ладно, пост все равно интересный, но прежде чем учить думаю надо самому немного подучится.
Вы правы - это не корректно и данные параметры не относятся к описанной функции.
Но, это работает, поэтому может использоваться :).
Ксана, спасибо! Очень интересно. Позже обязательно вернусь к этому вопросу, а пока создаю свой блог.
Купила Вашу тему, разбираюсь с ней.
Здравствуйте, Людмила!
Очень заманчиво выглядит такой красочный каталог!
Давно хотелось сделать что-то подобное
А можно ли сделать так, чтобы выводились не все метки, а выборочно?
Можно.
А каким образом? Объясните, пожалуйста.
Переписать вывод меток, используя другую функцию, у которой есть параметры сортировки меток.
Навскидку предложить код не могу, нужно поэкспериментировать.