Как управлять фоном изображения заголовка из виджета (боковой панели) в WordPress - PullRequest
0 голосов
/ 07 марта 2019

Вот моя цель:

Я хочу управлять изображением заголовка через бэкэнд в разделе виджетов (я добавил изображение под боковой панелью) через виджет, который я создаю с помощью WordPress.

Вот мой код:

<?php

add_action( 'widgets_init', 'theme_slug_widgets_init' );
function theme_slug_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Main Sidebar', 'theme-slug' ),
        'id' => 'sidebar-1',
        'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
        'before_widget' => '<div>',
        'after_widget'  => '</div>',

    ) );
}

?>

и в шаблоне я буду называть sidbar следующим образом:

<?php dynamic_sidebar( 'sidebar-1' ); ?>

Пока все хорошо, но что, если я хочу сделать что-то другое, например:

<header style="background-image: url(<?php dynamic_sidebar( 'sidebar-1' ); ?>)"></header>

Проблема этого подхода заключается в том, что функция dynamic_sidebar будет вызывать весь <div> с некоторой дополнительной разметкой, но моя идея состоит в том, чтобы вызывать только изображение с динамической боковой панели.

Есть ли способ сделать это?

1 Ответ

1 голос
/ 10 марта 2019

Я предлагаю вам использовать Wordpress Настройка API

Вы можете добавить настройку в своем настройщике, которую затем можно будет вызывать куда угодно:

    // Header Image.
    $wp_customize->add_setting('header_image', array( // header_image is your preferred name
        'default' => '',
        'transport' => 'refresh',
    ));
    $wp_customize->add_control( new WP_Customize_Media_Control( $wp_customize, 'header_image', array(
        'label' => __( 'header_image', 'your_theme' ),
        'section' => 'your_section',     // read more on what sections exist and how to implement them
        'mime_type' => 'image',
    )));

чтобы позвонить:

$image_id = get_theme_mod( 'header_image', '' ); // get the image id
$image = wp_get_attachment_image_src( $image_id, 'full' );  // gets the image source
...