Créer des filtres de publication à onglets dans WordPress (vidéo)

Salut les gars,

Un étudiant dans la zone premium m'a demandé comment nous pourrions créer une page de ressources où nous pourrions filtrer par type de ressource.

Voici le tutoriel vidéo :

Le résultat final ressemblera à l'écran suivant :

Pour ce faire j'ai utilisé 3 éléments : 2 plugins et un css personnalisé.

Les plugins dont nous aurons besoin sont :

• Tabby Onglets réactifs
• Liste des messages de catégorie

Le plugin Tabby Responsive Tabs nous permettra d'ajouter facilement des onglets à notre site Web. Nous n'aurons qu'à ajouter quelques shortcodes pour ajouter les onglets.

Le plugin List category posts nous permettra d'ajouter le contenu d'une certaine catégorie à chacun des onglets.

En d'autres termes, lorsque vous cliquez sur chaque onglet, les publications d'une catégorie spécifique apparaîtront.

Pour qu'il n'ait pas la forme d'onglet typique et que le résultat soit l'image ci-dessus, nous allons modifier les feuilles de style.

Vous pouvez améliorer le CSS que j'ai utilisé est le suivant. Vous devrez l'ajouter dans Appearance -> Customize -> Additional 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;
}

Il ne nous reste plus qu'à créer une page et à y ajouter les shortcodes que nous allons utiliser pour faire apparaître le contenu :

Dans mon cas c'était le suivant :

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

Dans la vidéo, j'explique ce que signifie chaque paramètre de shortcode, mais en résumé je l'explique ci-dessous :

À partir du shortcode :

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

• ID C'est l'identifiant de la catégorie que nous voulons lister
• extrait=oui Je précise que je souhaite que le résumé du contenu apparaisse
• extrait_strip = non Je précise que je ne souhaite pas qu'il supprime le balisage html
• vignette = oui l'image apparaît
• no_post_titles=oui Le titre n'apparaît pas

J'espère qu'il vous sera utile 😉
salutations
Oscar