我想在我的页面上显示不同的帖子，但问题是每个帖子都有一个独特的背景图片，此时此图片是通过背景图片属性添加的。
我需要用WordPress替换它，但我现在不知道如何实现这一点。我的想法是使用后缩略图作为背景图像，但在帖子中还有一个缩略图显示在内容中。
这是帖子的场景，背景图片，然后是标题，描述，然后是缩略图。抱歉，我无法上传任何我工作的屏幕截图，但我正在尽力描述整个场景。任何建议将不胜感激。
答案 0 :(得分：0)
这听起来像是使用像Advanced Custom Fields这样的插件的绝佳时机。安装完成后，您可以按照以下步骤操作：
现在，在模板文件中，您可以像这样获取图像：
<?php
// Where 'image' is the name of the field you added
$image = get_field('image');
?>
然后，您可以在以后的任何位置将图像包含在同一模板文件中，例如：
<div class="hentry" style="background-image:url(<?php echo $image['url']; ?>)"></div>
在CSS中，假设您希望背景图像占据帖子的整个背景：
<style type="text/css">
.hentry {
background-size:cover;
background-position:center;
}
</style>
如果有帮助，请告诉我。
答案 1 :(得分：0)
我相信我的第一个答案对某些人仍有帮助，但由于您无法使用高级自定义字段或其他插件，您可以在functions.php文件中添加以下代码。
请注意，我已经对this Stack Overflow post中的代码进行了稍微修改，以将其限制为一个图像而不是一组图像，并且我已经使用了更现代的媒体上传器。
此外，这只会将自定义字段添加到您的post类型，而不是您的网页，自定义帖子类型等。查看代码，我相信您可以弄清楚如何更改如果需要的话。
add_action( 'admin_init', 'add_post_image_so_30337102' );
add_action( 'admin_head-post.php', 'print_scripts_so_30337102' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_30337102' );
add_action( 'save_post', 'update_post_image_so_30337102', 10, 2 );
/**
* Add custom Meta Box to Posts post type
*/
function add_post_image_so_30337102()
{
wp_enqueue_media();
add_meta_box(
'post_image',
'Custom Uploader',
'post_image_options_so_30337102',
'post',
'normal',
'core'
);
}
/**
* Print the Meta Box content
*/
function post_image_options_so_30337102()
{
global $post;
$image_data = get_post_meta( $post->ID, 'image_data', true );
// Use nonce for verification
wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_30337102' );
?>
<div id="dynamic_form">
<div id="field_wrap">
<div class="field_row">
<div class="field_left">
<div class="form_field">
<label>Image URL</label>
<input type="text"
class="meta_image_url"
name="image[image_url]"
value="<?php esc_html_e( isset($image_data['image_url']) ? $image_data['image_url'] : '' ); ?>"
/>
</div>
<div class="form_field">
<label>Description</label>
<input type="text"
class="meta_image_desc"
name="image[image_desc]"
value="<?php esc_html_e( isset($image_data['image_desc']) ? $image_data['image_desc'] : '' ); ?>"
/>
</div>
</div>
<div class="field_right image_wrap">
<img src="<?php esc_html_e( $image_data['image_url'] ); ?>" height="48" width="48" />
</div>
<div class="field_right">
<input class="button" type="button" value="Choose File" onclick="add_image(this)" /><br />
</div>
<div class="clear" /></div>
</div>
</div>
</div>
<?php
}
/**
* Print styles and scripts
*/
function print_scripts_so_30337102()
{
// Check for correct post_type
global $post;
if( 'post' != $post->post_type )
return;
?>
<style type="text/css">
.field_left {
float:left;
}
.field_right {
float:left;
margin-left:10px;
}
.clear {
clear:both;
}
#dynamic_form {
width:580px;
}
#dynamic_form input[type=text] {
width:300px;
}
#dynamic_form .field_row {
border:1px solid #999;
margin-bottom:10px;
padding:10px;
}
#dynamic_form label {
padding:0 6px;
}
</style>
<!-- New script taken from here: http://brinidesigner.com/use-wordpress-3-5-new-media-uploader-for-your-plugin-and-theme-options-panel-development/ -->
<script type="text/javascript">
function add_image(obj) {
var parent=jQuery(obj).parent().parent('div.field_row');
var inputField = jQuery(parent).find("input.meta_image_url");
var image = wp.media({
title: 'Upload Image',
// mutiple: true if you want to upload multiple files at once
multiple: false
}).open()
.on('select', function(e){
// This will return the selected image from the Media Uploader, the result is an object
var uploaded_image = image.state().get('selection').first();
// We convert uploaded_image to a JSON object to make accessing it easier
// Output to the console uploaded_image
//console.log(uploaded_image);
var image_url = uploaded_image.toJSON().url;
// Let's assign the url value to the input field
inputField.val(image_url);
jQuery(parent)
.find("div.image_wrap")
.html('<img src="'+image_url+'" height="48" width="48" />');
});
return false;
}
</script>
<?php
}
/**
* Save post action, process fields
*/
function update_post_image_so_30337102( $post_id, $post_object )
{
// Doing revision, exit earlier **can be removed**
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
// Doing revision, exit earlier
if ( 'revision' == $post_object->post_type )
return;
// Verify authenticity
if ( !wp_verify_nonce( $_POST['noncename_so_30337102'], plugin_basename( __FILE__ ) ) )
return;
// Correct post type
if ( 'post' != $_POST['post_type'] )
return;
if ( $_POST['image'] )
{
// Build array for saving post meta
$image_data = array();
if ( '' != $_POST['image']['image_url'] )
{
$image_data['image_url'] = $_POST['image']['image_url'];
$image_data['image_desc'] = $_POST['image']['image_desc'];
}
if ( $image_data )
update_post_meta( $post_id, 'image_data', $image_data );
else
delete_post_meta( $post_id, 'image_data' );
}
// Nothing received, all fields are empty, delete option
else
{
delete_post_meta( $post_id, 'image_data' );
}
}
现在，您可以在模板的the_post()循环中获取图片网址（和说明），如下所示：
$image_data = get_post_meta( $post->ID, 'image_data', true );
然后像这样回显图像。您可以从我的第一个答案中重复使用CSS。
<div class="hentry" style="background-image:url(<?php echo $image_data['image_url']; ?>)"></div>