Step-by-step - на Русском - MDTF - WordPress Meta Data Filter & Taxonomies Filter

Step-by-step – на Русском

Начальные действия в создании фильтров

(краткий конспект в pdf формате)

(видео уроки)

Установите и активируйте плагин
Далее идём сразу в настройки плагина /wp-admin/edit.php?post_type=meta_data_filter&page=mdf_settings проставляем типы постов с которыми хотим работать.
Плагину абсолютно всё равно есть вукомерц или нет, для него это всего лишь кастомный тип поста products, и работа с woocommerce продуктами вообще ничем не отличается от сборки фильтров для любого типа поста.
Далее создаём категорию фильтров: категорий фильтров может быть сколько угодно. Смысл их существования это объединение фильтров в группы, где фильтр это кастомный пост тип meta_data_filter: где добавляются сами html элементы поисковой формы для фильтрации: таксономии,чекбоксы,селекты, рендж-слайдеры, календари и textinputs: В ОДНОМ любом посте который хотим добавить в поиск можно выбрать только ОДНУ фильтр-категорию!! Вопрос, а зачем их создавать много. Ответ: если на сайте есть несколько кастомных типов постов, например книги и фитнес-центры - то понятно что характеристики по которым их надо фильтровать совершенно разные, и пихать в виджет сразу всё что можно фильтровать на сайте не разумно. Или например пусть даже будет 1 кастом тип - недвижимость, но она тоже есть разная и мы бы хотели фильтровать её разными фильтрами, типа коммерческая, дома, съёмные квартиры - у них у всех интересующие конечного потребителя параметры разные, так что под них надо делать разные фильтры, которые объединять в разные категории.
Всё, создали нашу категорию-фильтров. Далее начинаем согласно хотелкам делать сами фильтры. Жмём Add new Filter называем его как хотим, например Основные параметры, и сразу Prepend item или Append Item - разницы пока что нет. Prepend - добавить html-элемент в самое начало, Append - в самый конец, это всё для удобства только, если надо поменять очерёдность элементов, то это можно сделать перетаскиванием мышью. Item Name - Вводим название, начнём с range-slider и пусть будет это цена.
Пишем слово "Цена", жмём Toggle раскрылся весь блок, Item Type - выбираем range slider, ставим диапазон цен, например от 0 до 1000 - 0^1000. Сразу может возникнуть вопрос, а что если есть товары до 1000 а парочку за 5000, ставить до 5000 диапазон как то неудобно. Ничего страшного есть пара интересных моментов, например у нас 8 постов до 1000$ и 2 по 5000$. Так вот если посетитель сайта потянет левый ползунок от нуля, а правый не будет трогать, то аякс пересчитает и покажет все посты включая и эти по 5000$ так как по логике он посчитает от меньшего выбранного до бесконечности, соответственно и в результат упадёт эти два поста по 5000. А если он кинет левый ползунок в крайнее правое положение, то есть в 1000, то будут показывается только эти позиции которые больше 1000. То есть из поиска ничего не выпадает.
Далее по параметрам range-slider всё просто: step - шаг, ставим 1 или 100, или даже 0.1 если нам надо не цена, а что то иное. Префикс и суффикс - обычно знаки денег. Item description - описание этого элемента на фронте для ваших элементов в виде тултипа на фронте сайта если вы посчитаете что посетителям может быть что то не понятно в этом элементе фильтра:
Жмём Опубликовать. У нас получилось что то типа такого:
Далее нам надо добавить пару чекбоксов (зима+лето) и селект. Можем поступить следующим образом: добавить эти элементы тут же в этой же секции или создать новую секцию, так как элементов немного, то добавим новые элементы в эту же секцию. Хотя вот пример когда надо создавать систему фильтров секциями, для какого нибудь товара: http://general.wp-filter.com/category/notebook-posts/
Чекбоксы добавляются проще всего: Apend Item и пишем название, всё даже не надо открывать сам блок так как по умолчанию добавляемый новый элемент и есть чекбокс.
Добавляем селект, жмём Append Item, в названии элемента пишем например "страны производители", Item type выбираем как drop-down, опции селекта добавляются нажатием кнопки Prepend drop-down option или Append drop-down option опять же это всё для удобства, и если надо то опции селекта перетаскиваются мышью, и при надобности удаляются кнопкой с крестом справа.
Получилось что то вроде такого: ВНИМАНИЕ: после сохранения этого нового селекта, рядом появятся новые текстинпуты с ключами для каждой опции селекта - так вот они должны быть латиницей, и поиск не получиться!!
Drop-down first option title - устанавливаем для селекта какое нибудь слово или фразу, в данном случае например "выберите страну".
Есть возможность cпрятать заголовок (title) селекта если он вдруг не нужен на фронте, для этого нужно воспользоваться опцией Hide item name
Отношения (relations) между элементами фильтра и фильтрами в поисковом запросе
при фильтрации данных работают ТОЛЬКО в режиме AND, т.е. ...WHERE
filter1=aaaa AND filter2=bbbb AND (filter_item1=222 AND filter_item2 =
333) ....
Всё! Жмём сохранить. Теперь пройдёмся по моментам которые могут пригодиться. Ну например нет желания отображать заголовок всего фильтра, нет проблем, ставим знак тильда '~' перед ним:
Затем, сам Item meta key некрасивый, например такой medafi_5393540d4024e, а это ключ мета поля, чтобы окрасивить его достаточно переименовать его на свой лад по смыслу, например вводим для цены medafi_price и жмём change meta key. Аяксом выдаст что данные сохранились. Причем заметьте - ключ должен начинаться с префикса medafi_ это важно! Переименование можно сделать когда угодно, даже когда уже завязаны посты на фильтры и данные проставлены, не имеет значения, всё учтено. Но всё же лучше сделать на этапе создания фильтра. Делать переименование можно только для фильтров которые добавлены и нажата кнопка Обновить для всего фильтра хотя бы 1 раз после создания html-элемента ключь которого хотим переименовать!
Затем очень важный момент, который почти всегда в woocommerce касается такого понятия как Цена. Плагин устанавливается не всегда на новый сайт, бывает что уже продукты или что то там уже существуют, и у них уже есть свой meta key который относиться к цене. Например в том же вукомерце это _price. Так вот чтобы уже работать с существующими метаключами на сайте, в плагине создан механизм reflections - отражения, по сути оно так и получается - отражать значение другого ключа. Для того чтобы применить это отражение надо в блоке Reflect value from meta key html элемента фильтра нажать чекбокс и написать отражаемый мета ключ в textinput рядом, например _price и затем жмём Обновить:
Для чекбоксов отражать можно мета ключи у которых значение только 1 или 0
Для селектов отражать можно значение состоящее из слов, причем в опшены селекта надо накидать эти же ключи что и в отражаемом ключе. Вообще это редкая ситуация, но возможная (например с работой с ACF плагином).
Есть есчо такой html элемент в фильтре - taxonomy, так вот он добавляется в фильтры как метка и это в данном случае означает всего лишь место где появятся таксономии выбранные в виджете или шорткоде (будут рассмотрено далее) и ничего больше. Просто если вы добавите его, то это значит - здесь будут таксономии если в виджете или шорткоде решите их использовать, и всё, больше думать над этим не надо. Да и запомните этот пункт - чтобы отобразить таксономии в фильтре надо сделать то что я только что описал и не писать в суппорт что таксономии не появляются в фильтре =) Просто киньте их куда то в фильтре отдельной секцией!
Рассмотрим последний момент, настройки в фильтре в сайдбаре:
Sequence - последовательность, очерёдность появления текущего фильтра в блоке фильтров выбранной категории-фильтров. То есть это всего лишь порядок фильтров какой первый, какой второй. Это дело можно есчо проставить здесь:
On front widget - означает высоту в пикселях после которой появляется скроллинг:
On backend - сделан для удобства назначения величин в бэкенде поста для данного фильтра (см. далее), например когда 30 чекбоксов в одной секции - они сделают хорошую высоту в бэкенде поста который хотм включить в поиск, и без установки высоты в бэкенде работать будет неудобно.

