javascript - wordpressテーマオプションでreduxフレームワークを使用してボディの背景画像を変更するには?

Question

redux-framework を使用して背景画像を変更したい。

 array(
             'name' => "Background parttern",
            'id' => "background_parttern",
            'std' => "pattern11",
            'type' => "image_select",
            'title'    => __('Homepage Layout', 'personalblog'), 
            'subtitle' => __('Select Your Background Pattern.', 'personalblog'),
            'options' => array(
                'pattern1' => $personalblog_admin_img_dir . 'patterns/pattern1.png',
                'pattern2' => $personalblog_admin_img_dir . 'patterns/pattern2.png',

                'pattern54' => $personalblog_admin_img_dir . 'patterns/pattern54.png'  
                ),
             'output'    => array('background-image' => 'body' ),
              ),

CSS コード:

body {
    font-family: 'Noto Serif', serif;
    font-size: 14px;
    background-image: url('image/patterns/pattern2.png');
    background-repeat: repeat;

}

Answer 1

このコードを参照に使用できます:-

• 最初はredux-codeです

array(
            'name' => "Background parttern",
            'id' => "background_parttern",
            'std' => "pattern11",
            'type' => "select_image",
            'title'    => __('Homepage Layout', 'personalblog'), 
            'subtitle' => __('Select Your Background Pattern.', 'personalblog'),
            'options' => Array(
            'pattern1' => 
                     Array ( 'alt'  => 'pattern1',
                             'img'  => get_template_directory_uri() . 'image/patterns/pattern1.png',),
            'pattern2' => 
                     Array ('alt'  => 'pattern2',
                            'img'  =>get_template_directory_uri() . 'image/patterns/pattern2.png',
                           )
                ),
              'output'    => array('background-image' => 'body' ),
        ),

• CSSコード

body {
          font-family: 'Noto Serif', serif;
          font-size: 14px;
          background-image: url("<?php echo '' . $redux_Options_name['background_parttern']; ?>");
          background-repeat: repeat;
     }

これがお役に立てば幸いです。