Создание фильтров записей с вкладками в WordPress (видео)

Привет ребята,

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

Вот видеоурок:

Конечным результатом будет что-то вроде следующего экрана:

Для этого я использовал 3 элемента: 2 плагина и пользовательский css.

Плагины, которые нам понадобятся:

• Адаптивные вкладки табби
• Список сообщений категории

Плагин Tabby Responsive Tabs позволит нам легко добавлять вкладки на наш сайт. Нам нужно будет только добавить несколько шорткодов, чтобы добавить вкладки.

Плагин сообщений категории «Список» позволит нам добавлять содержимое определенной категории на каждую из вкладок.

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

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

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

body.page-id-533 {
    background-color: #f7f7f7;
}

.tabcontent ul.lcp_catlist li{
float: left;
width:32%;
margin:5px;
list-style-type: none;
font-size:15px;
background:white;
padding:10px;
}

.responsive-tabs .responsive-tabs__panel {
border:0px !important;
padding: 0px !important;
background: #f7f7f7 !important;
}

.responsive-tabs .responsive-tabs__list__item {
color: grey !important;
border: 1px solid #cacaca !important;
font-size:14px!important;
padding:10px 30px !important;
margin-bottom:20px !important;
}

.responsive-tabs .responsive-tabs__list__item--active{
color: #f4633e !important;
border: 1px solid #f4633e !important;
}

.responsive-tabs ul.responsive-tabs__list{
margin:0px !important;
}

.entry-content ol, .entry-content ul {
  margin-left: 0px;
}

.button{
border-radius: 47px;
background: #f4633e;
font-size: 12px;
text-decoration:none;
}

.page-id-533  h4{
color:#f4633e;
font-weight: normal;
}

Теперь нам просто нужно создать страницу и добавить внутрь шорткоды, которые мы собираемся использовать для отображения контента:

В моем случае было следующее:

[tabby title="TODO"]

[catlist id=2 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]


[tabby title="DOMINIO"]

[catlist id=32 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]

[tabby title="HOSTING"]

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. 

[tabbyending]

В видео я объясняю, что означает каждый параметр шорткода, но вкратце я объясняю это ниже:

Из короткого кода:

[catlist id=2 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]

• ID Это идентификатор категории, которую мы хотим перечислить.
• отрывок = да Я указываю, что хочу, чтобы сводка содержимого отображалась
• excerpt_strip=нет Я указываю, что не хочу, чтобы удалялась html-разметка
• миниатюра=да изображение появляется
• no_post_titles=да Название не отображается

Надеюсь вам будет полезно 😉
привет
Оскар