Crea una comunidad en línea para tu sitio de WordPress con UserPro

Spanish (Español) translation by Leareny Guerrero (you can also view the original English article)

Cuando piensas en sitios web sociales, lo más probable es que las redes sociales como Facebook te vengan de inmediato a la mente, pero, la capacidad de crear un perfil y conectarse con otros usuarios puede ser una valiosa adición a muchos sitios web diferentes.

Imagina que has creado un sitio web para tu negocio; podrías utilizar las funciones sociales para construir un directorio de empleados donde los clientes potenciales puedan identificarse y conectarse con la persona exacta con la que necesitan hablar.

Las características sociales y de membresía también pueden ser una buena opción para cualquier sitio web donde los visitantes puedan publicar su propio contenido, como foros, blogs o sitios web de reseñas. Si visitas TripAdvisor y haces clic en el perfil de cualquier usuario, encontrarás muchas características sociales conocidas, como una lista de sus seguidores, un feed de actividades, cualquier insignia que hayan ganado y un mapa de todos los lugares que hayan visitado.

Al agregar características sociales y de membresía a tu sitio web, puedes mejorar la experiencia del usuario mientras alientas a los visitantes a interactuar con el contenido de tu sitio.

En este artículo, implementaremos todo lo necesario para crear una próspera comunidad online usando el plugin UserPro WordPress. Al final de este tutorial, cualquier persona que visite tu sitio web podrá crear un perfil y conectarse con otros. En una futura publicación, les permitiremos compartir su ubicación utilizando la integración de Google Maps y daremos a los visitantes la opción de crear una cuenta utilizando sus credenciales existentes de Facebook o Twitter.

Cómo empezar con el plugin de la comunidad de UserPro

Para comenzar, necesitamos descargar e instalar el plugin UserPro

Si aún no te has registrado, crea tu cuenta gratuita de Envato Market. Dirígete al sitio web de CodeCanyon, haz clic en el pequeño botón Sign In (Inicio de sesión) en la parte superior derecha y luego ingresa los detalles de tu cuenta de Envato.

Una vez que hayas iniciado sesión en tu cuenta, dirígete al listado UserPro, haz clic en Buy Now (Comprar Ahora) y luego sigue las instrucciones en pantalla para completar tu compra. Cuando se te solicite, descarga el plugin. Descomprime tu plugin; la carpeta siguiente debe contener varias carpetas y archivos, incluido un archivo userpro.zip, que deberás subir a tu cuenta de WordPress.

Añadir un plugin de Terceros a WordPress

Una vez que hayas descargado UserPro, tendrás que subirlo a tu cuenta de WordPress.

Inicia sesión en tu cuenta de WordPress, si aún no lo has hecho. Selecciona Plugins (Complementos) en el menú de la izquierda de WordPress, seguido de Add New (Añadir nuevo). Selecciona el botón Upload Plugin (Cargar Complemento). Desplázate a la sección Si tiene un plugin en formato .zip y selecciona Elegir archivo. Selecciona el archivo userpro.zip y haz clic en Instalar Ahora.

UserPro ahora será subido a tu cuenta de WordPress. Después de unos momentos, deberías ver un mensaje de Plugin installed successfully (Complemento Instalado con Éxito). Selecciona el botón Activate Plugin (Activar Complemento).

Debería aparecer un nuevo elemento UserPro en el menú de la izquierda de WordPress.

Cómo activar tu nuevo plugin

A continuación, necesitarás activar UserPro encontrando tu código de compra único y añadiéndolo al archivo functions.php de tu sitio web de WordPress, que es una plantilla utilizada por tu tema de WordPress.

Cuando compraste UserPro, deberías haber recibido un correo electrónico con el asunto [CodeCanyon] Purchase Confirmation ([CodeCanyon] Confirmación de compra). Abre este correo electrónico y deberías encontrar un Purchase code (Código de compra). Ten esta información a mano, ya que la necesitarás en breve.

Vuelve a tu cuenta de WordPress y, en el menú de la izquierda, haz clic en UserPro y selecciona la pestaña Licensing (Licencias).

Select UserPro from WordPress left-hand menu followed by Licensing

Desplázate a la sección Activate UserPro (Activar UserPro) y copia/pega tu código de compra en el campo de texto adjunto. Luego selecciona Save Changes (Guardar Cambios).

Una vez que la página se actualice, deberías ver un mensaje Thank you for activating UserPro (Gracias por activar UserPro).

Explorando las nuevas características sociales de tu sitio web

UserPro crea automáticamente todas las páginas que necesita para implementar una red social que funcione, incluyendo páginas donde el usuario puede crear un perfil, editar ese perfil y conectarse con otros usuarios.

Selecciona Pages > All Pages (Páginas > Todas las Páginas) en el menú de la izquierda de WordPress, y verás que UserPro ha creado las siguientes páginas:

My Profile (Mi Perfil). Este es el perfil del usuario de cara al público.

Edit profile (Editar Perfil). Esta es una página en la que el usuario puede editar varias partes de su perfil, incluyendo su nombre para mostrar, la foto del perfil y la ubicación.

Connections (Conexiones). Esto muestra una lista de las conexiones del usuario

You can use UserPro to connect with other users

Followers (Seguidores) Esto muestra todos los seguidores del usuario.

The Followers page displays a list of all the users whove followed your account

Following (Siguiendo). Esto muestra una lista de cada cuenta que este usuario está siguiendo.
Member directory (Directorio de miembros). Este es un directorio de búsqueda de todas las personas que están registradas en tu sitio web.

Login (Iniciar sesión). Esta es una página donde los visitantes pueden acceder a su cuenta o navegar al formulario de registro de su sitio web haciendo clic en Create an account (Crear una cuenta).
Register (Registro). Esta es una página donde los visitantes pueden crear una cuenta ingresando su nombre y dirección de correo electrónico y creando una contraseña.

Ten en cuenta que si un visitante intenta acceder a cualquiera de las siguientes páginas sin iniciar sesión en su cuenta, será redirigido a la página de Login (inicio de sesión) de su sitio web:

My Profile (Mi perfil)
Edit Profile (Editar el Perfil)
Followers (Seguidores)
Following (Siguiendo)
Connections (Conexiones)

¿Qué significa esto para las personas que visitan mi sitio?

Hagamos un recorrido por la configuración por defecto de UserPro, para que podamos ver cómo funcionan nuestras características sociales actualmente.

Para simular la experiencia de registrarse como un nuevo usuario, cierra la sesión de tu cuenta de WordPress, inicia un navegador alternativo o abre una nueva pestaña de incógnito. Luego, ve a la página My Account o My Profile (Mi cuenta o Mi perfil) de tu sitio web. El proceso de navegación a estas páginas puede variar, dependiendo de cómo esté configurado tu sitio web, pero yo podría acceder a ambas páginas seleccionándolas en el pie de página de mi sitio web.

Dado que estas páginas se generaron automáticamente, es posible que todavía no estén conectadas correctamente al resto de tu sitio web. Si tienes dificultades para acceder a My Account o My Profile (Mi cuenta o Mi perfil), entonces:

Inicia sesión nuevamente en tu cuenta de WordPress.
Navega a Pages > All Pages (Páginas> Todas las páginas).
Busca el elemento My Account o My Profile (Mi cuenta o Mi perfil) y haz clic en el enlace View (Ver) que le acompaña. Esta página ahora se iniciará en una nueva pestaña.
Copia la URL de la página.
Cierra la sesión de tu cuenta de WordPress, inicia un navegador web alternativo o abre una pestaña de incógnito.
Pega la URL en la barra de direcciones y luego presione la tecla Intro del teclado.

Dado que actualmente no hemos iniciado sesión en una cuenta, se nos solicitará que nos registremos como un nuevo usuario; haz clic en el botón Create an account (Crear una cuenta).

Ahora puedes crear tu cuenta completando el siguiente formulario y haciendo clic en Register (Registro). De forma predeterminada, es posible crear un perfil sin verificar tu dirección de correo electrónico, lo que facilita la prueba de tu sitio web al crear múltiples cuentas ficticias.

Después de hacer clic en el botón Register (Registro), serás redirigido a la página My Profile (Mi perfil), que es tu perfil de usuario visible públicamente.

Para realizar algunos cambios en tu perfil, haz clic en el botón Edit Profile (Editar Perfil), que te lleva a la página Edit Profile (Editar perfil). Desde aquí, puedes agregar información adicional, subir una foto de perfil o editar la información que hayas ingresado anteriormente. Cuando hayas terminado de editar tu perfil, haz clic en Save Changes (Guardar cambios).

Si quieres probar la funcionalidad de seguimiento de UserPro, entonces necesitarás crear al menos una cuenta de usuario adicional. Para crear cuentas subsiguientes, cierra la sesión de tu cuenta actual seleccionando View Profile > Logout (Ver perfil > Cerrar sesión) y luego repite los pasos anteriores.

Una vez que tengas al menos dos cuentas de usuario, dirígete al Member Directory (Directorio de Miembros) y deberías ver una vista previa de todas las cuentas que has creado.

