ramonaraujo.es

Consultoría Gráfica y Web

Si eres de los que les gusta añadir un extra en sus implementaciones con WordPress y quieres saber como personalizar el acceso a su administración, sigue leyendo por que en este artículo voy a contarte como personalizar el logotipo que aparece por defecto al entrar en la página de acceso a WordPress.

Y no solo eso, además de mostraré como cambiar el enlace del logotipo y el texto que se muestra al pasar el ratón por encima. Para el cambio del logotipo y colocar el de tu marca o el de un cliente, necesitamos incorporar un código que subiremos a nuestro servidor junto con la imagen que queremos mostrar. Como ejemplo, te mostraré como lo hice yo con mi propio logotipo. Te indico a continuación los pasos a seguir..

Cambiar la imagen de acceso de WordPress sin plugins

Una forma de realizar este cambio de imagen en nuestro acceso a WordPress podría ser mediante la incorporación de un código en el archivo functions.php de la plantilla que estemos utilizando en ese momento, pero es muy posible que si necesitas actualizar dicha plantilla, se actualice el archivo functions.php y por lo tanto el código se pierda tras esa actualización.

En nuestro caso lo realizaremos añadiendo código de funciones personalizadas y por lo tanto WordPress al cargar nuestra web, mostrará lo que en este código nosotros le indiquemos. Como puedes ver en la imagen siguiente, así es como se muestra la página de acceso a WordPress en una instalación típica.

Login wordpress sin personalizar
El resultado que nosotros queremos conseguir es el que te muestro en la siguiente imagen donde como ves, he cambiado el logotipo de WordPress por el mío. Además como te indicaba, si pasamos el ratón por encima de la imagen lo que nos mostrará será el texto «Funciona gracias a WordPress» y si pulsas accederás a la propia web de WordPress. El siguiente paso que realizaremos será cambiar ese texto y el link.

Paso 1.

Lo primero que debemos hacer, es acceder a nuestro servidor vía ftp, cpanel, etc. y localizar la carpeta wp-content. Una vez dentro, creamos una nueva carpeta a la que llamaremos mu-plugins. Es en esta carpeta donde vamos a colocar los archivos necesarios para la personalización de nuestra administración de WordPress. Esta es una opción muy interesante debido a que lo que aquí coloquemos se deberá ejecutar al inicio de sesión. Caso diferente de los plugins convencionales que se pueden activar o desactivar según nos convenga.

Paso 2.

Como puedes ver, vamos a necesitar dos archivos, por un lado la imagen ( logotipo ) que queremos cambiar y un archivo ( custom-login.php ), donde colocar el código. Para el archivo de imagen puedes utilizar un .jpg o como en mi caso un .png. Para crear el archivo custom-login.php, puedes utilizar cualquier editor de texto, en mi caso utilizo el que viene por defecto en los equipos Mac, TextEdit. Acuérdate guardar el archivo con extensión .php y texto sin formato.

Paso 3.

Y para que no tengas que andar escribiendo el código aquí te lo dejo para que puedas copiarlo y pegarlo en tu archivo. Muy importante… recuerda cambiar la ruta ( dirección web ) donde tengas la imagen que quieres sustituir. Ahora que ya tienes los dos archivos necesarios para la personalización de tu administración de WordPress, solo te quedará subirlos a la carpeta mu-plugins ya creada en tu servidor y listo.

Código personalización logotipo WordPress

<?php
/**
* Plugin Name: Personalización del Admin de WordPress
* Plugin URI: https://ramonaraujo.es
* Description: Plugin de personalización para el Admin de WordPress
* Version: 1.0
* Author: Tu nombre
* Author URI: https://tudominio.com
* License: GPL+2
*/
// Modificar el logo del login
add_action(‘login_enqueue_scripts’,’bs_login_logo’);
function bs_login_logo() {
?>
<style type=»text/css» media=»screen»>
body.login div#login h1 a {
background-image: url(‘https://tudominio.com/wp-content/themes/nombre-de-tu-tema/mi-plugin/nombre-imagen-logotipo.png’);
background-size: auto;
height: 47px;
width: 100%;
}
</style>
<?php
}

?>

Cómo cambiar el texto que se muestra al pasar el ratón por encima del logotipo

Si todo esta correcto, el logotipo del acceso a la administración ahora mostrar el tuyo. Pero si pasas el ratón por encima observaras que muestra el texto «Funciona gracias a WordPress» y al pulsar actúa como un link que nos lleva a la página de WordPress.

El siguiente código, que añadiremos a continuación de la ultima línea de código anterior del archivo custom-login.php, lo que hace es cambiar ese texto y el enlace a donde queremos que nos lleve si lo pulsamos. En mi caso añadiré el texto que aparecerá será «ramonaraujo.es» y lógicamente al pulsar me llevará a mi propia web. Este código es un filtro que cambia el texto original por el nombre del WordPress en el que estes trabajando. Con el link hace lo mismo, cambia el original por el link de tu propio WordPress.

Código personalización texto y link en la administración de WordPress

<?php
/**
* Plugin Name: Personalización del Admin de WordPress
* Plugin URI: https://ramonaraujo.es
* Description: Plugin de personalización para el Admin de WordPress
* Version: 1.0
* Author: Tu nombre
* Author URI: https://tudominio.com
* License: GPL+2
*/
// Modificar el logo del login
add_action(‘login_enqueue_scripts’,’bs_login_logo’);
function bs_login_logo() {
?>
<style type=»text/css» media=»screen»>
body.login div#login h1 a {
background-image: url(‘https://tudominio.com/wp-content/themes/nombre-de-tu-tema/mi-plugin/nombre-imagen-logotipo.png’);
background-size: auto;
height: 47px;
width: 100%;
}
</style>
<?php
}
 // Modificar la url del logo
add_filter (‘login_headerurl’,’bs_login_logo_link’);
function bs_login_logo_link($url) {
return home_url();
}
// Modificar el título del logo
add_filter(‘login_headertitle’,’bs_login_logo_title’);
function bs_login_logo_title($message) {
$message = get_bloginfo(‘name’);
return $message;
}

?>

Espero que te sirva de ayuda y des ese extra en tus próximas implementaciones con WordPress.