Descubre en este tutorial cómo crear un shortcode que permita mostrar una ficha individual de usuarios o suscriptores en WordPress con datos personalizados.
¿Te has enterado? Estoy preparando un directorio de profesionales de WordPress donde los suscriptores de Código Genesis podéis añadir vuestros datos profesionales. 🕺🏻
En un tutorial anterior viste cómo crear un formulario para recoger los datos personalizados que quieras y cómo mostrar un listado de los suscriptores.
Y en este vas a ver cómo mostrar la ficha individual de cada usuario con los campos personalizados que has recogido con el formulario.
Este sería el resultado final:
¿A ti también te interesa? Entonces aquí mismo te dejo el código para que puedas usarlo o crear tu propia variación.
¿Empezamos?
Pasos para crear un listado de suscriptores que muestre los datos personalizados
En este caso, para mantener los tutoriales independientes, vamos a colocar el código en un plugin de funcionalidades y en el style.css del tema.
Pero si lo prefieres, puedes añadir el código de este tutorial al plugin que creaste para recoger los datos de los suscriptores.
1. Crea el shortcode
Añade el siguiente fragmento a tu plugin de funcionalidades:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Con este código consigues crear una ficha usuario/suscriptor y que se muestren los datos recogidos en formulario.
- Nombre
- Compañía
- Posición en la compañía
- Icono página web
- Icono de LinkedIn
- Icono de Twitter
- Icono de Github
- Icono de WordPress
- Bio/Descripción
Esto es solo un ejemplo. Puedes añadir o eliminar los campos que consideres necesarios utilizando la función get_user_meta.
Los iconos que se muestran son de Font Awesome pero si tu tema no los incluye puedes añadirlos o buscar una alternativa como la que sugiero en este tutorial o este otro.
Además, al inicio del bucle añades un condicional con la función rcp_user_has_active_membership y el metadato cg_public_profile para que la ficha solo se muestre de usuarios/profesionales que tienen una suscripción activa en Restrict Content Pro y que han marcado la casilla de que quieren mostrar su información de forma pública.
2. Personaliza el CSS del listado de suscriptores
Ahora solo te falta asignar los estilos para que luzca tal y como deseas.
Para ello, introduce este bloque al final de style.css:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Al crear el shortcode has utilizado las clases professional-wrapper, professional y .user-favorite-plugins, que te permiten maquetar el listado a tu gusto.
Con estas pocas líneas de CSS puedes conseguir que se muestre como en el ejemplo que te mostraba al inicio. Pero, como siempre, te invito a que lo personalices a tu gusto.
3. Añade el shortcode donde quieras mostrar los datos de la ficha de usuario
Por último, crea la página donde quieras mostrar la ficha de usuario/suscriptor y añade el shortcode:
[user_data]
Si quieres mostrar la información en la página de autor crea un fichero author.php en la raíz del child theme de Genesis con el siguiente código:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Con este fragmento de código eliminas el bucle nativo y creas uno personalizado en el que muestras la información de la ficha de suscriptor.
Como puedes observar justo debajo está el shortcode que te permite mostrar los plugins favoritos del usuario tal y como te expliqué en el anterior tutorial.
Por cierto, si eres suscriptor y quieres aparecer en el directorio puedes ir rellenando tu perfil aquí.
Si quieres que la URL sea distinta a /author/ puedes utilizar este tutorial para modificar el slug, por ejemplo en este caso utilizo /profesional/.
Conclusiones
Ahora ya sabes cómo mostrar una ficha de suscriptor de WordPress (y/o Restrict Content Pro) con los datos que recogiste previamente en el formulario personalizado.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
