Cómo mostrar sus afiliaciones en pestañas o acordeón

MemberPress ya tiene una opción para mostrar todas las afiliaciones en una página si se opta por Grupos MemberPress. Sin embargo, ¿qué pasa si tus suscripciones son tan diferentes que no tiene sentido subir o bajar de categoría, o si simplemente no quieres utilizar esa función por una u otra razón?

Probablemente ya te habrás dado cuenta de que cada afiliación crea un conjunto de códigos cortos a los que puedes acceder haciendo clic en el botón Códigos cortos de afiliación enlace en el Inscripción ficha de las opciones de afiliación caja.

Verás que se generan dos códigos cortos. Para este tutorial, necesitarás el de abajo, que contiene el ID; por lo tanto, tendrás que preparar los códigos cortos de todas las suscripciones que quieras utilizar.

Ahora bien, podrías insertar esos códigos cortos directamente en una página o en una entrada, y eso funcionaría, pero verías que todos los campos de registro quedarían visibles al instante, y si tienes tres o más suscripciones que quieras añadir, el resultado no quedaría muy bien, ya que la página sería bastante larga y se mostrarían muchos campos a la vez.

Para que quede mucho más bonito, tendrás que instalar y activar el Pestaña - Acordeón plugin. Una vez completada la activación, aparecerá una nueva sección en tu panel de control de WordPress:

Una vez hecho esto, ya estás listo para continuar. Es posible que, al principio, la interfaz de usuario te resulte un poco poco intuitiva, pero si sigues estos pasos, estarás listo para empezar en un santiamén. Puedes empezar haciendo clic en el Crear ahora botón.

En las versiones gratuitas verás ocho pestañas y ocho acordeones disponibles; si necesitas más, puedes pasar a la versión Pro del complemento.

Empieza haciendo clic en el botón «Elegir tema» de una de las pestañas o secciones desplegables que quieras crear. Verás esto en la parte izquierda de la pantalla:

Haga clic en el símbolo "más" de la Campos de las pestañas fila, y verás esto:

Tendrás tres pestañas ya preparadas (aunque puedes añadir más o eliminar la tercera), lo cual es perfecto para nuestro ejemplo, ya que vamos a añadir nuestras suscripciones Bronce, Plata y Oro. A continuación, haz clic en el símbolo del lápiz para editar cada pestaña por separado. Te encontrarás en la pestaña «Menú». Escribe el nombre de la suscripción, selecciona el icono de la pestaña y el color del texto y del fondo si lo deseas (las otras dos opciones son exclusivas de la versión Pro), haz clic en el Contenido pestaña y pega el código abreviado de la asociación en el Texto vista.

No te olvides de hacer clic en el botón “Actualizar contenido”. Probablemente tendrás que desplazarte hacia abajo para verlo.

Repita el procedimiento para las afiliaciones Plata y Oro.

Esas otras opciones como Opciones generales en el Fichas y otras opciones en Menú y Contenido le permitirán ajustar esas pestañas visualmente, de la forma que desee. Te recomendamos que juegues un rato con ellas para ver cómo afectan a la presentación visual.

No olvides hacer clic en el botón “Guardar/Actualizar” después de cada cambio. Cuando hayas terminado, haz clic en el botón «Volver a WP».

Se te preguntará si deseas salir de la página. Confirma haciendo clic en el botón “Salir de la página”.

Verás una pestaña con el proceso completado, que además generará un código corto que deberás copiar y pegar en la página o entrada que elijas.

Al hacer clic en el icono del bolígrafo, podrás volver a editar, hacer una copia de la pestaña haciendo clic en el icono ’Copiar» o eliminarla haciendo clic en el icono de la papelera. El icono de vista previa (el ojo) no te servirá de mucho, ya que, al previsualizar, solo mostrará los códigos cortos de las suscripciones que hayas añadido previamente.

Sin embargo, una vez que publiques esa entrada o página, con el código corto incluido, verás algo como esto:

Los visitantes y miembros de tu web podrán moverse entre las tres (o treinta y tres) de tus afiliaciones 🙂 simplemente haciendo clic en una pestaña.

Si te aparecen errores indicando que faltan valores, tendrás que activar el Estilos CSS globales opción en MemberPress -> Configuración -> General ficha.

Y ya está, has creado una lista de miembros con formato de tabla mucho más atractiva, o una lista de miembros en formato acordeón, según la opción que prefieras.