Botón de on/off para el plugin Query Monitor • Chez Brasofilo

El plugin Query Monitor es una herramienta esencial para desarrolladores de WordPress.

Este plugin auxiliar resuelve el siguiente problema: cuando necesitamos ver el código fuente de la página, especialmente en el frontend, QM puede ser muy intrusivo.

El autor del plugin sugiere esta solución para usar en el archivo wp-config.php:

if ( ! defined( 'WP_ADMIN' ) || ! WP_ADMIN ) {
    define( 'QM_DISABLED', true );
}

Mi plugin ofrece un botón para activar/desactivar esto en la Barra de Administración.

Solo tienes que hacer clic en el icono de la barra de administración para mostrar/ocultar QM en el frontend. Si el icono está azul, significa que QM está activo en el frontend; si está sin color, significa que está inactivo.

Instrucciones de Uso

Copia el archivo «query-monitor-toggle.php» en el directorio mu-plugins de WordPress.
Después de la instalación, los administradores encontrarán un nuevo icono en la barra de administración.

Hacer clic en este botón alterna la visibilidad en el frontend de Query Monitor sin recargar la página.
Para extender esta funcionalidad al área administrativa, visita la página Plugins > Indispensables (/wp-admin/plugins.php?plugin_status=mustuse) para marcar «También desactivar en el área administrativa» – esta configuración aparece como una casilla de verificación adicional junto a los enlaces de acción del plugin.

`query-monitor-toggle.php`

<?php
/**
 * Plugin Name: QM Disabler Toggle
 * Description: Allows toggling the plugin Query Monitor on/off on the frontend with an admin bar button.
 * Plugin URI: https://brasofilo.com/en/admin-bar-button-to-enable-disable-query-monitor/
 * Version: 1.3.2
 * Author: Rodolfo Buaiz
 * Author URI:  http://brasofilo.com
 */

/**
    Usage:
    - When enabled (default state), the plugin disables Query Monitor on the front-end (blue icon = active)
    - Click the admin bar button to instantly toggle Query Monitor's visibility (no page reload required)
    - For complete control, check "Also disable in admin area" in the Plugins page settings
    - All settings persist between sessions and automatically apply to all site visitors
    - Visual indicators show current status: blue icon (active), dark gray icon (inactive), with contextual tooltips 
*/

/**
 * Translations class
 */
class QMDT_Translate {
    const T = [
        'pt_BR' => [
            'Also disable in admin area' => 'Também desativar na área administrativa',
            'QM disabled on the frontend' => 'QM desativado no frontend',
            'QM enabled on the frontend' => 'QM ativado no frontend',
            'Unauthorized' => 'Não autorizado',
            'QM Disabler Toggle does not run if Query Monitor is inactive or not installed.' => 'O controle de desativação do QM não funciona se o Query Monitor estiver inativo ou não instalado.',
            'QUERY MONITOR IS DISABLED OR NOT INSTALLED' => 'QUERY MONITOR ESTÁ DESATIVADO OU NÃO INSTALADO',
        ],
        'es_ES' => [
            'Also disable in admin area' => 'También desactivar en el área administrativa',
            'QM disabled on the frontend' => 'QM desactivado en el frontend',
            'QM enabled on the frontend' => 'QM activado en el frontend',
            'Unauthorized' => 'No autorizado',
            'QM Disabler Toggle does not run if Query Monitor is inactive or not installed.' => 'El control de desactivación de QM no funciona si Query Monitor está inactivo o no instalado.',
            'QUERY MONITOR IS DISABLED OR NOT INSTALLED' => 'QUERY MONITOR ESTÁ DESACTIVADO O NO INSTALADO',
        ],
    ];
    
    public static function __($text) {
        $locale = get_locale();
        return self::T[$locale][$text] ?? $text;
    }
    
    public static function _e($text) {
        echo self::__($text);
    }
}

/**
 * Main class
 */
class QM_Disabler_Toggle {

    /**
     * Singleton instance
     * @var QM_Disabler_Toggle
     */
    private static $instance;

    /**
     * Option name for storing the toggle state
     * @var string
     */
    private $option_name = 'qm_disabler_enabled';

