Memberi data API luaran di blok WordPress di hujung depan

Tutorial trik CSS ini dibina pada jawatan terdahulu mengenai blok WordPress, yang memberi tumpuan kepada pengambilan dan memaparkan kandungan dinamik dari API luaran di hujung depan. Walaupun tutorial terdahulu meliputi asas-asas blok dan rendering back-end, yang satu ini menyelidiki menggunakan data luaran dalam blok tersuai.

Ini adalah sebahagian daripada siri yang meliputi pelbagai aspek mengintegrasikan data API luaran ke dalam blok WordPress tersuai:

Bekerja dengan API luaran di Blok WordPress

rendering data di hujung depan
• (semasa)
memberikan data pada hujung belakang
• (masa depan)
Membuat tetapan tersuai ui
• (masa depan)
Menyimpan Tetapan Blok Custom
• (Masa Depan)
bekerja dengan data API langsung
• (masa depan)

Kami akan membuat blok memaparkan kedudukan liga bola sepak (bola sepak) dari API-Football, memanfaatkan pakej

untuk persediaan projek. @wordpress/create-block

menyediakan plugin blok

kami akan menjana projek baru menggunakan baris arahan:

npx @wordpress/create-block football-rankings

Setelah meletakkan folder yang dihasilkan dalam direktori WordPress

anda dan mengaktifkannya, kami akan memberi tumpuan kepada fail utama ini: wp-content/plugins

• edit.js
• index.js
• integrasi data API football-rankings.php
Kami akan menggunakan bola sepak API (melalui Rapidapi). Rapidapi menyediakan skrip yang diperlukan untuk mengambil data; Jsoncrack dapat membantu menggambarkan struktur JSON.

mengambil data dalam

cangkuk

dalam edit.js mengambil data hanya sekali pada beban halaman, menghalang panggilan API yang tidak perlu semasa penyunting blok semula:

useEffect Penyimpanan data di WordPress edit.js

Fail

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

mentakrifkan atribut

untuk menyimpan JSON yang diambil:

index.js Ini memastikan WordPress menyimpan data API dalam pangkalan data. data

output front-end

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

Kami akan membuat

dan

(atau

) untuk mengendalikan rendering dan gaya depan, dipisahkan dari logik back-end.

enqueues aset ini menggunakan frontend.js dan frontend.css hanya apabila tidak dalam konteks admin (frontend.scss). Fungsi football-rankings.php dalam wp_enqueue_script melepasi atribut ke javascript depan. wp_enqueue_style !is_admin() render_callback fail football-rankings.php (dipermudahkan):

npx @wordpress/create-block football-rankings

gaya dalam frontend.scss atau frontend.css bertanggungjawab untuk pembentangan visual data. Bahagian package.json scripts fail hendaklah dikemas kini untuk memasukkan fail frontend dalam proses binaan.

Demo lengkap dan gaya terperinci boleh didapati dalam artikel asal. Tanggapan yang disemak ini memberikan gambaran ringkas mengenai langkah -langkah utama dan coretan kod.

Atas ialah kandungan terperinci Memberi data API luaran di blok WordPress di hujung depan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!