Плагин WordPress, который добавит фиксированные синие кнопки «вверх/вниз» в правом нижнем углу. Кнопки будут исчезать через 3 секунды и появляться снова при движении мыши.
Весь код плагина в одном файле:
<?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();
Добавить комментарий