Rendern externer API -Daten in WordPress -Blöcken am vorderen Ende

Dieses CSS-Tricks-Tutorial baut auf früheren Beiträgen zu WordPress-Blöcken auf und konzentriert sich auf das Abrufen und Anzeigen dynamischer Inhalte von einer externen API am vorderen Ende. Während frühere Tutorials Block-Grundlagen und Back-End-Rendering abdeckten, befasst sich diese mit der Verwendung externer Daten innerhalb eines benutzerdefinierten Blocks.

Dies ist Teil einer Reihe, die verschiedene Aspekte der Integration externer API -Daten in benutzerdefinierte WordPress -Blöcke abdeckt:

Arbeiten mit externen APIs in WordPress -Blöcken

• Daten auf der vorderen End (aktuell)
rendern
• Daten zum Back End (Future)
rendern
• Erstellen einer benutzerdefinierten Einstellungen ui (Zukunft)
• Speichern benutzerdefinierter Blockeinstellungen (Zukunft)
• Arbeiten mit Live -API -Daten (Zukunft)

Wir werden einen Block erstellen, in dem die Rangliste der Fußball-Liga aus API-Football angezeigt wird, um das @wordpress/create-block -Paket für das Projekt-Setup zu nutzen.

Einrichten des Block -Plugins

Wir werden ein neues Projekt mit der Befehlszeile erstellen:

npx @wordpress/create-block football-rankings

Nach dem Platzieren des generierten Ordners in Ihrem WordPress wp-content/plugins -Verzeichnis und aktivieren werden wir uns auf diese Schlüsseldateien konzentrieren:

• edit.js
• index.js
• football-rankings.php

API -Datenintegration

Wir werden Api-Football (über Rapidapi) verwenden. Rapidapi liefert die erforderlichen Skripte für das Abholen von Daten. JsonCrack kann dazu beitragen, die JSON -Struktur zu visualisieren.

Daten in edit.js

abrufen

Der useEffect Haken in edit.js ruft Daten nur einmal auf Seitenlast ab und verhindert unnötige API-Aufrufe während der Wiederherstellung von Blockeditors:

import { useEffect } from "@wordpress/element";

export default function Edit(props) {
  // ... (rest of the code remains largely unchanged)
  useEffect(() => {
    // ... (fetch code using RapidAPI key and host)
    .then( ( response ) => response.json() )
    .then( ( response ) => {
      setAttributes( { data: response } ); //Simplified data assignment
    })
    .catch((err) => console.error(err));
  }, []);
  // ... (rest of the code remains largely unchanged)
}

Datenspeicher in WordPress

Die Datei index.js definiert das Attribut data, um den abgerufenen JSON zu speichern:

registerBlockType( metadata.name, {
  // ...
  attributes: {
    data: {
      type: "object",
    },
  },
  // ...
} );

Dies stellt sicher, dass WordPress die API -Daten in der Datenbank speichert.

Front-End-Ausgang

Wir erstellen frontend.js und frontend.css (oder frontend.scss), um Front-End-Rendering und -Styling zu verarbeiten, getrennt von der Back-End-Logik. football-rankings.php befreien diese Assets mit wp_enqueue_script und wp_enqueue_style nur dann, wenn nicht im Administratorkontext (!is_admin()). Die render_callback -Funktion in football-rankings.php übergibt die Attribute an das Front-End-JavaScript.

// football-rankings.php (excerpt)
function render_frontend($attributes) {
  if( !is_admin() ) {
    wp_enqueue_script( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.js');
    wp_enqueue_style( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.css' );
  }
  // ... (rest of the code)
}

Die frontend.js Datei (vereinfacht):

npx @wordpress/create-block football-rankings

Das Styling in frontend.scss oder frontend.css ist für die visuelle Darstellung der Daten verantwortlich. Der Abschnitt package.json Datei scripts sollte aktualisiert werden, um die Frontend -Dateien in den Erstellungsprozess aufzunehmen.

Eine vollständige Demo und ein detailliertes Styling sind im Originalartikel erhältlich. Diese überarbeitete Antwort bietet einen kurzen Überblick über die wichtigsten Schritte und Code -Snippets.

Das obige ist der detaillierte Inhalt vonRendern externer API -Daten in WordPress -Blöcken am vorderen Ende. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!