¿Quieres darle un toque profesional y único a la pantalla de login de WordPress? Con Handy Admin Tools, puedes personalizar el logo, ajustar su tamaño y hasta añadir un enlace de créditos al diseñador o desarrollador.
En este artículo, te explico cómo funciona este plugin y cómo puedes implementarlo en tu sitio para mejorar la experiencia de administración.
¿Qué hace Handy Admin Tools?
Este plugin añade una sección en el panel de administración de WordPress con las siguientes opciones:
✅ Subir un logo personalizado para el login.
✅ Ajustar el ancho y alto del logo.
✅ Añadir un enlace personalizado (por ejemplo, a tu web o portafolio).
✅ Mostrar un texto de footer (ideal para agencias o freelancers).
Todo esto sin necesidad de tocar código manualmente.
Cómo Configurar Handy Admin Tools
- Instalación y activación
- Sube el archivo del plugin a tu WordPress o crea un plugin personalizado con el código proporcionado.
- Accede a la configuración
- Ve a «Handy Admin Tools» en el menú de administración.
- Sube tu logo
- Usa el botón de carga para seleccionar una imagen desde tu biblioteca multimedia.
- Ajusta dimensiones
- Define el ancho y alto recomendados (ejemplo: 200x100px).
- Añade créditos (opcional)
- Inserta un enlace y texto para dar crédito al diseñador o desarrollador.
Código
class HandyAdminTools
{
public function __construct()
{
add_action("admin_menu", [$this, "add_admin_menu"]);
add_action("login_head", [$this, "customize_login_logo"]);
add_action("admin_init", [$this, "register_settings"]);
add_action("admin_enqueue_scripts", [$this, "enqueue_media_uploader"]);
}
public function enqueue_media_uploader()
{
wp_enqueue_media();
wp_enqueue_script(
"handy-admin-tools-script",
plugin_dir_url(__FILE__) . "handy-admin-tools.js",
["jquery"]
);
}
public function add_admin_menu()
{
add_menu_page(
"Handy Admin Tools",
"Handy Admin Tools",
"manage_options",
"handy-admin-tools",
[$this, "admin_page_html"],
"dashicons-admin-tools"
);
}
public function admin_page_html()
{
?>
<div class="wrap handy-admin-tools">
<h1>Handy Admin Tools</h1>
<form method="post" action="options.php">
<?php
settings_fields("handy-admin-tools-settings");
do_settings_sections("handy-admin-tools-settings");
submit_button();
?>
</form>
</div>
<style>
/* Custom CSS for the admin page */
.wrap.handy-admin-tools {
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.handy-admin-tools h1 {
font-size: 28px;
margin-bottom: 20px;
color: #333;
}
.handy-admin-tools input[type="text"],
.handy-admin-tools input[type="number"],
.handy-admin-tools input[type="url"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.handy-admin-tools .button {
background-color: #0073e6;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.handy-admin-tools .description {
font-style: italic;
margin-top: 5px;
color: #777;
}
</style>
<?php
}
public function register_settings()
{
register_setting(
"handy-admin-tools-settings",
"handy_admin_tools_login_logo"
);
register_setting(
"handy-admin-tools-settings",
"handy_admin_tools_logo_width"
);
register_setting(
"handy-admin-tools-settings",
"handy_admin_tools_logo_height"
);
register_setting("handy-admin-tools-settings", "custom_logo_link", [
"type" => "string",
"default" => "",
"sanitize_callback" => "esc_url_raw",
]);
register_setting("handy-admin-tools-settings", "designer_text", [
"type" => "string",
"default" => "",
"sanitize_callback" => "sanitize_text_field",
]);
add_settings_section(
"handy_admin_tools_main",
"Simple Login Editor",
null,
"handy-admin-tools-settings"
);
add_settings_field(
"login_logo",
"Login Logo",
[$this, "login_logo_field_html"],
"handy-admin-tools-settings",
"handy_admin_tools_main"
);
add_settings_field(
"logo_width",
"Logo Width",
[$this, "logo_width_field_html"],
"handy-admin-tools-settings",
"handy_admin_tools_main"
);
add_settings_field(
"logo_height",
"Logo Height",
[$this, "logo_height_field_html"],
"handy-admin-tools-settings",
"handy_admin_tools_main"
);
add_settings_field(
"custom_logo_link",
"Designer / Developer URL",
[$this, "custom_logo_link_field_html"],
"handy-admin-tools-settings",
"handy_admin_tools_main"
);
add_settings_field(
"designer_text",
"Designer/Developer Text",
[$this, "designer_text_field_html"],
"handy-admin-tools-settings",
"handy_admin_tools_main"
);
}
public function login_logo_field_html()
{
$login_logo = get_option("handy_admin_tools_login_logo"); ?>
<input type="text" id="handy_admin_tools_login_logo" name="handy_admin_tools_login_logo" value="<?php echo esc_attr($login_logo); ?>" />
<input type="button" class="button" id="handy_admin_tools_upload_button" value="Upload Logo" />
<p class="description">Recommended size: 200x100 pixels. Click 'Upload Logo' to select an image from the media library.</p>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#handy_admin_tools_upload_button').click(function(e) {
e.preventDefault();
var image = wp.media({
title: 'Upload Logo',
multiple: false
}).open()
.on('select', function(e){
var uploaded_image = image.state().get('selection').first();
var image_url = uploaded_image.toJSON().url;
$('#handy_admin_tools_login_logo').val(image_url);
});
});
});
</script>
<?php
}
public function logo_width_field_html()
{
$logo_width = get_option("handy_admin_tools_logo_width"); ?>
<input type="number" id="handy_admin_tools_logo_width" name="handy_admin_tools_logo_width" value="<?php echo esc_attr($logo_width); ?>" min="50" max="500" />
<p class="description">Recommended range: 50px to 500px. It's best to maintain the original aspect ratio of your logo.</p>
<?php
}
public function logo_height_field_html()
{
$logo_height = get_option("handy_admin_tools_logo_height"); ?>
<input type="number" id="handy_admin_tools_logo_height" name="handy_admin_tools_logo_height" value="<?php echo esc_attr($logo_height); ?>" min="50" max="300" />
<p class="description">Recommended range: 50px to 300px. Maintaining the aspect ratio of your logo for the best visual appearance is advised.</p>
<?php
}
public function custom_logo_link_field_html()
{
$custom_logo_link = get_option("custom_logo_link", ""); ?>
<input type="url" id="custom_logo_link" name="custom_logo_link" value="<?php echo esc_url($custom_logo_link); ?>" />
<p class="description">Enter the URL of the designer or developer's website.</p>
<?php
}
public function designer_text_field_html()
{
$designer_text = get_option("designer_text", ""); ?>
<input type="text" id="designer_text" name="designer_text" value="<?php echo esc_attr($designer_text); ?>" />
<p class="description">Enter the text for the designer/developer link.</p>
<?php
}
public function customize_login_logo()
{
$login_logo = get_option("handy_admin_tools_login_logo");
$logo_width = get_option("handy_admin_tools_logo_width");
$logo_height = get_option("handy_admin_tools_logo_height");
$custom_logo_link = get_option("custom_logo_link");
$designer_text = get_option("designer_text");
if ($login_logo) {
add_filter("login_headerurl", function () use ($custom_logo_link) {
return !empty($custom_logo_link) ? esc_url($custom_logo_link) : esc_url(home_url("/"));
});
echo '<style type="text/css">
.login h1 a {
background-image: url(' . esc_url($login_logo) . ') !important;
background-size: ' . esc_attr($logo_width) . 'px ' . esc_attr($logo_height) . 'px !important;
height: ' . esc_attr($logo_height) . 'px !important;
width: ' . esc_attr($logo_width) . 'px !important;
display: block;
}
.custom-designer-link {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #f1f1f1;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
</style>';
add_action('login_footer', function() use ($custom_logo_link, $designer_text) {
if (!empty($designer_text) && !empty($custom_logo_link)) {
echo '<div class="custom-designer-link"><a href="' . esc_url($custom_logo_link) . '" target="_blank">' . esc_html($designer_text) . '</a></div>';
}
});
}
}
}
new HandyAdminTools();
Beneficios de Usar Este Plugin
✔ Mejora la identidad de marca al mostrar tu logo en el login.
✔ Fácil de configurar sin necesidad de programación.
✔ Añade profesionalismo con créditos personalizados.
✔ Optimizado para SEO al mantener buenas prácticas de carga.
Conclusión
Handy Admin Tools es una solución sencilla pero poderosa para personalizar el login de WordPress. Ideal para agencias, freelancers o cualquier usuario que quiera dar un toque único a su panel de acceso.
¿Listo para probarlo? ¡Implementa este plugin y lleva la personalización de WordPress al siguiente nivel!
🚀 Bonus: Si necesitas más funcionalidades, puedes extender el código para añadir más opciones de personalización.
