Как легко добавить фильтры сообщений на ваш сайт WordPress

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

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

В сегодняшнем проекте Weekend WordPress я дам вам краткий обзор того, как вы можете реализовать подобную функцию в теме Twenty Fifteen. Давайте взломать!

• Создание дочерней темы
• Создание элементов управления
• Изменение запроса
• Умные формы
• Поведение WordPress
• Вывод

Создание дочерней темы

Как всегда, вам нужна дочерняя тема. У нас есть руководство по дочерним темам прямо здесь, на WPMU DEV, я рекомендую прочитать его, если вы не знакомы с дочерними темами.

Создание элементов управления

Давайте добавим три элемента управления: один для упорядочения сообщений, один для установки направления сортировки и один для отображения только сообщений с миниатюрами.

Первый шаг — скопировать index.php родительской темы в нашу дочернюю тему.

Откройте файл index.php в дочерней теме и вставьте следующий HTML-код под основным контейнером (который должен быть в строке 20):

А вот как это выглядит на фронтенде:

Как видите, нам не хватает стиля. Давайте решим эту проблему, добавив несколько стилей в таблицу стилей:

Реакция, которую я часто слышу от новичков в программировании, звучит так: «Откуда он знал, что это именно те стили, которые сделают его гармонирующим с темой?»

Решение довольно простое: я жульничаю. Я использую инструменты разработчика в Chrome для проверки обычных элементов статьи. В данном случае это позволило мне увидеть, как элементы получают свою тень и поля, и я просто применил эти правила к своему собственному элементу.

Изменение запроса

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

Чтобы понять почему, давайте проверим URL. Это должно быть что-то вроде этого:

 http://yourdomain.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed

Лакомые кусочки информации можно вызвать в наших сценариях PHP, используя переменную $_GET . WordPress уже знает, что означают параметры order и orderby, и использует их в запросе по умолчанию. В результате, если нам нужен только порядок и направление заказа, на самом деле все готово.

Это все здорово, но опять же, как я это узнал? Я мог бы использовать в качестве параметра «order_by» вместо «orderby». В этом случае WordPress не понимает наших намерений. Я просмотрел документацию WP_Query в Кодексе WordPress, где есть множество параметров, многие из которых можно использовать в URL-адресах.

Теперь давайте реализуем наш параметр эскиза поста. У сообщения есть эскиз, если у него есть метаданные с ключом _thumbnail_id связанным с ним. Нам нужно изменить наш запрос, чтобы убедиться, что это учтено. Давайте сделаем это сейчас с помощью query_posts() .

Вставьте следующий код над get_header() в верхней части файла:

Мы объединяем параметры исходного запроса с нашим собственным новым параметром, что приводит к другому набору сообщений. Наша форма теперь работает, но не запоминает наши выборы. Давайте исправим это, переписав нашу форму и используя немного PHP.

Умные формы

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

Вы понимаете что-нибудь из этого? Я не виню тебя! В каждом параметре мы проверяем, равно ли текущее выбранное значение значению параметра. Если это так, мы выводим выбранное свойство. Давайте сделаем это намного чище с помощью цикла:

Это немного дольше, но только потому, что у нас есть три варианта. Это лучший формат для управления любым выбором. Распространим это на всю форму:

Все сделано. Теперь форма должна помнить наш выбор на основе переменных $_GET в URL-адресе.

Поведение WordPress

Помните, как я упоминал, что знаю, как использовать «order» и «orderby», потому что я смотрел документацию WP_Query? Это хорошая практика, но она может привести к неожиданным результатам. Найдите слаг категории, которая у вас есть, скажем, эта категория «wordpress».

Теперь используйте следующий URL-адрес: http://yourwebsite.com/?category_name=wordpress. Вы должны увидеть свой архив категорий, в котором перечислены все ваши сообщения WordPress. Это нормально, но у нас есть две проблемы:

Если у вас включены красивые постоянные ссылки (что вам и следует делать), страница была перенаправлена ​​на новый URL-адрес, скорее всего, http://yourwebsite.com/category/wordpress. Наши фильтры не будут видны, потому что это представление обрабатывает файл archive.php , а не index.php . Кроме того, имя нашей категории не передается в качестве параметра URL-адреса, поэтому нам нужно будет использовать некоторые дополнительные хитрости, чтобы наши фильтры работали.

Быстрый способ сделать эту работу — сознательно не использовать те же параметры, которые использует WordPress. Вы можете передать название категории, используя параметр catname в URL-адресе, так как WordPress этого не заметит. Затем вы можете передать это в запрос, используя правильное имя параметра. Что-то вроде этого:

Альтернативой может быть использование функции вместо вывода нашей формы в index.php как есть. Вам нужно будет определить категорию из самого запроса WordPress и отобразить текущий выбор на основе этого.

Вывод

Добавление собственных фильтров не так уж и сложно, но требует немного возни. В нашем случае вы можете убедиться, что нумерация страниц удалена, когда установлен случайный порядок. Ее можно заменить кнопкой «показать больше случайности», которая просто перезагружает страницу.

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

• выходные проекты wordpress