Назначение значений постам

Всё! У нас есть фильтры. Но чтобы фильтровать типы постов нужно для каждого поста проставить значения по которым они будут фильтроваться. У нас пока что есть логическая структура по которой будет фильтрование, но нет самих данных для фильтрования.
Как я раньше и говорил разницы нету, есть вукомерц или нету, плагин изначально делался не для вукомерц, а для любых post-типов, вукомерц это маркетинговый ход для плагина, так сказать обозначение что работает тоже. Так что product - это всего лишь кастомный тип поста для плагина, и всё.
Идём в любой пост который собираемся сделать searchable (конечно же в настройках плагина мы чекнули его!!) , находим этот метабокс и в селекте выбираем нужную нам категорию фильтра и аяксом нам прилетает форма в которой мы выбираем для текущего поста/продукта нужные параметры и жмём Сохранить, после сохранения имеем следующее
Таким образом метим все посты которые хотим фильтровать
Теперь моменты. Представим ситуацию что у нас 500 товаров, и мы хотим их фильтровать только по таксономиям и цене которую мы отрефлектили в фильтре. То есть все данные уже заряжены, нам надо только всего лишь 1 мелочь - ручками пройтись по этим 500 товарам, дергать селект фильтр-категории и выставлять категорию фильтра. Хмм... да, думаю было бы не очень интересно если так и надо было бы делать, поэтому есть очень быстрый приёмчик. Идём на страницу категорий фильтров и нажимаем на нашу категорию, смотрим её ID в адресной строке браузера и запоминаем, в данном случае это 74
Далее идём в настройки плагина и крутим в самый низ сюда и проставляем значения как на скрине. Пост тип конечно какой нам надо, в данном примере это product. И жмём Assign. После перезагрузки страницы все 500 наших продуктов прошились нужной нам категорией фильтров
Этим приёмом также можно воспользоваться если конечно лень дёргать селект в каждом посте, конечно же более удобно зайти и быстро проставить значения не совершая ненужных движений.
Всё теперь у нас есть фильтры и нужные нам посты отмечены нужными нам данными. Следующий шаг это работа с виджетами.

