1

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

可以在那里找到必要的 .js 文件。查看下面 Vitch 的评论以更正 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/

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

4

2 回答 2

1

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

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

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

至：

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

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

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

于 2014-08-07T09:28:17.060 回答
0

你在 wp_enqueue 脚本中有一个错误

wp_enqueue_script('stylesheetToggle.js');

应该

wp_enqueue_script('stylesheetToggle');

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

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

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

如果您仍然有问题，请回帖。

于 2014-08-06T08:18:13.793 回答