web-dev-qa-db-ja.com

テーマカスタマイザカスタム背景/ヘッダー画像

私はデザインを変更するためのいくつかのオプションでテーマに取り組んでいます。オプションについては、テーマカスタマイザを使用しています。テーマカスタマイザを使用すると、色、アップロード、画像のアップロード、背景画像、ヘッダー画像など、さまざまな種類のオプションがあります。私はこのコードで背景画像コントロールを追加しています:

function tcx_register_theme_customizer( $wp_customize ) {
    $wp_customize->add_section(
            'tcx_advanced_options',
            array(
                    'title'     => 'Advanced Options',
                    'priority'  => 201
            )
    );

    $wp_customize->add_setting(
            'tcx_background_image',
            array(
                'default'      => '',
                'transport'    => 'postMessage'
            )
    );

    $wp_customize->add_control(
            new WP_Customize_Background_Image_Control(
                    $wp_customize,
                    'tcx_background_image',
                    array(
                        'label'    => 'Background Image',
                        'settings' => 'tcx_background_image',
                        'section'  => 'tcx_advanced_options'
                    )
            )
    );
}
add_action( 'customize_register', 'tcx_register_theme_customizer' );

ただし、コントロールはテーマカスタマイザに表示されません。ヘッダ画像も同様です。 「画像のアップロード」、「アップロード」、および「テキスト」、ラジオなどの他のすべての種類で問題なく機能します。私はadd_theme_supportと一緒にそれを使用したくありません。なぜなら私はそれがクライアントにとって混乱を招く可能性があるので私が "設計"セクションの下のメニュー項目を望まないからです。 (私の下手な英語を頼む:))

更新日:私が使用しているコードです。 Wordpressの組み込みBackground Imageの新しいセクション、新しい設定、およびコントロール。

2
Markus Schober

これは私が使用しているロゴ画像を追加するためのタイトルとタグラインセクションのコントロールを配置するコードです。

$wp_customize->add_setting( 'theme_logo' );
$wp_customize->add_control( 
    new WP_Customize_Image_Control(
        $wp_customize,'theme_logo',array(
            'label' => 'Logo',
            'section' => 'title_tagline',
            'settings' => 'theme_logo',
            'priority' => 1
        )
    )
);

私はそれからこのビットでheader.phpでそれを呼び出します。

<?php if( get_theme_mod( 'theme_logo' ) != '') { ?> // if there is a logo img
    <img src="<?php echo get_theme_mod('tonic_logo'); ?>">
<?php } ?>

背景画像には、ロゴとまったく同じものを使用できます。

$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
        )
    )
);

他の画像(ロゴ)と同じ方法で、コントロールをすべて設定しました。今header.phpに私達はそれをわずかに違うと呼ぶのでそれはimgではなく背景として現れる。

<?php 
    if( get_theme_mod( 'theme_header_bg' ) != '') { // if there is a background img
        $theme_header_bg = get_theme_mod('theme_header_bg'); // Assigning it to a variable to keep the markup clean
    }
?>

<header style="background-image:url('<?php echo $theme_header_bg ?>');">  
3
davidcondrey