Вопрос или проблема
Я пытался создать настройщик темы для изменения размера шрифта. Для этого я создал настройки и элементы управления. Но проблема в том, что я не могу добиться того, как показано на изображении. Я использовал тип ввода “диапазон”, чтобы настроить значение, и оно обновляется в зависимости от увеличенного или уменьшенного значения. Я хочу иметь ползунок с полем, которое указывает значение и может использоваться для изменения значения, вводя значение для каждого размера экрана, такого как настольный компьютер, планшет и мобильный телефон.
Также возможно ли изменить файл CSS с помощью настройщика? Сейчас я просто выводлю встроенный CSS.
Код, который я написал:
$wp_customize->add_setting( 'ltr_font-size', [
'default' => '16px'
] );
$wp_customize->add_section( 'ltr_section', [
'title' => __( 'Пользовательские настройки', 'ltr2022' ),
'priority' => 30
] );
$wp_customize->add_control( new WP_Customize_Control(
$wp_customize,
'ltr_font-setting',
array(
'label' => __( 'размер шрифта', 'latracal' ),
'section' => 'ltr_section',
'settings' => 'ltr_font-size',
'type' => 'range',
'input_attrs' => array(
'min' => 16,
'max' => 20,
// 'step' => 2,
)
)
) );
вывод встроенного CSS
<?php
function mytheme_customize_css() {
?>
<style type="text/css">
main {
font-size: <?php echo get_theme_mod('ltr_font-size', '16px');
?>px;
}
</style>
<?php
}
Вот что я добился:
.
Ответ или решение
Создание ползунка для изменения размера шрифта с учетом различных размеров экранов в API индивидуальной настройки WordPress может показаться сложной задачей, но с правильным подходом это вполне осуществимо. Давайте разберем поэтапно, как можно реализовать такую функциональность.
Шаг 1: Настройка API индивидуальной настройки
Во-первых, вам необходимо настроить API индивидуальной настройки с добавлением нескольких параметров для различных устройств — для настольных ПК, планшетов и мобильных устройств. Для этого мы создадим отдельные настройки и управляющие элементы для каждого устройства:
function my_theme_customizer_register($wp_customize) {
// Добавляем секцию для настройки шрифта
$wp_customize->add_section('font_size_section', [
'title' => __('Font Size', 'yourtheme'),
'priority' => 30,
]);
// Настройки для различных устройств
$devices = ['desktop', 'tablet', 'mobile'];
foreach ($devices as $device) {
$wp_customize->add_setting("font_size_$device", [
'default' => '16px',
'sanitize_callback' => 'sanitize_text_field',
]);
$wp_customize->add_control("font_size_control_$device", [
'label' => __(("Font Size for " . ucfirst($device)), 'yourtheme'),
'section' => 'font_size_section',
'settings' => "font_size_$device",
'type' => 'range',
'input_attrs' => [
'min' => 12,
'max' => 30,
'step' => 1,
],
]);
}
}
add_action('customize_register', 'my_theme_customizer_register');Шаг 2: Вывод CSS
Теперь, когда настройки созданы, приступим к выводе CSS, который будет адаптироваться в зависимости от выбранного размера шрифта для каждого устройства. Вместо того чтобы выводить inline CSS, мы можем сгенерировать CSS-правила на лету в нашем файле темы.
function mytheme_customize_css() {
?>
<style type="text/css">
@media only screen and (min-width: 1025px) {
body {
font-size: <?php echo get_theme_mod('font_size_desktop', '16'); ?>px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
body {
font-size: <?php echo get_theme_mod('font_size_tablet', '14'); ?>px;
}
}
@media only screen and (max-width: 767px) {
body {
font-size: <?php echo get_theme_mod('font_size_mobile', '12'); ?>px;
}
}
</style>
<?php
}
add_action('wp_head', 'mytheme_customize_css');Шаг 3: Создание пользовательского интерфейса для администратора
Теперь давайте добавим немного JavaScript, чтобы сделать процесс выбора шрифта более удобным. Это добавит ползунок и поле ввода, чтобы менять размер шрифта, а также отобразит текущее значение.
(function($) {
$(document).ready(function() {
$('input[type=range]').on('input change', function() {
var value = $(this).val();
$(this).next('.font-size-value').text(value + 'px');
});
});
})(jQuery);Заключение
С помощью приведенных выше шагов вы можете разработать полноценное решение для изменения размера шрифта, учитывая разные размеры экранов, в WordPress через API индивидуальной настройки. Это не только повысит удобство для пользователя, но и улучшит внешний вид вашего сайта на разных устройствах.
С точки зрения SEO важно, чтобы ваш контент был доступен и читабелен на всех устройствах, поэтому адаптивные шрифты — это не только вопрос дизайна, но и пользовательского опыта.