Tout ce que vous pouvez faire pour rationaliser votre site est une bonne chose. Après tout, moins les visiteurs du site de travail ont à faire pour obtenir les informations qu’ils veulent, 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 tout le long et ceux avec une tonne de pages sur lesquelles, de la même manière, presque personne ne cliquera.
Alors, quelle est l’alternative à une page super longue ou trop de pages ? Pourquoi, les 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 du contenu à onglets à votre site WordPress rapidement et facilement.
Publier les onglets de l’interface utilisateur
Les onglets de l’interface utilisateur de publication facilitent l’ajout d’onglets jQuery dans votre contenu, qu’il s’agisse de publications, de pages ou d’autres types de publication. Tout ce que vous avez à faire est d’insérer des shortcodes dans l’éditeur et vous activerez les onglets.
Le plugin comprend 24 thèmes d’interface utilisateur différents pour faciliter la correspondance avec votre thème existant. Ou, si vous avez les compétences, créez une feuille de style personnalisée pour améliorer davantage l’apparence.
Une fois le plugin installé, il vous suffit 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
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 le bootstrap 3.0, mais il ajoute également des boutons TinyMCE à l’éditeur visuel, ce qui facilite l’insertion d’onglets réactifs en un 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, notamment 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 vrai favori en raison de sa facilité de configuration et de mise en œuvre immédiate.
Onglets Tabby Responsive
Si la réactivité est l’une de vos principales préoccupations, Onglets Tabby Responsive 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 shortcodes. Il prend en charge plus d’un ensemble d’onglets sur une simple page ou publication et utilise jQuery pour créer les onglets et l’effet accordéon sur des écrans plus petits. Vous pouvez également accéder aux onglets avec votre clavier.
Pour insérer des onglets, il vous 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 abrégé pour fermer le groupe d’onglets.
Maintenant, si vous souhaitez apporter des modifications de style à ces onglets, vous devrez creuser un peu plus dans 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 de tabulation ou au style d’accordéon comme bon vous semble.
Widgets dans les onglets
Parfois, vos besoins au sein des onglets individuels sont un peu plus complexes. Pour ces cas, il y a le Widgets dans les onglets brancher. Il vous permet de mettre tous les widgets que vous voulez, 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 davantage l’affichage des onglets. Vous pouvez également créer un groupe d’onglets dédiés aux widgets de réseaux sociaux intégrés, tels qu’une Like Box Facebook, un flux Twitter, Google+, un tableau d’affichage Pinterest, etc.
Une chose que j’aime vraiment à propos de Widgets in Tabs est qu’il n’inclut pas ses propres styles, ce qui lui permet d’être stylisé par votre thème. Les onglets se fondent parfaitement dans votre site et semblent appartenir.
Les titres des onglets sont également déroulants, 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 d’attente entre le passage d’un onglet à l’autre.
Comme pour tous les autres plugins d’onglet répertoriés ici, il est facilement insérable grâce au short code [wit].
WP UI – Onglets, accordéons, curseurs
Le dernier plugin dont je vais parler ici est WP UI – Tabs, Accordions, Sliders. Ce plugin permet non seulement d’intégrer facilement des onglets dans des articles et des 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 messages 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 n’afficher qu’un seul message dans ce format spécialisé.
Codes courts simples
Bien sûr, si vous n’avez besoin que d’onglets de base, assurez-vous de considérer 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. Ils valent bien le détour, à mon avis. 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’intégrer des onglets sur votre site ? J’aimerais entendre votre expérience avec cette astuce d’organisation astucieuse dans les commentaires !