El formulario de acceso a la administración de WordPress tiene siempre el mismo aspecto, austero y sencillo, independientemente de quien haya creado la web, el idioma que se haya utilizado o la parte del mundo donde se creó o esté alojada.
Esta página se muestra a menudo a diferentes usuarios, los cuales acceden al contenido del sitio para añadir nuevas cosas, gestionar propiedades o acceder a zonas restringidas.
Ofrecer un aspecto personalizado de la página de acceso a la administración de WordPress puede ser una buena práctica para dar un toque de calidad y profesionalidad cuando, por ejemplo, entregamos un nuevo proyecto terminado a un cliente, o queremos ofrecer una marca blanca donde no aparezcan indicios de WordPress.
Formulario de acceso con Divi
En este tutorial vamos a realizar el diseño de una página de acceso a WordPress con el constructor Divi, así que si no lo tienesl, no podrás seguir los pasos.
Puedes conseguir el tema Divi de forma gratuita si te suscribes a Elegant Themes y cancelas la suscripción antes de que pasen 30 días, pero te recomiendo que adquieras la suscripción de por vida (liftime) y te quedes con ella, así no tendrás problemas de versiones, de seguridad, de actualizaciones o compatibilidades con otros elementos de WordPress en el futuro.
Instalar el tema Divi en WordPress
Antes de empezar a diseñar la página de acceso a la administración de WordPress con Divi, es necesario tener instalado el tema, subiéndolo a nuestro WordPress desde la pestaña "Temas".
Seguidamente ya podemos crear una nueva página, pero antes de usar el constructor "Divi Builder", en lugar del editor por defecto de WordPress, tenemos que poner un nombre al título de la página y seleccionar en la columna de la derecha "Blank Page" (página en blanco) en la opción "Plantilla".
Dentro de las opciones que aparecen para iniciar el diseño de una nueva página, elegimos la primera, "Construir desde cero", y a partir de ahí empezamos con la magia de los módulos, secciones y filas de Divi.
Configurar el acceso a la administración de WordPress con Divi
Al contar con numerosos módulos, vamos a poder diseñar y colocar casi cualquier cosa que queramos en la página de acceso a WordPress, y no limitarnos a mostrar sólo los campos de un simple formulario. Desde cualquier tipo de imagen, enlaces personalizados, artículos publicados o productos, si se tratase de una tienda.
Añadir los módulo de Divi para la página de acceso
Para este ejemplo voy a ser muy básico y a respetar los elementos que muestra WordPress, pero adaptados y modificados a mi gusto.
- Imagen de Logotipo (módulo de imagen)
- Formulario de acceso (módulo de iniciar sesión)
- Enlace a página principal (módulo de texto)
- Enlace a textos legales (módulo de texto)
El esquema de los módulos quedaría de la siguiente manera:
Al instalar todos los módulos de una vez sin ir configurándolos, quedará todo descolocado, pero ahora lo solucionaremos paso a paso empezando de abajo arriba, esto es, empezando por la sección que contiene el resto de elementos.
Configurar la sección de divi de la página de acceso
Primero vamos a ver lo que haremos y luego aplicamos los cambios. La sección debe ocupar toda la pantalla, independientemente del dispositivo donde se muestre, para que la imagen de fondo que utilizaremos llene siempre todo el espacio.
Antes de empezar a modificar las opciones de la sección, debemos tener presente que la imagen que utilicemos de fondo tiene que contar con una calidad decente para que no se vea borrosa o pixelada.
Como recomendación, si la imagen es abstracta, bastará con un tamaño de 1200 píxeles de ancho intentando reducir el peso del archivo al máximo que se pueda.
En el apartado "Fondo" de la pestaña "Contenido", añadimos la imagen que hemos elegido para el fondo e indicamos, en el apartado del tamaño, que cubra siempre toda la pantalla.
Dependiendo de la parte que más nos guste de la fotografía, elegimos la posición más adecuada.
En la pestaña "Diseño", añadimos los valores del tamaño:
- Anchura 100%
- Alineado al centro
- Altura 100vh (altura vertical completa)
Y también ponemos a cero todos los espacios de las separaciones.
Colocar logotipo o marca principal
Si queremos mostrar un logotipo o una marca, utilizaremos un módulo de imagen, como el que hemos añadido al configurar la página. Puede ser identificativo de la web a la que accedemos o, por ejemplo, de la empresa que ha diseñado el sitio.
Si es pertinente, colocamos un link que dirija a un destino concreto al picar sobre el logotipo.
Desde la pestaña "Diseño" ajustamos el tamaño, procurando que no exceda de unos 200 o 250 píxeles para que se pueda ver bien en los dispositivos móviles.
Configuración del módulo de inicio de sesión
Este módulo puede tener muchas interpretaciones, puedes dejarlo como aparece en dos columnas, cambiar los colores y modificar todas las opciones que quieras dentro de las propiedades del módulo, ya que los campos más importantes, el nombre y la contraseña, ya están configurados.
En mi caso sí que voy a cambiar el aspecto a una sola columna para que ocupe menos espacio, y para eso accedemos a la pestaña "Avanzado", opción "CSS Personalizado", y a los elementos del módulo para añadir lo siguiente en los campos de "Descripción de inicio de sesión" y "Formulario de inicio de sesión":
1 2 3 | width: 100% !important; float: none; padding: 0 !important; |
En la pestaña "Contenido" cambiamos el texto del título del módulo y de la descripción. En el apartado "Fondo" cambiamos o elegimos otro color:
- Título: ACCESO A LA ADMINISTRACIÓN
- Descripción: Datos de acceso
- Fondo: Transparente
Dentro de la pestaña "Diseño" lo más importante es el tamaño y la separación, configurando una anchura máxima de 350px y una separación de 0px en todas partes.
El resto de opciones son más personales y pueden ir a gusto de cada persona, o siguiendo una línea corporativa del sitio.
En mi caso he añadido una sombra a los campos del usuario y contraseña, personalizado el botón con fondo negro y cambiado el tamaño y la posición del título.
Enlaces a la página principal y textos legales
Los links, o enlaces de la página de acceso a la administración de WordPress creada con Divi, se realizan con módulos de texto, podemos utilizar módulos independientes para cada enlace o utilizar un solo módulo donde añadir los dos links.
Ambos enlaces se configuran igual cambiando el texto y el link usando las opciones del editor de texto que trae el módulo.
Con todo esto ya tendríamos terminada la página de acceso a la administración de WordPress, pero falta el paso más importante, sustituir la página actual por defecto de WordPress por la que hemos diseñado nosotros.
Cambiar la URL de acceso a la administración de WordPress
Aquí se complica la cosa un poco, pero no tanto como para tener que abandonar, aunque no tengas conocimientos de programación, yo te voy a dar todo el código y donde debes colocarlo.
Son tres líneas de código php que se pueden colocar en diferentes sitios según las preferencias, puedes añadirlo al archivo "functions.php" de un tema hijo o crear tu propio archivo que puedes subir a WordPress como si fuese un plugin para activarlo y desactivarlo cuando quieras.
En el siguiente código tienes que poner la URL de la página que hemos creado sustituyendo donde pone "Aquí tu URL" manteniendo las comillas, en mi caso, la URL de mi nueva página es "https://www.aprendepasoapaso.com/accesowp". (Por supuesto que la cambiaré por seguridad una vez que termine de publicar este artículo).
Si tienes un tema hijo
1 2 3 4 | function cambio_url_de_acceso_admin() { return 'Aquí tu URL'; // Cambia 'Aquí tu URL' por la URL que has creado } add_filter('login_url', 'cambio_url_de_acceso_admin'); |
El código de arriba es el que tendremos que colocar al final del archivo "functions.php" del tema hijo.
Puedes aprender a crear un tema hijo desde cero en este tutorial.
Cambiar URL de acceso con tu propio archivo
Los pasos a seguir son muy sencillos:
- Crear el archivo php
- Guardarlo en una carpeta y comprimirlo en .zip
- Subirlo a WordPress como un plugin y activarlo
Si no quieres crear un tema hijo, la mejor opción es abrir un bloc de notas o un editor de código gratuito como "Visual Studio Code" (no uses el WordPad o el Word de Office porque no valen para escribir código y te dará un error) y colocar el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php /* Plugin Name: AccesoWP Plugin URI: https://www.ingresosviaweb.com Description: Plugin para modificar el formulario de acceso a WordPress Author: Juan Martín Author URI: https://www.ingresosviaweb.com License: GPLv2 o posterior */ function cambio_url_de_acceso_admin() { return 'Aquí tu URL'; // Cambia 'Aquí tu URL' por la URL que has creado } add_filter('login_url', 'cambio_url_de_acceso_admin'); |
Los datos que aparecen puedes personalizarlos con los tuyos sin problema.
A la hora de guardarlo lo nombramos con un nombre sencillo, sin espacios y con la extensión .php, por ejemplo "funcion.php" o "cambiourlacceso.php"
El archivo resultante hay que meterlo en una carpeta con el mismo nombre que aparece en la cabecera del código, en el apartado "Plugin Name", que es AccesoWP, y comprimirlo en formato .zip (Si tienes acceso al hosting puedes subir la carpeta sin comprimir dentro de la ruta donde se colocan los plugins).
Con el archivo comprimido, accedemos a WordPress, al apartado de plugins, y lo subimos e instalamos como cualquier otro plugin. Luego lo activamos y ya empezaría a funcionar.
Sal del administrador y accede de nuevo, aparecerá directamente la nueva página de acceso a la administración de WordPress que hemos diseñado y personalizado.
Tal vez te interese...
Cómo diseñar una landing page creada con Divi y Extra
Cómo configurar una anchura personalizada de columnas en DIVI
Cómo adjuntar archivos a un formulario de contacto en Divi
Comprar Divi con Descuento en Cyber Monday: La Oferta del Año en Elegant Themes
0 comentarios