在 Wrodpress 中为一个页面在两个 CSS 文件之间切换

如何解决在 Wrodpress 中为一个页面在两个 CSS 文件之间切换

我正在尝试将我的 html 模板转换为 wordpress 主题。 html 模板有一个开关可以在“浅色”和“深色”之间转换页面主题（我有一个用于浅色和深色模式的 CSS 文件，所以基本上我使用 JavaScript 在按钮单击时在这两个文件之间切换）。

现在我正在尝试将我的模板转换为 wordpress 主题，但我面临的问题是，当我将 CSS 文件添加到 functions.PHP 时，它似乎同时加载了所有 CSS 文件。有没有办法在 wordpress 中通过单击按钮在这些文件之间切换。

这是functions.PHP文件

  add_theme_support( 'post-thumbnails' );

  function load_stylesheets(){

      wp_register_style('homepage',get_template_directory_uri() . '/CSS/homepage.css',array(),1,'all');
      wp_enqueue_style('homepage');

      wp_register_style('homepage',get_template_directory_uri() . '/CSS/homepage_dark.css','all');
      wp_enqueue_style('homepage_dark');

      wp_register_style('single',get_template_directory_uri() . '/CSS/single.css','all');
      wp_enqueue_style('single');

  }

  add_action('wp_enqueue_scripts','load_stylesheets');
  

// Load Scripts

function load_js(){
  
  wp_register_script('homepagejs',get_template_directory_uri() . '/JavaScript/homepage.js',1);
  wp_enqueue_script('homepagejs'); 

  wp_register_script('masonry',get_template_directory_uri() . 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js',1);
  wp_enqueue_script('masonry');

  wp_register_script('singlejs',get_template_directory_uri() . '/JavaScript/single.js',1);
  wp_enqueue_script('singlejs'); 
}

add_action('wp_enqueue_scripts','load_js');

?>

这是带有切换功能的JS文件

window.onload = () =>{
    const grid = document.querySelector('.grid-container');
    const masonry = new Masonry(grid,{
        itemSelector: '.grid-item',gutter: 15,marginBottom: 15,columnWidth: 260,fitWidth: true,horizontalOrder: true

    });
}



function toggleTheme() {
    // Obtains an array of all <link>
    // elements.
    // Select your element using indexing.
    var theme = document.getElementsByTagName('link')[0];
    var btn = document.getElementsByClassName("switch")
    // Change the value of href attribute 
    // to change the css sheet.
    if (theme.getAttribute('href') == '/CSS/homepage.css') {
        theme.setAttribute('href','/CSS/homepage_dark.css');
        btn.value = "Light Mode"
        document.getElementsByClassName('img_logo').src= '/assets/img/logo_white.svg'
    } else {
        theme.setAttribute('href','/CSS/homepage.css');
        btn.value = "Dark Mode"
        document.getElementsByClassName('img_logo').src= '/assets/img/logo.svg'
    }
}

在front-page.PHP中更改主题

 <div class ="dark_mode_switch">
     <label class="switch" id="theme_toggle_switch" onchange="toggleTheme()">
            <input type="checkBox">
            <span class="slider round"></span>
     </label>
 </div>

解决方法

我的建议是采用 CSS 样式表 URL 并将它们输出到内嵌 JavaScript。

所以在你的functions.php中你可以做这样的事情：

function load_js() {
    $stylesheets = [
        'themes' => [
            'dark' => get_template_directory_uri() . '/CSS/homepage_dark.css','light' => get_template_directory_uri() . '/CSS/homepage.css' 
        ]
    ];

    wp_register_script('singlejs',get_template_directory_uri() . '/JavaScript/single.js',array(),1,1);
    wp_add_inline_script( 'singlejs',json_encode($stylesheets));
}

然后你可以修改你的 JavaScript 来获取样式表 URL 并使用它们做任何你想做的事情：

console.log(themes.light);
console.log(themes.dark);