Фильтр категорий Wordpress - PullRequest
Новая
       27

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

0 голосов
/ 20 марта 2019

У меня есть веб-сайт 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";}

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

1 Ответ

0 голосов
/ 21 марта 2019

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

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

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

Но, может быть, это не вариант ...

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

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

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

btw

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

...