Как можно реализовать простой фильтр на WordPress?

JavaScript

1 ответ

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

следующим методом

&lt;div class="row"&gt; 	&lt;?php if ( have_posts() ) : ?&gt; 		&lt;?php 		while ( have_posts() ) : the_post(); ?&gt; 			&lt;div class="case-col col-lg-4 col-md-6"&gt; 			&lt;div class="new-caseItem" style="background-image:url(&lt;?php the_post_thumbnail_url();?&gt;);"&gt; 			&lt;div class="new-caseItem-content"&gt; 			&lt;div class="new-caseItem-tags"&gt;&lt;?php the_tags( '', ', '); ?&gt;&lt;/div&gt; 			&lt;div class="new-caseItem-title"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/div&gt; 			&lt;div class="new-caseItem-expect"&gt;&lt;?php the_field( 'what_was_done' ); ?&gt;&lt;/div&gt; 			&lt;div class="new-caseItem-button"&gt;&lt;a class="btn-new" href="&lt;?php the_permalink(); ?&gt;"&gt;Читать кейс&lt;/a&gt;                          &lt;/div&gt; 			&lt;/div&gt; 			&lt;/div&gt; 			&lt;/div&gt; 		&lt;?php endwhile; 		else : 		get_template_part( 'template-parts/content', 'none' ); 	endif; ?&gt; &lt;/div&gt;

<div class="row"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div class="case-col col-lg-4 col-md-6"> <div class="new-caseItem" style="background-image:url(<?php the_post_thumbnail_url();?>);"> <div class="new-caseItem-content"> <div class="new-caseItem-tags"><?php the_tags( '', ', '); ?></div> <div class="new-caseItem-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> <div class="new-caseItem-expect"><?php the_field( 'what_was_done' ); ?></div> <div class="new-caseItem-button"><a class="btn-new" href="<?php the_permalink(); ?>">Читать кейс</a> </div> </div> </div> </div> <?php endwhile; else : get_template_part( 'template-parts/content', 'none' ); endif; ?> </div>

Я переделал карточки под статичный вывод, по единичности вывел их
вот как они выглядят

&lt;div class="case-col col-lg-4 col-md-6 magazine"&gt; 	&lt;div class="new-caseItem" 		style="background-image:url();"&gt; 		&lt;div class="new-caseItem-content"&gt; 		&lt;div class="new-caseItem-tags"&gt;&lt;a href="" rel="tag"&gt;Интернет-магазин&lt;/a&gt;&lt;/div&gt; 		&lt;div class="new-caseItem-title"&gt;&lt;a href=""&gt;Магазин по продаже септиков Септик Маркет&lt;/a&gt;&lt;/div&gt; 		&lt;div class="new-caseItem-expect"&gt;Увеличили розницу на 60% за счет поискового продвижения&lt;/div&gt; 		&lt;div class="new-caseItem-button"&gt;&lt;a class="btn-new" href=""&gt;Читать кейс&lt;/a&gt;&lt;/div&gt; 		&lt;/div&gt; 	&lt;/div&gt; &lt;/div&gt; &lt;div class="case-col col-lg-4 col-md-6 magazine"&gt; 	&lt;div class="new-caseItem" 		style="background-image:url();"&gt; 		&lt;div class="new-caseItem-content"&gt; 		&lt;div class="new-caseItem-tags"&gt;&lt;a href="" rel="tag"&gt;Интернет-магазин&lt;/a&gt;&lt;/div&gt; 		&lt;div class="new-caseItem-title"&gt;&lt;a href=""&gt;Ural Sound — интернет-магазин автозвука&lt;/a&gt;&lt;/div&gt; 		&lt;div class="new-caseItem-expect"&gt;Органический трафик вырос до 1,86 млн. пользователей&lt;/div&gt; 		&lt;div class="new-caseItem-button"&gt;&lt;a class="btn-new" href=""&gt;Читать кейс&lt;/a&gt;&lt;/div&gt; 		&lt;/div&gt; 	&lt;/div&gt; &lt;/div&gt;

<div class="case-col col-lg-4 col-md-6 magazine"> <div class="new-caseItem" style="background-image:url();"> <div class="new-caseItem-content"> <div class="new-caseItem-tags"><a href="" rel="tag">Интернет-магазин</a></div> <div class="new-caseItem-title"><a href="">Магазин по продаже септиков Септик Маркет</a></div> <div class="new-caseItem-expect">Увеличили розницу на 60% за счет поискового продвижения</div> <div class="new-caseItem-button"><a class="btn-new" href="">Читать кейс</a></div> </div> </div> </div> <div class="case-col col-lg-4 col-md-6 magazine"> <div class="new-caseItem" style="background-image:url();"> <div class="new-caseItem-content"> <div class="new-caseItem-tags"><a href="" rel="tag">Интернет-магазин</a></div> <div class="new-caseItem-title"><a href="">Ural Sound — интернет-магазин автозвука</a></div> <div class="new-caseItem-expect">Органический трафик вырос до 1,86 млн. пользователей</div> <div class="new-caseItem-button"><a class="btn-new" href="">Читать кейс</a></div> </div> </div> </div>

Код сверху выводит две карточки, главный атрибут является тег

Я добавил к главному родительскому div классы для идентифицирования по типу ( .magazine, .remont) &lt;div class="new-caseItem-tags"&gt;&lt;a href="" rel="tag"&gt;Интернет-магазин&lt;/a&gt;&lt;/div&gt;

Я добавил к главному родительскому div классы для идентифицирования по типу ( .magazine, .remont) <div class="new-caseItem-tags"><a href="" rel="tag">Интернет-магазин</a></div>

По нему нужно производить сортировку.
И я попытался реализовать фильтр с помощью Jquery, добавив скрипт в конце файла

