Perfiles de usuario personalizados de WordPress y WooCommerce tal como lo desea

Publicado: 2022-10-26

Hay varias formas de crear y personalizar perfiles de usuario de WordPress en ProfileGrid, desde usar temas de perfil de usuario prediseñados hasta crear su perfil de usuario a su manera. En esta guía, demostraremos cómo puede crear fácilmente sus perfiles de usuario en WordPress y WooCommerce a su manera, utilizando códigos abreviados. Con este método, seguramente puede llevar su experiencia de usuario a un nivel diferente.

Nuestro enfoque: en lugar de crear un generador de perfiles personalizado, decidimos utilizar las funciones de arrastrar y soltar y bloquear de los creadores de páginas populares como Elementor, Guttenberg, King Composer, etc. Luego, creamos códigos cortos para cada elemento de un perfil de usuario. Estos elementos se muestran a continuación en el artículo. Ahora puede usar estos códigos abreviados, agregarlos a bloques de creadores de páginas y diseñar su perfil de usuario a su manera.

¿Qué son los perfiles de usuario en ProfileGrid?

Los perfiles de usuario de ProfileGrid pueden ser públicos o privados. Puede mostrar perfiles públicos a todos o restringir selectivamente el contenido de los perfiles de usuario según sus requisitos. Hay muchas otras características de visibilidad de elementos que puede ver en nuestra página de características principales.

Cómo crear perfiles de usuario con Elementor y Gutenberg Block Editor

Con los códigos abreviados de ProfileGrid, es más fácil crear perfiles de usuario en Elementor y Gutenberg. Los códigos abreviados son dinámicos, lo que significa que funcionarían con cualquier creador de páginas y editores de Gutenberg. ProfileGrid ofrece muchos bloques de arrastrar y soltar en los creadores de páginas y Gutenberg.

Así es como puedes crear perfiles de usuario en Gutenberg:

  1. Ve al panel de control de tu sitio web.

2. Haga clic en Páginas y Agregar nuevo.

3. Copie y pegue los códigos cortos requeridos desde aquí Lista de códigos cortos de perfiles de usuario de WordPress – ProfileGrid, agregue estos códigos cortos a los bloques y cree fantásticos perfiles de usuario.

También puede arrastrar y soltar bloques de ProfileGrid según sus necesidades. Simplemente busque ProfileGrid y podrá ver todos los bloques de ProfileGrid.

Y así es como puede crear perfiles de usuario en Elementor.

  1. Vaya a Páginas y luego Agregar nuevo .
  2. Seleccione Editar con Elementor (necesita instalar y activar elementor desde el panel de complementos)

3. Seleccione Editor de texto y arrastre y suelte en el generador de páginas. Copie y pegue todos los códigos abreviados que necesite en el campo del editor de texto.

4. Haga clic en Publicar .

Al igual que el editor de Gutenberg, ProfileGrid también tiene bloques de arrastrar y soltar en Elementor. Solo necesita tener Profile Elementor Integration instalado y activado desde aquí Elementor Integration – ProfileGrid.

Maneras simples de crear perfiles de usuario en WordPress y WooCommerce usando códigos cortos

ProfileGrid tiene muchos códigos cortos personalizables. Se pueden usar para crear perfiles de usuario en WordPress de la forma que desee. Todos y cada uno de los elementos del perfil de usuario se pueden personalizar mediante códigos abreviados avanzados. Entonces, echemos un vistazo a cómo puede crear perfiles de usuario y personalizarlos según sus gustos.

La mejor parte de crear perfiles de usuario con estos códigos cortos es que se pueden usar en cualquier lugar. No importa qué generador de páginas esté utilizando o qué generador de bloques de Gutenberg esté utilizando, los códigos abreviados funcionarán en todas partes.

Así es como puede encontrar todos los códigos cortos mencionados en esta guía.

Vaya a ProfileGrid -> Códigos cortos -> Aquí encontrará códigos cortos básicos y avanzados. Usaremos los códigos cortos principalmente de las secciones avanzadas.

