如何在 wordpress 上根据用户应用不同的样式表

Question

我有一个 Wordpress 自托管网站，用于提供有关一系列书籍的额外内容。在不久的将来，我打算让用户声明阅读了 he/she 系列中的哪本书 - 虽然这只是为了好玩，但我想我可以进一步推进这个想法。

问题是，由于通用页面上的某些内容如果他们没有读过某些书可能会被认为是剧透，我想根据登录用户应用不同的样式表 - 所以如果用户已经阅读在第 2 本书之前，样式表的加载方式是，任何带有 class "book3" 或更高的段落都会自动转换为带有剧透警报的隐藏段落。但是，如果用户已经已经阅读了第 3 本书，则会加载不同的样式表；一个不会那样做，并且会让用户正常看到内容的。

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

Answer 1

您可以在没有 javascript 的情况下完成此操作。

实现此目的的一种方法是，如果用户阅读了某本书，则向正文添加额外的 class。例如，如果用户已阅读第 1 本书，您可能希望将 class '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>

如果用户已阅读第一本书，您可以覆盖剧透样式：

p.spoiler {
    visibility:hidden;
}

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

请注意，我只是假设您使用 visibility: hidden; 来隐藏剧透文本。有不止一种方法可以做到这一点。

如果您想合并其他功能，例如 link 来显示剧透文本，那么您需要 javascript。如果你只是想在悬停时显示剧透文本，你可以只用 css:

p.spoiler:hover {
    visibility:visible;
}

Answer 2

要根据 Javascript 变量加载不同的 CSS 文件，您可以使用 switch statement. Each case would use document.write() 在 .这需要在 HTML 的主体加载之前完成，这样您就不会覆盖任何内容。链接到的 MDN 页面对此进行了详细说明。

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

  case possibility2: ...

  default: ...
}

另一种选择是对剧透应用 class。如果第 2 本书的内容会被破坏并且您知道 book2.hasRead === false，则隐藏的 class 将应用于该内容。使用 element.classlist and getElementById 是我想到的最简单的方法。

使用与响应式设计如何针对不同情况使用不同 CSS 类似的方法也可以，但我对此知之甚少，无法建议如何去做。

如何在 wordpress 上根据用户应用不同的样式表

How to apply different stylesheets based on user on wordpress

javascript

css

wordpress

jquery

stylesheet