Как создавать галереи изображений с фильтрованным поиском для веб-сайтов WordPress

Я помню, как много лет назад искал фильтрованные поисковые решения для нишевых сайтов. Лучшее, что я мог тогда придумать, это взломать несколько тем WordPress по недвижимости. Явно не идея.

К счастью, плагины WordPress прошли долгий путь, но это все еще не так просто, как хотелось бы.

Что такое отфильтрованная галерея поисковых изображений?

Это галерея изображений, в которой посетители веб-сайта могут сузить поиск изображений, выбрав различные параметры поиска… часто выпадающие меню или флажки. Другой термин для этого — параметрический поиск.

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

Почему вы хотите предложить фильтрованный поиск на своем веб-сайте?

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

Когда фильтрованный поиск имеет смысл для вашего сайта, это очень полезный инструмент, который оценят ваши посетители.

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

Какие инструменты вы выберете, также зависит от того, как вы хотите все настроить, а также от того, какие типы контента вы хотите, чтобы ваши посетители могли искать. Например, возможно, вы хотите предложить отфильтрованный поиск сообщений или настраиваемые типы страниц сообщений. Мне нужно предложить фильтрованный поиск изображений.

Вот что я сделал, чтобы фильтрованный (параметрический) поиск работал на моих нишевых сайтах.

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

Перейти к примерам галереи изображений с фильтрованным поиском!

Шаг 1: Плагин пользовательского интерфейса пользовательского типа публикации

• Свободно

Плагин Custom Post Type UI — это ведущий плагин для создания пользовательских таксономий. Если у вас настроена сложная таксономия, вам определенно понадобится этот плагин. Если ваша структура таксономии проста, вам может сойти с рук только следующий инструмент.

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

Вот скриншот, показывающий, как создать пользовательскую таксономию с помощью плагина Custom Post Type UI:

После создания пользовательской таксономии вы добавляете различные критерии/параметры для каждой пользовательской таксономии.

Например, если вы создаете автомобильный веб-сайт, пользовательская таксономия, которую вы создадите на приведенном выше экране, будет «Цвет». Критерии/варианты, которые вы размещаете для «Цвета», будут «красный», «белый», «синий» и т. д.

Шаг 2: Плагин расширенной медиатеки

• Бесплатная и Премиум версии

Плагин Enhanced Media Library позволяет назначать пользовательские таксономии для каждого изображения в вашей медиатеке. Он имеет встроенные медиа-категории и теги. Как указано выше, если вы можете организовать все с точки зрения таксономии, используя только категории мультимедиа и теги, вам не нужен плагин Custom Post Type UI. Если вам нужна более надежная структура таксономии, вам понадобятся как пользовательский интерфейс пользовательского типа публикации, так и плагин Enhanced Media Library.

После того, как вы настроите свои таксономии, назначить подходящие таксономии каждому изображению очень просто. Вы просто щелкаете изображение в медиатеке, а затем проверяете применимые таксономии справа. Это утомительно, если у вас есть тысячи изображений, как у меня. Поэтому я нанял 2 VA, чтобы сделать эту работу (и они делают это очень хорошо).

Чтобы флажки отображались в медиатеке, выполните следующие действия:

Настройки => Медиа => Таксономии мультимедиа (это вкладка) => Прокрутите страницу вниз до раздела «Параметры», как показано ниже:

Шаг 3: Загрузите изображения или создайте свои сообщения

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

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

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

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

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

К вашему сведению, профессиональная версия плагина Enhanced Media Library разрешает массовую пометку, но когда вы делаете это, очевидно, вы должны применять одни и те же параметры ко всем изображениям, выбранным для массовой пометки. Я могу сказать, что профессиональная версия стоит затрат на эту функцию.

Шаг 4: Плагин Content Views Pro (CVP)

• Бесплатная и Премиум версии

