我很难使用 Ajax，所以我尝试只使用 Javascript，而不使用它。我想在横幅上创建一个按钮开关，这样我就可以在已创建的 2 个 css 文件之间更改页面的样式。我已经在另一个 php 文件中有一个表单，所以我可以选择样式，然后提交它，这样它就可以更改所有插件中的样式。我正在考虑通过帖子获得选项
这是我的表格：
/**
* Class used to manage the display of the content of the settings
*/
class WoosterPartnerSettings
{
/**
* Hook to display the contents of the 'Settings' menu if the license is valid
*/
public function __construct()
{
if (get_option('partner_license') && get_option('partner_license') != '') {
add_action('tab_content_settings', array($this, 'wooster_partner_settings'));
add_action('admin_init', array($this, 'display_style'));
add_action('admin_enqueue_scripts', array($this, 'enqueue_style'));
}
}
/**
* Allows you to display the form to choose the style sheet to display
*
* @return void
*/
public function wooster_partner_settings()
{
?>
<div class="wrap">
<h1><?php echo __('Réglages Wooster', 'wooster-partner'); ?></h1>
<hr class="line">
<form method="post" action="options.php">
<?php settings_fields('wooster-settings-group'); ?>
<?php do_settings_sections('wooster-settings-group'); ?>
<p class="parag"><?php echo __('Le plugin Compagnon propose deux styles d’affichage :', 'wooster-partner'); ?></p>
<label for="style_wordpress">
<input type="radio" id="style_wordpress" name="wooster_style" value="compagnon-wp.css" <?php checked(get_option('wooster_style'), 'compagnon-wp.css'); ?>>
<?php echo __('Style WordPress', 'wooster-partner'); ?>
</label>
<label for="style_wooster">
<input type="radio" id="style_wooster" name="wooster_style" value="compagnon-wooster.css" <?php checked(get_option('wooster_style'), 'compagnon-wooster.css'); ?>>
<?php echo __('Style Wooster', 'wooster-partner'); ?>
</label><br>
<input type="submit" class="wooster-button" value="<?php echo __('Enregistrer les modifications', 'wooster-partner') ?>">
</form>
</div>
<?php
}
/**
* Registers the setting for the Wooster plugin style
*
* @return void
*/
public function display_style()
{
register_setting('wooster-settings-group', 'wooster_style');
}
/**
* Enqueues the selected style for Wooster plugin settings page
*
* @return void
*/
public function enqueue_style()
{
if (is_admin()) {
if (isset($_GET['page']) && strpos($_GET['page'], 'wooster') === 0) {
$selected_style = get_option('wooster_style', 'compagnon-wp.css'); // default style
wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style));
}
}
}
}
new WoosterPartnerSettings();
这是我创建的横幅，因此它可以出现在所有插件中：
if (!class_exists('WoosterBanner')) {
class WoosterBanner
{
public function __construct()
{
if (isset($_GET['page']) && in_array($_GET['page'], ['wooster','wooster-followup','wooster-licences','wooster-compagnon','wooster-customers','wooster-partner','wooster-settings','wooster-setup']) && is_admin()) {
add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
add_action('in_admin_header', array($this, 'wooster_header_section'));
add_action('wp_ajax_switch_css', array($this, 'switch_css')); // request when the user is logged in
}
}
public function wooster_header_section() {
?>
<div id="top-bar-banner">
<div class="wooster-banner">
<div class="logo">
<img src="<?php echo plugins_url('assets/img/logo.avif', __DIR__); ?>" alt="Logo">
</div>
<div class="actions">
<form method="post" action="options.php" id="form">
<?php settings_fields('wooster-settings-group'); ?>
<button type="button" id="wooster-exchange-button" class="button">
<i class="fas fa-exchange-alt"></i>
</button>
</form>
<a href="#" class="button"><i class="fas fa-question-circle"></i></a>
</div>
</div>
</div>
</div>
<?php
}
public function switch_css() {
// Check the request
$style = isset($_POST['style']) ? $_POST['style'] : '';
// style is the id of the selected style in the html and the button
if ($style === 'wooster-custom-style-css') {
//set cookie to remember the selected style
setcookie('selected_style', $style, time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
echo plugins_url('assets/css/compagnon-wooster.css', __FILE__);
} elseif ($style === 'csspartner-css') {
//set cookie to remember the selected style
setcookie('selected_style', $style, time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
echo plugins_url('assets/css/compagnon-wp.css', __FILE__);
}
// Don't forget to exit at the end of the function
exit;
}
public function enqueue_styles() {
// Register necessary styles and scripts
wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');
wp_enqueue_script('jquery'); // Js library
wp_enqueue_script('wooster-banner', plugins_url('assets/js/banner.js', __DIR__), array('jquery'), null, true);
}
}
new WoosterBanner();
}
var currentStyle = 'style_wordpress'; // Définissez le style par défaut ici
document.getElementById("wooster-exchange-button").addEventListener("click", function() {
var style1 = document.getElementById('style_wordpress');
var style2 = document.getElementById('style_wooster');
if (currentStyle === 'style_wordpress') {
style1.disabled = true;
style2.disabled = false;
currentStyle = 'style_wooster';
} else {
style1.disabled = false;
style2.disabled = true;
currentStyle = 'style_wordpress';
}
});
});
``
这就是我尝试过的：
<script>
document.addEventListener('DOMContentLoaded', function() {
var switchButton = document.getElementById('switch-style');
switchButton.addEventListener('click', function() {
var stylesheet1 = document.getElementById('csspartner-css');
var stylesheet2 = document.getElementById('wooster-custom-style-css');
if (stylesheet1.href.includes('compagnon-wp.css')) {
stylesheet1.href = '<?php echo plugins_url('assets/css/compagnon-wooster.css', __DIR__); ?>';
stylesheet2.href = '<?php echo plugins_url('assets/css/compagnon-wp.css', __DIR__); ?>';
} else {
stylesheet1.href = '<?php echo plugins_url('assets/css/compagnon-wp.css', __DIR__); ?>';
stylesheet2.href = '<?php echo plugins_url('assets/css/compagnon-wooster.css', __DIR__); ?>';
}
});
});
</script>
<?php
} 但它只改变了按钮的样式，我正在尝试所有页面，但当我这样做时，它改变了所有的CSS