Utwórz filtry postów na kartach w WordPress (wideo)

Cześć chłopaki,

Student z obszaru premium zapytał mnie, jak moglibyśmy stworzyć stronę zasobów, na której moglibyśmy filtrować według typu zasobu.

Oto samouczek wideo:

Efektem końcowym będzie coś w rodzaju następującego ekranu:

W tym celu wykorzystałem 3 elementy: 2 wtyczki i niestandardowy css.

Wtyczki, których będziemy potrzebować to:

• Tabby Responsywne Tabs
• Lista postów kategorii

Wtyczka Tabby Responsive Tabs pozwoli nam w łatwy sposób dodawać zakładki do naszej strony. Będziemy musieli tylko dodać kilka skrótów, aby dodać zakładki.

Wtyczka Lista kategorii postów pozwoli nam dodać zawartość określonej kategorii do każdej z zakładek.

Innymi słowy, po kliknięciu każdej zakładki pojawią się posty z określonej kategorii.

Aby nie miał typowego kształtu zakładki, a wynikiem jest powyższy obrazek, zamierzamy zmodyfikować arkusze stylów.

Możesz ulepszyć CSS, którego użyłem, co następuje. Musisz go dodać w Wygląd -> Dostosuj -> Dodatkowe 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;
}

Teraz musimy tylko utworzyć stronę i dodać do niej skróty, których użyjemy, aby wyświetlić treść:

W moim przypadku było to:

[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]

W filmie wyjaśniam, co oznacza każdy parametr shortcode, ale w skrócie wyjaśniam to poniżej:

Z krótkiego kodu:

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

• ID Jest to identyfikator kategorii, którą chcemy wyświetlić
• fragment=tak Określam, że chcę, aby pojawiło się podsumowanie treści
• fragment_strip=nie Określam, że nie chcę, aby usuwał znaczniki HTML
• miniatura=tak spraw, aby obraz się pojawił
• no_post_titles=tak Tytuł nie pojawia się

Mam nadzieję, że ci się przyda 😉
pozdrowienia
Oscar