1PROMTAI.RU » Фиксированные синие кнопки «вверх/вниз», плагин
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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Реклама

Календарь

Октябрь 2025
Пн Вт Ср Чт Пт Сб Вс
 12345
6789101112
13141516171819
20212223242526
2728293031  

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

Рубрики

Реклама

Мои сайты

Новые

Облако меток