Tout ce que vous pouvez faire pour rationaliser votre site est une bonne chose. Après tout, moins les visiteurs du chantier ont à faire pour obtenir les informations dont ils ont besoin, mieux c’est. Cependant, cela peut être un défi si votre site, de par sa nature même, doit inclure beaucoup d’informations. Le résultat final de ces sites implique généralement ceux avec de très longues pages sur lesquelles presque personne ne fera défiler complètement et ceux avec une tonne de pages sur lesquelles, de même, presque personne ne cliquera.

Alors, quelle est l’alternative à une page super longue ou à trop de pages? Pourquoi, des onglets bien sûr! Et ne vous inquiétez pas, vous n’avez pas besoin d’être un génie du codage pour obtenir des onglets sur votre site. Il existe de nombreux plugins qui permettent cette fonction. J’ai rassemblé quelques-uns des meilleurs pour vous aider à ajouter rapidement et facilement du contenu à onglets à votre site WordPress.

Onglets de l’interface utilisateur des publications

Les onglets de l’interface utilisateur de publication simplifient l’ajout d’onglets jQuery dans votre contenu, qu’il s’agisse de publications, de pages ou d’autres types de publications. Tout ce que vous avez à faire est d’insérer des codes courts dans l’éditeur et vous allez activer les onglets.

Le plugin comprend 24 thèmes d’interface utilisateur différents pour faciliter la correspondance de votre thème existant. Ou, si vous avez les côtelettes, créez une feuille de style personnalisée pour améliorer encore plus l’apparence.

Une fois le plugin installé, tout ce que vous avez à faire est de cliquer sur le bouton TinyMCE correspondant dans l’éditeur de publication pour insérer le shortcode approprié. Selon la liste officielle du répertoire WordPress pour les onglets Post UI, vous pouvez également insérer des onglets en utilisant directement les codes courts suivants:

[tab name=”Your tab name 1″]Le contenu de votre onglet[/tab]
[tab name=”Your tab name 2″]Le contenu de votre onglet[/tab]
[tab name=”Your tab name 3″]Le contenu de votre onglet[/tab]
[end_tabset]

N’hésitez pas à insérer du HTML dans ces onglets. Cela devrait être géré sans problème et vous finirez par voir votre contenu affiché comme il le serait n’importe où ailleurs sur votre site uniquement, comme vous l’avez peut-être deviné, il est contenu dans un onglet.

Onglets réactifs faciles

Onglets réactifs faciles

Un autre plugin que vous devriez absolument vérifier si vous souhaitez ajouter des onglets à votre site est Onglets réactifs faciles. Non seulement il est compatible avec bootstrap 3.0, mais il ajoute également des boutons TinyMCE à l’éditeur visuel, ce qui facilite l’insertion d’onglets réactifs en un seul clic.

Une fois que vous avez cliqué sur ce bouton, un panneau de paramètres s’ouvre et vous permet de sélectionner la couleur de plusieurs aspects différents des onglets, y compris les en-têtes, les onglets actifs, le survol, l’arrière-plan, etc. Vous pouvez également définir des onglets pour qu’ils apparaissent en haut ou en bas. Ce plugin est un véritable favori en raison de la facilité de configuration et de mise en œuvre immédiate.

Onglets réactifs Tabby

Onglets réactifs Tabby

Si la réactivité est l’une de vos principales préoccupations, Onglets réactifs Tabby est une bonne option pour vous. Tout simplement, ce plugin vous permet d’insérer des onglets réactifs dans les articles et les pages à l’aide de codes courts. Il prend en charge plus d’un ensemble d’onglets sur une simple page ou un article et utilise jQuery pour créer les onglets et l’effet d’accordéon sur des écrans plus petits. Vous pouvez également accéder aux onglets avec votre clavier.

Pour insérer des onglets, il suffit d’insérer deux shortcodes: [tabby] et [tabbyending]. Plus précisément, vous utiliseriez [tabby title=“tabname”] pour définir le nom de l’onglet. Ensuite, vous écrivez le contenu qui doit être inclus dans cet onglet, y compris le code HTML que vous souhaitez. Vous pouvez insérer plus d’onglets si vous le souhaitez. Ensuite, pour terminer cet ensemble d’onglets, utilisez le [tabbyending] code court pour fermer le groupe d’onglets.

Maintenant, si vous souhaitez apporter des modifications de style à ces onglets, vous devrez approfondir un peu plus le code. Selon la page du répertoire WordPress du plugin, vous devrez copier la feuille de style du plugin dans un thème enfant et apporter des modifications au style d’onglet ou au style d’accordéon comme bon vous semble.

