更改WordPress中的特定部分背景图像

时间：2015-11-30 作者：Dennis

如何更改wordpress中的特定节背景图像？

我通过CSS设置了背景图像：

.section3 {
    background: url(bg.jpg) no repeat;
}
假设我想稍后通过WordPress仪表板更改此图像。我该怎么做？我想添加功能，以便用户将来可以更改图像。

默认背景功能仅允许用户更改页面上的背景颜色。我想针对这个特定的部分。

2 个回复
最合适的回答,由SO网友:jgraup 整理而成

使用Customizer API （）Advanced Topics ) 修改动态背景。

<小时>

UPDATE

Eric Lewis 刚刚提交了一份idea last night 这可能使使用Customizer定制单个帖子内容成为可能，而不仅仅是全局主题选项。退房Custom CSS per post in WordPress. 他还展示了如何在编辑贴子页面中添加一个按钮，该页面在模式窗口中显示定制器，以便更快地进行AJAX预览。

<小时>

Gist

add_action( \'admin_enqueue_scripts\', function($hook_suffix) {
    if ( in_array( $hook_suffix, array( \'post.php\', \'post-new.php\' ) ) ) {
        wp_enqueue_script( \'customize-loader\' );
    }
} );

add_action( \'post_submitbox_misc_actions\', function() {
    $customize_url = add_query_arg(

        array(
            // current page
            \'url\' => urlencode( get_post_permalink() ),

            // custom url
            // \'url\' => urlencode( home_url() . \'/page-to-preview/\' ),

            // deeplink to panel
            // \'autofocus\' => array( \'panel\' => \'widgets\' )
        ),

        wp_customize_url()
    );

    ?><button class="load-customize"
              href="<?php echo esc_url( $customize_url ) ?>"
              type="button">Show In Customizer</button>
    <?php
} );
<小时>

还有contextual controls 如果要针对特定页面。

但我认为最简单的方法Advanced Custom Fields.

SO网友:Capiedge

使用customizer，在函数中添加这段代码。php

add_action( \'customize_register\' , \'my_theme_options\' );
function my_theme_options( $wp_customize ) {
    $wp_customize->add_section(\'mytheme_section_bg_img\', array(
            \'title\'       => __( \'Section name\', \'my_theme_slug\' ),
            \'priority\'    => 100,
            \'capability\'  => \'edit_theme_options\',
            \'description\' => __(\'Select a background image\', \'my_theme_slug\'), 
        ) 
    );  

    $wp_customize->add_setting(\'section_bg_img\');

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, \'section_bg_img\', array(
            \'label\'    => __( \'Background image\', \'my_theme_slug\' ), 
            \'section\'  => \'mytheme_section_bg_img\',
            \'settings\' => \'section_bg_img\',
            \'priority\' => 10,
        ) 
    ));
}
您必须通过主题slug更改“my\\u theme\\u slug”。

完成后，必须从customizer中选择一个图像，最后使用以下代码将其打印到任何需要的位置：

<div<?php

    if ( $section_bg_img = get_theme_mod( \'section_bg_img\' ) )
        echo \' style="background-image: url(\' . $section_bg_img . \');"\';

?>></div>
希望有帮助！

标签： theme-development   小码农  

相关推荐