在子主题 CSS 文件上参考 WP 媒体文件 - CSS

在 WordPress 主题开发中，有时需要在 CSS 文件中引用 WP 媒体文件。这样做的好处是可以让主题自适应不同分辨率屏幕，加快页面加载速度，同时可以避免媒体文件无法正确显示的问题。

1. 在 CSS 中引用 WP 媒体文件

在 CSS 文件中引用媒体文件的方法和在 HTML 文件中引用类似，只是需要使用 CSS 属性来代替 HTML 标签。

/* 在 CSS 中引用图片 */
.selector {
  background-image: url('path/to/image.jpg');
}

/* 在 CSS 中引用音频文件 */
.audio {
  background: url('path/to/audio.mp3') no-repeat left center;
}

/* 在 CSS 中引用视频文件 */
.video {
  background: url('path/to/video.mp4') no-repeat left center;
}

以上代码中，url 中的路径可以是媒体文件在 WordPress 中的相对路径，例如：/wp-content/uploads/2021/11/image.jpg。如果不确定相对路径，可以使用以下代码输出媒体文件的绝对路径：

<img src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" alt="">

$attachment_id 是媒体文件在 WordPress 中的 ID。

2. 使用动态 CSS

为了让主题更加灵活，可以使用动态 CSS。动态 CSS 意味着 CSS 文件是在 PHP 中生成的，因此可以使用 PHP 函数输出 WP 媒体文件的绝对路径，而不需要手动输入路径。

以下是一个示例：

<?php
header('Content-Type: text/css');
ob_start('compress');

function compress($buffer) {
    /* 压缩 CSS */
    return $buffer;
}

/* 获取媒体文件的相对路径 */
$image_url = wp_get_attachment_url(123);

/* 输出动态 CSS */
?>
.selector {
  background-image: url('<?php echo $image_url; ?>');
}

以上代码中，header('Content-Type: text/css') 声明了返回的内容类型为 CSS。ob_start('compress') 开启输出缓存，并指定回调函数为 compress，用于压缩 CSS。

compress 函数是在输出 CSS 之前执行的回调函数，可以根据需要进行 CSS 压缩。

在获取媒体文件的相对路径后，可以使用 echo 函数将其输出到 CSS 文件中。这样就可以动态地引用 WP 媒体文件了。

3. 总结

在 WordPress 主题中，引用 WP 媒体文件是很常见的需求。使用 CSS 属性可以方便地在 CSS 文件中引用媒体文件。如果想要更加灵活，可以使用动态 CSS，在 PHP 中生成 CSS 文件，并输出 WP 媒体文件的绝对路径。

以上介绍的方法建议放在子主题中完成，以免覆盖原主题的样式。