Tworzenie pluginu ze stroną ustawień i polami do zmiany koloru

Plik główny pika-ripple-button.php

<?php
/*
Plugin Name: Pika Ripple Button Plugin
Description: Plugin ma na celu zmianę wyglądu obecnych przycisków tworzonych za pomocą bloków Gutenberg oraz dodanie do nich efektu ripple po kliknięciu.
Author: pikademia
Version: 1.0.0
Author URI: https://pikademia.pl
*/

if ( !defined( 'ABSPATH' ) ) {
    exit; 
}

define ('PIKA_RIPPLE_PLUGIN_URL', trailingslashit( plugins_url('/',__FILE__) )); 

function pika_ripple_plugin(){
    wp_enqueue_style('pika-ripple-plugin-style',PIKA_RIPPLE_PLUGIN_URL.'pika-style.css','',rand());
    $color = esc_attr(get_option('bgcolor')) ;
    $color2 = esc_attr(get_option('bgcolorhover'));
    $custom_css = '';
    if($color!=''){
        $custom_css .= "a.piBtn{background-color: {$color};}";
    }
    if($color2!=''){
        $custom_css .= "a.piBtn:hover{background-color: {$color2};}";
    }
    wp_add_inline_style( 'pika-ripple-plugin-style', $custom_css );
    wp_enqueue_script('pika-ripple-plugin-script',PIKA_RIPPLE_PLUGIN_URL.'pika-script.js', array('jquery'),rand(), true );
}
add_action('wp_enqueue_scripts','pika_ripple_plugin');

include (plugin_dir_path( __FILE__ ) .'pika-settings.php');

Plik pika-settings.php z funkcją tworzenia strony z ustawieniami

<?php
// add settings page
function pika_rp_add_admin_page(){
    add_menu_page(
        'Pika Ripple Button Settings',  // tytuł strony
        'Pika Ripple Button', // tytuł menu widoczny w admin!!!
        'manage_options',   // capability
        'pika_rp_id',  //id !!!
        'pika_rp_create_page',    //callback func. do utworzenia !!!!
        'dashicons-editor-expand',       //ikona
        110                 //położenie w menu
    );
}
add_action('admin_menu','pika_rp_add_admin_page');

function pika_rp_create_page(){

    echo '<h1>Pika Ripple Button Settings</h1>';
    settings_errors();
    echo '<form method="post" action="options.php">';
    settings_fields('pika-rp-settings-group');
    do_settings_sections('pika_rp_id');
    submit_button();
    echo '</form>';
    echo 'Odwiedź nas na <a href="https://www.pikademia.pl/">www.pikademia.pl</a>';
}
function pika_rp_custom_settings(){
    register_setting(
        'pika-rp-settings-group', // nazwa grupy opcji, do której się donosimy w funkcji settings_fields()
        'bgcolor'                // id opcji !!!!
    );
    register_setting(
        'pika-rp-settings-group', // nazwa grupy opcji, do której się donosimy w funkcji settings_fields()
        'bgcolorhover'                // id opcji !!!!
    );
    add_settings_section(
        'pika-rp-myoptions',  // id slug do identyfikacji sekcji w metodzie add_settings_field() !!!!
        'Add colors in hex format with # (eg. #44aaaa)',       // wyświetlany tytuł, może być pusty
        'pika_rp_options',    // callback function do utworzenia !!!
        'pika_rp_id'       // id strony na której dodajemy sekcję(pobieramy z funkcji pikademia_add_admin_page)!!!
    );
    add_settings_field(
        'colorid',   // id
        'Bg color / Bg hover color',         // wyświetlany tytuł pola !!
        'pika_rp_settings_field', //function callback do utworzenia !!!
        'pika_rp_id', //id strony !!!
        'pika-rp-myoptions' //section id z metody add_settings_section !!!
    );
}
add_action('admin_init', 'pika_rp_custom_settings');

function pika_rp_options(){
    // echo "Sekcja z ustawieniami";
}
function pika_rp_settings_field(){
    $btncolor = esc_attr(get_option('bgcolor'));
    echo '<input type="text" name="bgcolor" value="'.$btncolor.'" placeholder="color"/>';
    $btncolorhover = esc_attr(get_option('bgcolorhover'));
    echo '<input type="text" name="bgcolorhover" value="'.$btncolorhover.'" placeholder="color hover"/>';
}

Plik uninstall.php

<?php
// if uninstall.php is not called by WordPress, die
if (!defined('WP_UNINSTALL_PLUGIN')) {
    die;
}

delete_option('bgcolor');
delete_option('bgcolorhover');

Plik pika-script.js

jQuery( function ( $ ) {
    $(".wp-block-button__link").each(function(index){
        $(this).removeClass().addClass("piBtn").click(function(e){
            let ripples = $(document.createElement('span')).addClass("piBtnSpan");
            let offset = $(this).offset();
            ripples.css("left", e.pageX - offset.left);
            ripples.css("top", e.pageY - offset.top);
            $(this).append(ripples);
            setTimeout(()=>{ripples.remove()},300);
        })
    })
})

Plik pika-style.css

a.piBtn{
    background-color: #44aaaa;
    color: azure;
    padding: 15px 30px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    overflow:hidden;
    display: block;
    position: relative;
    text-align:center;
    cursor:pointer;
    -webkit-transition: background-color 0.3s ease-out;  
    -moz-transition: background-color 0.3s ease-out;  
    -o-transition: background-color 0.3s ease-out;  
    transition: background-color 0.3s ease-out; 
}
a.piBtn:hover{
    background-color:#aa4444;
    -webkit-transition: background-color 0.3s ease-out;  
    -moz-transition: background-color 0.3s ease-out;  
    -o-transition: background-color 0.3s ease-out;  
    transition: background-color 0.3s ease-out; 
}
    
.piBtnSpan{
    position: absolute;
    background: #fff;
    pointer-events: none;
    border-radius: 50%;
    transform:translate(-50%, -50%);
    animation: animate 0.3s linear infinite;
}
    
@keyframes animate{
    0%{
    width:0px;
    height:0px;
    opacity:0.8;
    }
    100%{
    width:300px;
    height:300px;
    opacity:0;
    }
}