/ Сайтостроение / Адаптивность / Настройки сайта с theme customizer

Настройки сайта с theme customizer

HIT

Для того чтобы некоторые настройки сайта можно было менять из админки, через специальный интерфейс, а не ковырять исходный код (для заказчика), нужно использовать возможности WP Theme Customizer.
Можно настраивать, например, такие элементы:

  • Логотип
  • Телефон
  • E-mail
  • Основной фон
  • Цвета ссылок
  • Цвет текста
  • Любые цвета сайта
  • Текст copyright
  • Счетчики
  • Включение/Отключение каких-либо элементов
  • Переключение стилей
  • Переключение шрифтов

Добавляем в файл funсtions.php

// Страница настроек темы
function true_customizer_init( $wp_customize ) {

$true_transport = 'postMessage';



// Добавляем собственную секцию настроек
$wp_customize->add_section(
'true_display_options',
array(
'title' => 'Отображение',
'priority' => 400,
'description' => 'Настройте внешний вид вашего сайта'
)
);



// Цвета ссылок
$wp_customize->add_setting(
'true_link_color', // id
array(
'default' => '#000000',
'transport' => $true_transport
)
);


$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'true_link_color',
array(
'label' => 'Цвет ссылок',
'section' => 'true_display_options',
'settings' => 'true_link_color'
)
)
);


// Отображение шапки
$wp_customize->add_setting(
'true_display_header',
array(
'default' => 'true',
'transport' => $true_transport
)
);
$wp_customize->add_control(
'true_display_header',
array(
'section' => 'true_display_options',
'label' => 'Показывать шапку сайта',
'type' => 'checkbox'
)
);


// Текст копирайта в футере
$wp_customize->add_setting(
'true_footer_copyright_text',
array(
'default' => 'Все права защищены',
'transport' => $true_transport
)
);
$wp_customize->add_control(
'true_footer_copyright_text',
array(
'section' => 'true_display_options',
'label' => 'Копирайт',
'type' => 'text'
)
);


// Фоновое изображение
$wp_customize->add_setting(
'true_background_image',
array(
'default' => '',
'transport' => $true_transport
)
);

$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'true_background_image',
array(
'label' => 'Фон сайта',
'settings' => 'true_background_image',
'section' => 'true_display_options'
)
)
);


// Логотип
$wp_customize->add_setting(
'true_logo',
array(
'default' => '',
'transport' => $true_transport
)
);
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'true_logo',
array(
'label' => 'Логотип',
'settings' => 'true_logo',
'section' => 'true_display_options'
)
)
);


// Телефон
$wp_customize->add_setting(
'true_phone',
array(
'default' => '8 800 2000 600',
'transport' => $true_transport
)
);
$wp_customize->add_control(
'true_phone',
array(
'section' => 'true_display_options',
'label' => 'Телефон',
'type' => 'text'
)
);


// E-mail
$wp_customize->add_setting(
'true_email',
array(
'default' => 'info@mail.ru',
'transport' => $true_transport
)
);
$wp_customize->add_control(
'true_email',
array(
'section' => 'true_display_options',
'label' => 'E-mail',
'type' => 'text'
)
);


// Счетчики
$wp_customize->add_setting(
'true_counters',
array(
'default' => 'Коды счетчиков Yandex, Google и т.д.',
'transport' => $true_transport
)
);
$wp_customize->add_control(
'true_counters',
array(
'section' => 'true_display_options',
'label' => 'Счетчики',
'type' => 'textarea'
)
);



}

add_action( 'customize_register', 'true_customizer_init' );

// CSS для хука wp_head()

function true_customizer_css() {

echo '<style>';

// Сначала стили для body
echo '.bg {';
	if ( $background_image_url = get_theme_mod( 'true_background_image' )) {
    		echo 'background-image: url( ' . $background_image_url . ' );';
	}
echo '}';


echo 'a { color: ' . get_theme_mod( 'true_link_color' ) . '; }';
if( false === get_theme_mod( 'true_display_header' ) ) {
echo '#header { display: none; }';
}

echo '</style>';
}

add_action( 'wp_head', 'true_customizer_css' );

// Функция обработки текстовых значений, перед их сохранением в базу

function true_sanitize_copyright( $value ) {
return strip_tags( stripslashes( $value ) );
}

Подключение скриптов theme-customizer.js — нужны для того, чтобы изменения в customizer отображались в режиме онлайн. Также в файл funсtions.php

// Подключение скриптов theme-customizer.js (для просмотра online)
function true_customizer_live() {
wp_enqueue_script(
'true-theme-customizer',
get_stylesheet_directory_uri() . '/js/theme-customizer.js', // URL
array( 'jquery', 'customize-preview' ),
null,
true
);
}
add_action( 'customize_preview_init', 'true_customizer_live' );

Содержание файла theme-customizer.js

jQuery(function( $ ) {

// цвет ссылок сайта
wp.customize( 'true_link_color', function( value ) {
value.bind( function( to ) {
$( 'a' ).css( 'color', to );
} );
});

// отображение/скрытие шапки сайта
wp.customize( 'true_display_header', function( value ) {
value.bind( function( to ) {
false === to ? $( '#header' ).hide() : $( '#header' ).show();
} );
});

// изменение цветовой схемы
wp.customize( 'true_color_scheme', function( value ) {
value.bind( function( to ) {
if ( 'inverse' === to ) {
$( 'body' ).css({
'background-color': '#000',
'color': '#fff'
});
} else {
$( 'body' ).css({
'background-color': '#fff',
'color': '#000'
});
}
});
});

// изменяем текст в футере
wp.customize( 'true_footer_copyright_text', function( value ) {
value.bind( function( to ) {
$( '#copyright' ).text( to ); // в элемент #copyright помещаем текст
});
});

// фон сайта
wp.customize( 'true_background_image', function( value ) {
value.bind( function( to ) {
0 === $.trim( to ).length ? $( 'body' ).css( 'background-image', '' ) : $( 'body' ).css( 'background-image', 'url( ' + to + ')' );
});
});

});

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Функция действующая на конкретный раздел

Функция действующая на конкретный раздел

Создадим функцию, которая будет действовать на конкретный раздел сайта, в частности на конкретную категорию woocommerce. Задачу разобьем на 2 этапа: выборка категорий необходимых для воздействия и непосредственно функция. Вывод определенного Читать далее »

/
Разделение записей по алфавиту

Разделение записей по алфавиту

Реализуем сортировку и разделение записей по алфавиту. Данный функционал может пригодится для вывода и разделения по алфавиту категорий. Можно разделять города в разделе Где купить и т.д. Описанное решение данной Читать далее »

Практикум по функциям

Практикум по функциям

В процессе штудирования книги «Изучаем PHP 7» (Дэвид Скляр) появилась мысль помечать некоторые моменты, касающиеся как функций, так и php в целом. Краткий обзор функций Если задать простую функцию function Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Настройки сайта с theme customizer
Основы jquery
Рекомендации для васОсновы jqueryOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.