Фильтр категорий Wordpress

У меня есть веб-сайт Wordpress, который вы можете посмотреть здесь: PRAXIS3.com.

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

Код выбора категории:

<div class="btCatFilter">
    <span class="btCatFilterTitle">Category filter:</span>
    <span class="btCatFilterItem all" data-slug="">All</span>
    <span class="btCatFilterItem" data-slug="acura">Acura</span>
    <span class="btCatFilterItem" data-slug="alfa-romeo">Alfa Romeo</span>
</div>

У меня есть некоторые пользовательские настройки CSS (чтобы скрыть определенные категории от отображения) на странице, которую вы можете просмотреть ниже.

.automotive .btCatFilterItem[data-slug*="architecture"] {display: none;}
.automotive .btCatFilterItem[data-slug*="automotive"] {display: none;}
.automotive .btCatFilterItem[data-slug*="branding"] {display: none;}
.automotive .btCatFilterItem[data-slug*="civic"] {display: none;}
.automotive .btCatFilterItem[data-slug*="conceptual"] {display: none;}
.automotive .btCatFilterItem[data-slug*="hospitality"] {display: none;}
.automotive .btCatFilterItem[data-slug*="education"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="environmental-graphics"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="interior-design"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="mixed-use-residential"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="office"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="signage-wayfinding"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="financial"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="retail"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="rollout"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="sustainable"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="workplace"] {display: none;}

Я пытаюсь сделать так, чтобы при нажатии кнопки "Все" отображались все проекты в категории "Автомобилестроение".

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

.automotive .btCatFilterItem.all {display: "automotive";}
.automotive .btCatFilterItem.all {display: automotive;}
.automotive .btCatFilterItem.all {display: data-slug*="automotive";}

Любая помощь будет принята с благодарностью. Благодарю вас!


menu wordpress css categories display
person Michael Weaver    schedule 20.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Поэтому я думаю, что на самом деле это проблема базы данных, а не CSS или даже Javascript.

Глядя на ваш сайт, фильтр категорий на самом деле уничтожает все плитки и перезагружает соответствующие плитки на страницу через Ajax каждый раз, когда выбирается фильтр. Это означает, что фильтр не скрывает/показывает плитки, а каждый раз повторно заполняет содержимое страницы.

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

Но может это не вариант...

Сами плитки нуждаются в унифицированных классах или атрибутах для таргетинга с помощью CSS или Javascript. У всех одинаковый class="gridItem bt11 btGridItemLoaded".

Если вы хотите попытаться взломать его вместе, вам нужно отредактировать скрипт, который генерирует плитки, и добавить объединяющий класс или атрибут, например «автомобильный», тогда вы можете скрыть все остальные плитки чем-то вроде

.automotive .btGridItemLoaded:not(.automotive) { display:none; }

кстати

Используемые вами значения недопустимы для свойства display. Свойство display имеет фиксированный набор значений, таких как block, inline-block, none и inherit среди прочих.

person jdfink    schedule 20.03.2019
comment
Что касается плиток, все они имеют привязанную к ним категорию автомобилей. Могу ли я использовать это в любом случае? - person Michael Weaver; 21.03.2019
comment
Я думаю, вам лучше всего посмотреть настройки вашего плагина галереи. Если все они правильно классифицированы, вы сможете отфильтровать их, чтобы показать все автомобили, как вы это делали с категориями автомобилей. - person jdfink; 21.03.2019
comment
Круто - буду дальше копаться. - person Michael Weaver; 22.03.2019