Question

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

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

这提供了一个简单的文本链接，我可以在我的模板中切换，在两个样式表之间切换，没有页面刷新，并与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（）;？＆gt;之上）：

<?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中，在＆＃34; head＆＃34;的结尾之间。并开始了＆＃34; body＆＃34;：

<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/

＆＃34;焦点模式＆＃34;应该切换可用的样式表。

Answer 1

我看过你的网址，我想我可以看到问题...

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

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

要：

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

我认为最近版本的jQuery不再需要@并且可能会导致问题（我编写了样式切换器代码但是很多年前它已经改变了很多jQuery）。如果您更新了网址，请告诉我们，如果有必要，我会更新我的脚本副本，以便其他人不会遇到同样的问题......

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

Answer 2

你在wp_enqueue脚本中有错误

wp_enqueue_script('stylesheetToggle.js');

应该是

wp_enqueue_script('stylesheetToggle');

你加载的文件也需要与jquery冲突，最简单的方法是用文件中的单词jQuery替换每个$符号（你要入队的2个文件）。

同时检查主题的路径是否正确等。

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

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

Wordpress中的JavaScript样式切换器

2 个答案: