Crea un Widget de WordPress Personalizado: Guía Completa para tu Panel de Administración

El panel de administración de WordPress es el centro de control de tu sitio web. Sin embargo, a menudo puede parecer genérico. ¿Qué tal si pudieras personalizarlo para que refleje la identidad de tu marca y muestre información esencial de tu empresa de un vistazo? Con un widget de WordPress personalizado, esto es posible.

Este artículo te guiará a través de un código sencillo pero potente que te permitirá añadir un widget con la información de tu empresa directamente en tu escritorio de WordPress. Ideal para agencias, freelancers o cualquier propietario de sitio que desee dejar su huella.

¿Por Qué un Widget Personalizado?

Un widget personalizado en el panel de administración ofrece varias ventajas:

• Branding: Refuerza la identidad de tu marca cada vez que tú o tus clientes inician sesión.
• Acceso Rápido: Proporciona un acceso instantáneo a información de contacto clave para ti o tus clientes.
• Profesionalismo: Demuestra un mayor nivel de personalización y atención al detalle en tus proyectos.
• Comunicación Eficiente: Si trabajas con clientes, es una forma rápida de que tengan a mano tus datos de contacto.

El Código para tu Widget Personalizado

A continuación, te presentamos el código PHP que puedes utilizar. Es fundamental que reemplaces los valores ficticios con la información real de tu empresa.

/**
 * Widget personalizado para el Panel de Administración de WordPress
 * 
 * Instrucciones:
 * 1. Reemplaza los valores ficticios en las variables abajo con la información de tu empresa.
 * 2. Pega este código en el archivo functions.php de tu tema o en un plugin personalizado.
 */

// Personaliza estas variables con la información de tu empresa
$company_name = 'Tu Nombre de Empresa'; // Reemplaza con el nombre de tu empresa
$company_url = 'https://www.tuempresaweb.com '; // Reemplaza con la URL de tu sitio web
$company_email = '[email protected]'; // Reemplaza con el correo electrónico de tu empresa
$company_phone = '+1 234 567 8900'; // Reemplaza con el número de teléfono de tu empresa
$logo_url = 'https://tudominio.com/ruta/a/tu-logo.png '; // Reemplaza con la URL directa a tu logo
$background_color = '#FFFFFF'; // Reemplaza con el código hexadecimal para el color de fondo
$text_color = '#222222'; // Reemplaza con el código hexadecimal para el color del texto
$link_color = '#FF0050'; // Reemplaza con el código hexadecimal para el color de los enlaces

add_action('wp_dashboard_setup', function() use ($company_name, $company_url, $company_email, $company_phone, $logo_url, $background_color, $text_color, $link_color) {
    wp_add_dashboard_widget(
        'custom_dashboard_widget',
        $company_name,
        function() use ($company_name, $company_url, $company_email, $company_phone, $logo_url, $background_color, $text_color, $link_color) {
            ?>
            <div style="padding: 20px; text-align: center; background-color: <?php echo $background_color; ?>; color: <?php echo $text_color; ?>; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0,0,0,0.1);">
                <img src="<?php echo $logo_url; ?>" alt="<?php echo $company_name; ?> Logo" style="max-width: 100%; height: auto; margin-bottom: 20px;">
                <h2 style="font-size: 24px; margin-bottom: 15px;"><?php echo $company_name; ?></h2>
                <p style="font-size: 16px; margin-bottom: 10px;"><a href="<?php echo $company_url; ?>" target="_blank" style="text-decoration: none; color: <?php echo $link_color; ?>;"><?php echo $company_url; ?></a></p>
                <p style="font-size: 16px; margin-bottom: 10px;">Correo electrónico: <a href="mailto:<?php echo $company_email; ?>" style="text-decoration: none; color: <?php echo $link_color; ?>;"><?php echo $company_email; ?></a></p>
                <p style="font-size: 16px;">Teléfono: <a href="tel:<?php echo $company_phone; ?>" style="text-decoration: none; color: <?php echo $link_color; ?>;"><?php echo $company_phone; ?></a></p>
            </div>
            <?php
        }
    );
});

Cómo Implementar el Código

Tienes dos opciones principales para añadir este código a tu sitio de WordPress:

1. Usando Code Snippets (Recomendado): Esta es la forma más segura y recomendada. Instala y activa el plugin Code Snippets. Luego, ve a Snippets > Add New, pega el código, dale un título y asegúrate de que esté activo. Esto evita que pierdas tu widget si actualizas o cambias de tema.
2. En el archivo functions.php de tu tema hijo: Si te sientes cómodo editando archivos del tema, puedes pegar este código al final del archivo functions.php de tu tema hijo. Nunca edites el functions.php de un tema padre, ya que los cambios se perderán con las actualizaciones.

Personaliza a tu Gusto

El código incluye varias variables que puedes modificar para adaptar el widget a tus necesidades:

• $company_name: El nombre de tu empresa.
• $company_url: La URL de tu sitio web.
• $company_email: Tu dirección de correo electrónico.
• $company_phone: Tu número de teléfono.
• $logo_url: La URL directa a tu logotipo. Asegúrate de que tu logo esté subido a tu biblioteca de medios de WordPress o a un CDN.
• $background_color: El color de fondo del widget (usa códigos hexadecimales).
• $text_color: El color del texto dentro del widget.
• $link_color: El color de los enlaces (URL, email, teléfono).

Simplemente cambia los valores entre comillas simples por tu información.

Este widget personalizado no solo mejora la estética de tu panel de administración, sino que también sirve como una herramienta útil para mantener tu información clave siempre visible. ¡Anímate a implementarlo y dale un toque más profesional a tu sitio de WordPress!