Помощь по настройке WordPress с иконками FontAwesome

Вопрос или проблема

<div class="features-block-one">
  <div class="icon-one">
   <span class="<?php get_theme_mod('features_one_icon' ,'fa fa-bullseye');?>">  </span>
  </div>
</div>

//иконка блока один
       $wp_customize->add_setting(
        'features_one_icon',
        array(
            'default' => 'fa-fa box',
            'transport' => 'postMessage',
            'sanitize_callback' => 'sanitize_key',
        )
    );

    $wp_customize->add_control(
        'features_one_icon_control',
         array(
            'label' => __('Выбрать иконку', 'text-domain'),
            'section' => 'features_block',
            'type' => 'select',
            'settings' => 'features_one_icon',
            'choices' => tar_icons() /*С помощью функции tar_icons() я получаю все иконки из функции */
        )
    );

wp.customize( 'features_one_icon', function( value ) {
        value.bind( function( to ) {
            $( '.features-block-one .icon-one span' ).css( to  );
          } );
    } );

<span class="<?php echo get_theme_mod('features_one_icon' ,'fa fa-bullseye');?>">  </span>

Ответ или решение

Помощь с иконками FontAwesome в WordPress Customizer

Ваша задача — обеспечить корректное отображение иконок FontAwesome, выбранных через настраиваемый элемент в WordPress Customizer. Рассмотрим шаг за шагом проблемы и их решение.

Проблема

Вы упомянули, что иконка не отображается из-за неправильного формирования класса в теге <span>. Это может быть связано с ошибками в написании кода как в файле Page.php, так и в настройках Customizer.

Анализ кода

1. Код в Page.php:

Вывод иконки из настройки выглядит следующим образом:

<span class="<?php get_theme_mod('features_one_icon', 'fa fa-bullseye');?>"></span>

Здесь отсутствует оператор echo, который необходим для вывода результата функции get_theme_mod(). Исправленный код будет выглядеть так:

<span class="<?php echo get_theme_mod('features_one_icon', 'fa fa-bullseye');?>"></span>

2. Код в файле Customizer:

В настройках вы используете неверное значение по умолчанию:

'default' => 'fa-fa box',

Здесь вместо 'fa-fa box' должно быть правильно:

'default' => 'fa fa-box',

Важно убедиться, что используемая вами иконка существует в библиотеке FontAwesome. Проверьте наличие иконки fa-box и убедитесь, что вся синтаксическая структура правильная.

3. Код в customizer.js:

Для того чтобы изменить стиль иконки с помощью JavaScript, вы используете функцию .css(), что не является верным подходом. Ваша цель — добавление класса, а не изменение CSS-свойств. Поэтому используйте:

wp.customize('features_one_icon', function(value) {
    value.bind(function(to) {
        $('.features-block-one .icon-one span').attr('class', to);
    });
});

Здесь мы используем метод .attr() для добавления класса к элементу <span>, основываясь на изменении выбора в настраивателе.

Итоговый код

Ваш окончательный код будет выглядеть следующим образом:

Page.php:

<div class="features-block-one">
    <div class="icon-one">
        <span class="<?php echo get_theme_mod('features_one_icon', 'fa fa-bullseye'); ?>"></span>
    </div>
</div>

Customizer:

$wp_customize->add_setting(
    'features_one_icon',
    array(
        'default' => 'fa fa-box', // Убедитесь, что эта иконка существует
        'transport' => 'postMessage',
        'sanitize_callback' => 'sanitize_key',
    )
);

$wp_customize->add_control(
    'features_one_icon_control',
    array(
        'label' => __('Select Icon', 'text-domain'),
        'section' => 'features_block',
        'type' => 'select',
        'settings' => 'features_one_icon',
        'choices' => tar_icons() // Функция, возвращающая иконки
    )
);

customizer.js:

wp.customize('features_one_icon', function(value) {
    value.bind(function(to) {
        $('.features-block-one .icon-one span').attr('class', to);
    });
});

Заключение

Проведенные изменения позволят вам корректно отображать иконки FontAwesome через WordPress Customizer. Убедитесь, что все используемые иконки существуют и правильно настроены. С таким подходом вы сможете достичь нужного результата и улучшить функциональность вашего сайта.