Показывать разные виджеты для разных девайсов

Данный сниппет поможет устанавливать класс девайса для которого предназначен тот или иной виджет.

DISCLAMER: Может не работать с некоторыми виджетами в некоторых шаблонах (темах) внешнего вида. Это относится ко многим сниппетам и настройкам CSS, к сожалению.

<?php

/**
 * Snippet Name: Widget Device Visibility Controls
 * Description: Adds device visibility controls (Desktop/Tablet/Mobile) to all widgets
 * Version: 1.0
 * Author: newsbee
 * Author URI: https://newsbee.media/
 * Snippet URI: https://newsbee.media/snippets/widget-classes.txt
 * License: GPLv2 or later
 * Network: false
 * 
 * This snippet adds device visibility controls to WordPress widgets,
 * allowing you to control which devices each widget appears on.
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

// Add device visibility controls to widget form
function widget_device_controls($widget, $return, $instance) {
    $visibility = isset($instance['device_visibility']) ? $instance['device_visibility'] : 'all';
    ?>
    <div class="widget-visibility-control">
        <p>
            <label for="<?php echo $widget->get_field_id('device_visibility'); ?>">
                <strong>Display on:</strong>
            </label>
            <select 
                class="widefat" 
                id="<?php echo $widget->get_field_id('device_visibility'); ?>" 
                name="<?php echo $widget->get_field_name('device_visibility'); ?>">
                <option value="all" <?php selected($visibility, 'all'); ?>>All Devices</option>
                <option value="desktop" <?php selected($visibility, 'desktop'); ?>>Desktop Only</option>
                <option value="mobile" <?php selected($visibility, 'mobile'); ?>>Mobile Only</option>
                <option value="tablet" <?php selected($visibility, 'tablet'); ?>>Tablet Only</option>
            </select>
        </p>
    </div>
    <?php
    return $instance;
}
add_action('in_widget_form', 'widget_device_controls', 10, 3);

// Save widget visibility settings
function save_widget_visibility($instance, $new_instance) {
    $instance['device_visibility'] = isset($new_instance['device_visibility']) ? $new_instance['device_visibility'] : 'all';
    return $instance;
}
add_filter('widget_update_callback', 'save_widget_visibility', 10, 2);

// Filter widget display based on device
function filter_widget_visibility($instance, $widget) {
    if (!isset($instance['device_visibility']) || $instance['device_visibility'] === 'all') {
        return $instance;
    }

    // Get current device type
    $ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
    $current_device = 'desktop';
    
    if (preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i', $ua)) {
        $current_device = 'mobile';
    } elseif (preg_match('/android|ipad|playbook|silk/i', $ua)) {
        $current_device = 'tablet';
    }

    // Hide widget if it doesn't match current device
    if ($instance['device_visibility'] !== $current_device) {
        return false;
    }

    return $instance;
}
add_filter('widget_display_callback', 'filter_widget_visibility', 10, 2);

// Add device-specific CSS classes to widgets
function add_device_visibility_classes($params) {
    if (!isset($params[0]['widget_id'])) {
        return $params;
    }

    // Get widget details
    $widget_id = $params[0]['widget_id'];
    $id_base = preg_replace('/-[0-9]+$/', '', $widget_id);
    $widget_number = (int) str_replace($id_base . '-', '', $widget_id);
    $widget_obj = get_option('widget_' . $id_base);

    // Add device class if visibility is set
    if (isset($widget_obj[$widget_number]['device_visibility'])) {
        $params[0]['before_widget'] = preg_replace(
            '/class="/',
            'class="device-' . $widget_obj[$widget_number]['device_visibility'] . ' ',
            $params[0]['before_widget'],
            1
        );
    }

    return $params;
}
add_filter('dynamic_sidebar_params', 'add_device_visibility_classes');

// Add CSS for device visibility
function add_device_visibility_styles() {
    ?>
    <style>
        /* Desktop */
        @media (min-width: 1024px) {
            .device-mobile, 
            .device-tablet {
                display: none !important;
            }
        }
        
        /* Tablet */
        @media (min-width: 768px) and (max-width: 1023px) {
            .device-desktop, 
            .device-mobile {
                display: none !important;
            }
        }
        
        /* Mobile */
        @media (max-width: 767px) {
            .device-desktop, 
            .device-tablet {
                display: none !important;
            }
        }
    </style>
    <?php
}
add_action('wp_head', 'add_device_visibility_styles');

Копируем контент файла и переносим его в новый сниппет с помощью плагина Code Snippets.

По умолчанию стоит All Devices, т.е. все устройства, а потом можно выбрать то, что вам нужно.

Enjoy!

---

 ⬇ Поделиться в соцсетях и мессенджерах

Популярные записи Рубрики блога