Div背景图片的自定义字段? (wordpress) [英] Custom Fields for Div background images? (wordpress)

查看:273
本文介绍了Div背景图片的自定义字段? (wordpress)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想知道如何做到这一点,我已经看到了一个例子 smashingmagazine ,但这是为索引Feed中的后台背景,并需要插入,我认为它只是一个

I'm wondering how this would be done, I've seen an example on smashingmagazine but that is for the post background in the index feed and requires a plug in,I assumed it would simply be a case of

<div background="<?php the_field('custom_field_name');?>">

但是,这到目前为止没有工作,我猜这是由于我不设置一个特定的直接url,然而,由于我能够通过自定义字段在帖子中放置图像,我相信它可以得到我想达到的效果。

this however, hasn't worked so far, I'm guessing this is due to me not setting a specific direct url, however since I'm able to place images via custom field in the post I'm sure its possible to get the effect I want achieved.

另一个想法我已经设置一个源作为自定义字段通过PHP,我已经为我的自定义主题,虽然我不知道正确的CSS应用于img类,它的容器div,以确保

Another idea I had was to set an with the source as a custom field via php, which I have already done for my custom theme, though I'm not sure about the correct css to applied to the img class and it's container div to make sure it functions as the background.

推荐答案

HTML中没有背景属性。你想要的是一个带有样式的内联CSS属性。所以您想要的结果是:

There is no background attribute in HTML. What you want instead is an inline CSS property with the style. So your desired result is:

<div style="background-image: url('http://absolute/path/to/img.jpg');">

到那里的代码取决于你的 custom_field_name 自定义字段。如果它是一个绝对url,那么你需要的是

And the code to get there depends on what is stored in your custom_field_name custom field. If it's an absolute url, then all you need is

<div style="background-image: url('<?php the_field('custom_field_name'); ?>');">

如果它是一个相对URL。主题根,在 the_field()前添加 get_stylesheet_directory_uri(); 。我会避免硬编码绝对URL的第一部分,但如果你不需要该解决方案是可移植的。

If it's a relative URL to eg. the theme root, add get_stylesheet_directory_uri(); in front of the_field(). I'd avoid hardcoding the first part of the absolute URL, but it's possible if you don't need the solution to be portable.

这篇关于Div背景图片的自定义字段? (wordpress)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