以内联方式显示 WordPress 排队样式的 css 文件?

Question

大家好，我有一个Wordpress网站，我想把它变成一个AMP网站，其中一个艰巨的任务是内联重写css。

因此，在wordpress框架中，我们有此功能.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 以这种方式在 :** 中显示

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

是的，基本上我有很多这样的文件，我不想通过打开每个文件并在标题中复制/粘贴内容来进行静态更改，有什么想法吗？

Answer 1

你可以这样做：

<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>

参考： 放大器开发

Answer 2

您需要使用 wp_head(( 将样式直接添加到页面标题中

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

Answer 3

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