在 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);

custom-wordpress-pages wordpress wordpress