El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

WordPress: Trucos semanales

Cómo cambiar el logo de la pantalla de administración

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
WordPress como herramienta de gestión y creación se ha convertido por méritos propios es una completa solución de desarrollo de proyectos digitales que puedes adaptar a prácticamente todo tipo de necesidades. En esta serie semanal, dedicada por completo al desarrollo de proyectos digitales empleando WordPress, verás un amplio surtido de trucos, técnicas y plugins variados con los que podrás añadir nuevas posibilidades a todos nuestros proyectos orientados al mundo web. De esta forma conseguirás ahorrar tiempo y los esfuerzo necesarios para dar con ellos, aportándonos nuevos conocimientos de aplicación directa desde el primer momento.
05:58
  Añadir a marcadores

Transcripción

Ya sea en un proyecto propio o en un proyecto para un cliente, el vídeo de hoy nos va a servir para ver cómo podríamos aportarles un pequeño detalle de personalización. Estoy refiriéndome al cambio de logotipo principal que vemos en la pantalla de inicio de sesión de WordPress. Puede parecer algo banal en un primer momento, pero teniendo en cuenta que podemos tener entre manos un proyecto en el que el panel de administración juega un papel importante, quizás nos venga muy bien saber cómo aplicar la marca identidad en esta pantalla la que habitualmente estamos acostumbrados a ver el logotipo de WordPress. Aunque, actualmente, hay plugins que podemos descargarnos para tal fin, podemos ponernos manos a la obra, trabajar un poco con código PHP y realizar la personalización por nosotros mismos, sin códigos de terceros. No necesitaremos conocimientos avanzados de código y sentiremos la satisfacción de entender perfectamente qué es lo que hemos tenido que hacer para poder realizar este ajuste. Vamos a ver cómo aplicarlo. Para poder incorporar un logotipo personalizado dentro de la pantalla de login principal de WordPress, lo primero que tenemos que tener preparada es, evidentemente, una imagen. Podemos darle el tamaño que nosotros queramos porque luego se va a escalar automáticamente dentro de la pantalla. Y, por si ahora no nos diésemos cuenta, me estoy refiriendo a la pantalla que tenemos justo cuando podemos hacer login dentro de nuestro entorno, es decir, esta imagen de aquí. Estamos acostumbrados a ver el logotipo de WordPress y, si estamos preparando este proyecto para un cliente o simplemente somos nosotros mismos los que lo queremos personalizar un poco, bastaría saber que, si nos dirigimos al archivo de funciones, es decir, al functions.php que tendremos disponible dentro de la carpeta de nuestro tema, --vamos a mostrarlo también en pantalla--. Vamos a ir hacia atrás. Aquí lo tendríamos. Estoy dentro de la carpeta de temas; el tema que tengo activo. En este caso, tengo aquí el archivo de funciones. Bueno, pues, en ese archivo habría que incluir el siguiente código. Es una función que lo que hace es sobrescribir la regla de estilo con la que estamos indicando cuál es la imagen que queremos utilizar para mostrar en vez del ícono característico de WordPress. Tengo que indicar la ruta donde tengo esta imagen. En este caso, lo que estoy haciendo es obtener la ruta donde está ubicado el tema, es decir, los templates en los que estoy trabajando. Y luego, dentro de una carpeta llamada "imágenes", ahí tengo la imagen. Vamos a mostrarla, que la tengo aquí. Es lo que teníamos antes en pantalla. Y bueno, pues, incluyendo este código; guardando... Evidentemente, si, por ejemplo, pusiésemos otra extensión y no tenemos el archivo, pues va a fallar. Vamos a guardarlo. Vamos a recargar. Y, si recargásemos, no veríamos nada, evidentemente, porque no existe la imagen, con lo cual vamos a dejarlo como estaba previamente: extensión .jpg. Podemos ponerlo en formato GIF, en formato PNG. Guardamos. Volvemos a recargar. Y aquí tendríamos la imagen en el momento en que ya se encontrase nuevamente. Hay nuevas opciones, también para poder customizar esta página. Lo que podemos hacer es dirigirnos a la sección... Vamos a entrar con el usuario y contraseña. Y vamos a buscar un plugin que se llama Customize WordPress Login Page que tiene bastantes instalaciones activas, más de veinte mil, y además tiene una valoración muy, muy, muy positiva. Este plugin nos va a permitir añadir el logotipo, que es lo que hemos hecho nosotros sin necesidad de un plugin de terceros. Pero si queremos ir un poco más allá, bueno, pues podemos utilizar este plugin para cambiar la posición del formulario de Login, para cambiar colores, etc. Bastaría con descargarlo y empezar a trabajar con él. Vamos a dirigirnos a Plugins Añadir nuevo y vamos a incluirlo simplemente para ver cómo sería trabajar con este plugin. Hay muchísimos plugins disponibles para poder trabajar este aspecto en concreto. Vamos a instalar el que he comentado. Y, en este caso, bueno, pues, evidentemente, si yo creo que si solo quisiésemos configurar lo que es el logotipo, pues bastaría hacer uso del código que he mencionado anteriormente para no tener que seguir instalando más y más plugins que en el fondo interfieren en los tiempos de carga, en el consumo de recursos. Ya tengo aquí el plugin instalado; lo tengo activado de entre todos los plugins que tengo disponibles. Estaría aquí arriba. Y ahora lo que tengo que hacer es dirigirme a Ajustes y la opción correspondiente que se ha activado al incluir este plugin. Aquí tengo todas las opciones que tendría disponibles. Puedo añadir opciones de fondo de imagen. Puedo escoger la posición en la que aparecería: si flotando a la izquierda, a la derecha, en el centro. Si quiero cambiar el color de fondo para que tenga un color determinado; cualquiera de estos cambios bastaría con darle al botón correspondiente para aplicar los cambios en la página de Login dentro de mi proyecto de WordPress.