Работа с виджетами

Есть 2-а рабочих виджета: MDTF и MDTF Taxonomies only. Первый нужен когда мы собираемся фильтровать по таксономиям и метаданным одновременно, то есть так как мы и приготовили данные. Вторым можно вообще воспользоваться сразу после установки, кинули в сайдбар выбрали пост тип и всё, фильтруем по таксномия только. Поэтому будем рассматривать 1-й виджет.
Кидаем виджет в сайдбар, пишем название, выбираем категорию фильтра и пост тип который будем фильтровать . Обращаем внимание на 2 чекбокса на скрине: Hide meta values filter options - чекаем если будем фильтровать только по таксономиям - мета данные не будут показываться на фронте, Hide taxonomies values filter options - чекаем если будем фильтровать только по метаданным, таксономии не будут показываться на фронте - эти настройки созданы для гибкости. Кстати если только поставить плагин, и кинуть этот виджет - то чтобы фильтровать без ошибок посты по таксономиям только надо обязательно чекнуть Hide meta values filter options.
Сразу желательно для первого раза нажать кнопку сохранения виджета.
В нашем случае всё надо, поэтому не трогаем эти чекбоксы.
Results output page link - если не ставить то возьмётся из настроек плагина. Это поле надо для гибкости, потому что иногда один проект может иметь 10 фильтров, и возможно надо будет выводить на разные страницы потому что на это есть причины.
Results output template - кроме слова search можно вообще написать свой темплейт если знаете html и выводить результаты согласно своей фантазии. Для этого Results output page link надо поставить http://my_site.com/metadata-filter-results-page (эта страница создаётся после активации плагина ), а Results output template - archive или создать новый файл в текущей wp теме например, search_output.php (код конечно тоже придётся писать свой) и прописать search_output в этой опции, но конечно же надо надо добавить туда СВОЙ скрипт вывода постов. Описывать я это не буду так как это другая тема, и если вы этого не знаете, то пишите archive или вообще ничего не пишите, пусть тянуться настройки с настроек самого плагина. Ну а если сильно хочется именно своё - это кастом, можете на фриланс отдать, инструкции здесь.
Далее идут настройки виджета которые говорят сами за себя и о них можно почитать здесь https://wp-filter.com/documentation/
Остановлюсь только на таксономиях. Помните я описал при сборке фильтра элемент taxonomy, так вот таксономии которые должны выводиться выбираются здесь в виджеие, просто чекбоксами выбираете те что надо, и мышкой выставляете последовательность
Рассмотрим опции таксономии в составе виджета:
В этих опциях можно выбрать как будет выводиться таксономия: чекбокс,селект или эмуляция мульти-селекта, выбрать title, очень полезная вещь, например вместо названия таксономии "Locations" выводить "Мои города", поставить размер селекта и указать какие тёрмы этой таксономии не отображать (всё зависит что вы хотите сделать)
Скажу больше, представьте что вам надо "Locations" выводить иерархично как: Countries, Regions, Cities - то есть родительская и каждая дочерняя будут иметь свой тайтл. Всё просто - впишите в поле Custom name/title for taxonomies: Countries^Regions^Cities и в "Show all child terms at once below" ставите "Yes". Такая же логика вывода иерахичных данных селектом для других случаев.
Если выбрать отображать таксономию чекбоксами то появиться опция Block max height - если очень много позиций, то представьте себе длину этого блока, например 300 городов, так вот в этом случае ставьте высоту блока в пикселях какую вам хочется, появиться красивый скроллбар которым можно пользоваться для просмотра тёрмов этой таксономии
Отдельно рассмотрим элемент виджета
Выберите сортировочную панель созданную в дополнительном конструкторе для создания сортировочных панелей тут wp-admin/edit.php?post_type=mdf_woo_sort. Также почитайте о шорткоде [mdf_sort_panel]
Всё! Теперь всё готово для фильтрации ваших постов.
Замечания. Бывают темы вордпресса и кривые плагины которые ломают поисковый запрос, просто перекрывают его. Для этого создан шорткод [mdf_force_searching] который в случае если вы фильтруете, а вам пишется на результирующей странице что ничего не найдено, а должно, кидается в файл header.php в самый низ файла: Не панацея но может помочь.

