Question

我目前使用CSS设置了每个页面标题部分的背景图片：

.banner {
  background: url('img/banners/homebanner1.jpg') no-repeat;
  background-size: cover;
  padding: 2em 0;
}

理想情况下，我想通过上传图片来改变UI中任何页面的背景图像，而不是必须进入CSS来更改它，从而增加了一点灵活性。

我是如何实现这一目标的？

Answer 1

您可以使用仪表板小部件通过wp选项执行此操作，首先将其添加到主题文件夹的functions.php

function add_michal_dashboard_widget(){
wp_add_dashboard_widget(
  'michal_dashboard_widget',         // slug.
  'Michal Dashboard Widget',         // title
  'michal_dashboard_widget_function' // widget code
  );  
}

function register_mysettings() {
  register_setting( 'michal-option-group', 'background' );
}
add_action( 'admin_init', 'register_mysettings' );

function michal_dashboard_widget_function(){
if (isset($_POST['background'])) update_option( 'background', sanitize_text_field( $_POST['background'])); 
?> 
<?php settings_fields( 'michal-option-group' ); ?>
<?php do_settings_sections( 'michal-option-group' ); ?>
<form method="post" action="<?php $_SERVER['PHP_SELF'] ?>">
<table class="form-table">
<tr valign="top">
<th scope="row">Background</th>
<td><input type="text" name="background" value="<?php echo get_option('background'); ?>" /></td>
</tr>

</table>

<?php submit_button(); ?>
</form>

<?php       
} 
add_action( 'wp_dashboard_setup', 'add_michal_dashboard_widget' );

然后将样式添加到主题标题（最可能是header.php）

<style>
.banner{
background: url("<?php echo get_option('background'); ?>") no-repeat;
background-size: cover;
padding: 2em 0;
}
</style>

还有一件事，添加到functions.php时要小心，不要在新的行之间留下char吗？＆gt;

在Wordpress上更改标题背景图像

1 个答案: