Cómo desarrollar un sitio basado en las suscripciones con WordPress: Parte 1

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

WordPress ya viene con un montón de características para crear un sitio basado en las suscripciones. Por desgracia la mayoría del proceso es gestionado a través del back end del sitio, e idealmente queremos mantener a los usuarios alejados del área de administración. Así que a través de esta serie dividida en tres partes moveremos el proceso al fron end del sitio, incorporando algo de personalización, y aplicando estilo al mismo tiempo.

Al final de esta serie deberías tener un sitio en el que la gente pueda suscribirse, iniciar sesión y editar los detalles de sus propias cuentas. Como es un tema tan amplio no seremos capaces de cubrirlo todo, pero haré todo lo que sea posible para proporcionarte unos sólidos fundamentos para crear un sitio basado en las suscripciones.

En pocas palabras, esto es lo que puedes esperar aprender a lo largo de esta serie:

Primera parte: Formularios de registro e inicio de sesión
Segunda parte: Añadir campos personalizados al formulario de registro
Tercera parte: Desarrollar una sección "perfil de usuario"

Ahora, antes de empezar, existe un buen argumento para crear este código en forma de plugin, después de todo, es bastante práctico. Pero debido a la cantidad de "tematización" que vamos a realizar, es completamente razonable que el código esté alojado en nuestro tema.

Comencemos

Como desarrollador WordPress, yo utilizo Sage como tema base, así que estaré desarrollando con él. Si no has usado antes Sage (anteriormente conocido como Roots), es necesaria una pequeña curva de aprendizaje, ya que usa Bower y Gulp, así que necesitarás tener alguna experiencia en el empleo de estos dos. Dicho esto, puedes aplicar fácilmente los principios que veremos aquí a cualquier tema. Hay mucho más que decir sobre los temas base, pero dejemos esto para otra ocasión.

Así que sin más preámbulos, vamos a comenzar con la sección de registro de tu sitio. Básicamente existen dos enfoques, y he probado ambos. El primero consiste en desarrollar un formulario personalizado y procesar el registro tú mismo, y el segundo en la ampliación de los formularios de registro e inicio de sesión nativos de WordPress. Yo prefiero este último, ya que lo nativo siempre es una mejor opción, es más fácil de mantener, y hay muchas menos partes moviendose.

Una desventaja del uso de los formularios nativos para el inicio de sesión y el registro es que obtienes las URL nativas: http://UnDominioEjemplo.com/wp-admin y http://UnDominioEjemplo.com/login/?register.

No es algo de lo que preocuparse, ya que existen formas de reescribirlas para que no sea obvio que se trata de un sitio de WordPress.

Poniendo órden en nuestra casa

Me gusta mantener la casa ordenada, así que en mi archivo functions.php incluiré un archivo denominado admin.php que contendrá todas nuestras funciones relacionadas con la administración. El siguiente código (línea 12) es cómo incluirías el archivo en el caso de que estés usando el tema base de WordPress Sage.

<?php

$sage_includes = [
    'lib/utils.php',                 // Utility functions.
    'lib/init.php',                  // Initial theme setup and constants.
    'lib/wrapper.php',               // Theme wrapper class.
    'lib/conditional-tag-check.php', // ConditionalTagCheck class.
    'lib/config.php',                // Configuration.
    'lib/assets.php',                // Scripts and stylesheets.
    'lib/titles.php',                // Page titles.
    'lib/nav.php',                   // Custom nav modifications.
    'lib/gallery.php',               // Custom [gallery] modifications.
    'lib/admin.php',                 // All our admnin tweaks (added).
    'lib/membership.php'             // The functions to aid membership (added). 
];

foreach ( $sage_includes as $file ) {
    
    if ( ! $filepath = locate_template( $file ) ) {
        
        trigger_error( sprintf( __( 'Error locating %s for inclusion', 'sage' ), $file ), E_USER_ERROR );
    }

    require_once $filepath;
    
}

unset( $file, $filepath );

Si no estás usando Sage, puedes usar simplemente algo como esto:

require_once locate_template( '/lib/admin.php' );

Nota al margen: Esto no tiene relación con esta temática, pero te recomendaría que tuvieses múltiples inclusiones en tu archivo functions.php y que después crees el código correspondiente en los respectivos archivos. Mantiene los archivos más limpios y legibles.

Mantendremos nuestros recursos para el área administración (CSS e imágenes) en un directorio admin independiente. Esto es opcional, pero recuerda cambiar tu ruta cuando estos archivos usen una estructura distinta.

Empecemos con el CSS

Queremos sobreescribir los estilos que WordPress ha aplicado a las páginas de inicio de sesión y registro.

Así que para hacer esto tenemos que incluir una hoja de estilos en nuestro tema. La forma de hacerlo en WordPress es usando la función wp_enqueue_style.

