Tworzenie pluginu pika-ripple-button

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.

Plik 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());
    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');

Plik pika-style.css

a.piBtn{
    background-color: rgb(43, 145, 145);
    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:brown;
    -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;
    }
}

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);
        })
    })
})
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Scroll to Top