Comment afficher vos adhésions dans des onglets ou des accordéons ?

MemberPress dispose déjà d'une option permettant d'afficher toutes les adhésions sur une seule page si vous optez pour Groupes MemberPress. Mais que se passe-t-il si vos abonnements sont suffisamment différents pour qu'un passage à un niveau supérieur ou inférieur n'ait pas de sens, ou si vous ne souhaitez tout simplement pas utiliser cette fonctionnalité pour une raison ou une autre ?

Vous avez probablement déjà remarqué que chaque adhésion crée un ensemble de shortcodes auxquels vous pouvez accéder en cliquant sur le bouton Shortcodes d'adhésion dans le lien Inscription onglet de les options d'adhésion boîte.

Vous remarquerez que deux codes courts sont générés. Pour ce tutoriel, vous aurez besoin de celui du bas, qui contient l'identifiant ; vous devrez donc préparer les codes courts de tous les abonnements que vous souhaitez utiliser.

Vous pourriez bien sûr insérer ces codes courts directement dans une page ou un article, et cela fonctionnerait, mais vous constateriez que tous les champs d'inscription seraient immédiatement visibles. Or, si vous souhaitez ajouter trois abonnements ou plus, le résultat ne serait pas très esthétique, car la page serait assez longue et afficherait de nombreux champs à la fois.

Pour le rendre beaucoup plus joli, vous devrez installer et activer le Onglet - Accordéon plugin. Une fois l'activation terminée, une nouvelle section apparaîtra dans votre tableau de bord WordPress :

Vous êtes alors prêt à continuer. L'interface utilisateur peut sembler un peu contre-intuitive au premier abord, mais si vous suivez ces étapes, vous serez opérationnel en un rien de temps. Vous pouvez commencer par cliquer sur le Créer maintenant bouton.

Dans les versions gratuites, vous disposerez de huit onglets et de huit accordéons ; pour en avoir davantage, vous pouvez passer à la version Pro du plugin.

Commencez par cliquer sur le bouton « Choisir un thème » situé sur l'un des onglets ou des accordéons que vous souhaitez créer. Vous verrez alors s'afficher ceci sur le côté gauche de l'écran :

Cliquez sur le symbole "plus" dans la fenêtre Onglets Champs ligne, et vous verrez ceci :

Vous disposerez de trois onglets prédéfinis (mais vous pouvez en ajouter d’autres ou supprimer le troisième), ce qui est parfait pour notre exemple puisque nous allons ajouter nos abonnements Bronze, Argent et Or. Cliquez ensuite sur le symbole en forme de stylo pour modifier chaque onglet individuellement. Vous vous trouverez alors sur l'onglet « Menu ». Saisissez le nom de l'abonnement, sélectionnez une icône pour l'onglet ainsi que la couleur du texte et de l'arrière-plan si vous le souhaitez (les deux autres options sont réservées à la version Pro), puis cliquez sur le Contenu onglet, puis collez le shortcode de l'association dans le Texte vue.

N'oubliez pas de cliquer sur le bouton “ Actualiser le contenu ”. Vous devrez probablement faire défiler la page vers le bas pour le voir.

Répétez l'opération pour les adhésions Silver et Gold.

Les autres options telles que Options générales dans le Onglets et d'autres options dans l'onglet Menu et Contenu vous permettront d'ajuster ces onglets visuellement, de la manière que vous souhaitez. Nous vous recommandons de passer un peu de temps à jouer avec ces onglets pour voir comment ils affectent l'affichage visuel.

N'oubliez pas de cliquer sur le bouton “ Enregistrer/Mettre à jour ” après chaque modification. Une fois que vous avez terminé, cliquez sur le bouton « Retour à WP ».

On vous demandera si vous souhaitez quitter la page. Confirmez en cliquant sur le bouton “ Quitter la page ”.

Vous verrez alors un onglet « Terminé », qui générera également un shortcode que vous devrez copier-coller dans la page ou l'article de votre choix.

En cliquant sur l'icône en forme de stylo, vous pourrez revenir à l'édition, créer une copie de l'onglet en cliquant sur l'icône ’ Copier », ou le supprimer en cliquant sur l'icône « Corbeille ». L'icône « Aperçu » (œil) ne vous sera pas d'une grande utilité puisque, lors de l'aperçu, elle n'affichera que les codes courts des abonnements que vous avez ajoutés précédemment.

Cependant, une fois que vous aurez publié cet article ou cette page contenant le shortcode, vous verrez quelque chose qui ressemblera à ceci :

Les visiteurs et les membres de vos sites web pourront se déplacer entre les trois (ou trente-trois) de vos adhésions 🙂 en cliquant simplement sur un onglet.

Si vous obtenez des messages d'erreur indiquant que certaines valeurs n'ont pas été renseignées, vous devrez activer la Styles CSS globaux dans l'option MemberPress -> Paramètres -> Général tabulation.

Et voilà, vous avez créé des listes d'abonnements bien plus esthétiques, sous forme de tableau ou d'accordéon, selon l'option que vous préférez.