Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Wordpress

Personalizando la administración de WordPress: Pantalla de Login

28 octubre, 2013
en Wordpress
1
Como acceder a la administración de WordPress
Share on FacebookShare on Twitter

La pantalla de inicio de sesión de WordPress está bien diseñado, es limpia y sencilla funciona bien en todos los tamaños de pantalla. Pero si estás construyendo un sitio web y quieres personalizar para tu cliente con su propio logotipo veremos como hacer esto con bastante facilidad.

Como primera opción puedes sustituir la imagen que tiene ahora mismo tu wordpress, esta imagen está en la carpeta:

[highlight]wp-admin/images/wordpress-logo.png[/highlight]

Esto es muy rápido de hacer, busca una imagen de tu logo con el tamaño adecuado y listo. Solamente tiene un pero, que cada vez que actualices puede que te «cargues» la imagen y tengas que volver a subir el fichero.

Otra opción es hacer esta modificación a través de un plugin, la ventaja es que podremos utilizarlo en todos los sitios WordPress que desarrollemos.

Los pasos que voy a mostrar en este tutorial son:

  1. Adición de un logotipo personalizado
  2. Styling la pantalla de inicio de sesión – el logotipo, enlaces y botones

Resumen del Contenido

  • ¿Que necesitamos para seguir el tutorial?
  • 1. Añadimos nuestro logotipo
  • 2. Estilos para la pantalla de Login
  • 3. Añadiendo estilo a los enlaces
  • 4. Añadiendo estilos a los botones

¿Que necesitamos para seguir el tutorial?

  • Una instalación de WordPress
  • El acceso a la carpeta de plugins de tu sitio para agregar tu plugin
  • Un editor de texto para crear un plugin

Configuración del plugin

Con un editor de texto, puede ser el blcok de notas, Dreamweaver… lo que tengas a mano, creamos un fichero nuevo que llamaremos personalizar-longin.php. Todo lo guardaremos en una carpeta que llamaremos personalizar-admin-wp

En la parte superior podremos el siguiente texto, es un ejmplo podeis modificar a vuestro antojo:


/*Plugin Name: PersonalizarAdmin - Pantalla Login
Plugin URI: http://tutorialmonsters.com
Description: Personalizar la pantalla de login para Admini de WP
Version: 1.0
Author: Bernardo
Author URI: http://tutorialmonsters.com
License: GPLv2
*/

1. Añadimos nuestro logotipo

Buscamos nuestro logo y lo copiaremos a nuestra carpeta del plugin y dentro de esta a una carpeta que llamaremos media:

[highlight]wp-content/plugins/personalizar-admin-wp/logo.jpg[/highlight]

2. Estilos para la pantalla de Login

Además de añadir un logotipo también puedes cambiar su tamaño y añadir el estilo de otros elementos en la pantalla.

// añadimos el nuevo logotipo
function personalizar_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/logo.jpg' , __FILE__ ); ?> );
background-size: 300px auto;
height: 143px; /* altura de tu logo */
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'personalizar_logo' );
?>

El valor de altura se utiliza para mantener el aspecto del logo, en este caso son 143px. Usando 300px y auto para el background-size nos aseguramos que el logotipo sea tan amplio como el cuadro de inicio de sesión y que se mantiene la relación de aspecto proporcional

Ahora tednremos algo como esto:

personalizar-login-admin-wordpress

3. Añadiendo estilo a los enlaces

Además de cambiar el logo, podemos dar un poquito de estilo a los enlaces. Para ello tendremos el siguiente código:


// añadimos el logotipo
function personalizar_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/logo.jpg' , __FILE__ ); ?> );
background-size: 300px auto;
height: 143px;
}
.login #nav a, .login #backtoblog a {
color: #27adab !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #d228bc !important;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'personalizar_logo' );
?>

4. Añadiendo estilos a los botones

Por último, nos queda añadir un poco de estilo a los botones:


// añadiendo el logotipo
function personalizar_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/logo.jpg' , __FILE__ ); ?> );
background-size: 300px auto;
height: 143px; /* pon la altura de tu logotipo */
}
.login #nav a, .login #backtoblog a {
color: #27adab !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #d228bc !important;
}
.login .button-primary {
background: #27adab; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */
background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */
}
.login .button-primary:hover {
background: #85aaaa; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'personalizar_logo' );
?>

Ya tenemos lapantalla completamente personalizada, y nuestro fichero personalizar-login.php completo es el siguiente código (recuerda que tendrás que subir la carpeta con el plugin a tu FTP y activar para ver los resultados):


<?php
/*Plugin Name: Personalizar Admin - Pantalla Login
Plugin URI: http://tutorialmonsters.com
Description: Personalizar la pantalla de login para Admin de WP
Version: 1.0
Author: Bernardo
Author URI: http://tutorialmonsters.com
License: GPLv2
*/

// añadiendo el logotipo
function personalizar_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/logo.jpg' , __FILE__ ); ?> );
background-size: 300px auto;
height: 143px; /* pon la altura de tu logotipo */
}
.login #nav a, .login #backtoblog a {
color: #27adab !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #d228bc !important;
}
.login .button-primary {
background: #27adab; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */
background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */
}
.login .button-primary:hover {
background: #85aaaa; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'personalizar_logo' );
?>

Etiquetas: AdminCMSwordpress
ANUNCIO
Post anterior

Novedades con Bootstrap 3

Próximo Post

Personalizando la administración de WordPress: Escritorio

Otros Posts

6 plugins imprescindibles para tu web en WordPress

6 plugins imprescindibles para tu web en WordPress

22 junio, 2021
0

Crear una página web profesional en WordPress como lo haría una agencia online tipo Prismalia no es sencillo, pero gran parte del secreto de estas agencias, es la de contar con un un adecuado póker...

Ecwid: la mejor alternativa a Woocommerce en WordPress

Ecwid: la mejor alternativa a Woocommerce en WordPress

22 mayo, 2021
0

Todos sabemos que WooCommerce es el plugin mas utilizado en WordPress para montar una tienda online, incluso en la mayoría de los temas esta instalado de forma predeterminada. Si no te sale de lo habitual...

Por favor logueate para comentar

Recomendados

MySQL: Buscar y reemplazar partes de un texto

MySQL: Buscar y reemplazar partes de un texto

27 agosto, 2011
Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Introducción al HTML

10 diciembre, 2010
Mejora el SEO local con Google My Business

Mejora el SEO local con Google My Business

9 enero, 2021
Tutorial crear efecto metálico en un botón

Las Capas en Photoshop

16 enero, 2011

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .