Javascript中的WordPress样式表入队/出队

uemypmqf 于 2022-12-17 发布在 Java

关注(0)|答案(1)|浏览(135)

我一直在尝试使用两种不同的样式表来创建亮/暗模式之间的切换，这两种样式表都是在functions.php文件中注册的，如下所示：

function theme_register_styles() { 

    wp_register_style( 'first-stylesheet',    get_template_directory_uri() . '/css/style.min.css' );
    
    wp_register_style( 'second-stylesheet', get_template_directory_uri() . '/css/style_light.min.css' );
    
    wp_enqueue_style('first-stylesheet');
    
    global $wp_styles; 
}

我一直试图用这个代码实现它，但它不工作.

button.addEventListener('click', function() {

  if (wp.styles.registered[stylesheets.first].queue) {

    wp.styles.registered[stylesheets.first].dequeue();
    
    wp.styles.registered[stylesheets.second].enqueue();
  }
   else {

    wp.styles.registered[stylesheets.second].dequeue();
    

    wp.styles.registered[stylesheets.first].enqueue();
  }
});

我哪里做错了？🤔

JavaScript

来源：https://stackoverflow.com/questions/74818719/wordpress-stylesheet-enqueue-dequeue-in-javascript

1条答案

按热度按时间

z31licg01#

为了将不同的CSS文件加入队列，你需要触发页面重加载。从前端触发页面重加载和与WordPress后端通信的方法有限（例如REST API， AJAX ，表单提交）。
最好的选择可能是将亮模式和暗模式都加入队列，但如果您需要这样做，一个选择是使用查询字符串强制页面重载，然后使用它们来确定亮/暗模式。
PHP语言

add_action('init', 'theme_register_mode_styles');

function theme_register_mode_styles()
{
    if (isset($_GET['mode']) && $_GET['mode'] == 'dark') {
        wp_dequeue_style('first-stylesheet');
        wp_register_style('second-stylesheet', get_template_directory_uri() . '/css/style.min.css');
        wp_enqueue_style('second-stylesheet');
    } else if (isset($_GET['mode']) && $_GET['mode'] == 'light') {
        wp_dequeue_style('second-stylesheet');
        wp_register_style('first-stylesheet', get_template_directory_uri() . '/css/style_light.min.css');
        wp_enqueue_style('first-stylesheet');
    } else {
        wp_register_style('first-stylesheet', get_template_directory_uri() . '/css/style_light.min.css');
        wp_enqueue_style('first-stylesheet');
    }
}

JS/HTML语言

<script>
const queryString = window.location.search
const mode = new URLSearchParams(queryString).get('mode')
function changeMode() {
  if ( mode == "dark" ) {
    document.getElementById("css-change").href="?mode=light";
  }
  else if ( mode == "light" ) {
    document.getElementById("css-change").href="?mode=dark";
  }
}
</script>

<button><a onclick="changeMode()" id="css-change" href="?mode=dark">Toggle Dark/Light Mode</a></button>

赞(0）回复(0）举报 2022-12-17

我来回答

Javascript中的WordPress样式表入队/出队

1条答案

相关问题

热门标签

最新问答