Añadir un widget personalizado en el Dashboard de WordPress

En este artículo, vamos a explorar cómo crear un snippet para añadir un widget personalizado en el Dashboard de WordPress. Este widget mostrará información de soporte y opciones de contacto para los usuarios del sitio web. El código proporcionado es un ejemplo de cómo se puede implementar esta funcionalidad.

Añadir un widget personalizado en el Dashboard de WordPress

Código del Snippet

// Añadir el widget al Dashboard
function add_custom_dashboard_widget() {
    wp_add_dashboard_widget(
        'widget_agency', // ID del widget
        'SOPORTE WEB', // Título
        'custom_dashboard_widget_content' // Función de contenido
    );
}
add_action('wp_dashboard_setup', 'add_custom_dashboard_widget');

// Contenido del widget
function custom_dashboard_widget_content() {
    // Obtener el dominio del sitio web
    $site_domain = $_SERVER['SERVER_NAME'];

    // Mensaje de WhatsApp
    $whatsapp_message = "Hola, te escribo desde la web de " . $site_domain;
    $whatsapp_url = "https://wa.me/34607954490?text=" . urlencode($whatsapp_message);

    ?>
    <style>
    #widget_agency .postbox-header {background: #fc0274;}
    #widget_agency .postbox-header h2 {color: #fff;}
    #widget_agency .handle-order-higher {color: #fff!important;}
    #widget_agency .handle-order-lower {color: #fff!important;}
    #widget_agency .toggle-indicator {color: #fff;}
    </style>
    <div>
        <center>
        <img src="https://www.generacionweb.es/wp-content/uploads/2023/08/logo.jpg" alt="Generacionweb" style="width: 100%; max-width:250px; padding:30px 10px 10px 10px">
            <p><b>¡Gracias por confiar en Generacionweb!</b></p>
            <p>Para cualquier consulta puedes enviarnos un correo a <a href="mailto:hola@generacionweb.es">hola@generacionweb.es</a>. Si lo prefieres puedes llamarnos al teléfono <b>96 143 55 23</b> o contactar a través de <a href="<?php echo $whatsapp_url; ?>">Whatsapp</a>.</p>
        <p><br><a target="_blank" href="https://www.generacionweb.es" class="button button-primary" style="background:#fc0374;border-color:#fc0374;color:#fff">Visitar Generacionweb</a></p>
        </center>
    </div>
    <?php
}

 

¿Cómo Funciona?

Añadir el Widget al Dashboard

La función add_custom_dashboard_widget() se encarga de añadir el widget al Dashboard de WordPress. Utiliza la función wp_add_dashboard_widget() para registrar el widget con un ID único, un título y una función que generará el contenido del widget.

Contenido del Widget

La función custom_dashboard_widget_content() se encarga de generar el contenido del widget. En este caso, muestra información de soporte y opciones de contacto, incluido un enlace para enviar un mensaje de WhatsApp.

Casos de Uso del Snippet

Este snippet es especialmente útil para:

  1. Agencias de Desarrollo Web: Para proporcionar un canal de soporte directo a sus clientes.
  2. Tiendas en Línea: Para ofrecer soporte al cliente de manera rápida y eficiente.
  3. Blogs y Sitios de Contenido: Para mantener una línea de comunicación abierta con los lectores o colaboradores.

Personalización y Estilo

El snippet también incluye estilos CSS para personalizar la apariencia del widget. Puedes modificar estos estilos según las necesidades de tu proyecto.

Conclusión

Agregar un widget de soporte en el Dashboard de WordPress es una excelente manera de ofrecer un canal de comunicación directo con los usuarios del sitio. Este snippet hace que el proceso sea sencillo y eficiente, permitiendo una fácil personalización y adaptación a diferentes casos de uso.

¡Más Snippets, Más Opciones!

Al compartir, motivamos a más desarrolladores a contribuir. Ayúdanos a hacer de este directorio un punto de referencia en snippets.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

¿Necesitas un snippet? Pídenoslo

¿No encuentras el código que necesitas? Pídenoslo y te ayudamos. También puedes publicar tus snippets.

¿Cómo implementar este snippet en la web?

Tienes 2 opciones, una de ellas es mediante plugin y la otra pegando el código en tu web.

1. Añadir snippet con plugin

code-snippets

Code Snippets

Por Code Snippets Pro

  1. Descarga el plugin o búscalo en el repositorio de plugins de Wordpress e instálalo en tu web.
  2. En el menú lateral del Escritorio verás un nuevo enlace (Fragmetos de código). Ves a Fragmentos de código > Añadir nuevo.
  3. Se abrirá una página con un título, bloque de código, descripción y etiquetas, rellena el título con el que quieras guardarlo, ejemplo: Añadir Google Analytics.
  4. En la parte código verás que está activo PHP, ahí pega el código del snippet
  5. La descripción y las etiquetas solo son para tu información y para que luego encuentres más fácil los snippets.
  6. Publicar y activar el snippet.

2. Añadir snippet en el functions.php

Diseño web con WordPress

Accede al archivo functions.php de tu tema o tema hijo, pega el snippet y guarda el archivo.

Lo encontrarás en Apariencia > Editor de archivos de tema, pinchas sobre el enlace  functions.php y pegas el código al final del archivo.

condiciones de uso diseño web

¿Necesitas un snippet?

Cuéntanos que necesitas e intentaremos crear un snippet que lo realice. Si lo conseguimos, lo publicaremos y te avisaremos por correo.

¡Comparte tu snippet!

Si has creado un snippet y quieres compartirlo, envíanoslo y lo publicaremos enlazando tu web debajo de la publicación.

Relacionados:

Enviar contenido a mi correo

Guárdarte el contenido en tu correo para probarlo más tarde.