Personalizar el Login Y Logo de WordPress es complicado?
Vamos a encontrar la respuesta a esta pregunta en este pequeño POST, WordPress es uno de los CMS mas usado de la Web con un porcentaje de 39.5% según esta publicación.
Por lo cual no cabe duda que tiene un posición fuerte en la WEB, una de las primeras cosas que queremos hacer es personalizar el login de WordPress creando un plugin. En el que podemos poner código que queramos usar en el mismo si quieres hacer mas modificaciones a tu WordPress lo puedes hacer utilizando este plugin sin necesidad de hacer cambios a la function.php de tu tema, ya que si actualizas el tema este puede ser sobrescrito y tus cambios ya no estarán disponibles para vos. .
Los cambios que queremos hacer es quitar el logotipo de WordPress y usar el de nosotros al mismo tiempo queremos cambiar el enlace a WordPress . Y después de Personalizar El Login Y Logo De WordPress los cambios quedan así.
Para Personalizar El Login Y Logo De WordPress crearemos el folder de el plugin, le llamare en este tutorial wp-site-login-logo cámbiale a un nombre que desees pero que identifique que es lo que hace. Echo eso, creamos otro folder y le llamamos assets adentro de el creamos otro folder y le llamamos images en este ira tu nuevo logo, crea tu nuevo logo y salvalo en el folder images tendrás algo así parecido ‘htdoc/wp-base/pluging/wp-site-login-logo/assets/images/mi-nuevo-logo.png’‘ ..
Adentro de el folder wp-site-login-logo ahora creamos un documento PHP y le llamamos wp-site-login-logo.php ojo, que esto es para tener consistencia y para que no vaya a ver un choque con otro plugin que creas o que bajes del plugin directorio de WORDPRESS. Ahora en el documento PHP para Personalizar El Login Y Logo De WordPress agrega la cabecera del Plugin, cámbialo a como te parezca.
<?php
/*
* Plugin Name: WP SITE LOGIN LOGO
* Plugin URI:
* Description: "Personalizar El Login Y Logo De WordPress"
* Tags: WordPress, Personalizar El Login Y Logo De WordPress
* Version: 0.0.1
* Author: UTAN aka Neumann Valle
* Author URI:
* License: GPLv2 or later
*/Una vez ya tenemos la cabecera agregamos el código que ara toda la magia , tratare de explicar lo mejor que pueda pero no sera tan extensivo.
/** nos aseguramos que nadie pueda accessar este documento */
defined("ABSPATH") || exit;Nos aseguramos que nadie tenga acceso a este documento PHP solamente WORDPRESS.
/** creamos funcion que nos retorna el home_url() */
function wp_site_login_logo_url()
{
return home_url();
}
/** agregamos esta funcion a wordpress como un filtro*/
add_filter( 'login_headerurl', 'wp_site_login_logo_url' );Con la función wp_site_login_logo_url()retornamos la URL de nuestro sitio. Y al usar el filtro login_headerurl cambiamos la URL o enlace que tiene por defecto WORDPRESS, por el URL de nuestro Website o Sitio de Internet.
/** ahora retornamos la descricion de nuestro sitio */
function wp_site_login_logo_url_title()
{
return esc_html__( get_bloginfo ( 'description' ) );
}
add_filter( 'login_headertext', 'wp_site_login_logo_url_title' );Ahora cambiaremos el texto del El Login De WORDPRESS creando otra función la llamaremos wp_site_login_logo_url_title una vez creada la usamos en el filtro de WORDPRESS llamado login_headertext.
Ahora viene el paso final para Personalizar El Login Y Logo De WordPress, ahora vamos a crear una función llamada wp_site_login_logo adentro de este tendremos el siguiente código;
function wp_site_login_logo() {
$plugin_dir = plugin_dir_url( __FILE__ );
echo <<<EOT
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url({$plugin_dir}/assets/images/cropped-vcomputadoras.com815x691_200x200-min.png);
height:174px;
width:200px;
background-size: 200px 174px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
EOT;
}El $plugin_dir tendrá la ruta absoluta de la raíz de tu plugin ejemplo ‘/htdoc/wp-base/pluging/wp-site-login-logo’ , después tenemos nuestro ECHO usando el EOT (mas aqui) al que le pasamos CSS. Échale un ojo background-image y cambialo a la dirección donde tu logo estará en el plugin, así mismo recuerda cambiar los valores del height y el width y del background-size que sea de la misma índole de tu imagen.
add_action( 'login_enqueue_scripts', 'wp_site_login_logo' );Ahora que todo esta echo, navega a la administración de tus plugin y activa tu plugin si todo va bien no veras ningún error y ya podes ir a la pagina de login de WORDPRESS y ver los cambios que hiciste.
Si al contrario te aburre lo que escribí, te dejo el código ya echo solo necesitas crear el documento para Personalizar El Login Y Logo De WordPress.
<?php
/*
* Plugin Name: WP SITE LOGIN LOGO
* Plugin URI:
* Description: "Personalizar El Login Y Logo De WordPress"
* Tags: WordPress, Personalizar El Login Y Logo De WordPress
* Version: 0.0.1
* Author: utan aka Neumann Valle
* Author URI:
* License: GPLv2 or later
*/
/** nos aseguramos que nadie pueda accessar este documento */
defined("ABSPATH") || exit;
/** creamos funcion que nos retorna el home_url() */
function wp_site_login_logo_url()
{
return home_url();
}
add_filter( 'login_headerurl', 'wp_site_login_logo_url' );
/** ahora retornamos la descricion de nuestro sitio */
function wp_site_login_logo_url_title()
{
return esc_html__( get_bloginfo ( 'description' ) );
}
add_filter( 'login_headertext', 'wp_site_login_logo_url_title' );
function wp_site_login_logo() {
$plugin_dir = plugin_dir_url( __FILE__ );
echo <<<EOT
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url({$plugin_dir}/assets/images/cropped-vcomputadoras.com815x691_200x200-min.png);
height:174px;
width:200px;
background-size: 200px 174px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
EOT;
}
add_action( 'login_enqueue_scripts', 'wp_site_login_logo' );