如何僅將自定義 css 樣式應用於 Amp 頁面

Question

我有一個 wordpress 網站，我現在正在將其轉換為 AMP 網站我正在使用amp 插件現在我的網站有很多 css 文件，我可以內聯的樣式有限，因此我嘗試添加自定義 css 使用：

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

</style>

通過將樣式添加到 header.php 文件，我可以毫無問題地將樣式添加到所有頁面，現在問題是我希望此樣式僅應用於我的 amp 頁面，它們有一個特殊的 URL（在末尾添加 ?amp） .

• www.mywebsite.com : 是我的網站

• www.mywebsite.com?amp 是我網站的 amp 頁面，我通過添加這些內聯自定義 css 來影響這些頁面來覆蓋 css。

我可以讓自定義 css 只應用於 amp 頁面嗎？

Answer 1

如果您正在使用此插件，則可以使用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 );

有關文檔，請參閱自定義 CSS 。

Answer 2

有點棘手，但在我在論壇中搜索后，我發現 amp 插件提供了一種方法 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>