El plan consiste en cargar una hoja de estilos distinta para cada formulario. Para ello comprobaremos el parámetro GET pasado y cargaremos los estilos respectivos. Si te estas preguntando "¿qué demonios es un parámetro GET?" no te preocupes. Básicamente es la URL. Eso es todo lo que necesitas saber para lograr lo que queremos.

Así que la lógica es: si la URL es x, carga la hoja de estilos x, y si la URL es y, carga la hoja de estilos y. De manera que crea un archivo admin.php, copia este código en él, y guárdalo en la carpeta lib.

<?php

function tutsplus_admin_css() {
    if ( $_GET['action'] === 'register' ) {
		wp_enqueue_style( 'register_css', get_template_directory_uri() . '/admin/css/register-form.css' );
	} else {
		wp_enqueue_style( 'login_css', get_template_directory_uri() . '/admin/css/custom-login.css' );
	}
}
add_action('login_head', 'tutsplus_admin_css');

Aquí estamos usando la acción login_head para cargar nuestros estilos en la página de inicio de sesión. Esta acción está diseñada específicamente para este propósito. Si no estás familiarizado con las acciones y los filtros de WordPress te recomiendo que inviertas algún tiempo en aprender sobre ellos. Son pilares básicos en el desarrollo de WordPress.

Ahora, para el propio CSS. Para mantenernos dentro del ámbito de este tutorial, solo vamos a escribir CSS vainilla. Ni LESS ni Sass. El DOM no nos proporciona realmente mucho para articular estas páginas, así que necesitamos ser un poco habilidosos.

Para añadir los tipos de estilos del header y del footer, vamos a usar los pseudo elementos before y after. He tomado una imagen de http://unsplash.com para el fondo de nuestra página de inicio de sesión. Es un excelente recurso pero carece de funcionalidad de búsqueda. Afortunadamente Arthur Weill ha creado una herramienta para buscar las imágenes.

Puedes descargar o visualizar los archivos CSS aquí abajo:

Este CSS solo sirve a modo de guía. Los puntos principales son los siguientes:

Para lograr una cabecera/pie de página, utiliza los pseudo elementos before y after.
Utilice media queries para asegurarte de que los formularios se pueden reduzcan perfectamente en pantallas pequeñas. Es posible que desees que se utilicen en un modal o iframe para iniciar sesión desde una tableta o móvil.

Algunos toques finales

El logotipo de nuestras páginas enlaza a http://wordPress.org, algo que no es ideal. Por fortuna WordPress dispone de un filtro que podemos utilizar para cambiar esto, login_headerurl. Por tanto, vamos a incluir este fragmento en nuestro archivo admin.php.

<?php

function tutsplus_the_url( $url ) {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'tutsplus_the_url' );

Otra cosa es que nuestra página de registro también contiene un poco de texto introductorio. No es muy informativo: "Regístrate a este sitio". Modifiquemos esto también. De nuevo existe una acción (login_message) para engancharlo y cambiarlo. No es tan claro como el anterior filtro, pero usando la función strpos de PHP podemos buscar ciertos textos ("Register") y después devolver en su lugar los textos modificados.

<?php

function tutsplus_register_intro_edit($message) {
    if (strpos($message, 'Register') !== FALSE) {
		$register_intro = "Become a member. It's easy! Fill in the form below.";
		return '<p class="message register">' . $register_intro . '</p>';
	} else {
		return $message;
	}
}
add_action('login_message', 'tutsplus_register_intro_edit');

Y por último, pero no menos importante, vamos a cambiar esas direcciones URL. Existen distintas formas de hacerlo. Podrías utilizar el archivo .htaccess, pero a mí me gusta usar el plugin iThemes Security. Dentro de los ajustes puedes cambiar las URL de tu área de administración. Yo he cambiado la mía a /log-in. Hay un montón de otras excelentes cosas que puedes hacer con el plugin, así que te recomiendo que le eches un vistazo.

Enable the hide backend feature checkbox

¿Qué viene después?

Tenemos ya una buena base para nuestro sitio de suscripciones. En la segunda parte veremos cómo añadir campos meta personalizados a nuestro formulario de registro y tocaremos brevemente cómo personalizar los emails enviados desde nuestro sitio. Espero que este tutorial te haya resultado lo suficientemente sencillo como para seguirlo. Cualquier opinión, consulta o comentario sobre el mismo es bienvenido.

Cosas a tener en cuenta

Por favor, ten en cuenta que si estás descargando el código del repositorio de GitHub, en él se incluyen todos los archivos para tener preparado tu propio tema. La idea es que puedas usar el repositorio y sencillamente ejecutar los comandos de Gulp y Bower ¡y listo! Si solo quieres los archivos que contienen código concreto de esta serie de archivos, los tienes listados a continuación.