header_image() with CSS

时间:2017-10-05 作者:Krono

请原谅我对这件事的无知,因为我才刚刚开始钻研wordpress。但是,我想知道是否有一种方法header_image() 在CSS中。

例如,我的functions.php 允许我使用以下标题将php文件排队:

<?php header("Content-type: text/css; charset: UTF-8;"); ?>

允许我用它来操纵我的主题。现在,我希望我的标题图像可以通过自定义程序进行编辑,而不是用户必须导航CSS文件。例如:

.headerimg { 
/* Set a specific height */
height: 700px; 

/* Create the parallax scrolling effect */
background-image: url("<?php header_image()?>");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

/* Styling */
border-top: 3px solid transparent;
border-bottom: 3px solid #0099FF; }
当然,这不起作用,并引发错误:

致命错误:未捕获错误:调用[文件路径]中未定义的函数header\\u image()

那么,简而言之,有什么方法可以达到这种效果吗?还是我只能依靠直接向上<img> 元素

2 个回复
最合适的回答,由SO网友:Pierpaolo Ercoli 整理而成

不,一般来说,不可能在CSS中使用php。但您可以在php文件中设置背景图像。喜欢

<div class="headerimg" style="background-image: url(<?php echo header_image(); ?>)"></div>
然后,在使用类的CSS文件中,您可以设置所有其他需要的属性,如高度、宽度、背景位置等。

SO网友:ssnepenthe

为了访问header_image() 像这样的功能,您必须从生成样式表的文件中引导整个WordPress。

更好的选择是使用静态。css文件,但提取动态部分以在中使用wp_add_inline_style(). 当一切都说了又做了,它可能看起来像:

// Generate inline scripts and styles and attach them to the appropriate script handles.
function my_inline_scripts() {
    // header_image() prints the image - we want it as a string.
    $image = get_header_image();

    // Can be false - it might be better to set a fallback here...
    if ( ! $image ) {
        return;
    }

    // First param should be the handle of your theme stylesheet.
    wp_add_inline_style( \'my-theme-style\', ".headerimg { background-image: url(\\"{$image}\\"); }";
}
add_action( \'wp_enqueue_scripts\', \'my_inline_scripts\' );

结束

相关推荐

我的子主题CSS被调用两次

我无意中发现我的子主题CSS被调用了两次。我发现这是一个老问题(参见here 和here), 但在我的情况下,我不知道如何解决它。<link rel=\'stylesheet\' id=\'parent-style-css\' href=\'http://infopsi.md/wp-content/themes/twentyseventeen/style.css?ver=4.8.1\' type=\'text/css\' media=\'all\' /> <link rel=\