Widgets dans les onglets

Parfois, vos besoins dans les onglets individuels sont un peu plus complexes. Pour ces cas, il y a le Widgets dans les onglets brancher. Il vous permet de mettre les widgets de votre choix, le tout dans des onglets pour économiser de l’espace et créer une expérience plus organisée sur votre site Web. Il a une multitude d’utilisations.

Par exemple, vous pouvez choisir d’utiliser des onglets pour afficher les widgets Articles récents et Commentaires récents. Vous pouvez ajouter des catégories pour compléter l’affichage de l’onglet. Ou vous pouvez créer un groupe d’onglets dédiés aux widgets de médias sociaux intégrés comme une Facebook Like Box, un fil Twitter, Google+, un tableau de bord Pinterest, etc.

Une chose que j’aime vraiment à propos des widgets dans les onglets, c’est qu’ils n’incluent pas ses propres styles, ce qui leur permet d’être stylé par votre thème. Les onglets se fondent parfaitement dans votre site et semblent appartenir.

Les titres des onglets peuvent également faire défiler, ce qui est une bonne alternative à l’approche traditionnelle empilée. Il existe également des options d’animation pour les transitions entre les widgets et vous pouvez définir le nombre de secondes qu’il faudra attendre entre le passage d’un onglet à l’autre.

Comme pour tous les autres plugins d’onglets répertoriés ici, il est facilement insérable grâce au code court [wit].

WP UI – Onglets, accordéons, curseurs

WP UI

Le dernier plugin dont je vais parler ici est WP UI – Tabs, Accordions, Sliders. Ce plugin simplifie non seulement l’intégration des onglets dans les articles et les pages, mais permet également l’intégration simple d’autres styles de formatage tels que les accordéons, les curseurs et les boîtes de dialogue. Le plugin est alimenté par jQuery et vous pouvez utiliser plus d’un thème d’interface utilisateur jQuery sur chaque page, si vous le souhaitez.

Il est livré avec une page d’options facile à utiliser qui facilite la configuration et l’utilisation. Il ajoute également des menus et des boîtes de dialogue dédiés pour une navigation plus simple. Comme tous les plugins ci-dessus, celui-ci repose principalement sur des codes courts pour une mise en œuvre rapide. Le shortcode [wp tabs] peut être facilement amélioré avec l’argument style, qui peut être modifié d’environ 24 manières différentes comme «wpui-blue» pour donner aux onglets un aspect plus cohérent avec votre thème.

Le vrai point fort de ce plugin pour moi, cependant, est la possibilité d’afficher des messages et des flux dans des onglets ou des accordéons. Le shortcode est [wptabposts] et il vous permet d’afficher les articles dans une série d’onglets. Ou, si vous souhaitez afficher un flux dans une page ou une publication, utilisez simplement le [wpuifeeds] petit code. Selon la liste des répertoires WordPress pour WP UI, vous pouvez utiliser [wpspoiler post=“3028”] pour afficher un seul article dans ce format spécialisé.

Codes courts Symple

Onglets minimaux Symple Shortcodes

Bien sûr, si vous avez juste besoin d’onglets de base, assurez-vous de prendre en compte le plugin WordPress Symple Shortcodes fabriqué à la main ici chez Themelocal. Le plugin comprend de jolis onglets minimaux que vous pouvez utiliser sur n’importe quelle page de votre site, ainsi que de nombreuses autres fonctionnalités d’organisation de contenu. Ajoutez des colonnes, des bascules, des accordéons et de nombreux autres accents (boutons, icônes sociales, etc.).


Bien que cela puisse sembler compliqué au début, le processus d’ajout d’onglets à votre site est en fait assez simple. Les plugins ci-dessus en font un jeu d’enfant et le résultat final est à la fois attrayant et fonctionnel. À mon avis, ils valent le détour. Les visiteurs de votre site ont accès à autant d’informations que vous en avez besoin sans encombrer la conception globale. C’est une solution rapide pour les sites avec beaucoup de ressources et de contenu.

Utilisez-vous des onglets sur votre site? Qu’en est-il de l’un de ces plugins, en particulier? Si oui, ont-ils travaillé pour vous? Avez-vous trouvé un autre moyen d’incorporer des onglets sur votre site? J’aimerais entendre votre expérience avec cette astuce d’organisation astucieuse dans les commentaires!

Share: