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í.
Zanechte komentář