&lt;script type="text/javascript"&gt; // Фильтр кейсов 	jQuery(function(){ 			tail.select('select.select-ads', { placeholder: 'Рекламная площадка', multiShowCount: false,multiContainer: '.tail-move-container' }); 			tail.select('select.select-otrasl', { placeholder: 'Отрасль бизнеса', multiShowCount: false,multiContainer: '.tail-move-container' }); //строки бывшего программиста, выводящие меню фильтров на экран 			 			var MedCheck = false; 			var autotemCheck = false; 			var kosmetologCheck = false; 			var magazineCheck = false; 			var stomatologCheck = false; 			 			 			$('li').on('click', function(event){ 				$('.case-col').addClass('hide'); 				 				var data = $(this).data('key'); 				if ((data == "Медицина") &amp;&amp; (MedCheck == false)) { 					$('.med').removeClass('hide'); 					MedCheck = true; 				} else if ((data == "Медицина") &amp;&amp; (MedCheck == true)) { 					$('.med').addClass('hide'); 					MedCheck = false; 				}; 					 				if ((data == "Автозапчасти") &amp;&amp; (autotemCheck == false)) { 					$('.autotem').removeClass('hide'); 					autotemCheck = true; 				} else if ((data == "Автозапчасти") &amp;&amp; (autotemCheck == true)) { 					$('.autotem').addClass('hide'); 					autotemCheck = false; 				}; 					 				 				if ((data == "Стоматология") &amp;&amp; (stomatologCheck == false)) { 					$('.stomatolog').removeClass('hide'); 					stomatologCheck = true; 				} else if ((data == "Стоматология") &amp;&amp; (stomatologCheck == true)) { 					$('.stomatolog').addClass('hide'); 					stomatologCheck = false; 				}; 					 				if ((data == "Косметология") &amp;&amp; (kosmetologCheck == false)) { 					$('.kosmetolog').removeClass('hide'); 					kosmetologCheck = true; 				} else if ((data == "Косметология") &amp;&amp; (kosmetologCheck == true)) { 					$('.kosmetolog').addClass('hide'); 					kosmetologCheck = false; 				}; 					 				if ((data == "Интернет-магазин") &amp;&amp; (magazineCheck == false)) { 					$('.magazine').removeClass('hide'); 					magazineCheck = true; 				} else if ((data == "Интернет-магазин") &amp;&amp; (magazineCheck == true)) { 					$('.magazine').addClass('hide'); 					magazineCheck = false; 				}; 				 				 				 				 				if ((MedCheck == false) &amp;&amp; (kosmetologCheck == false) &amp;&amp; (magazineCheck == false) &amp;&amp; (stomatologCheck == false) &amp;&amp; (autotemCheck == false)) { 					$('.case-col').removeClass('hide'); 				}; 				event.stopPropagation(); 			 }); 		}); &lt;/script&gt;

Суть в том что я добавляю к ненужным карточкам класс .hide
Имеющий код CSS:

.hide { 	position:absolute; 	visibility: hidden; }

.hide { position:absolute; visibility: hidden; }

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

Можно глянуть по ссылке
https://digitalriff.ru/cases/
Пока что реализовал недофильтр на отрасли бизнеса. Но если натыкать несколько ещё и удалить один, всё пойдёт по одному месту...
Теперь вопрос к тем кто уже может имел дело с такой задачей:
Какие другие варианты есть реализации?
Может какой плагин накатить?
Хотелось бы оставить метод вывода карточек с помощью запроса php...

Дополнительно:

как ваиант:
перепишите свой код js. отслеживайте изменение

$('#MY_orderby').change(function(){'use strict';...

$('#MY_orderby').change(function(){'use strict';...

выпадающего списка. при этом добавляйте в разметку рядом кнопку применить (какой-нибудь span c id = postFilter) или по умолчанию скрытой (при change показывайте), или всегда видимой, например. по нажатию кнопки сохраняйте куку в зависимости от выбранного из списка и сразу после сохранения window.location.reload(). ну а дальше тупо в php смотрите куку и в зависимости от ключа выдавайте соответствующий контент через add_filter('pre_get_posts' например.
ну или простенькую форму и теже куки, но через post/get запрос

https://qna.habr.com/answer?answer_id=2376466#answ...

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Никита Орлов Ответ

Для реализации простого фильтра на WordPress можно воспользоваться функцией `pre_get_posts`, которая позволяет изменить параметры запроса перед выполнением основного запроса.

Прежде всего, создадим функцию, которая будет добавлять фильтр к запросу. Например, мы хотим отфильтровать посты по категории "новости". Вот пример кода:

function custom_filter_posts( $query ) {
    if ( !is_admin() &amp;&amp; $query-&gt;is_main_query() &amp;&amp; $query-&gt;is_home() ) {
        $query-&gt;set( 'category_name', 'news' );
    }
}
add_action( 'pre_get_posts', 'custom_filter_posts' );

function custom_filter_posts( $query ) { if ( !is_admin() && $query->is_main_query() && $query->is_home() ) { $query->set( 'category_name', 'news' ); } } add_action( 'pre_get_posts', 'custom_filter_posts' );

Этот код проверяет, что мы не находимся на странице администратора, что это основной запрос (не дополнительный) и что мы на главной странице. Затем он устанавливает параметр запроса `category_name` равным "news", что означает, что будут отображаться только посты из категории "новости".

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

Надеюсь, это поможет вам реализовать простой фильтр на вашем сайте WordPress.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ SMM Из-за чего не сохраняется видео в мобильной программе blackmagic? 1 ответ

Как можно реализовать простой фильтр на WordPress?

Дополнительно:

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

Вам также может быть интересно

Ежедневно, круглосуточно