在伪元素中获取特色图片（即：之前或之后）- WordPress

Question

我想在伪元素中获取 WordPress 特色图片。我使用以下代码以内联样式使用它

<?php
$thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($whatWeDo_post->ID), 'single-post-thumbnail' );
?>

<div style="background-image: url(<?php echo $thumb_url[0]; ?>);">

但是我想在伪元素中使用它

Answer 1

这是从 Lister 先生的评论中提取出来的，但这是执行此操作的方法。这不是构建 html 的最佳方式，但它应该有效：

<?php $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($whatWeDo_post->ID), 'single-post-thumbnail' ); ?>
<div class="myDiv"></div>
<style type="text/css">
.myDiv:before{
    background-image: url('<?php echo $thumb_url[0]; ?>');
    content: '';
}
</style>

我不确定您是否会运行遇到一些与旧版浏览器和之外的标记的浏览器兼容性问题，但它应该适用于现代浏览器。

Answer 2

选项 1

这里您主要关心的是缓存。您不想将 background-image 样式写入外部 .css 文件，因为它可能会在每一页上发生变化。但是您不想用大量额外的内联样式阻塞主 HTML 文件。

您最好的选择是只分离您不想缓存的内容（background-image 和其余样式）。我们只想内联不应该缓存的内容，而将其余内容保留为外部 .css 文件。

假设与您的精选图片容器相关的样式是这样的：

figure::before {
    display:block;
    height:300px;
    width:500px;
    margin:0;
    background-image:url();
    background-size:cover;
    background-position:center center;
}

只保留您的 .css 文件完全相同的格式（不要使用 .css.php），但拉出 background-image 行。

然后在 header 中放置：

<style>
    figure::before {
        <?php $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($whatWeDo_post->ID), 'single-post-thumbnail' ); 
        background-image: url(<?php echo $thumb_url[0];?>);
    }
</style>

奖金 - 另一种娱乐选择

第二个选项是使用 .php 文件和 .css HTTP header。我喜欢将我的文件命名为：

styles.css.php

优势

这让您可以直接在样式表中使用 WordPress 变量和数据，以及 PHP 的全部功能。但它仍然作为 .css 文件发送到浏览器，因此您可以像往常一样将其加入队列。这是最容易实现的。注意，一定要包含全局 post object.

缺点

你使用资源缓存吗？如果您 .css 文件被缓存，您将运行遇到问题，因为文件不会在每一页上更改。在您的特定情况下，每个页面上的特色图片都会有所不同。如果你不缓存，应该没问题，但你绝对应该缓存，所以你应该跳过这个选项。

调整奖金选项

如果您喜欢选项 1 但确实缓存（您应该这样做），则可以采取中间立场。创建与上面相同的文件，例如：

styles.css.php

您可以使用 PHP 的 include 读取文件，而不是使用 wp_enqueue_style 将其放入 official way 队列功能。

在您的 functions.php 文件中创建函数：

function writeInlineCSS() {

    include TEMPLATEPATH . '/styles/styles.css.php';
}

然后在您的 header 中添加：

<style>
    <?php writeInlineCSS(); ?>
</style>

CSS 将被拉入并内联写入。

优势

缓存不会成为问题。此外，您不会有大型渲染阻塞 .css 资源。加上选项 1 的优势。

缺点

您可能包含大量 CSS 内联。可能太多了。

在伪元素中获取特色图片（即：之前或之后）- WordPress

Get Featured Image in pseudo elements( i.e. :before or :after) - WordPress

php

html

css

wordpress

pseudo-element

选项 1

奖金 - 另一种娱乐选择

调整奖金选项