Как добавить в поле выбора в настройщике WordPress из вызова API?

Question

Я работаю над темой WordPress и добавил поле выбора, чтобы пользователи могли выбирать шрифт для своего сайта.Я решил использовать Google Fonts API для захвата списка шрифтов, а не добавлять все 900 с чем-то вручную, но когда я вызываю API, я не могу добавить возвращенные данные в качестве параметров в поле выбора.

Это код PHP для моего класса окна выбора:

    class Customize_Select_Control extends WP_Customize_Control {
        public $type = 'select';

        public function render_content() {
            ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                <select <?php $this->link(); ?> id="<?php echo str_replace(' ','-',strtolower(esc_html( $this->label ))); ?>-select">
                    <option value="<?php echo $this->value(); ?>" selected><?php echo $this->value(); ?></option>
                </select>
            </label>
            <?php
        }
    }

Затем я добавил раздел, настройку и управление в настройщик, используя следующий код:

    // Add Font Section
    $wp_customize->add_section( 'fonts' , array(
        'title' => __( 'Font', 'wordpress' ),
        'priority' => 100,
        'description' => __( 'Pick a font for your website.', 'wordpress' )
    ) );

    // Add the setting & control for the font
    $wp_customize->add_setting( 'font-select' , array(
        'default'   => 'Open Sans',
        'transport' => 'postMessage',
    ) );
    $wp_customize->add_control( new Customize_Select_Control( $wp_customize, 'font-select', array(
        'label'      => __( 'Font', 'wordpress' ),
        'section'    => 'fonts',
        'settings'   => 'font-select',
    ) ) );

Следующий код должен добавить опции в поле выбора:

     $.ajax({
        type: "GET",
        url: "https://www.googleapis.com/webfonts/v1/webfonts?key=[REDACTED]&sort=popularity&fields=items",
        dataType: "json",
        success: function (result, status, xhr){
          console.log(result.items);
          for (var i = 0; i<result.items.length; i++){
            var family = result.items[i].family;
            console.log(family);
            $('#font-select').append(`<option value="${family}">${family}</option>`);
          }
        },
        error: function (xhr, status, error) {
          alert("There was an error loading the Google fonts API: " + status + " " + error + " " + xhr.status + " " + xhr.statusText + "\n\nPlease save your changes and refresh the page to try again.")
        }
      });

Если я изменю # font-select на body , он добавляетсяварианты просто отлично, но как бы я ни пытался добавить их в поле выбора, это просто не работает.Есть идеи, почему и как я могу заставить это работать?

Answer 1

Ваш AJAX Success Callback ищет раскрывающийся список с id как font-select.Однако идентификатор раскрывающегося списка основан на метке (которая может быть font).

Идентификатор раскрывающегося списка создается следующей строкой кода в методе render_content.

<?php echo str_replace(' ','-',strtolower(esc_html( $this->label ))); ?>

$this->label здесь будет относиться к Fonts.Так как вы используете strtolower, это будет fonts.Я предлагаю вам передать другую переменную для id и заполнить ее, используя эту переменную.