Работа с шорткодами

В плагине есть 2 шорткода для добавления поисковых форм в контент или любой php файл темы - форма и кнопка . И все они создаются в одном месте:
Принцип работы здесь такой же как и виджетах, выбираете Select filter category, появяться элементы аяксом которые можно переставлять аяксом как вам угодно, и даже скрывать за ненадобностью если в этом есть ваша логика:
Ниже расположены опции по логике такие же как и в описании виджета
Есть одна особенность у шоркодов - скины, то есть можно покрасить выводимый шорткод как вам хочется выбрав всего лишь скин
Но вопрос - откуда они возьмутся кроме стандартных. Тут вам помогут знания CSS или работа фрилансера по css, но могу описать технологию производства
Для того чтобы сделать свой скин вам надо пойти сюда
В папке skins уже лежат 2 стандартных скина, так как для вывода шорткода надо использовать хоть какой то. Копипастите в эту же папку скин default и переименовываете его например в dark, тоесть по смыслу, главное чтобы название папки было без пробелов и малыми буквами
Заходите в ваш dark скин и открываете styles.css . В нём все классы skin_default меняете на skin_dark. Сохраняете, идёте в шорткод и выбираете этот скин, жмёте сохранить, вставляете где то в контент этот шорткод и обновляете ту страницу.
Теперь играйтесь с css как вам угодно в вашем файле стиля шорткода dark. Делаете его плоским, черным, и каким хотите, и всё в таком духе. Вот ссылка на англоязычную статью.
Шорткоды очень удобны, их можно вставлять куда угодно, и не думать о сайдбарах. Вот пример шорткода со стандартным скином вставленным просто в файл header.php:
А вот форма созданная шоркодом-кнопкой после нажатия на неё: - всплывает попап с фильтром который вы и вставили. Для таких шорткодов используйте скин popup
Кнопочный шорткод хорош для того чтобы покупатель всегда что то искал и не терялся в дебрях сайта (в контенте single page), то есть в конце концов он может что то и найдёт и закажет это у вас...
Одно замечание по шорткодам. Если вы добавите дополнительный элемент в фильтр который задействован в шорткоде, то этот элемент не появиться в форме шорткода, так как у него своя память (кэш) и он ею пользуется. Для того чтобы этот элемент появился, надо в шоркоде сделать реселект фильтр-категории фильтра и нажать Сохранить.
На этом вроде всё ...

Работа с маркетинговыми ссылками

В плагине встроена такая интересная вещь как константные ссылки. Для чего они вообще надо. Представьте что у вас магазин одежды, и вы хотите раскидать партнёрам ссылки на мужские товары из германии. То есть чтобы они у себя разместили ссылку, или раскрутить в гугле это дело. Но, посмотрите на поисковую ссылку: не очень информативно!
А теперь взгляните на этуизящную SEO-ссылку - http://woocommerce.wp-filter.com/best-soda-twisted-pullovers - нравиться? Так вот эти обе ссылки покажут одинаковые результаты, но выглядят по разному
Вот место где вы можете конструировать такие ссылки:
Всё просто, вы на фронте делаете выбор постов какой вам надо с помощью поисковой формы, копируйте с браузерной строки результирующую ссылку, идёте в константные ссылки и создаёте новую, кидаете большую ссылку в textarea и получаете что то типа http://woocommerce.wp-filter.com/self-search-6-2/?slg=product&mdf_cat=56&page_mdf=880. Затем ставите этот плагин и там добавляете эту полученную ссылку и пишете для неё новую SEO-ссылку по своему вкусу. Всё! Теперь можете с этой ссылкой делать что задумали, посылать партнёрам, рекламировать, размещать на сайтах.

Послесловие

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