Новая функция wordpress 3.4.1

В новом вордпрессе при нажатии на картинку не активной темы или на кнопку customize активной темы (appearance -> themes) для twenty eleven появляется страница, на которой: справа отображается собственно сама тема, а слева есть меню настроек этой темы. Попробовал как это выглядит для моей темы, но в меню отображается только возможность изменения имени сайта и того, что будет на главной странице (статическая страница или посты).

Теперь собственно вопрос: как добавить в свою тему возможность изменения параметров типа цвета ссылок, фоновой картинки и т.п. как это реализовано в теме twenty eleven? Есть подозрения, что я таки забанен в гугле, потому что на мои запросы в выдаче присутствуют только инструкции к custom fields, а это совсем не то что мне нужно. Ткните носом куда копать, а то в исходниках темы ничерта не понятно ((

Рекомендую к покупке и чтению. Доступная цена, доступный язык и хорошие инструкции.
http://rockablepress.com/launch/building-wordpress-themes-from-scratch/

анонс wordpress 3.4 в котором впервые появилась данная опция датирован 3 мая 2012. Официальный релиз версии грин – 27 июня. Первый комментарий к книге по Вашей ссылке – 5 июня. Делаю вывод что книга и wordpress вышли примерно одновременно. Какая вероятность того, что в книге описана новая опция? Т.о. есть ли смысл брать кота в мешке?

Вот нашел неплохую ссылку, правда на английском: http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/ Чуть позже,когда разберусь и если не забуду, напишу здесь инструкции по-русски.

Для кастомизации темы Вам потребуется сделать несколько предварительных действий. Весь код нужно добавлять в файл functions.php. Итак начнем:
Для настройки фоновой картинки:

add_custom_background();

После этого в админке появится пункт Appearance -> Background и автоматически добавится секция настроки на странице кастомизации.
Для настройки логотипа, нужно создать настраиваемую шапку сайта:

$args = array(
    'width' => 200, // размеры
    'height' => 100,// картинки
    'uploads' => true,// разрешаем загрузку новых
    'default-image' => get_template_directory_uri() . '/img/logo.png'// картинка по-умолчанию
    );
add_theme_support( 'custom-header', $args );

Теперь есть еще одна страница Appearance -> Header , которая так же автоматически добавляется на страницу кастомизации.
Это были предустановленные настройки, поэтому почти все делалось на автомате. Дальше чуть сложнее.
Во-первых добавляем нашей теме theme_options. Как это делается спросите у гугла, я о другом.
Предположим, что у Вас уже есть theme_options в теме и вы можете работать с полями базы wp, отвечающим за эти опции.
Во-вторых создаем функцию которая будет отвечать за нашу страницу кастомизации:

function my_customize_register( $wp_customize ) {
/*тут будет подключение новых секций и настроек.*/
}
add_action( 'customize_register', 'my_customize_register' );

Добавляем новую секцию настроек. Фрагмент файла wp-includes/class-wp-customize-manager.php :

$this->add_section( 'colors', array( //первый аргумент - имя по которому в дальнейшем будем обращаться к секции
            'title'          => __( 'Colors' ), // отображаемый заголовок
            'priority'       => 40, // приоритет - чем больше число, тем ниже будет выводится секция в списке себе подобных
        ) );

Сразу после добавления новой секции ничего не произойдет, поскольку она пустая. Заполним ее:

$wp_customize->add_setting( 'theme_options[menu_background]', array( //первый аргумент - имя поля в базе wp откуда будут браться значения
            'type' => 'option',
            'capability' => 'edit_theme_options',
        )
    );
    /*Вместо WP_Customize_Image_Control можно использовать WP_Customize_Color_Control или WP_Customize_Upload_Control*/
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'menu_background', array(
                'label' => 'Menu Title background', // Отображаемый заголовок
                'section' => 'colors', // секция в которой будет выводиться настройка
                'settings' => 'current_theme_options[menu_background]', // имя поля в базе wp куда будет записываться значение
                'type' => 'image',
            )
        )
    );

Немного потестив, обнаружил, что цвета, текст, радиобаттоны и чекбоксы работают нормально, а вот с картинками – печаль. Просто так wp не хочет сохранять загруженные картинки во вкладке Uploaded. Ну т.е. он сохраняет, но до первой перезагрузки страницы, а после оставляет только одну сохраненную картинку. Так что быстро переключаться между разными фонами для меню не получится без дополнительных ухищрений, но сейчас не об этом.
Теперь можно немного ускорить применение новых настроек средствами jquery. Переопределяем метод применения:

$wp_customize->get_setting('theme_options[menu_background]'')->transport = 'postMessage';

подключаем скрипт обработчик (за пределами функции my_customize_register):

function my_customize_preview_js() {
    wp_enqueue_script( 'my-theme-customizer', get_template_directory_uri() . '/inc/theme-customizer.js', array('customize-preview'));
}
add_action( 'customize_preview_init', 'my_customize_preview_js' );

И собственно содержимое js файла:

( function( $ ){
    wp.customize('blogname',function( value ) {
        value.bind(function(to) {
            $('#site-title a').html(to);
        });
    });
    wp.customize( 'header_image', function( value ) {
        value.bind( function( to ) {
            $( '.logo img' ).attr('src', to );
        } );
    } );
    wp.customize( 'background_image', function( value ) {
        value.bind( function( to ) {
            $('.custom-background').css('background-image', to );
        });
    });
    wp.customize( 'theme_options[menu_background]', function( value ) {
        value.bind( function( to ) {
            $('#main-menu, #footer-menu').css('background', 'url('+to+') repeat-x');
        });
    });
} )( jQuery );

Ну теперь вроде все. Прям статья получилась. Не форумный формат конечно, но завести блог все никак руки не доходят. Спасибо за внимание. Успехов в освоении. Исправление ошибок, если таковые имеются – приветствуется.

Anonymous
Отправить
Ответ на: