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. Cependant, que se passe-t-il si vos adhésions sont suffisamment différentes pour que la mise à niveau ou la rétrogradation n'ait pas de sens, ou si vous ne souhaitez tout simplement pas utiliser cette fonction pour une raison ou pour 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 shortcodes sont générés. Pour ce tutoriel, vous aurez besoin de celui du bas, qui contient la partie ID. Vous devrez donc préparer les shortcodes de toutes les adhésions que vous souhaitez utiliser.

Vous pourriez insérer ces shortcodes directement dans une page ou un message, et cela fonctionnerait, mais vous verriez que tous les champs d'inscription seraient instantanément visibles, et si vous voulez ajouter trois adhésions ou plus, ce ne serait pas joli car la page serait assez longue avec beaucoup de champs affichés en même temps.

Afin de le rendre beaucoup plus attrayant, vous devrez installer et activer le programme Onglet - Accordéon plugin. Une fois l'activation terminée, vous obtiendrez une nouvelle section dans votre tableau de bord WordPress :

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

Les versions gratuites proposent huit onglets et huit accordéons. Pour en savoir plus, vous pouvez passer à la version Pro du plugin.

Commencez par cliquer sur le bouton Choisir un thème sur l'un des onglets ou accordéons que vous souhaitez créer. Ce bouton se trouve sur le côté gauche de l'écran :

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

Trois onglets sont déjà préparés (mais vous pouvez en ajouter d'autres ou supprimer le troisième), ce qui est parfait pour notre exemple, puisque nous ajouterons l'adhésion de bronze, l'adhésion d'argent et l'adhésion d'or. Cliquez ensuite sur le symbole du stylo pour modifier chaque onglet individuellement. Vous vous trouvez alors dans l'onglet Menu. Saisissez le nom de l'adhésion, sélectionnez l'icône de l'onglet et 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 bouton Contenu et collez le shortcode de l'adhésion dans le champ Texte vue.

N'oubliez pas de cliquer sur le bouton "Mettre à jour 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. Lorsque vous avez terminé, cliquez sur le bouton "Back to WP".

Il vous sera demandé si vous souhaitez quitter la page. Confirmez en cliquant sur le bouton "Quitter la page".

Vous verrez un onglet complété, qui générera également un shortcode que vous devrez copier et coller dans une page ou un message de votre choix.

En cliquant sur l'icône du stylo, vous pourrez retourner à l'édition, faire une copie de l'onglet en cliquant sur l'icône Copier, ou le mettre à la poubelle en cliquant sur l'icône Corbeille. L'icône Aperçu (œil) ne vous sera pas d'une grande utilité car, lors de l'aperçu, elle n'affichera que les shortcodes d'adhésion que vous avez ajoutés précédemment.

Cependant, après avoir publié cet article ou cette page, avec le shortcode, vous verrez quelque chose comme 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 rencontrez des erreurs dues au fait que les valeurs ne sont pas remplies, vous devez activer l'option Styles CSS globaux dans l'option MemberPress -> Paramètres -> Général tabulation.

Et voilà, vous avez créé des adhésions tabulées ou des adhésions en accordéon, selon l'option que vous préférez, qui sont beaucoup plus esthétiques.