Wtyczka Ninja Anty-cache Zapobieganie cache’owaniu skryptów w WordPress

Czasami odświeżanie i czyszczenie cache, szczególnie na telefonach, może być problematyczne. Aby temu zapobiec, można dodać losowy parametr GET do adresu skryptów i stylów w pliku functions.php. Dzięki temu przy każdym odświeżeniu przeglądarka widzi inny URL i przeładowuje pliki od nowa.

Aby uzależnić dodawanie parametru anty-cache od włączenia/wyłączenia wtyczki, można wykorzystać hooki WordPressa wp_enqueue_scripts do dynamicznego dodawania lub usuwania wersji w zależności od stanu wtyczki. Oto krok po kroku, jak to zrobić:

Stwórz nową wtyczkę:Zacznij od stworzenia pliku PHP dla wtyczki, np. no_cache_toggle.php w katalogu wp-content/plugins.

Dodaj kod do wtyczki:W pliku wtyczki dodaj poniższy kod, który rejestruje wtyczkę i dodaje parametr anty-cache:

<?php
/*
Plugin Name: Ninja Anty Cache
Description: Toggle cache-busting parameter for scripts and styles.
Version: 1.0
Author: Maciej Sajan
Author URI: https://projektninja.com/
*/

// Dodaj hook do enque scripts
function add_no_cache_parameter($src) {
    if (is_admin()) return $src; // Upewnij się, że nie działamy w panelu admina
    
    // Dodaj parametr tylko, gdy wtyczka jest włączona
    if (get_option('no_cache_toggle_enabled')) {
        $src = add_query_arg('ver', time(), $src);
    }
    return $src;
}

function enable_no_cache_toggle() {
    add_filter('style_loader_src', 'add_no_cache_parameter', 10, 1);
    add_filter('script_loader_src', 'add_no_cache_parameter', 10, 1);
}

function disable_no_cache_toggle() {
    remove_filter('style_loader_src', 'add_no_cache_parameter', 10, 1);
    remove_filter('script_loader_src', 'add_no_cache_parameter', 10, 1);
}

// Hook do włączania wtyczki
register_activation_hook(__FILE__, 'enable_no_cache_toggle');
// Hook do wyłączania wtyczki
register_deactivation_hook(__FILE__, 'disable_no_cache_toggle');

// Sprawdź czy opcja jest ustawiona, gdy wtyczka jest włączona
if (get_option('no_cache_toggle_enabled')) {
    enable_no_cache_toggle();
}

// Zarejestruj opcję podczas aktywacji wtyczki
function activate_no_cache_toggle() {
    update_option('no_cache_toggle_enabled', 1);
}
register_activation_hook(__FILE__, 'activate_no_cache_toggle');

// Usuń opcję podczas deaktywacji wtyczki
function deactivate_no_cache_toggle() {
    delete_option('no_cache_toggle_enabled');
}
register_deactivation_hook(__FILE__, 'deactivate_no_cache_toggle');

Aktywacja wtyczki:Przejdź do panelu admina WordPressa, w sekcji “Wtyczki” znajdź swoją wtyczkę “No Cache Toggle” i ją aktywuj.

Testowanie:Teraz, gdy wtyczka jest aktywna, powinieneś zobaczyć, że do skryptów i stylów dodawany jest parametr ver z aktualnym timestampem, co powoduje brak cache’owania. Gdy wyłączysz wtyczkę, parametr nie będzie dodawany i strona powinna ładować się szybciej.

Ten sposób używa hooków register_activation_hook i register_deactivation_hook do zarządzania stanem wtyczki oraz dodawania i usuwania filtru, który modyfikuje URL-e skryptów i stylów.

Wtyczka do pobrania:

Przydatne linki

  1. Tworzenie wtyczek w WordPress
  2. Dokumentacja WordPress Hooks
  3. Optymalizacja WordPress

Anty-cache Zapobieganie cache’owaniu w WordPress: Dodanie losowego parametru GET
Starsza wersja opcja na szybko

Kod PHP:

function custom_theme_features()  {

	// Add theme support for custom CSS in the TinyMCE visual editor
	add_editor_style();
}
add_action( 'after_setup_theme', 'custom_theme_features' );




function enqueue_custom_styles_and_scripts() {
    
    $random_parameter = rand(5, 99999); /* <--- randomowa liczba */
    
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/style.css?'.$random_parameter); /* <--- tu dodana jako argument GET */
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/skrypty.js?'.$random_parameter); /* <--- tu dodana jako argument GET */
    wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', array(), '1.0', true);
    wp_enqueue_script('scrolltoplugin', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles_and_scripts');

Wyjaśnienia:

  1. Dodanie funkcji wsparcia motywu: Funkcja custom_theme_features dodaje wsparcie dla niestandardowego CSS w edytorze wizualnym TinyMCE.
  2. Enqueue stylów i skryptów z losowym parametrem GET: Funkcja enqueue_custom_styles_and_scripts generuje losowy parametr GET i dodaje go do adresów stylów i skryptów, co zapobiega ich cachowaniu.