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

Lesezeit: 6 Minuten

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?

Benutzeravatar von Krishna Savani
Krishna Savani

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!

  • Danke für deine Antwort @KrishnaSavani. Ich habe versucht, Ihren Code zu implementieren, aber er scheint in meinem Design nicht zu funktionieren. Es sieht so aus, als hätten Sie es mit dem Thema 29 verwendet, also frage ich mich, ob das der Grund sein könnte. Ich mache mein Thema von Grund auf neu mit Unterstriche. Ihr Code protokolliert weiterhin die Schriftarten in der Konsole und hängt die Optionen an Body-HTML an, fügt die Optionen jedoch nicht an das Auswahlfeld für Schriftarten an, obwohl ich die IDs doppelt überprüft habe und sie alle übereinstimmen.

    – AJT

    5. Oktober 2019 um 12:06 Uhr

  • Ich habe versucht, wie Sie das Thema von (unterstriche.me) und es funktioniert auch dort gut.. jetzt können Sie die Auswahlfeld-ID im Customizer (prnt.sc/pfs2bn) Es ist dasselbe wie beim Hinzufügen von Jquery-Skripten. ) Können Sie das bitte so prüfen?

    – Krishna Savani

    7. Oktober 2019 um 4:30 Uhr


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.

  • Vielen Dank für Ihre Antwort @ascsoftw, aber die ID des Auswahlfelds wird als gerendert #font-select (man beachte die -select nach dem von Ihnen genannten Code). Screenshot hier. Anfangs habe ich das Extra nicht benutzt -select bisschen, aber ich habe das hinzugefügt, da ich dachte, dass es irgendwo mit einer anderen ID kollidieren könnte.

    – AJT

    26. September 2019 um 11:54 Uhr

  • ok, jetzt sehe ich es. Könnten Sie bestätigen, dass es kein anderes Element mit der ID “font-select” gibt?

    – ascsoftw

    26. September 2019 um 11:56 Uhr

  • Auf der Suche nach font-select im Elementinspektor liefert keine anderen Ergebnisse als die betreffende Auswahlbox. Meine einzige Vermutung ist, dass es etwas damit zu tun hat, dass das Customizer-Einstellungsfenster dynamisch generiert wird. Ich bin auch nicht in der Lage, die Daten aus dem API-Aufruf irgendwo im Customizer-Panel zu rendern, aber das Rendern innerhalb des HTML-Codes der Seitenvorschau funktioniert einwandfrei. Ich habe versucht, mit setTimeout und ajaxComplete um das Problem zu umgehen, aber das funktioniert auch nicht.

    – AJT

    26. September 2019 um 12:16 Uhr

  • Dynamisch generieren font-select sollte es nicht daran hindern, sich zu bevölkern. Können Sie console.log( $('#font-select').length); als erste Zeile im Erfolgsrückruf von AJAX, um sicherzustellen, dass das Auswahlfeld vorhanden ist.

    – ascsoftw

    26. September 2019 um 12:25 Uhr

  • Guter Anruf, daran habe ich nicht gedacht. Die Antwort ist ‘0’. Wenn ich jedoch denselben Befehl direkt in die Entwicklertools-Konsole eingebe, wird „1“ zurückgegeben.

    – AJT

    26. September 2019 um 12:30 Uhr

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

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy