Cómo desarrollar un sitio de membresía con WordPress Parte 1

WordPress ya se envía con un montón de cosas buenas para hacer un sitio de membresía. Desafortunadamente, la mayor parte del proceso se maneja a través del back-end del sitio, e idealmente queremos mantener a los usuarios alejados del área de administración. Por lo tanto, a lo largo de esta serie de tres partes, moveremos este proceso al frente del sitio, agregando algunas personalizaciones y estilizando todo el camino..

Al final de la serie, debe tener un sitio donde las personas puedan registrarse, iniciar sesión y editar sus propios detalles de cuenta. Como es un tema tan amplio, no podremos cubrirlo todo, pero haré todo lo posible para brindarle una base sólida para un sitio de membresía.

En pocas palabras, esto es lo que se puede esperar de la serie:

• Parte uno: Inscripción y formularios de inicio de sesión.
• La segunda parte: Agregar campos personalizados al formulario de registro
• Parte tres: Desarrollando una sección de "perfil de usuario"

Ahora, antes de comenzar, hay un buen argumento para que este código se realice como un complemento; después de todo, es bastante funcional. Pero debido a la cantidad de "tematización"Lo haremos, es completamente razonable que el código se incluya en nuestro tema..  

Vamos a profundizar en

Como desarrollador de WordPress, uso Sage como mi tema de inicio, así que lo estaré desarrollando. Si no has usado Sage (anteriormente conocido como Roots), hay una ligera curva de aprendizaje, ya que usa Bower y Gulp, por lo que necesitarás tener algo de experiencia al usarlos. Habiendo dicho todo esto, fácilmente podría aplicar los principios aquí a cualquier tema. Hay mucho más que decir sobre temas de inicio, pero guardemos eso para otro momento.

Entonces, sin más demora, entremos en la sección de registro de su sitio. Hay básicamente dos enfoques, y he intentado ambos. El primero es desarrollar un formulario personalizado y procesar el registro usted mismo, y el segundo consiste en ampliar los formularios de registro e inicio de sesión nativos. Prefiero lo último, y he aquí por qué: nativo siempre es mejor, es más fácil de mantener y hay muchas menos partes móviles.

Un inconveniente de utilizar los formularios nativos para iniciar sesión y registrarse es que obtiene las URL nativas: http://AnExampleDomain.com/wp-admin y http://AnExampleDomain.com/login/?register.

No se preocupe, porque hay maneras de reescribirlos, así que no será obvio que sea un sitio de WordPress.

Poner nuestra casa en orden  

Me gusta mantener una casa limpia, así que en mis funciones.php incluiré un archivo llamado admin.php que contendrá todas nuestras funciones relacionadas con la administración. El siguiente código (línea 12) es cómo incluiría el archivo si está utilizando el tema Sage WP Starter.  

Si no estás usando Sage, puedes usar algo como: 
require_once Locate_template ('/lib/admin.php');
Nota al margen: Esto no está relacionado con este tema, pero recomendaría tener varias inclusiones en su functions.php y luego la codificación en los archivos respectivos. Mantiene los archivos limpios y legibles.. 
Mantendremos nuestros recursos de administración (CSS e imágenes) en un lugar separado. administración directorio. Esto es opcional, pero recuerde cambiar su ruta cuando haga referencia a estos archivos si usa una estructura diferente.  
Comencemos con el CSS
Queremos anular los estilos que WordPress ha aplicado a las páginas de inicio de sesión y registro..
 
http://AnExampleDomain.com/wp-admin
 
http://AnExampleDomain.com/wp-login.php?action=register
 
