Question

我有一个Wordpress自托管网站，可以获得有关一系列图书的额外内容。在不久的将来，我打算让用户声明他/她读过的系列中的哪本书 - 虽然这只是为了好玩，但我想我可以更进一步。

问题是，由于通用页面上的某些内容可能会被视为破坏者，如果他们还没有读过某些书籍，我想根据登录用户应用不同的样式表 - 所以如果用户已阅读直到第2册，样式表将以这样的方式加载，即任何带有类＆＃34; book3＆＃34;或更高版本将自动转换为带有扰流警报的隐藏段落。但是如果用户已经已经阅读了第3册，则会加载不同的样式表;一个不会这样做，并让用户正常看到内容。

我认为这也可以用javascript完成，但我想CSS会更容易吗？当然，我会根据这两种方法获得答案（包括关于javascript的jQuery）。

Answer 1

你可以在没有javascript的情况下完成此任务。

执行此操作的一种方法是，如果用户已阅读特定图书，则向正文添加其他类。例如，如果用户已阅读第1册，则您需要将“read-book-1”类添加到正文中。您可以使用body_class过滤器在WordPress中完成此操作。

https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class

这是一个精简的例子：

add_filter('body_class', function($classes) {
    if(/* if user has read book 1 */) {
        $classes[] = 'read-book-1';
    }
    return $classes;
}

然后，假设您的标记看起来像这样：

<p class="spoiler book-1">...</p>

如果用户已阅读第1册：

，您可以覆盖扰流风格

p.spoiler {
    visibility:hidden;
}

.read-book-1 p.spoiler.book-1 {
    visibility:visible;
}

请注意，我只是假设您正在使用visibility: hidden;来隐藏剧透文本。这样做的方法不止一种。

如果您想要添加其他功能，例如显示剧透文本的链接，那么您需要使用javascript。如果您只是想在悬停时显示扰流文本，您只需使用css：

即可

p.spoiler:hover {
    visibility:visible;
}

Answer 2

要根据Javascript变量加载其他CSS文件，您可以使用switch语句。每个案例都会使用document.write()来写。这需要在HTML主体加载之前完成，因此您不会覆盖任何内容。链接的MDN页面解释了详细信息。

switch (variable) {
  case possibility1:
    document.write("<link rel='stylesheet' href='___.css' type='text/css'>");
    break;

  case possibility2: ...

  default: ...
}

另一种选择可能是将一个类应用于剧透。如果第2册中的内容被破坏而您知道book2.hasRead === false，则隐藏的类将应用于该内容。使用element.classlist和getElementById是最容易想到的方法。

使用类似的方法来响应设计如何在不同的情况下使用不同的CSS也可以工作，但我不知道如何建议如何这样做。

如何在wordpress上基于用户应用不同的样式表

2 个答案: