162 | Cómo crear una página de login personalizada en WordPress

En el episodio 162 de WordPress semanal te hablo de cómo personalizar la página de Login de WordPress y las distintas aproximaciones que puedes tomar. Vamos allá. Hola, hola, Soy Gonzalo, de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mayor satisfacción ni mejor inversión que la de crear y gestionar tu propia web con WordPress. Y hoy vamos a ver por qué puedes necesitar un inicio de sesión personalizado, de qué opciones tienes de modificar la página ya existente que nos trae WordPress o cómo puedes hacer, si así lo prefieres, para crear una página de login desde cero. También te voy a hablar de por qué se puede cambiar o de cómo se puede cambiar la URL por defecto, la que nos ofrece WordPress, la que viene con WordPress de login de inicio de sesión. Vamos a ver una pequeña variante de cómo podrías poner el inicio de sesión en la parte frontal, más allá de la página que tengas de login. Y por último, te hablaré de algunos plugins a este respecto para todos los supuestos que vamos a ver. Ya digo de antemano que hay muchísimos plugins, muchísimas opciones. Os voy a hablar de los que conozco y de los que me gustan. No necesariamente van a ser los mejores del mundo, pero son los que yo uso y los que os podría recomendar de primera mano según, repito, cada caso que veamos concreto. Pero antes, como siempre, nos vamos con las novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Bien, como cada semana tenéis un nuevo vídeo de la zona código en el que os enseño algo muy interesante si te interesa el CSS, y son los pseudoelementos before y after. Esto básicamente nos permiten poner a través de CSS contenido en la web que realmente no va a estar en el marcado. Es decir, nosotros normalmente, pues si queremos poner un título, si queremos poner un artículo, nosotros le damos un marcado con el HTML y después a través de CSS editamos, personalizamos ese marcado, esa estructura. Pues bien, hay veces en las que no hay que modificar ese marcado, no hay que modificar esa estructura, o que no podemos hacerlo, o que nos viene mejor directamente esta variante, y es colocar contenido, ya sea texto, ya sea una imagen, un icono, pero hacerlo directamente por CSS. Es un concepto muy chulo que si aprendes a usarlo te darás cuenta de todo lo que puedes llegar a conseguir porque es algo que da bastante juego. Este va a ser un primer vídeo introductorio sobre cómo se usan estos dos pseudoelementos. No son considerados elementos, sino pseudoelementos. Y si veo interés ya sabéis que me podéis sugerir cosas. De hecho en la página de este vídeo de la zona código, que ya es el 113, pues al final en la conclusión os dejo un enlace para que vayáis a un formulario en el que me podéis sugerir lo que queráis, estéis o no suscritos, me podéis sugerir episodios del podcast, me podéis sugerir lo que queráis. De nuevo, este es el episodio 113 y vemos los conceptos y cómo usarlos de before y after en el CSS. Luego por supuesto tenemos el curso del mes, que es el curso de GeneratePress al que ya dediqué un episodio y que si queréis más detalles pues podéis ir a Gonzalo es Cursos. Y no olvidad que en esta parte de enlaces donde tenéis el vídeo de la zona código, el curso del mes, tenéis el resto de enlaces que voy a ir comentando a lo largo del episodio. Como contenido relacionado, por ejemplo, tengo un tutorial de acceso libre para todos que es sobre plugins de registro y login. Es un tutorial muy completo con una relación, ya digo, de plugins tanto para el registro como para el login, aunque yo en este episodio voy a comentar los más relevantes. Fantástico. Una vez vistas las novedades, vamos con el plugin de la semana que es para integrar Contact Form Seven con MailChimp. Si recordáis en el episodio pasado habré de un plugin específico para Gravity Forms. En este caso os traigo un plugin específico para Contact Form 7, que es otro de los plugins de formulario más populares. Y esta es una extensión gratuita que se llama Contact Form Seven mailchimp Extension y te permite vincular tus formularios con el famoso gestor de email marketing, es decir, con MailChimp. Si usas MailChimp para llevar tu email marketing y usas Contact Form 7 para tus formularios en WordPress, pues esta es la forma perfecta en la que los puedes vincular. Es un plugin súper popular, más de 100.000 instalaciones activas y eso hace que por supuesto siempre vaya mejorando y siempre vaya a la última. Y bueno, su funcionamiento básicamente va a añadir automáticamente los datos de los envíos del formulario que se rellene en tu web a tus listas de suscriptores de mailchimp. Así que lo tenéis en la parte del plugin de la semana. Recordad que este es el episodio 162 del podcast WordPress semanal. Y ahora ya sí, vamos con el tema central. Cómo crear una página de login personalizada en WordPress. Y primero vamos a ver por qué puedes necesitar un inicio de sesión personal personalizado, porque puede que no lo necesites, pero si tienes una web en la que con frecuencia tus usuarios van a iniciar sesión, como un membership site, un e commerce o incluso un simple blog, pues puede ser una buena opción. Y no ya para el tipo de web en el que un usuario va a tener que acceder muchas veces, sino si a lo mejor tienes una web como puede ser un blog o un e commerce, en el que realmente un usuario no va a estar entrando todo el rato, no va a estar iniciando sesión todo el rato, pero sí que vas a tener muchos usuarios que van a iniciar sesión o una vez, pues también puede ser una opción interesante. Básicamente es decidir entre si prefieres o si te da igual que los usuarios que vayan a hacer login vean la página de login de WordPress, es decir, con el logo de WordPress, con el enlace a WordPress. Org, con los colores propios de WordPress, pues como digo, si te da igual, pues no pasa nada. De hecho hay muchas empresas bastante grandes que tienen su web con WordPress y que dejan el login oficial. Por ejemplo, las empresas que tienen que ver con con la venta de themes o ese tipo de empresas, como están muy muy relacionadas con WordPress, pues realmente todo el mundo sabe que usan WordPress y todo el mundo sabe que se dedican a ellos y te están vendiendo un theme de WordPress o un plugin de WordPress, pues lógicamente usan WordPress, ¿De acuerdo? Entonces ahí, pues ahí te darás cuenta de que hay muchas empresas de ese tipo que mantienen el login oficial y desde luego podrían cambiarlo porque hombre, son empresas que se dedican a esto y si quisieran, pues podrían cambiar la página de login fácilmente, pero han decidido que no. Pero como digo, si prefieres hacerlo porque quieres personalizar esa experiencia para tus usuarios, quieres que case más con tu branding, quieres que vaya en consonancia con la parte frontal de la web, pues entonces este episodio te va a interesar porque te voy a hablar de prácticamente todas las posibilidades que tienes para hacerlo. Y la primera de las opciones es si eliges la vía de modificar la página de login que ya viene con WordPress, es decir, pues tu web com wp login PHP o si vas a WP admin pues te redirige, salvo que estés conectado, te redirige a la página de Login PHP. Bien, pues esa misma página con esa URL y con ese archivo que nos viene con WordPress para mostrarnos esa página, pues tú puedes modificarla, puedes cambiar el logo, puedes cambiar los enlaces, porque cuando le das al logo verás que el logo lleva a la página de WordPress. Org, también puedes modificar los colores, pero incluso puedes ir más allá y cambiar completamente la disposición y la forma del formulario de inicio de sesión, podrías cambiar también la imagen de fondo, podrías poner las fuentes personalizadas y esto lo puedes hacer de varias formas y al final en la parte que hablo ya de plugins y de cómo hacer esto técnicamente, pues te lo explicaré más en detalle, pero básicamente esto que te he comentado de modificar la página ya existente de login lo puedes hacer tanto manualmente, por código o a través de plugins, después te diré cómo exactamente. Bien, esta es una de las opciones, pero tienes otra opción que es crear una página de login desde cero, es decir, pasar de la que nos da WordPress y crear la nuestra propia. Y aquí hay varias aproximaciones, porque si por ejemplo utilizas un Page Builder, pues seguramente ya venga con esas opciones para insertar un formulario de Login o incluso con una plantilla ya prediseñada enfocada a crear una página de inicio de sesión, por ejemplo pues con Elementor o con alguno de estos constructores más populares del que por supuesto tenéis un curso. Pero otra aproximación, si no usas un Page Builder tampoco pasa nada, puedes usar el editor normal de WordPress, ya sea Gutenberg si es que lo estás usando o ya sea el editor clásico y luego insertar un formulario que tú hayas creado para login. Para esto por supuesto necesitarás un plugin de formularios que te dé esta característica, por ejemplo ya vimos en el curso de WordPress Forms cómo trae esta característica y se puede crear tanto un formulario de inicio de sesión como uno de registro de forma súper sencilla. Después simplemente tienes que insertar esos formularios en la página que quieras y ya lo tienes. ¿Qué es lo bueno de esta aproximación? ¿Pues que te permite elegir los campos del formulario porque lo estás creando a medida, si a lo mejor quieres que en el registro te den más datos o menos datos o lo que quieras pues lo puedes personalizar, entonces esta es una opción muy muy útil para los que os encontréis en esta necesidad de pedir más datos por ejemplo en el registro, aunque en este caso estamos hablando de login pero van muy ligados sí? Pues bueno esas son básicamente las dos opciones o modificar la página existente o crear una nueva. Bien, luego aquí hay algo interesante que es bueno vale esto está muy bien pero si yo hago esto ¿Cómo puedo cambiar la URL de la página de inicio de sesión? Esto se puede hacer por dos cosas, una por seguridad, por evitar que pues los que intentan acceder a tu web a través los llamados ataques de fuerza bruta que lo que hacen es localizar tu página de inicio de sesión y y hacer a través de un programita pruebas y pruebas y pruebas y pruebas de usuario y contraseña distintas combinaciones de forma muy rápida porque ya digo lo hace un robot, un programa, pues una de las formas de poner lo difícil es ocultar esa página de inicio de sesión, hay muchas más formas, en el curso de seguridad en WordPress pues tenéis mil y un ejemplos pero luego está la aproximación de que no quieras que cuando alguien vaya a iniciar sesión no quieras que vaya a tu web com wp login php ¿Porque? Porque se ve ahí eso pues un poco no sé, no muy personalizado y prefieres que vayan a tu web com acceder por ejemplo o acceso o login, pues esto desde luego que puedes hacerlo y por ejemplo si lo haces luego editas esa página concreta, si llamas una página acceso pues puedes editarla por ejemplo como te he comentado antes desde cero con Elementor o con Gutenberg o con el editor clásico o con lo que quieras o luego tienes la aproximación de simplemente cambiar el nombre de la página oficial de WPLogin PHP cambiar ese nombre o esa ruta por otra, tienes ambas aproximaciones y de nuevo al final te diré cómo puedes conseguirlo. Pero antes de eso te quiero comentar otra aproximación o digamos algo que puede ser más complementario que otra cosa y es poner el inicio de sesión en la parte frontal de la web pero no hacerlo de la forma en la que te he dicho, pues por ejemplo creando una página a medida, llevándola diferente o lo que sea, que sí, que esa es una aproximación, pero extra aparte, aparte de tu página de acceso, sea la cual sea, la que sea, e independientemente de cómo lo hayas hecho, si modificando la oficial o creando una nueva. También puedes poner formularios de acceso extra, por ejemplo en la sidebar a través de un widget, que esto se puede hacer con el widget de Meta que ya viene con WordPress, o si por ejemplo has creado un formulario de login con WordPress Forms o con otro plugin de formularios, ya te trae, en el caso de WordPress Form en concreto, ya te trae un widget para que tú lo pongas, pues en cualquier área de widget, no tiene por qué ser en la sidebar, puede ser en el footer o donde tu theme te lo permita, o incluso a través de un shortcut, porque al ser un formulario tú puedes coger ese shortcut y pegarlo donde quieras, pues podrías ponerlo si te interesa en cualquier página, pues en un sitio que te interesase en un momento dado. De acuerdo, o sea que además de tu acceso normal, puedes ir poniendo el acceso donde te interese, por eso digo que esto es algo complementario. Y otra opción es ponerlo en formato ventana emergente, esto es algo que puede ser bastante cómodo para los usuarios y puedes poner por ejemplo un botón de acceder en el menú de tu web y que cuando la gente le dé pues se abra una ventana modal, una ventana emergente con la opción de que el usuario inicie sesión. ¿Y ahora en la parte de plugins te voy a decir cuáles puedes utilizar, de acuerdo? Pues bien, estas son un poquito todas las opciones que hay. Básicamente tenemos tres opciones a grandes rasgos, una, modificar el login oficial de WordPress. Dos, crear un login una página desde 0.3, alternativamente o de forma complementaria, poner facilidades para que la gente pueda iniciar sesión directamente desde cualquier página de tu sitio con WordPress de tu web. Una vez visto esto, vamos a ver qué plugins o incluso código podemos utilizar para todo esto que te he comentado en el episodio primero. Como te he dicho al principio, estos son algunos de los muchísimos plugins que hay para hacer este tipo de cosas. Estos de los que te hablo son plugins en los que puedes confiar, son plugins bastante utilizados y que a día de hoy son muy buenas soluciones, no quiere decir que sean los únicos ni que sean los mejores, son los que yo conozco y los que te puedo recomendar. En primer lugar, para modificar la página de login por defecto hay varios plugins, el que yo suelo utilizar se llama Login Designer, este plugin lo recomendé cuando apenas salió hace ya bastantes episodios en la parte del plugin de la semana, pues sabéis que a veces recomiendo plugins muy nuevos que yo les veo posibilidades pero pero que todavía no los conoce casi nadie. Pues bien, este es uno de esos casos en los que el plugin despegó un montón porque está muy bien y ya está activo en más de 9.000 webs con WordPress y si no recuerdo mal la primera vez que lo recomendé, que lo recomendé perdón, dudo que llegara a los mil, o sea que ha despegado bastante y es un plugin ya muy consagrado de nuevo se llama Login Designer. Hay otro muy parecido de la empresa Colorleap, ahora mismo no recuerdo el nombre, pero vamos si lo buscáis Color Lib y luego ponéis pues Customize Login o algo por el estilo lo vais a encontrar, es muy similar, los dos te permiten, desde el menú de personalizar de WordPress, te permiten construir y modificar a medida la página que viene por defecto de Login, le puedes cambiar todo, los colores, el fondo, el logo, puedes incluso poner el formulario por ejemplo a la izquierda y a la derecha dejarlo para una imagen donde incluso podrías poner, si usas una imagen con texto podría podrías poner algún tipo de anuncio o lo que sea, es bastante interesante, es un plan que está muy bien. Bien, eso es si quieres modificar la página de login por defecto, ¿Qué hay de si quieres crear logins a medida en una página aparte? Bueno, aquí lo que voy a hacer es dejarte los enlaces al curso de WordPress Forms y al curso de Elementor, pero como digo hay multitud de opciones, ya dependiendo de lo que tú uses y demás pues puedes buscar una alternativa u otra. También comentarte que al final del episodio en la parte de enlaces te dejo el tutorial que te he comentado, un tutorial donde hablo de plugins de registro y login, ahí tenéis también otros plugins que podéis utilizar para todo esto. Más cositas, ¿Qué pasa si quieres usar URLs diferentes para el login? Bien, aquí te recomiendo el plugin Theme My Login, este es súper popular, seguramente el más popular de todos los que te comento, perdón, y está activo en más de 100.000 webs con WordPress. Básicamente te permite renombrar y saltarse la página oficial de Login con las que tú tengas, por ejemplo si a la de Login la llamas acceder, pues tú lo pones, vas a las opciones de este plugin y dices que en lugar de ir a WP Login PHP pues se va a ir a acceder y luego tú a esa página de acceder, pues como tú quieras la modificas. También te permite renombrar la URL de la página de registro, la URL del cambio de contraseña, todo lo que tenga que ver con el registro y el login, todo, todo, todo lo puedes cambiar, puedes cambiar la URL. Luego también te he hablado de algo que me preguntáis bastante y es conseguir un login con ventana emergente. Bueno, los que usáis Genesis podéis usar el mismo que uso yo, que se llama Login ModelBox, es de WPStudio, tienen varios plugins para Genesis y están bastante bien, no están muy encima de este plugin, ahora no estoy seguro si lo van a seguir manteniendo o no, lo último que leí era que sí, pero te sale el típico mensaje cuando vas a WordPress Org de que hace mucho tiempo que no, que no sale, que están con la última versión de WordPress. Ya sabéis que cuando se actualiza un plugin o un theme, si hay una versión nueva de WordPress hay que especificarlo en el código del plugin o en el código del theme, pues llevan sin hacerlo bastante tiempo. En cualquier caso es el plugin que yo uso y me funciona bastante bien. Pero en cualquier caso tenéis otro que funcionaría tanto para Genesis como para cualquier página web que se llama Ajax Login and Registration Model Pop up, creo que es el único que hay en condiciones y te permite no sólo iniciar sesión, sino también registrarte con una ventana modal. Está bastante bien, es un plugin que está activo en 5.000 webs con WordPress y en la misma página del plugin podéis ver una demo de cómo funciona. En el caso del que uso yo de Genesis no siga siendo mantenido y vea que lo abandonen, pues tendré que cambiar a este plugin, porque a mí la verdad que me gusta esta forma. Creo que es muy útil para los usuarios el que se puedan conectar directamente en la página en la que estén con una ventana modal y y que luego se queden en esa página es como una experiencia mucho más interesante para mí, porque no mandas a nadie a otra página de acceso, sino que se queda siempre en la misma. Bueno, lo tenéis todo en las notas del programa, en la parte de enlaces y luego también os dejo un enlace ya como nota final, por si preferís vosotros mismos a través de código modificar el logo y la URL que os digo que os lleva a WordPress. Org de la página oficial, que esto es un cambio que podéis hacer súper sencillo y que ya le dais vuestro toque personal, cambiáis el logo, le ponéis el vuestro, le ponéis el enlace a vuestra página de inicio y ya lo tenéis. Es algo muy sencillito, que no tenéis que instalar ningún plugin extra y que es algo particularmente que yo hago bastante cuando no tengo que hacer una modificación muy grande, que también se puede hacer por código y lo podemos ver también en un vídeo de la zona código si queréis. Si queréis que veamos un rediseño completo de la página oficial de inicio de sesión de WordPress, lo podemos hacer por código porque es bastante más fácil de. De lo que puede parecer. Así que aquí tenéis este enlace, como digo, al vídeo de la zona código donde vemos cómo cambiar el logo, sí. Así que usar tu propio diseño y logo para la página de inicio de sesión puede dar bastante consistencia a tu web y es algo relativamente sencillo de conseguir. Si quieres hacerlo, pues ahí tienes todos los enlaces que te he dejado que te van a dar la solución que estás buscando, independientemente de la aproximación que quieras tomar. Y nada más, recuerda que para seguir aprendiendo a gestionar tu negocio o proyecto con WordPress, te invito a que pruebes el área para suscriptores durante 15 días sin compromiso. Tienes acceso a todo lo que te he comentado a lo largo del episodio, a todos los cursos, más de 40 y pico cursos ya, a todos los vídeos de la zona código, más de 115, a soporte personalizado conmigo, que sé de buena mano, que es una de las cosas que más valoráis. Y ya ves que no tienes nada que perder. Te apuntas, lo pruebas durante 15 días. ¿Que no quieres seguir? Me contactas, oye Gonzalo, no quiero seguir, no te pregunto ni siquiera por qué te devuelvo los 10 euros de ese primer mes y tan contentos, porque lo que quiero es que lo pruebes de. De primera mano y si quieres seguir pues nada, para adelante hasta que quieras llegar, ya sabéis que tampoco hay permanencia, cuando queráis daros de baja también me contactáis desde vuestra área de soporte y listo, no tenéis que hacer nada más. Y por último, si te gusta el podcast, si te gusta WordPress semanal, si te he aportado algo a lo largo de estos 162 episodios y quieres aportar tu granito de arena a este podcast, la forma perfecta a la que puedes hacerlo es dejándome una valoración en iTunes, ya sabes que es muy fácil, vas a tu aplicación de podcast, buscas WordPress semanal, bajas un poquito, en mi caso como tengo muchos episodios vas a tener que bajar bastante hasta que veas la parte de reseñas, le das a reseñas y dejas pues tu opinión, lo que consideres y lo que te parezca el podcast. Los que ya habéis escrito, de verdad, muchísimas gracias, que además sois un montón, os leo aunque no lo diga muy a menudo, me gusta pasarme por ahí por las reseñas y ver qué opinión tenéis, ver si también puedo mejorar algo, si hay cosas que pueda mejorar también es el sitio donde me lo podéis poner o yo que sé, decidme, me gustaría más episodios sobre este tema, pues yo lo tengo muy en cuenta vuestro feedback, porque al final pues me gusta publicar lo que os gusta, no tendría sentido hacerlo de otra manera. Y los que no estáis en iTunes, que también sé que sois muchísimos, me contactáis, cada vez por cierto estáis más en Spotify, también desde iVoox, sé que sois un montón ahí, bueno, donde sea, desde donde me escuchéis, de verdad, muchas gracias por la acción que podáis tomar, sea un me gusta, sea compartirlo en vuestro Twitter, compartirlo con amigos por email, a quien sea quien le pueda ayudar, pues también de verdad, muchísimas gracias. Nada más por este episodio, nos seguimos escuchando, adiós.