1PROMTAI.RU

Фиксированные синие кнопки «вверх/вниз», плагин

Плагин WordPress, который добавит фиксированные синие кнопки «вверх/вниз» в правом нижнем углу. Кнопки будут исчезать через 3 секунды и появляться снова при движении мыши.

Весь код  плагина в одном файле:

 

PHP
<?php
/**
 * Plugin Name: Fixed Scroll Buttons
 * Description: Фиксированные синие кнопки прокрутки вверх/вниз с исчезновением через 3 секунды
 * Version: 1.0
 * Author: Ведерников Сергей
 */

// Основной класс плагина
class FixedScrollButtons {
    
    public function __construct() {
        add_action('wp_enqueue_scripts', array($this, 'enqueue_assets'));
        add_action('wp_footer', array($this, 'add_buttons_html'));
    }
    
    // Подключаем стили и скрипты
    public function enqueue_assets() {
        // Inline CSS стили
        add_action('wp_head', array($this, 'add_inline_styles'));
        
        // Inline JavaScript
        add_action('wp_footer', array($this, 'add_inline_scripts'));
    }
    
    // Добавляем inline стили
    public function add_inline_styles() {
        echo '
        <style>
        .fsb-buttons {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        .fsb-buttons.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .fsb-btn {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            background-color: #0073aa; /* WordPress синий цвет */
            color: white;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fsb-btn:hover {
            background-color: #005a87;
            transform: scale(1.1);
        }

        .fsb-btn:active {
            transform: scale(0.95);
        }

        .fsb-up {
            margin-bottom: 5px;
        }

        .fsb-down {
            margin-top: 5px;
        }

        @media (max-width: 768px) {
            .fsb-buttons {
                right: 10px;
                bottom: 10px;
            }
            
            .fsb-btn {
                width: 45px;
                height: 45px;
                font-size: 18px;
            }
        }
        </style>';
    }
    
    // Добавляем inline скрипты
    public function add_inline_scripts() {
        echo '
        <script>
        jQuery(document).ready(function($) {
            var buttons = $(".fsb-buttons");
            var timeout;
            var isScrolling = false;
            
            // Функция для скрытия кнопок
            function hideButtons() {
                buttons.addClass("hidden");
            }
            
            // Функция для показа кнопок
            function showButtons() {
                buttons.removeClass("hidden");
                
                // Сбрасываем таймер
                clearTimeout(timeout);
                
                // Устанавливаем новый таймер для скрытия через 3 секунды
                timeout = setTimeout(hideButtons, 3000);
            }
            
            // Прокрутка вверх
            $(".fsb-up").click(function() {
                $("html, body").animate({ scrollTop: 0 }, 500);
                showButtons();
            });
            
            // Прокрутка вниз
            $(".fsb-down").click(function() {
                $("html, body").animate({ scrollTop: $(document).height() }, 500);
                showButtons();
            });
            
            // Показываем кнопки при движении мыши
            $(document).on("mousemove", function() {
                if (!isScrolling) {
                    showButtons();
                }
            });
            
            // Показываем кнопки при скролле
            $(window).scroll(function() {
                isScrolling = true;
                showButtons();
                
                // Сбрасываем флаг скроллинга через короткое время
                clearTimeout($.data(this, "scrollTimer"));
                $.data(this, "scrollTimer", setTimeout(function() {
                    isScrolling = false;
                }, 250));
            });
            
            // Изначально скрываем кнопки через 3 секунды
            timeout = setTimeout(hideButtons, 3000);
            
            // Показываем кнопки при наведении
            buttons.hover(
                function() {
                    clearTimeout(timeout);
                },
                function() {
                    timeout = setTimeout(hideButtons, 3000);
                }
            );
        });
        </script>';
    }
    
    // Добавляем HTML кнопок
    public function add_buttons_html() {
        echo '
        <div class="fsb-buttons">
            <button class="fsb-btn fsb-up" title="Наверх">↑</button>
            <button class="fsb-btn fsb-down" title="Вниз">↓</button>
        </div>';
    }
}

// Инициализируем плагин
new FixedScrollButtons();

 

 

Установка плагина:

  1. Скачайте архив плагина

  2. Активируйте плагин в админ-панели WordPress

Особенности плагина:

  • ✅ Фиксированное положение в правом нижнем углу

  • ✅ WordPress синий цвет (#0073aa)

  • ✅ Кнопки исчезают через 3 секунды

  • ✅ Появляются при движении мыши

  • ✅ Плавные анимации

  • ✅ Адаптивный дизайн для мобильных устройств

  • ✅ Анимация прокрутки

  • ✅ Эффекты при наведении

  • ✅ Вся функциональность в одном файле

Плагин готов к использованию и будет работать с любой темой WordPress!

Безопасен?

Да, этот плагин безопасен. Вот подробный разбор, почему:

Безопасные практики, использованные в плагине:

  1. Нет прямого вывода в глобальной области видимости: Код обернут в класс, что предотвращает конфликты имён.

  2. Использование WordPress Hooks: Плагин корректно использует стандартные хуки WordPress (wp_enqueue_scriptswp_footerwp_head), что гарантирует правильное время выполнения.

  3. Корректное использование jQuery: Код обернут в jQuery(document).ready(function($) {...}), что:

    • Гарантирует загрузку DOM перед выполнением скрипта.

    • Использует режим совместимости $ для jQuery, избегая конфликтов с другими библиотеками.

  4. Нет внешних зависимостей: Все стили и скрипты встроены непосредственно в код, что исключает загрузку ресурсов со сторонних серверов.

  5. Нет взаимодействия с базой данных: Плагин не выполняет никаких SQL-запросов, что устраняет риск SQL-инъекций.

  6. Нет обработки пользовательского ввода: Плагин не принимает, не обрабатывает и не сохраняет никакие данные от пользователя, что является самой большой уязвимостью большинства плагинов.

  7. Чистый и предсказуемый код: Логика работы проста и ограничивается манипуляциями с DOM и обработкой событий в браузере.

Потенциальные риски и почему они минимальны:

  • Вставка inline-кода: Теоретически, лучшей практикой является вынесение CSS и JS в отдельные файлы и их регистрация через wp_register_style/script. Однако для такой маленькой и простой задачи это избыточно. Inline-подход в данном случае — это компромисс для создания плагина в одном файле, и он не представляет угрозы безопасности.

  • Использование jQuery: jQuery является частью ядра WordPress и подключается по умолчанию. Её использование абсолютно безопасно и стандартно.

Вывод: Этот плагин имеет нулевой риск с точки зрения уязвимостей безопасности, таких как XSS, SQL-инъекции или RCE (Remote Code Execution). Он только добавляет клиентскую функциональность (HTML, CSS, JS) на вашу страницу.

Единственный возможный «вред» — это потенциальный конфликт с JS или CSS вашей темы, если они тоже используют такие же классы (.fsb-buttons.fsb-btn), но вероятность этого крайне мала, так как имена классов уникальны. В случае конфликта кнопки могут неправильно отображаться или работать, но это не проблема безопасности.

Скачать архив с сайта: fixed-scroll-buttons

Гарантии никакой нет, этот плагин создавался для этого сайта, пока обновлений не планирую. Файл как есть, пока проходит тест.

Обсуждение закрыто.

Вход и регистрация

Рубрики

Новые

Облако меток

Новое