Switch style button
-
/** * Registers the setting for the Wooster plugin style switch button * * @return void */ public function add_switch_style_button() { ?> <script> document.addEventListener('DOMContentLoaded', function() { var toggleStyleBtn = document.getElementById('switch-style'); var currentStyle = localStorage.getItem('wooster_style') || '<?php echo get_option('wooster_style', 'compagnon-wp.css'); ?>'; console.log('Style récupéré depuis localStorage :', currentStyle); // Instruction de débogage toggleStyleBtn.addEventListener('click', function() { currentStyle = currentStyle === 'compagnon-wp.css' ? 'compagnon-wooster.css' : 'compagnon-wp.css'; changeStyle(currentStyle); }); function changeStyle(styleName) { var styleElement = document.getElementById('wooster-custom-style'); if (!styleElement) { styleElement = document.createElement('link'); styleElement.id = 'wooster-custom-style'; styleElement.rel = 'stylesheet'; document.head.appendChild(styleElement); } styleElement.href = '<?php echo plugins_url('wooster-partner/assets/css/'); ?>' + styleName; localStorage.setItem('wooster_style', styleName); console.log('Style défini dans localStorage :', styleName); // Instruction de débogage } // Charger le style initial changeStyle(currentStyle); }); </script>Hello , I have a button. When I click on it, it will switch between 2 Css styles. I have a form to set a style ( get the css) when I submit but I created another php files to do this with only one button. The problem is that when I select WordPress style it works. I can switch by clicking on the button but I select wooster style, it does not work anymore. Anyone has an idea how can I fix this? This is my for in another php file :
/** * 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)); } } }
Viewing 6 replies - 1 through 6 (of 6 total)
-
Thank you, it may be that. I tried to dequeue and enqueue but still in the front, when Wooster style is selected, It doesn’t change. I also add this which is specific for the front
add_action('wp_enqueue_scripts', array($this, 'enqueue_styles')); // for the front pagepublic function enqueue_styles() { // Register your script //wp_register_script('switch-style', plugins_url('wooster-partner/assets/js/switch-style.js'), array('jquery'), '1.0', true); $selected_style = get_option('wooster_style', 'compagnon-wp.css'); // default style if (!is_admin()) { if ($selected_style === 'compagnon-wooster.css') { wp_dequeue_style('compagnon-wp'); wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style)); } else { wp_dequeue_style('wooster-custom-style'); wp_enqueue_style('compagnon-wp', plugins_url('wooster-partner/assets/css/compagnon-wp.css')); } } // Enqueue other 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 // Localize your script wp_localize_script('switch-style', 'switch_style_vars', array( 'wooster_style_url' => plugins_url("wooster-partner/assets/css/compagnon-wooster.css"), 'wp_style_url' => plugins_url("wooster-partner/assets/css/compagnon-wp.css"), )); // Enqueue your script wp_enqueue_script('switch-style'); }
Viewing 6 replies - 1 through 6 (of 6 total)
The topic ‘Switch style button’ is closed to new replies.