Cómo construir una página de inicio de sesión de WordPress hecha a medida

Ah, sí, la página de inicio de sesión de WordPress, una de las páginas más reconocibles de WordPress, ¿no es así?

Pero al mismo tiempo, tener esta página en su sitio de WordPress en su forma predeterminada no siempre es la mejor de las ideas.

¿Por qué? - usted pregunta.

Aquí está la respuesta:

¿Por qué necesitaría una página de inicio de sesión de WordPress hecha a medida?

El problema es triple:

1. tráfico Cuanto más tráfico obtenga, más tráfico "malo" obtendrá como resultado directo. Por mal tráfico me refiero a scripts y bots maliciosos, spammers y todo tipo de usuarios que llegan a su sitio con malas intenciones. Personalizar su página de inicio de sesión de WordPress puede hacer que su sitio sea más seguro.
2. Sitio multiusuario . Si su sitio es administrado por varias personas, ya sean administradores o autores/blogueros, se producirán múltiples instancias de inicio de sesión. Proporcionar un formulario de inicio de sesión personalizado hará que el proceso sea más agradable en general.
3. marca La página de inicio de sesión predeterminada está bien, pero está el gran logotipo de WordPress justo en el medio. Cambiar esto y hacer que la página de inicio de sesión se parezca más a la suya puede ser un buen toque de marca. Esto es especialmente válido si está creando un sitio web para un cliente. Brindarle a su cliente una experiencia consistente es algo que seguramente apreciará.

Si alguno de los anteriores te suena convincente, deberías considerar cambiar tu página de inicio de sesión a una personalizada. Así es cómo:

Cómo crear una página de inicio de sesión de WordPress a medida

Hay dos formas principales de hacerlo:

• la manera manual ,
• la manera del complemento .

Ambas formas tienen sus pros y sus contras. La forma manual le da más control sobre la apariencia de la página final. La forma del complemento es más fácil de seguir, especialmente si no tiene habilidades de codificación, pero debe conformarse con lo que el complemento le permite hacer.

Cubrimos ambos.

Crear una página de inicio de sesión personalizada manualmente

Aunque esto requiere que modifiques algunos de los archivos fuente de tu tema, no es nada tan difícil. Voy a usar Twenty Fifteen como mi ejemplo aquí.

La diversión comienza creando una copia del archivo page.php y el archivo content-page.php .

Cambie el nombre de esas nuevas copias a page-login.php y content-login.php respectivamente.

Abra page-login.php y cambie solo una línea. De esto:

 get_template_part( 'content', 'page' );

A esto:

 get_template_part( 'content', 'login' );

Ahora, editemos content-login.php y agreguemos una línea debajo de <?php the_content(); ?> <?php the_content(); ?> . Al igual que:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Nota. En esta etapa, puede realizar una variedad de otras personalizaciones si lo desea (como ajustar el diseño/diseño, eliminar la barra lateral), pero todo es opcional. Cambiar solo esas dos líneas hará el trabajo si busca un enfoque extremadamente mínimo con su nueva página de inicio de sesión de WordPress.

Ahora, creemos una nueva página en wp-admin y simplemente llámela "iniciar sesión". Asegúrese de que el enlace permanente sea "iniciar sesión" también:

Hacer esto asegurará que WordPress use su archivo de plantilla page-login.php automáticamente.

Si visita su nueva página en este momento, debería verse un poco como esto:

En esta etapa, lo único que queda por hacer es establecer redirecciones para finalmente eliminar la página de inicio de sesión predeterminada de WordPress. Hazlo colocando estas líneas al final de tu archivo functions.php :

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Fragmentos de código creados en base a: [1][2].)

En este momento, la única página de inicio de sesión accesible es la nueva creada por usted. Lo mejor aquí es que puede editarlo libremente a través del editor de páginas predeterminado de WordPress (al igual que editaría cualquier otra página).

Creación de una página de inicio de sesión de WordPress personalizada con un complemento

Este método funciona un poco diferente porque en lugar de crear una página de inicio de sesión completamente nueva, en realidad estamos modificando la predeterminada.

Primero, el complemento que vamos a usar es: Personalizador de página de inicio de sesión personalizado.

Después de instalarlo y activarlo, simplemente vaya a Apariencia > Personalizador de inicio de sesión , donde puede iniciar el panel de personalización.

Las opciones de este complemento son bastante agradables y te permiten ajustar cosas como:

• Configure un logotipo para que aparezca en lugar del logotipo predeterminado de WordPress.
• Establezca un fondo para toda la página de inicio de sesión.
• Establezca un fondo para el formulario en sí.
• Ajuste el estilo del formulario y cada pequeño detalle (fuentes, tamaños, colores, campos).
• Instale un complemento de seguridad para obtener un campo captcha adicional en el formulario (excelente para evitar inicios de sesión / bots de spam).

Por ejemplo, solo un par de minutos de trabajo con el complemento y obtuve este resultado:

Otra opción de complemento

Otro complemento de página de inicio de sesión personalizado que vale la pena echarle un vistazo es: Diseñador de inicio de sesión. Este complemento tiene como objetivo hacer que la personalización de la página de inicio de sesión de WordPress sea muy fácil y al mismo tiempo le brinda flexibilidad en el diseño.

Una forma de lograr la facilidad de uso es familiarizar el proceso de personalización. Todas las opciones y herramientas están integradas directamente en el Personalizador de WordPress. Entonces, si está acostumbrado a usar el Personalizador para cambiar las opciones de tema, se sentirá como en casa.

Mire este video para obtener una descripción general de cómo funciona el complemento.

¿ Manual o a través de un complemento ?

¿Cuál es tu método de elección? ¿Prefieres codificar las cosas manualmente o que todo lo maneje un complemento? Sientete libre para compartir.