Wordpress 中的 JavaScript 样式切换器

Question

我正在尝试在 Wordpress 中实现一个简单的基于 Toggle 的样式切换器。该解决方案最初是为 HTML 编写的。可以找到here。

可以在那里找到必要的 .js 文件。查看下面 Vitch 的 cmets 以更正 stylesheetToggle.js 文件中的一个错误。

这提供了一个简单的文本链接，我可以将它放入我的模板中，在两个样式表之间切换，无需刷新页面，并与一个 cookie 链接，该 cookie 会记住用户在网站其他地方的选择。

这是我到目前为止所得到的（抱歉，我是根据我在阅读大量尝试创建样式切换器时所学到的知识来拼凑这些的）。

为了简单起见，所有文件都在我的主题文件夹的根目录下。

我将此添加到我的functions.php：

function wpb_adding_scripts() {
wp_register_script('stylesheetToggle', get_template_directory_uri() . '/stylesheetToggle.js', array('jquery'),'1.1', false);
wp_enqueue_script('stylesheetToggle');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );   

function wpb_adding_styles() {
wp_register_style('contrast', get_stylesheet_directory_uri() . '/contrast.css');
wp_enqueue_style('contrast');
wp_register_style('white', get_stylesheet_directory_uri() . '/style.css');
wp_enqueue_style('white');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  

然后在我的 index.php 中添加（在顶部，在 get_header(); 上方？>）：

<?php wp_enqueue_script("stylesheetToggle"); ?>

在我的 header.php 中我添加了：

<link rel="stylesheet" type="text/css" href=" ... /style.css" title="white">
<link rel="alternate stylesheet" type="text/css" href=" ... /contrast.css" title="contrast">
<?php wp_enqueue_script("stylesheetToggle"); ?>

注意：样式表的 URL 必须是绝对路径。

这也出现在 header.php 中，位于“head”的结尾和“body”的开头之间：

<script>
jQuery.noConflict();
  jQuery(document).ready(function($) {
  $(function()
    {
        // Call stylesheet init so that all stylesheet changing functions 
        // will work.
        $.stylesheetInit();

        // This code loops through the stylesheets when you click the link with 
        // an ID of "toggler" below.
        $('#toggler').bind(
            'click',
            function(e)
            {
                $.stylesheetToggle();
                return false;
            }
        );

        // When one of the styleswitch links is clicked then switch the stylesheet to
        // the one matching the value of that links rel attribute.
        $('.styleswitch').bind(
            'click',
            function(e)
            {
                $.stylesheetSwitch(this.getAttribute('rel'));
                return false;
            }
        );
    }
);
});
</script>

在我的相关模板文件中，我添加了：

<a href="#" id="toggler">Focus mode</a>

结果：这要归功于 Vitch 和 David。

页面网址：http://thiscouldbeparadise.org/change/

“焦点模式”应该切换可用的样式表。

Answer 1

我查看了您的网址，我想我可以看到问题...

尝试将 styleswitcher 代码的第 25 行更改为：

$('link[@rel*=style][title]')

收件人：

$('link[rel*=style][title]')

我认为@ 对于最新版本的 jQuery 不再是必需的，并且可能会导致问题（我编写了样式切换器代码，但它是多年前的事了，此后 jQuery 发生了很大变化）。当你更新你的 URL 时告诉我，如有必要，我会更新我的脚本副本，这样其他人就不会遇到同样的问题......

我还注意到，在您的页面中，我目前看不到您尝试添加的两个样式表（“默认”和“对比”）。检查您是否也正确地将它们添加到页面...

Answer 2

你在 wp_enqueue 脚本中有一个错误

wp_enqueue_script('stylesheetToggle.js');

应该是

wp_enqueue_script('stylesheetToggle');

您正在加载的文件也需要与 jquery 不冲突，最简单的方法是将文件中的每个 $ 符号替换为单词 jQuery（您正在排队的 2 个文件）。

还要检查主题的路径是否正确等。

还可以使用 jsfiddle 检查你的 js 文件，它有一个方便的提示按钮（js 代码中没有 php vars 可以正常工作）。

如果您仍有问题，请回复。