Entonces para hacer esto necesitamos incluir una hoja de estilo en nuestro tema. La forma de hacer esto en WordPress es usar la función wp_enqueue_style.
Así que el plan es cargar una hoja de estilo diferente para cada formulario. Para hacer esto, verificaremos el parámetro GET pasado y cargaremos el estilo respectivo. Si estás pensando: "¿Qué demonios es un parámetro GET?", Entonces no te preocupes. Es básicamente la URL. Eso es todo lo que realmente necesita saber por el bien de lo que estamos haciendo. 
Así que la lógica es: si la URL es x, carga x hoja de estilo, y si la URL es y, carga y hoja de estilo. Así que cree un archivo admin.php y copie este código en él, y luego guárdelo en el lib carpeta.  
Estamos utilizando la acción login_head aquí para cargar nuestros estilos en la página de inicio de sesión. Esta acción está especialmente diseñada para este propósito. Si no está familiarizado con las acciones y los filtros en WordPress, le recomiendo dedicar un tiempo a aprender sobre ellos. Son pilares del desarrollo de WordPress..  
Ahora para el propio CSS. Por el bien de mantenernos dentro del alcance de este tutorial, solo estaremos escribiendo CSS de vainilla. No MENOS o Sass. El DOM realmente no nos da mucho para desviarnos de estas páginas, por lo que debemos ser un poco astutos. 
Para agregar estilos de encabezado y pie de página, usemos los pseudo elementos antes de y después. He capturado una imagen de http://unsplash.com para el fondo de nuestra página de inicio de sesión. Es un gran recurso pero carece de capacidad de búsqueda. Por suerte Arthur Weill ha hecho una herramienta para buscar las imágenes..
Puede agarrar o ver los archivos CSS a continuación:
 
 Formulario de inicio de sesión CSS
 
 
 Formulario de registro CSS
 
 
Este CSS solo sirve como una guía. Los puntos principales son:
 
Para lograr un encabezado / pie de página, utilice antes de y después pseudo elementos.
 
Use las consultas de los medios para asegurarse de que los formularios puedan reducirse bien. Es posible que desee que se utilicen en un modal / iframe o para iniciar sesión desde una tableta o teléfono.
 
Algunos toques finales
El logotipo en nuestras páginas enlaza con http://wordpress.org, lo cual no es ideal. Afortunadamente, WordPress tiene un filtro útil que podemos usar para cambiar eso, login_headerurl. Así que vamos a incluir este fragmento en nuestro admin.php.
Otra cosa es que en nuestra página de registro hay un poco de texto de introducción. No es muy informativo: "Registrarse a este sitio". Vamos a modificar eso también. Nuevamente hay una acción (login_message) para conectar y cambiarla. No es tan sencillo como el filtro anterior, pero al usar la función PHP strpos podemos verificar ciertas copias ("Registro") y luego devuelve nuestra copia enmendada. 
'. $ register_intro. '
';  else return $ message;  add_action ('login_message', 'tutsplus_register_intro_edit');
Y por último, pero no menos importante, cambiemos esas URL. Hay muchas maneras de hacer esto. Podría usar .htaccess, pero me gusta usar el complemento de seguridad de iThemes. Dentro de la configuración puede cambiar las URL a su área de administración. He cambiado el mio a /iniciar sesión. Hay muchas otras grandes cosas que puedes hacer con el complemento, por lo que te recomiendo que lo revises..
Que sigue?
Hemos tenido un gran comienzo para nuestro sitio de membresía. En la segunda parte, veremos cómo agregar meta campos personalizados a nuestro formulario de registro y brevemente tocaremos cómo personalizar los correos electrónicos que se envían desde nuestro sitio. Espero que este tutorial sea fácil de seguir. Cualquier comentario, preguntas y comentarios son bienvenidos..
Cosas a tener en cuenta
Tenga en cuenta: si está descargando el código del repositorio de GitHub, incluye todos los archivos para obtener su tema en marcha. ¡La idea es que puedas agarrar el repositorio y simplemente ejecutar los comandos necesarios de Gulp y Bower y estarás lejos! Si solo desea los archivos que contienen código específico para esta serie, los archivos se enumeran a continuación.. 
 
Todos los archivos en el directorio de administración.  
 
lib / admin.php 
 
lib / membership.php 
 
plantilla-usuario-perfil.php
 
templates / header.php 
 



		
			
	   
	




Código