Botão de liga/desliga para o plugin Query Monitor • Chez Brasofilo

O plugin Query Monitor é uma ferramenta fundamental para desenvolvedores WordPress.

Este plugin auxiliar resolve o seguinte problema: quando precisamos ver o código fonte da página especialmente no frontend, o QM atrapalha muito.

O autor do plugin sugere esta solução para usarmos no wp-config.php:

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

Meu plugin oferece um botão para ligar/desligar isso na Barra de Administração.

É só clicar no ícone da barra de administração para mostrar/ocultar o QM no frontend. Se o ícone está azul, é porque o QM está ativo no frontend, se está sem cor, é porque está inativo.

Instruções de Uso

Copie o arquivo “query-monitor-toggle.php” para o diretório mu-plugins do WordPress.
Após a instalação, os administradores encontrarão um novo ícone na barra de administração.

Clicar nesse botão alterna a visibilidade frontend do Query Monitor sem recarregar a página.
Para estender essa funcionalidade para a área administrativa, visite a página Plugins > Indispensáveis (/wp-admin/plugins.php?plugin_status=mustuse) para marcar “Também desativar na área administrativa” – essa configuração aparece como uma caixa de seleção adicional ao lado dos links de ação do 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);
}