Подложка (картинка) из CSS в админку WP

124

09 апреля 2022, 11:10

На первом экране сайта, как подложка лежит картинка. Она затянута не через HTML, а через CSS.

.header-bg { background: url(../img/sec1/sec1_bg.jpg) no-repeat; background-size: cover; height: 100vh; width: auto; }

Вопрос: Можно ли ее как привязать в админку Wordpress, используя плагин, например, ACF? Из html (php) я знаю как вытягивать, а вот из сss - нет.

Answer 1

Регистрируете в functions.php опцию в кастомайзере(Внешний вид - Настроить):

function my_customizer( $wp_customize ) {
    $wp_customize->add_setting( 'theme_header_bg' );
    $wp_customize->add_control( 
        new WP_Customize_Image_Control(
            $wp_customize,'theme_header_bg',array(
                'label' => 'Header Background Image',
                'section' => 'title_tagline',
                'settings' => 'theme_header_bg',
                'priority' => 2
            )
        )
    );
}
add_action( 'customize_register', 'my_customizer' );

Заполняете опцию в настройках в том же functions.php. Затем добавляете инлайн стили к свои стилям темы ('your-styles-name' - нужно заменить на название ваших стилей):

function my_styles_method() {
    wp_enqueue_style( 'your-styles-name', get_template_directory_uri() . '/css/custom_script.css' );
    $bg = get_theme_mod( 'theme_header_bg' ) ?? '../img/sec1/sec1_bg.jpg';    
    $custom_css = "
        .header-bg{
            background: url({$color});
        }";
    wp_add_inline_style( 'your-styles-name', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );