Wordpress中的JavaScript样式切换程序

我试图在Wordpress中实现一个简单的基于切换的样式切换程序。该解决方案最初是为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（）；？>）上方）：

在my 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”的开头之间：

jQuery.noConflict（）；
jQuery（文档）.ready（函数（$）{
$（函数（）
{
//调用样式表init，以便所有样式表更改函数
//会有用的。
$.stylesheetInit（）；
//当您单击带有的链接时，此代码在样式表中循环
//下面是“切换器”的ID。
$（“#切换器”）.bind(
“点击”，
职能（e）
{
$.stylesheetToggle（）；
返回false；
}
);
//单击其中一个样式切换链接后，将样式表切换到
//与链接rel属性的值匹配的链接。
$（'.styleswitch'）.bind(
“点击”，
职能（e）
{
$.stylesheetSwitch（this.getAttribute（'rel'））；
返回false；
}
);
}
);
});

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

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

结果：多亏了Vitch和David，这一点现在起作用了

页面URL:

---

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

您在wp\u排队脚本中有一个错误

wp_enqueue_script('stylesheetToggle.js');

应该是

wp_enqueue_script('stylesheetToggle');

此外，您正在加载的文件需要处于无冲突jquery中，最简单的方法是将文件中的每个$symbol替换为单词jquery（您正在排队的两个文件）

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

还可以使用jsfiddle检查js文件，它有一个方便的提示按钮（js代码中没有php变量）

---

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

我已经查看了您的URL，我想我可以看到问题

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

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

致：

我认为，

@

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

---

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

谢谢David。我换了排队。我试图实现无冲突，但我认为我做得不对。在每个实例中都必须用jQuery查找/替换$？包括第一行吗？js文件在这里：我排队的另一个文件是.css文件。我检查了路径。我觉得没问题。我试图让JSFIDLE工作，但失败了。就在这里：我注意到在我添加到functions.php的第二个函数中，我使用了wp_register_脚本。我把它改成了wp_register_风格。类似地，wp_enqueue_styleno也可以按照文件中的方式执行。检查控制台并开始处理错误。另外，get_template_directory_uri（）不接受参数，所以您需要的是get_template_directory_uri（）。/yourfile.php'谢谢您，David。我编辑了我原来的问题，以反映现在更正的错误。上面是我目前正在使用的代码，在哪里。我在header.php中添加了/到href，这似乎消除了太多重定向错误。现在，没有控制台错误。但是开关坏了。我想是因为我还没打电话。事实上，我不清楚怎么称呼它，在哪里。因此，取得了进展，但尚未解决。注意，我没有在标题中包含脚本。这就产生了重定向。另外，现在，自定义css样式是加载到页面上的样式，而不是我的默认样式删除标记。还有这里的代码：你在哪里添加的？是否已更改为无冲突？我在header.php中添加了脚本（请参阅上面的原始帖子）。我希望是正确的。关于代码，我不知道该怎么处理。它应该去哪里？我是否应该用“jQuery（document）.ready（function（$）{//code.}）；”来包装它谢谢你，维奇。我修改了它，还将我的默认css添加到functions.php中，并命名为“white”（参见上面我的原始帖子）。我更改了header.php以反映这一点。现在，按下“焦点模式”，这是我的切换，什么也不做。但它不会像以前那样跳转页面，这是一件好事。尝试将“”添加到page.php、single.php、index.php和_page-cover-wrap.php（这就是“焦点模式”切换的位置）。没有区别。我可以看到代码已经输出到你的页面两次了！如果您查看源代码并发现“在任何地方使用“”会产生太多重定向错误。我尝试了几种组合。为了澄清：a）它应该在header.php中，在head标记中，对吗？b）它也应该在我的页面上的某个地方。我试着输入single.php、page.php和_post-cover-wrap.php，这是“焦点模式”“出现，假定的切换。因为将链接引用更改为样式表和备用样式

wp_enqueue_script('stylesheetToggle');

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

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