Para seguir a un usuario, simplemente haz clic en el botón View profile (Ver perfil) y luego presiona el botón Follow (Seguir).

Cada vez que sigas a un usuario, la cuenta de seguidores en su perfil aumentará. Si navegas de regreso a tu perfil, verás que tu cuenta de following (siguiendo) también ha aumentado.

Si seleccionas la pestaña Following (Siguiendo), mostrará una lista de todos los usuarios a los que sigues actualmente. Si ganas algún seguidor, aparecerán en tu pestaña de Followers (Seguidores).

No necesitas más, esto es prácticamente todo lo que necesitas para proporcionar una red social que funcione, pero hay muchas maneras de personalizar y mejorar la configuración predeterminada de UserPro.

Solución de problemas: "Crear una Cuenta" ¡No Funciona!

¿Te has caído en el primer obstáculo? Si estás haciendo clic en el botón Create an Account (Crear una Cuenta) y no sucede nada, ¡no te asustes! Hay varias soluciones que puedes intentar:

1. Cambiar de rutas relativas a rutas completas

UserPro parece confundirse ocasionalmente cuando intenta resolver rutas relativas, por lo que puedes ser capaz de resolver este problema cambiando de rutas relativas a rutas completas:

Selecciona UserPro > UserPro en el menú de la izquierda de WordPress.
Asegúrate de que la pestaña Settings (Configuración) esté seleccionada.
Haz clic para ampliar la sección Compatibility Settings (Configuración de compatibilidad).

You can edit UserPros settings by navigating to UserPro UserPro Settings

Abre el menú desplegable de Path Compatibility (Compatibilidad de rutas) y selecciona Use Full Paths (Usar rutas completas).
Selecciona Save Changes (Guardar cambios).
Comprueba si esto ha resuelto tu problema.

2. Asegúrate de estar al día o actualizado

Antes de pasar a algunas correciones más disruptivas, vale la pena comprobar que todos tus plugins y temas están actualizados y que estás usando la última versión de WordPress.

Si te retrasas en tus actualizaciones, entonces es posible que te encuentres con un error o conflicto que ya se haya tratado en una actualización posterior.

Para empezar, selecciona Dashboard > Updates (Panel de Control > Actualizaciones) en el menú de la izquierda de WordPress. Desde aquí, puedes verificar las siguientes actualizaciones:

WordPress. Aunque la lista de Update (actualizaciones) de WordPress esté vacía, vale la pena hacer clic en el botón Check Again (Comprobar de Nuevo), solo para asegurarte de que no hay actualizaciones disponibles.

You can install WordPress plugin and theme updates by navigating to Dashboard Updates

Plugins (Complementos) No es raro encontrar conflictos entre plugins de terceros. Antes de comenzar a desactivar los plugins, debes asegurarse de que tienes instaladas las últimas versiones. Si en Dashboard > Updates (Panel > Actualizaciones) aparece una lista de las actualizaciones disponibles, selecciónalas todas y luego haz clic en Update plugins (Actualizar complementos).
Themes (Temas). Algunos usuarios han reportado problemas al usar este plugin junto con ciertos temas de WordPress. Cambiar el tema de tu sitio web probablemente no sea un paso que quieras tomar a la ligera (¡si es que lo haces!), por lo que siempre es una buena idea comprobar que estás utilizando la última versión del tema elegido.

3. Desactivar los plugins conflictivos

Si tienes algún otro plugin instalado, es posible que UserPro esté en conflicto con estos plugins existentes. Para identificar al culpable, desactiva cada plugin y luego comprueba si esto ha resuelto tu problema.

Para comenzar a desactivar tus plugins:

Selecciona Plugins > Installed Plugins (Complementos> Complementos Instalados) en el menú de la izquierda de WordPress.
Encuentra el primer plugin y haz clic en el botón Deactivate (Desactivar) que lo acompaña.
Comprueba si esto ha resuelto tu problema.
Repite y repite hasta que identifiques el plugin infractor o verifiques que ninguno de tus plugins está causando el problema.

4. Cambia tu Tema

Algunas personas han reportado haber encontrado el problema del "botón roto" de UserPro al usar ciertos temas, por lo que puedes obtener resultados positivos al cambiar el tema de tu sitio web.

Para cambiar el tema de WordPress, selecciona Appearence > Themes (Apariencia > Temas) en el menú de la izquierda y luego elije un tema de reemplazo.

Obteniendo Más de UserPro: Google Maps, Facebook, Twitter y más

En este punto, tenemos todo lo que necesitamos para crear una comunidad en línea, pero hay muchas otras características de UserPro que puedes habilitar, incluyendo la integración de Facebook y Twitter Connect y Google Maps.

En esta sección, vamos a explorar una serie de extras opcionales que puedes añadir a tu nueva comunidad en línea.

Haciendo conexiones

UserPro tiene una función de "conexiones" que añade un botón de Send Connect Request (Enviar solicitud de conexión) al perfil de cada usuario.

Una vez que ha enviado una solicitud de conexión a un usuario, puedes revisar esa solicitud abriendo su perfil y seleccionando la pestaña Connections (Conexiones).

Desde aquí, pueden aceptar o rechazar la solicitud de conexión.

Si el usuario acepta una solicitud de conexión, puede optar por revocarla en cualquier momento navegando a la pestaña Connections (Conexiones) de su perfil, encontrando la conexión en cuestión y luego seleccionando el ícono Remove Connetions (Eliminar Conexión) que lo acompaña.

Para habilitar la función de conexión:

Selecciona UserPro > UserPro en el menú de la izquierda de WordPress.
Asegúrate de que la pestaña Settings (Configuración) esté seleccionada.
Haz clic para expandir la sección General.
Abre el menú desplegable Enable Connections (Habilitar conexiones) y selecciona Yes (Sí).
Haz clic en Save Changes (Guardar los cambios).

Mantén a tus usuarios regresando, con notificaciones por correo electrónico

Para ayudar a impulsar la participación del usuario, es posible que desees enviar una notificación por correo electrónico cada vez que el usuario obtenga un nuevo seguidor o uno de sus seguidores existentes haga una nueva publicación.

Para enviar una notificación por correo electrónico sobre nuevos seguidores:

En el menú de la izquierda de WordPress, seleccione UserPro > Social Extension.
Haz clic para expandir la sección E-mail notifications (notificaciones por correo electrónico).
Encuentra el siguiente menú desplegable: Send e-mail notification when someone follows another user (Enviar una notificación por correo electrónico cuando alguien sigue a otro usuario), y configúralo en Yes (Sí).
Haz clic para expandir la sección New Follow E-mail Template (Nueva plantilla de seguimiento de correo electrónico).

Ahora deberías ver la plantilla que UserPro usará para generar sus correos electrónicos de "new follower" (nuevos seguidores). Por defecto, esta plantilla debería verse algo como esto:

Hi there,

{USERPRO_FOLLOWER_NAME} is now following you on {USERPRO_BLOG_NAME}! 
You can click the following link to view his/her profile:

{USERPRO_FOLLOWER_LINK}

Or view your profile at:

{USERPRO_MY_PROFILE}

This is an automated notification that was sent to you by UserPro. No further action is needed.

Puedes editar cualquier texto sin formato en esta plantilla, pero asegúrate de no alterar accidentalmente ninguno de los códigos, ¡o puedes terminar dirigiéndote a las personas como FOLLOWER_NAME!

Cuando estés satisfecho con los cambios, haz clic en Save Changes (Guardar los cambios)

También puedes enviar un correo electrónico a los seguidores de un usuario cada vez que hagan una nueva publicación:

Navega a UserPro > Social Extension > E-mail notifications (UserPro > Extensión Social > Notificaciones de correo electrónico), si aún no lo has hecho.
Busca el siguiente menú desplegable: Send e-mail notification to followers when user creates post. (Envía notificación por correo electrónico a los seguidores cuando el usuario cree un mensaje). Abre el menú desplegable y presiona Yes (Sí).
Haz clic para expandir la siguiente sección: New Post E-mail Notification to Followers Template (Nueva plantilla de notificación por correo electrónico a los seguidores).

De forma predeterminada, UserPro utilizará la siguiente plantilla de correo electrónico:

Hi there,

{USERPRO_FROM_NAME} has created a new post - 

Post Name : {VAR1}

Realiza cualquier cambio, y luego haz clic en Save Changes (Guardar los cambios). Ahora, cuando un usuario haga una nueva publicación, ¡todos sus seguidores serán notificados!

Conclusión

En este tutorial, te mostré cómo construir una completa comunidad en linea, usando el plugin UserPro. Cualquiera que visite tu sitio web ahora podrá crear un perfil y conectarse con otros usuarios.

En la próxima publicación, te mostraré cómo dejar que los usuarios muestren su ubicación usando Google Maps, y opcionalmente conectar su cuenta de usuario a Twitter y Facebook. Para obtener más información sobre UserPro, consulta el sitio web de UserPro.