    /**
     * Main plugin instance
     * 
     * @return QM_Disabler_Toggle Singleton instance
     */
    public static function get_instance() {
        if (!isset(self::$instance)) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    /**
     * Class constructor. Initializes plugin hooks.
     */
    private function __construct() {
        // Disable QM early if needed
        $this->maybe_disable_qm();
        
        // Admin bar integration
        add_action('admin_bar_menu', [$this, 'add_admin_bar_button'], 999);
        
        // AJAX handlers
        add_action('wp_ajax_toggle_qm_disabler', [$this, 'toggle_qm_disabler']);
        
        // Scripts and styles
        add_action('admin_footer', [$this, 'add_ajax_script']);
        add_action('wp_footer', [$this, 'add_ajax_script']);
        add_action('wp_head', [$this, 'add_ajax_url']);
        add_action('wp_enqueue_scripts', [$this, 'add_jquery']);
        
        $action_link = is_multisite() ? 'network_admin_' : '';
        add_filter( "{$action_link}plugin_action_links_query-monitor-toggle.php", [$this, 'plugin_action_links'], 20, 4 );
        add_action('admin_footer-plugins.php', [$this, 'toggle_admin_option']);
        add_action('wp_ajax_toggle_qm_admin_option', [$this, 'toggle_admin_option_ajax']);
    }

    /**
     * Disables Query Monitor on frontend if enabled
     */
    public function maybe_disable_qm() {
        $fully_disable = get_option('qm_fully_disable', false);
    
        if ($this->is_enabled() && ($fully_disable || !is_admin())) {
            define('QM_DISABLED', true);
        }
    }

    /**
     * Checks if QM is currently disabled on frontend
     * 
     * @return bool True if QM is disabled on frontend
     */
    public function is_enabled() {
        $opt = get_option($this->option_name, 'on');
        return $opt === 'on';
    }

    /**
     * Gets the current button color based on state
     * 
     * @return string Hex color code
     */
    private function get_color() {
        return $this->is_enabled() ? '#23282d' : '#3B88C3';
    }

    /**
     * Gets the current button tooltip text based on state
     * 
     * @return string Translated tooltip text
     */
    private function get_text() {
        return $this->is_enabled() 
            ? QMDT_Translate::__('QM disabled on the frontend')
            : QMDT_Translate::__('QM enabled on the frontend');
    }

    /**
     * Adds the toggle button to admin bar
     * 
     * @param WP_Admin_Bar $wp_admin_bar The admin bar object
     */
    public function add_admin_bar_button($wp_admin_bar) {
        if (!current_user_can('manage_options')) {
            return;
        }

        $wp_admin_bar->add_node([
            'id'    => 'qm-disabler-toggle',
            'title' => $this->get_svg($this->get_color()),
            'href'  => '#',
            'meta'  => [
                'title' => $this->get_text(),
                'class' => 'qm-disabler-toggle',
            ],
        ]);
    }

    /**
     * Handles the AJAX toggle request
     */
    public function toggle_qm_disabler() {
        check_ajax_referer('qm_disabler_nonce', 'nonce');
        
        if (!current_user_can('manage_options')) {
            wp_send_json_error(QMDT_Translate::__('Unauthorized'), 403);
        }

        $new_state = $this->is_enabled() ? 'off' : 'on';
        update_option($this->option_name, $new_state);

        wp_send_json_success([
            'new_text'  => $this->get_text(),
            'new_state' => ($new_state === 'on'),
            'new_color' => $this->get_color()
        ]);
    }

    /**
     * Adds plugin action links
     */
    public function plugin_action_links($actions, $plugin_file, $plugin_data, $context) {
        if (strpos(__FILE__, $plugin_file) !== false) {
            $is_fully_disabled = get_option('qm_fully_disable', false);
            $checked = $is_fully_disabled ? 'checked="checked"' : '';
            
            $actions[] = sprintf(
                '<label class="qm-toggle-admin"><input type="checkbox" %s data-nonce="%s" /> %s</label>',
                $checked,
                esc_attr(wp_create_nonce('qm_toggle_admin_nonce')),
                esc_html__(QMDT_Translate::__('Also disable in admin area'))
            );
        }
        return $actions;
    }

    /**
     * Prints the jQuery to handle the admin option toggle
     */
    public function toggle_admin_option() {
        if (!current_user_can('manage_options')) {
            return;
        }
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('.qm-toggle-admin input').on('change', function() {
                    var $checkbox = $(this);
                    var isChecked = $checkbox.is(':checked');
                    
                    $.ajax({
                        url: ajaxurl,
                        type: 'POST',
                        data: {
                            action: 'toggle_qm_admin_option',
                            enable: isChecked ? 1 : 0,
                            nonce: $checkbox.data('nonce')
                        },
                        beforeSend: function() {
                            $checkbox.prop('disabled', true);
                        },
                        success: function(response) {
                            if (!response.success) {
                                $checkbox.prop('checked', !isChecked);
                                alert(response.data);
                            }
                        },
                        error: function(xhr, status, error) {
                            $checkbox.prop('checked', !isChecked);
                            alert('Error: ' + error);
                        },
                        complete: function() {
                            $checkbox.prop('disabled', false);
                        }
                    });
                });
            });
        </script>
        <style>
        .qm-toggle-admin {
            display: inline-block;
            line-height: 28px;
        }
        .qm-toggle-admin input {
            margin: 0 5px 0 0;
            vertical-align: middle;
        }
        label.qm-toggle-admin {
            color: #343434;
        }
        </style>
        <?php
    }

    /**
     * AJAX handler for toggling admin option
     */
    public function toggle_admin_option_ajax() {
        check_ajax_referer('qm_toggle_admin_nonce', 'nonce');
        
        if (!current_user_can('manage_options')) {
            wp_send_json_error(QMDT_Translate::__('Unauthorized'), 403);
        }

        $enable = isset($_POST['enable']) && $_POST['enable'];
        update_option('qm_fully_disable', (bool)$enable);
        
        wp_send_json_success();
    }

    public function add_ajax_url() {
        printf(
            '<script type="text/javascript">var ajaxurl = "%s";</script>',
            admin_url('admin-ajax.php')
        );
    }

    /**
     * Enqueue dependency
     */
    public function add_jquery() {
        if (!is_admin_bar_showing() || !current_user_can('manage_options')) {
            return;
        }
        wp_enqueue_script('jquery');
    }

    /**
     * Outputs the required JavaScript and CSS
     */
    public function add_ajax_script() {
        if (!is_admin_bar_showing() || !current_user_can('manage_options')) {
            return;
        }
        $nonce = wp_create_nonce('qm_disabler_nonce');
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $(document).on('click', '.qm-disabler-toggle', function(e) {
                    e.preventDefault();
                    
                    var $button = $(this).closest('li');
                    var $svg = $button.find('svg');
                    
                    $.ajax({
                        url: ajaxurl,
                        type: 'POST',
                        data: {
                            action: 'toggle_qm_disabler',
                            nonce: '<?php echo esc_js($nonce); ?>'
                        },
                        beforeSend: function() {
                            $button.addClass('disabled');
                        },
                        success: function(response) {
                            if (response.success) {
                                $svg.find('path').first().attr('fill', response.data.new_color);
                                $button.find('.ab-item').attr('title', response.data.new_text);
                            } else {
                                alert('Error: ' + response.data);
                            }
                        },
                        error: function(xhr, status, error) {
                            alert('Error: ' + error);
                        },
                        complete: function() {
                            $button.removeClass('disabled');
                        }
                    });
                });
            });
        </script>
        <style>
            #wpadminbar .disabled .ab-item {
                opacity: 0.5;
                pointer-events: none;
            }
            #wpadminbar #wp-admin-bar-qm-disabler-toggle .ab-item {
                padding: 0 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 32px;
            }
            #wpadminbar #wp-admin-bar-qm-disabler-toggle .ab-item svg {
                width: 20px;
                height: 20px;
            }
            #wpadminbar #wp-admin-bar-qm-disabler-toggle .ab-item:hover svg path:first-child {
                opacity: 0.8;
            }
        </style>
        <?php
    }

    /**
     * Generates the SVG icon with specified color
     * 
     * @param string $color Hex color code for the icon
     * @return string SVG markup
     */
    private function get_svg($color) {
        $svg = '<svg width="20" height="20" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet">';
        $svg .= '<path fill="' . esc_attr($color) . '" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"></path>';
        $svg .= '<path fill="#FFF" d="M23.459 28.008c-1.519.868-3.348 1.364-5.457 1.364c-6.294 0-10.666-4.992-10.666-11.41c0-6.449 4.341-11.41 10.666-11.41c6.232 0 10.666 5.116 10.666 11.41c0 2.728-.713 5.209-2.078 7.162l1.768 1.52c.59.527 1.086 1.023 1.086 1.892c0 1.085-1.086 1.953-2.139 1.953c-.684 0-1.24-.279-2.078-.992l-1.768-1.489zm-.371-6.077c.526-1.179.744-2.542.744-3.969c0-3.689-1.954-7.131-5.83-7.131c-3.876 0-5.829 3.379-5.829 7.131c0 3.782 1.891 7.132 5.829 7.132c.713 0 1.365-.094 1.984-.218l-1.116-1.085c-.341-.311-.589-.807-.589-1.24c0-1.209.838-2.232 2.108-2.232c.435 0 .806.155 1.179.403l1.52 1.209z"></path>';
        $svg .= '</svg>';
        return $svg;
    }
}

// Initialize the plugin or write warnings about QM not active
if(class_exists('QM_Activation') ) {
    QM_Disabler_Toggle::get_instance();
} else {
    $multisite = is_multisite() ? 'network_' : '';
    add_action("{$multisite}admin_notices", function() {
        $mustuse = isset($_GET['plugin_status']) && 'mustuse' === $_GET['plugin_status'];
        if (in_array(get_current_screen()->id, ['plugins','plugins-network']) && $mustuse) {
            printf(
                '<div class="notice notice-error"><p>%s</p></div>',
                QMDT_Translate::__('QM Disabler Toggle does not run if Query Monitor is inactive or not installed.')
            );
        }
    });
    $action_link = is_multisite() ? 'network_admin_' : '';
    add_filter( "{$action_link}plugin_action_links_query-monitor-toggle.php", function($actions){
        $actions[] = sprintf(
            '<span style="color:red">*** </span><span style="color:#343434">%s</span>',
            QMDT_Translate::__('QUERY MONITOR IS DISABLED OR NOT INSTALLED')
        );
        return $actions;
    }, 20);
}