Aquí se explica cómo usar los códigos abreviados para crear perfiles de usuario en WordPress y WooCommerce

  1. Mostrar perfil de usuario completo

Código corto: [ profilegrid_profile ]

Este shortcode mostrará el perfil de usuario completo. Usando este shortcode, puede crear fácilmente una página de perfil de usuario en WordPress. A través de este shortcode, podrá mostrar el perfil de usuario completo, incluida la imagen de perfil, la imagen de portada, los grupos asignados, los blogs publicados por los usuarios, los mensajes y las notificaciones.

Así es como se verá el perfil de usuario completo.

Create user profile on wordpress and woocommerce

2. Nombre para mostrar del usuario

Código corto: [ profilegrid_user_display_name ]

Si solo desea mostrar el nombre de usuario, use este código abreviado. Es útil si no desea mostrar ninguna otra información sobre el usuario a otros.

3. Mensajería

Código corto: [ profilegrid_messaging_area ]

En caso de que desee mostrar solo el área de mensajes, puede utilizar este código abreviado. Solo mostrará la sección de mensajes del perfil. Los mensajes enviados y recibidos se realizarán de la forma habitual.

4. Imagen de portada del usuario

Código corto : [profilegrid_user_cover_image]

Este shortcode agregará una imagen de portada. Es uno de los elementos que proporciona una apariencia vívida a los perfiles de usuario.

código abreviado de portada

5. Nombre del usuario y apellido del usuario

Código abreviado: [ profilegrid_user_first_name ] y [profilegrid_user_last_name]

Le permitirá mostrar solo el nombre del usuario.

6. Notificaciones

Código corto: [ profilegrid_notification_area ]

El área de notificación es un gran elemento para tener en su sitio web de membresías y comunidad. El código corto de mensajería y notificaciones se puede usar simultáneamente para brindar una experiencia completa a los usuarios en su sitio web. El código abreviado de notificaciones funciona a la perfección y proporciona una notificación instantánea tan pronto como llega.

Código abreviado de notificación

7. Página de grupo

Código corto: [ profilegrid_group gid=”x”]

Otro mejor shortcode para usar si está ejecutando un sitio web de comunidades y membresías que consta de grupos. Mostrará todos los grupos de los que forma parte el usuario.

Además, también se pueden mostrar detalles como la descripción del grupo y el total de miembros del grupo. Además, también mostrará la opción de abandonar el grupo. Además de eso, también mostrará a todos los miembros de ese grupo en particular y las discusiones que el usuario tuvo con ellos.

Código abreviado del grupo de usuarios

8. Envío de blogs

Código corto : [profilegrid_submit_blog]

Mediante el envío de blogs, el usuario puede enviar blogs. En el campo de título, se puede insertar el titular del blog. El campo de descripción se puede utilizar para publicar el contenido real del blog con todas las opciones de formato. También puede insertar etiquetas en el campo de etiquetas. Además, utilizando el campo Imagen, se pueden cargar imágenes para mostrarlas en el blog. Por último, la función de restricción de contenido permite controlar la visibilidad del contenido del blog.

Envío de blogs

9. Blogs de usuarios

Código corto : [profilegrid_user_blogs uid=”x, y, z” wpblog=”true”]

Si desea mostrar los blogs que ha enviado en su perfil, este es el código abreviado que debe elegir. Para crear un perfil de usuario con elementos como estos, realmente lleva su sitio web a otro nivel. El blog del usuario también muestra todos los demás blogs publicados por los usuarios desde la fecha de inicio. Además, también muestra el número de comentarios recibidos en todos los blogs publicados.

Código abreviado de blog de usuario

10. Configuración

Código corto : [profilegrid_settings_area]

El shortcode de configuración habilitará la opción de configuración del perfil de usuario. A través de esto, puede editar los detalles de la cuenta, como el nombre y el apellido. Además, con la opción Cambiar contraseña, puede volver a crear fácilmente una nueva contraseña. Además, la opción Privacidad te permitirá configurar la visibilidad del perfil de usuario. Por último, la cuenta de eliminación le permitirá eliminar el perfil de usuario desde la propia opción de configuración.

