Cómo cambiar facilmente el logotipo
y los estilos de acceso a WordPress

CATEGORÍA

Programación web

HERRAMIENTAS

WordPress, Elementor Pro,

Code Snippets

EJEMPLO

Cuando se trata de personalizar tu sitio web WordPress, uno de los elementos clave es el logotipo y los estilos de acceso. Afortunadamente, puedes lograr esto de manera sencilla utilizando el plugin «Code Snippets» para insertar fragmentos de código. A continuación, te guiaremos paso a paso en el proceso para cambiar el logotipo y los estilos de acceso en tu sitio WordPress.

Paso 1: Instalar el Plugin Code Snippets

Para comenzar, asegúrate de tener instalado y activado el plugin «Code Snippets». Este plugin te permitirá agregar fragmentos de código de manera segura y sin la necesidad de editar directamente los archivos del tema.

Paso 2: Agregar el Código para Cambiar el Logotipo y los Estilos de Acceso

Una vez que tengas el plugin instalado, sigue estos pasos para cambiar el logotipo y los estilos de acceso:

  • Accede al panel de administración de WordPress.
  • En el menú lateral, ve a «Snippets» y luego haz clic en «Add New» para agregar un nuevo fragmento.
  • Asigna un nombre descriptivo al fragmento, como «Cambiar Logotipo y Estilos de Acceso».
  • En el cuadro de texto del fragmento, copia y pega el siguiente código:
				
					function cambiar_logotipo_estilos() {
?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url('URL_DE_LA_IMAGEN');
background-repeat: no-repeat;
background-size: cover;
height: Xpx;
width: Xpx;
}
body.login {
background: #COLOR_HEX;
}
</style>
<?php
}
add_action('login_enqueue_scripts', 'cambiar_logotipo_estilos');

				
			

Paso 3: Personalizar el Código

Ahora, necesitas personalizar el código según tus preferencias:

  • En lugar de ‘URL_DE_LA_IMAGEN’, coloca la dirección de la imagen que deseas usar como logotipo.
  • En ‘Xpx’ dentro de ‘height’ y ‘width’, reemplaza ‘X’ con el tamaño deseado en píxeles para la imagen.
  • En ‘#COLOR_HEX’, cambia esto por el código hexadecimal del color que deseas para el fondo de acceso.

Paso 4: Guardar y Aplicar los Cambios

Una vez que hayas personalizado el código, haz clic en «Save Changes and Activate» para guardar y activar el fragmento. Asegúrate de habilitar la opción «Run snippet everywhere» para que los cambios se apliquen en todas las páginas de acceso.

¡Listo! Ahora, cuando accedas a la página de inicio de sesión de WordPress, verás el nuevo logotipo y los estilos personalizados que has configurado.

Conclusión:

Al seguir estos pasos, podrás personalizar fácilmente el logotipo y los estilos de acceso en tu sitio web WordPress. Esta simple modificación puede contribuir en gran medida a la coherencia de la marca y mejorar la experiencia de los usuarios al interactuar con tu sitio. ¡Experimenta y diviértete creando un aspecto único y atractivo para tu sitio web!