Последним инструментом для настройки всего этого является плагин Content Views Pro (прочитайте мой полный обзор Content Views Pro здесь). Несмотря на то, что существует бесплатная версия, вам понадобится профессиональная версия, если вы хотите отобразить отфильтрованный инструмент поиска на своем веб-сайте. К вашему сведению, CVP называет свой инструмент фильтрации «перетасованным фильтром».

Создать галерею отфильтрованных поисковых изображений или сетку постов с помощью CVP очень и очень просто.

Просто сделайте следующее:

Обратите внимание на приведенный выше снимок экрана, что для «Тип контента» я выбрал «Медиа»». Это для изображений. Однако с помощью Content Views Pro вы можете создавать эти галереи с сообщениями, пользовательскими типами сообщений, страницами и купонами.

Ниже вы точно настроите, какие изображения вы хотите отфильтровать в галерее или из нее.

Затем переключитесь на настройки дисплея. Настройте в соответствии с вашими предпочтениями. Доступно множество вариантов отображения.

Наконец, настройте фильтр перемешивания:

Будет ли Content Views Pro фильтровать по сообщению или пользовательскому типу сообщения?

Да, это так. Это гораздо больше, чем просто плагин галереи. Это удивительная сетка и фильтрующий плагин для поиска и галереи, объединенные в один безумно полезный инструмент для веб-сайтов WordPress.

Шаг 5: Вставьте свою галерею в пост или на страницу с помощью шорткода CVP.

Последний шаг — взять шорткод CVP и поместить его в сообщение или на страницу, где появится ваша отфильтрованная поисковая галерея / сетка сообщений.

Это очень легко. Просто скопируйте шорткод, сгенерированный CVP.

Ниже приведен пример галереи изображений, в которой можно искать с помощью фильтров.

Шаг 6. Добавьте дополнительный контент (необязательно)

Вы можете рассмотреть возможность добавления дополнительного контента к сообщениям/страницам, где вы отображаете отфильтрованную галерею поиска или сетку сообщений. Это полностью зависит от вас. Обычно я добавляю как минимум 150 слов; чаще добавляя от 400 до 600 слов контента до и после галереи.

Вот и все.

2 других надежных варианта, чтобы попробовать

Если вышеперечисленное вас не привлекает, есть другие способы создания фильтрованных функций поиска для посетителей вашего сайта. Проверьте следующее:

1. ФасетВП:

Это создает действительно хорошие параметрические страницы поиска, но его сложнее использовать, чем Content Views Pro. Вам нужно немного знать PHP, но если вы заработаете, результат будет потрясающим. Вот демо. Да, вы будете впечатлены. Вы можете обойти требование PHP с помощью Caldera Clarity для FacetWP.

Я использовал FacetWP и Caldera Clarity. Они хорошо работают, но поскольку Content Views Pro проще в использовании и быстрее создает множество отфильтрованных галерей поиска, я остановился на CVP. Тем не менее, я полностью понимаю, почему можно выбрать FacetWP. Интерфейс поиска отличный.

2. Типы ВП:

Этот разработчик предлагает полный набор плагинов и тем, которые вы можете купить для создания чрезвычайно сложных веб-сайтов с параметрическим поиском. Тем не менее, он имеет крутую кривую обучения. Я купил его, попробовал и сдался… было легко сдаться, потому что я знал, как легко использовать Content Views Pro. Вот несколько сайтов-витрин.

Что я предлагаю?

Если вы отлично разбираетесь в технологиях, CSS и кодировании, я считаю, что WP Types — самый надежный и сложный доступный поисковый плагин с фильтрацией. Это может сделать тонну, но это не так просто научиться.

Если вам нравится чистый и очень удобный интерфейс фильтрованного поиска FacetWP, используйте его. Я не могу спорить с этим выбором.

Я в основном использую CVP и очень доволен этим. Команда разработчиков постоянно добавляет новые функции. Я постоянно предлагаю функции, некоторые из которых они уже включили, поэтому я считаю, что у этого плагина очень солидное будущее, поскольку он поможет большему количеству веб-сайтов WordPress предлагать возможности фильтрованного поиска.