WordPress plugin světlé/tmavé pozadí

Pro vytvoření pluginu WordPress, který umožní přepínat mezi světlým a tmavým pozadím, postupujte následovně, je to snadné:

Vytvořte plugin – Vytvořte novou složku v adresáři /wp-content/plugins/ s názvem “theme-switcher” a vytvořte v ní soubor s názvem “theme-switcher.php“.
Registrace pluginu – V souboru “theme-switcher.php” zaregistrujte plugin pomocí následujícího kódu:

Soubor "theme-switcher.php":

<?php
/*
Plugin Name: Theme Switcher
Plugin URI: http://example.com
Description: Plugin to switch between light and dark theme.
Version: 1.0
Author: Your Name
Author URI: http://example.com
*/

// Add action to show the switcher button
add_action('wp_footer', 'add_theme_switcher_button');

function add_theme_switcher_button() {
    // Output the HTML for the switcher button
    ?>
    <div class="theme-switcher">
        <button id="light-mode">Light Mode</button>
        <button id="dark-mode">Dark Mode</button>
    </div>

    <script type="text/javascript">
        // Add event listeners for the buttons
        document.getElementById("light-mode").addEventListener("click", function() {
            setTheme("light");
        });
        document.getElementById("dark-mode").addEventListener("click", function() {
            setTheme("dark");
        });

        // Set the theme based on the user's preference
        function setTheme(theme) {
            var root = document.documentElement;
            if (theme === "light") {
                root.style.setProperty("--bg-color", "#ffffff");
                root.style.setProperty("--text-color", "#000000");
            } else {
                root.style.setProperty("--bg-color", "#000000");
                root.style.setProperty("--text-color", "#ffffff");
            }
            localStorage.setItem("theme", theme);
        }

        // Get the user's preference from local storage
        var theme = localStorage.getItem("theme");
        if (theme) {
            setTheme(theme);
        }
    </script>
    <?php
}

// Add styles for the switcher button
add_action('wp_enqueue_scripts', 'add_theme_switcher_styles');

function add_theme_switcher_styles() {
    wp_enqueue_style('theme-switcher-styles', plugin_dir_url(__FILE__) . 'theme-switcher.css');
}

Soubor "theme-switcher.css":

Vytvoření souboru s CSS styly Vytvořte nový soubor v adresáři pluginu s názvem “theme-switcher.css” a vložte do něj následující kód.

.theme-switcher {
    display: flex;
    justify-content: center;
    margin: 10px;
}

.theme-switcher button {
    background-color: #cccccc;
    border: none;
    color: #000000;
    font-size: 14px;
    margin: 0 5px;
    padding: 5px 10px;
}

.theme-switcher button:hover {
    cursor: pointer;
}

.theme-switcher button:focus {
    outline: none;
}

.theme-switcher button:active {
    background-color: #aaaaaa;
}

Tento plugin přidá tlačítka na konci stránky WordPressu, která umožní uživatelům přepnout mezi světlým a tmavým tématem. Tlačítka mají styly, které jsou definovány v souboru “theme-switcher.css”. Když uživatel změní téma, plugin uloží jeho preference do localStorage a při každé návštěvě stránky obnoví téma podle těchto preferencí.

[bsa_pro_ad_space id=7]