如何仅将自定义 CSS 样式应用于 Amp 页面答案

【问题标题】：How do I apply custom css styles only to Amp pages如何仅将自定义 CSS 样式应用于 Amp 页面
【发布时间】：2020-04-08 14:46:56
【问题描述】：

我有一个 wordpress 网站，现在我正在转换到一个 AMP 网站，我正在使用 amp plugin 现在我的网站有很多 css 文件，我可以内联的样式是有限的，所以我试图添加一个自定义 css 使用：

<style amp-custom>
 .someclass={/*my custom css I want it to affect only amp pages*/}

</style>

我可以通过将样式添加到 header.php 文件来毫无问题地将样式添加到所有页面，现在问题是我希望这种样式仅应用于我的 amp 页面，它们有一个特殊的 url（添加 ?amp at结束）。

www.mywebsite.com : 是我的网站
www.mywebsite.com?amp 是我网站的 amp 页面，我通过添加这些内联自定义 css 来覆盖 css 以影响这些页面。

我可以让自定义 css 仅应用于 amp 页面吗？

【问题讨论】：

难道 amp 页面的正文中没有一些额外的样式类，然后您可以使用它来创建特定的 css 规则吗？
基本上我正在使用一些过渡插件，所以我有 2 个网站，其中一个是 Amp 网站，其 Urls 以 ?amp 结尾，我希望样式只针对 @Sami Ahmed Siddiqui 所做的 Amp 页面回答问题。但我不是每次都有这种风格。也许我有 2 个
很公平。只是想提出一个非 js 解决方案
谢谢 Steven De Groote 随时欢迎您为此问题提出更好的答案
这能回答你的问题吗？ How to Add Custom CSS and Script in AMP Pages

标签： css wordpress amp-html

【解决方案1】：

如果您正在使用this 插件，则可以使用amp_post_template_css 操作。

function custom_post_template_css() {
  ?>
  .someclass={
    /*my custom css I want it to affect only amp pages*/
  }
  <?php
}
add_action( 'amp_post_template_css','custom_post_template_css', 11 );

有关文档，请参阅Custom CSS。

【讨论】：

感谢您的回复和链接，所以当您为非原生 amp 主题选择过渡时，此插件不太好，最好为那些选择阅读器模式

【解决方案2】：

有点棘手，但在我在论坛中搜索后，我发现 amp 插件 provides a method is_amp_endpoint() 用于了解页面是否为 Amp 页面，因此在 Wordpress 主题 header.file 中使用一点 PHP，我们可以影响所有 AMP页面。

<style amp-custom>
<?php
    if (is_amp_endpoint()){
        echo(".mypanel_class{color:white !important;}");
        echo("div#myid{display:none;}");
    }
    ?>
</style>

【讨论】：