plug/s1-custom-scroll-to-top/s1-custom-scroll-to-top.php

<?php
/*
Plugin Name: S1 Custom Scroll To Top
Plugin URI:  https://1studi.ru
Description: Простая кнопка «Наверх» с выбором позиции и кастомной иконкой
Version:     1.1.0
Author:      S1
Author URI:  https://1studi.ru
License:     GPL-2.0+
Text Domain: s1-custom-scroll-to-top
Domain Path: /languages
*/

// Запрещаем прямой доступ
if (!defined('ABSPATH')) {
    exit;
}

define('CSTT_VERSION', '1.1.0');
define('CSTT_DIR', plugin_dir_path(__FILE__));
define('CSTT_URL', plugin_dir_url(__FILE__));


/**
 * Подключаем стили и скрипты на фронте
 */
function cstt_enqueue_frontend_assets() {
    // Стили
    wp_enqueue_style(
        'cstt-style',
        CSTT_URL . 'assets/style.css',
        [],
        CSTT_VERSION
    );

    // Скрипт
    wp_enqueue_script(
        'cstt-script',
        CSTT_URL . 'assets/script.js',
        ['jquery'],
        CSTT_VERSION,
        true
    );

    // Передаём настройки в JS
    $position = get_option('cstt_position', 'right-bottom');
    $custom_img = get_option('cstt_custom_image', '');

    wp_localize_script('cstt-script', 'csttData', [
        'position'   => $position,
        'custom_img' => $custom_img ? esc_url($custom_img) : '',
        'default_img' => CSTT_URL . 'assets/arrow-up.svg',
    ]);
}
add_action('wp_enqueue_scripts', 'cstt_enqueue_frontend_assets');


/**
 * HTML кнопки (добавляем в footer)
 */
function cstt_render_button() {
    ?>
    <a href="#" id="cstt-scroll-top" aria-label="Наверх">
        <span class="cstt-icon"></span>
    </a>
    <?php
}
add_action('wp_footer', 'cstt_render_button', 999);


/**
 * Настройки плагина
 */
function cstt_register_settings() {
    register_setting('cstt_settings_group', 'cstt_position', [
        'type'              => 'string',
        'sanitize_callback' => 'sanitize_text_field',
        'default'           => 'right-bottom'
    ]);

    register_setting('cstt_settings_group', 'cstt_custom_image', [
        'type'              => 'string',
        'sanitize_callback' => 'esc_url_raw',
    ]);

    add_settings_section(
        'cstt_main_section',
        'Настройки кнопки «Наверх»',
        '__return_false',
        'cstt-settings'
    );

    add_settings_field(
        'cstt_position',
        'Положение кнопки',
        'cstt_position_field_callback',
        'cstt-settings',
        'cstt_main_section'
    );

    add_settings_field(
        'cstt_custom_image',
        'Своя иконка (рекомендуется 64×64 px)',
        'cstt_image_field_callback',
        'cstt-settings',
        'cstt_main_section'
    );
}
add_action('admin_init', 'cstt_register_settings');


function cstt_position_field_callback() {
    $value = get_option('cstt_position', 'right-bottom');
    $positions = [
        'left-bottom'   => 'Левый нижний угол',
        'right-bottom'  => 'Правый нижний угол (по умолчанию)',
        'left-top'      => 'Левый верхний угол',
        'right-top'     => 'Правый верхний угол',
        'center-bottom' => 'По центру снизу',
    ];
    ?>
    <select name="cstt_position">
        <?php foreach ($positions as $key => $label): ?>
            <option value="<?= esc_attr($key) ?>" <?= selected($value, $key) ?>>
                <?= esc_html($label) ?>
            </option>
        <?php endforeach; ?>
    </select>
    <?php
}


function cstt_image_field_callback() {
    $value = get_option('cstt_custom_image', '');
    $preview_style = $value ? 'block' : 'none';
    ?>
    <div class="cstt-image-wrap">
        <input type="url"
               name="cstt_custom_image"
               id="cstt_custom_image"
               value="<?= esc_attr($value) ?>"
               class="regular-text code"
               placeholder="https://example.com/my-arrow-up.png"
               style="width: 100%; max-width: 500px;" />

        <p class="description">
            Вставьте прямую ссылку на изображение (PNG, JPG, SVG, WebP).<br>
            Рекомендуемый размер: 64×64 px или больше, квадратное, желательно с прозрачным фоном.
        </p>

        <div style="margin-top: 15px;">
            <strong>Превью:</strong><br>
            <img id="cstt-preview"
                 src="<?= esc_url($value) ?>"
                 style="max-width: 120px; height: auto; margin-top: 8px; display: <?= $preview_style ?>; border: 1px solid #ddd; border-radius: 4px;"
                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
            />
            <span style="color: #d63638; display: <?= $value ? 'none' : 'block' ?>;">
                Изображение не отображается (проверьте ссылку)
            </span>
        </div>
    </div>

    <script>
    jQuery(document).ready(function($){
        var input = $('#cstt_custom_image');
        var preview = $('#cstt-preview');

        // Обновляем превью при изменении поля
        input.on('input change paste', function(){
            var url = $(this).val().trim();
            if (url) {
                preview.attr('src', url).show();
            } else {
                preview.hide();
            }
        });

        // Принудительно проверяем при загрузке страницы
        if (input.val()) {
            preview.attr('src', input.val()).show();
        }
    });
    </script>
    <?php
}


/**
 * Добавляем страницу настроек в меню
 */
function cstt_add_admin_menu() {
    add_options_page(
        'Scroll To Top Настройки',
        'Scroll To Top',
        'manage_options',
        'cstt-settings',
        'cstt_options_page_html'
    );
}
add_action('admin_menu', 'cstt_add_admin_menu');


function cstt_options_page_html() {
    if (!current_user_can('manage_options')) return;
    ?>
    <div class="wrap">
        <h1>Настройки кнопки «Наверх»</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('cstt_settings_group');
            do_settings_sections('cstt-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}