Wie kann ich von einem API-Aufruf an ein Auswahlfeld im WordPress-Customizer anhängen?

Ich arbeite an einem WordPress-Design und habe ein Auswahlfeld hinzugefügt, mit dem Benutzer eine Schriftart für ihre Website auswählen können. Ich dachte, ich würde die Google Fonts-API verwenden, um die Liste der Schriftarten abzurufen, anstatt alle 900 und so etwas manuell hinzuzufügen, aber wenn ich die API aufrufe, kann ich die zurückgegebenen Daten nicht als Optionen in das Auswahlfeld einfügen.

Dies ist der PHP-Code für meine Select-Box-Klasse:

    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
        }
    }

Dann habe ich dem Customizer mit dem folgenden Code einen Abschnitt, eine Einstellung und eine Steuerung hinzugefügt:

    // 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',
    ) ) );

Der folgende Code soll die Optionen an die Auswahlbox anhängen:

     $.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.")
        }
      });

Wenn ich mich verändere #font-select zu Karosserie, es hängt die Optionen gut an, aber wie auch immer ich versuche, sie an das Auswahlfeld anzuhängen, es funktioniert einfach nicht. Irgendeine Idee, warum und wie ich das zum Laufen bringen kann?

Sie können den Optionswert im Auswahlfeld im Customizer-Admin-Panel wie folgt hinzufügen:

Vollständiger Code Ihrer Anforderungen

• Sie müssen nur Ihren Google-Font-API-Schlüssel in Skripts hinzufügen
• Wo ich den Themen-Slug-Namen „twentynineteen“ verwendet habe, können Sie Ihren Themen-Slug-Namen verwenden

Es gibt 3 Teile:

1)  function mytheme_customize_register( $wp_customize ) {
        //All our sections, settings, and controls will be added here


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

        // Add the setting & control for the font
        $wp_customize->add_setting( 'font-select' , array(
            'type' => 'select',
            'default' => 'Roboto',
            'transport' => 'postMessage',
        ) );

        $wp_customize->add_control(  'font-select', array(
            'type' => 'select',
            'priority' => 10, // Within the section.
            'section' => 'core', // Required, core or custom.
            'description' => __( 'This is a date control with a red border.' ),
            'choices' => array( // Optional.
            'wordpress' => __( 'Roboto' ),
            'hamsters' => __( 'Lato' ),
            'jet-fuel' => __( 'Muli' ),

        ),
            'label'      => __( 'Font', 'twentynineteen' ),
            'section'    => 'fonts',
            'settings'   => 'font-select',
        )  );

     }
     add_action( 'customize_register', 'mytheme_customize_register' );

Fügen Sie jetzt die Skriptdatei hinzu

2) function add_font_scripts(){

  wp_enqueue_script('custom_js_script', get_bloginfo('template_url').'/js/custom-scripts.js', array('jquery'));
}
add_action( 'admin_enqueue_scripts', 'add_font_scripts' );

Als letzten Schritt fügen Sie bitte das folgende Skript in diese Datei custom-scripts.js ein, die wir oben einfach in die Warteschlange stellen

3)  var $= jQuery;
$(document).ready(function(){


    $.ajax({
        type: "GET",

        url: "https://www.googleapis.com/webfonts/v1/webfonts?key=apikey&sort=popularity&fields=items",
        dataType: "json",

        success: function (result, status, xhr){
            var outputstate = [];
          console.log(result.items);
          for (var i = 0; i<result.items.length; i++){
            var family = result.items[i].family;
            console.log(family);

           outputstate.push('<option value="'+ family +'">'+ family +'</option>');
           $('#_customize-input-font-select').html(outputstate.join(''));
          }
        },
        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.")
        }


        });
    });

Ich habe diesen Code ausprobiert und es funktioniert gut!

Ich hoffe, dieser hilft Ihnen!

Ihr AJAX Success Callback sucht nach dem Dropdown mit id wie font-select. Die ID des Dropdown-Menüs basiert jedoch auf dem Label (was zufällig so ist font).

Die ID des Dropdowns wird durch die folgende Codezeile erstellt render_content Methode.

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

$this->label hier bezieht sich auf die Fonts. Da Sie strtolower verwenden, wird es sein fonts. Ich schlage vor, Sie übergeben eine andere Variable für die id und füllen Sie es mit dieser Variablen.