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 :
S'abonner à mon canal :
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 :
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
Salut Oscar,
Merci beaucoup pour ce super tuto. Cela m'aide beaucoup de donner une apparence professionnelle à mon site Web.
J'en profite pour vous poser une autre question. Comment ajouter du code à une entrée pour qu'elle ressemble à ceci : http://prntscr.com/fp3zb5
Ça a l'air très bien et visiblement
merci
Merci beaucoup David 😉
J'utilise le plugin gratuit SyntaxHighlighter Evolved
https://es.wordpress.org/plugins/syntaxhighlighter/
salutations
Merci beaucoup !!
Saludos!
bonjour!
Merci beaucoup pour toutes les informations, ai-je le même cas pour une entrée ?
C'est à dire que j'ai les deux plugins et maintenant je veux faire du CSS mais je ne trouve pas l'ID pour placer le code
Salut Jean,
Dans chaque modèle, c'est différent. Jetez un œil au code avec l’inspecteur d’éléments et vous pourrez voir les classes et les identifiants.
Salutations 😉
Oscar
Merci beaucoup pour l'exemple et la démonstration. Cela m'a beaucoup aidé, mais j'ai un problème, l'image sélectionnée qui apparaît apparaît parfois floue. Je le remarque parce que l'image contient du texte.
Merci pour votre aide, excellent blog, ça m'aide beaucoup.
Merci beaucoup Alberto 😉
Il me vient à l'esprit que l'image est en train d'être redimensionnée et pixellisée, elle devrait être vue in situ sur votre site internet.
Si vous partagez l'URL avec nous, nous y jetterons un œil