El código abreviado [profilegrid_account_options] se puede usar para mostrar solo los detalles de la cuenta si es necesario. Y para mostrar solo la opción Cambiar contraseña [profilegrid_password_options] se puede usar el código abreviado.

Código abreviado de configuración

11. Notificación no leída y recuento de mensajes

Código abreviado : [profilegrid_unread_notification] y [profilegrid_unread_messages]

Estos códigos abreviados se pueden usar para mostrar la cantidad de notificaciones y mensajes pendientes. Esta es una característica muy útil si está administrando un sitio web grande que consta de muchos miembros y suscriptores. Los elementos de recuento de notificaciones y mensajes no leídos son una pequeña herramienta que lo ayudará a realizar un seguimiento de sus notificaciones y mensajes no leídos.

Recuento de notificaciones no leídas

12. Acerca de

Código corto : [profilegrid_user_about_area]

Este pequeño código le permite mostrar la sección Acerca de del perfil de usuario. Hay un par de opciones, como Detalles personales y Detalles profesionales, que se pueden editar con el botón Editar perfil .

Acerca de la sección

13. Grupos

Código corto: [ profilegrid_user_groups_area ]

El código abreviado de grupos le permitirá mostrar todos los grupos de los que forma parte el usuario con detalles como el nombre y la descripción del grupo. Además, también hay una opción para ir directamente a la configuración de grupos usando el ícono de configuración pequeño en el lado derecho al lado del nombre del grupo. Una opción muy útil si tiene un sitio de membresía grande que consta de muchos miembros que forman parte de múltiples grupos y comunidades.

Código abreviado de grupos

14. Tarjetas de miembros del grupo

Código corto: [ profilegrid_members_cards gid=”x”]

En caso de que solo desee mostrar una lista de todos los miembros que pertenecen a un grupo en particular, use el código abreviado de Tarjetas de miembros del grupo. Mostrará una cuadrícula de todos los miembros del grupo con su imagen de perfil de usuario y su imagen de portada. Esta es una característica increíble para sitios web basados ​​en negocios, clases en línea, etc. Los usuarios pueden hacer clic en cualquiera de los miembros del grupo y acceder a su perfil de usuario.

Tarjetas de miembros del grupo

15. Discusión en grupo

Código corto: [ profilegrid_group_discussion gid=”x”]

Otro código abreviado increíble para usar definitivamente en su sitio web es la discusión grupal. Muestra todas las comunicaciones en curso en un grupo en particular. Ideal para negocios, membresías y comunidades. Toda la comunicación está presente en un lugar al que pueden acceder todos los miembros del grupo. También hay una opción para comenzar o insertar un nuevo comentario directamente desde la página de discusión del grupo.

Discusión de grupo

Hay muchos más códigos abreviados a su disposición que se pueden usar para crear excelentes membresías o sitios web comunitarios. Hemos cubierto la mayoría de los códigos cortos de la Lista de códigos cortos de perfiles de usuario de WordPress – ProfileGrid.

Dado que el código abreviado es altamente personalizable, puede seleccionar los que desea usar y jugar con él para comprender más.

Conclusión

¿Está buscando crear perfiles de usuario que sean altamente personalizables? ¿Y también quieres tener un control total sobre todos los elementos? Entonces, los códigos cortos mencionados en esta guía son realmente útiles. Use estos códigos cortos con cualquier creador de páginas. Si está buscando crear perfiles de usuario que se puedan personalizar sin entrar en muchas configuraciones y jugar con ellas, los códigos abreviados son la respuesta. Simplemente cópielos y péguelos donde quiera y vea la magia en la interfaz.

Ahora cree un nuevo perfil de usuario con estos códigos cortos fácilmente. Lanzaremos nuevos códigos abreviados de vez en cuando para facilitarles la vida a medida que avanzamos. Muestre el perfil de usuario completo utilizando el código abreviado de perfil de usuario o muestre solo los elementos que le interesan.