以内联方式显示 Wordpress 排队样式 css 文件？

Question

大家好我有这个 Wordpress 网站，我想将其转换为 AMP 网站，其中一项具有挑战性的任务是重写内联 css。

所以在 wordpress 框架中我们有这个 functions.php 文件并且在里面我们有 wp_enqueue_style 函数。

/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_mytheme_styles() {
  wp_enqueue_style( 'style', get_stylesheet_uri() . '/css/style.css' );}

  add_action( 'wp_enqueue_scripts', 'wpdocs_mytheme_styles' );

基本上 Wordpress 会在前端页面上给我们这一行

<link rel='stylesheet' id='style'  href='Path_to/css/stle.css' type='text/css' media='all' />

我可以改变这个显示机制让Wordpress以这种方式在**INLINE中显示注册的样式吗:**

<style amp-custom>
<!-- The content of the style.css -->
<!-- .... -->

</style>

是的，基本上我有很多这样的文件，我不想通过打开每个文件和 copy/pasting header 中的内容进行静态更改，有什么想法吗？

Answer 1

您想使用内联样式有什么具体原因吗？

Answer 2

您需要使用 wp_head()

将样式直接添加到页眉

add_action('wp_head', 'my_custom_styles', 100);
function my_custom_styles()
{
 echo "<style>*{color: red}</style>";
}

Answer 3

你可以这样做：

<style amp-custom>
  {% include "/assets/css/main.min.css" %}
 </style>

或者，

<style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }
      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>

参考 : AMP-DEV

以内联方式显示 Wordpress 排队样式 css 文件？

Display Wordpress enqueue style css files in inline?

php

wordpress

amp-html