การแสดงผลข้อมูล API ภายนอกในบล็อก WordPress ที่ส่วนหน้า

มีบทช่วยสอนใหม่ปรากฏขึ้นที่นี่เกี่ยวกับ CSS-Tricks สำหรับการทำงานกับบล็อก WordPress หนึ่งในนั้น เป็นการแนะนำการพัฒนาบล็อก WordPress และเป็นสถานที่ที่ดีในการเรียนรู้ว่าบล็อกคืออะไรและลงทะเบียนใน WordPress เพื่อใช้งานในหน้าและโพสต์

แม้ว่าข้อมูลพื้นฐานเกี่ยวกับบล็อกจะครอบคลุมอย่างดีในโพสต์นั้น แต่ฉันต้องการก้าวไปข้างหน้าอีกขั้น คุณเห็นในบทความนั้น เราได้เรียนรู้ความแตกต่างระหว่างบล็อกการเรนเดอร์ในตัวแก้ไขบล็อก WordPress แบ็คเอนด์ และเรนเดอร์ในธีมส่วนหน้า ตัวอย่างคือ Pullquote Block ธรรมดาที่แสดงเนื้อหาและสไตล์ที่แตกต่างกันในแต่ละด้าน

ไปดูการใช้งานกันเลยดีกว่า เนื้อหาแบบไดนามิก ในบล็อก WordPress โดยเฉพาะอย่างยิ่ง ให้ดึงข้อมูลจาก API ภายนอกและแสดงผลที่ส่วนหน้าเมื่อบล็อกใดถูกทิ้งลงในเครื่องมือแก้ไขบล็อก

เรากำลังจะสร้างบล็อกที่แสดงข้อมูลที่แสดงฟุตบอล (เอ่อ ฟุตบอล) อันดับดึงมาจาก Api-ฟุตบอล.

มีหลายวิธีในการรวม API กับบล็อก WordPress! เนื่องจากบทความเกี่ยวกับพื้นฐานของบล็อกได้ผ่านขั้นตอนการสร้างบล็อกตั้งแต่เริ่มต้นแล้ว เราจะลดความซับซ้อนของสิ่งต่าง ๆ โดยใช้ @wordpress/create-block แพ็คเกจเพื่อบูตสแตรปงานและโครงสร้างโครงการของเรา

กำลังเริ่มต้นบล็อกปลั๊กอินของเรา

สิ่งแรกก่อน: มาสร้างโปรเจ็กต์ใหม่จากบรรทัดคำสั่งกัน:

npx @wordpress/create-block football-rankings

ปกติฉันจะเริ่มต้นโปรเจ็กต์แบบนี้โดยการสร้างไฟล์ตั้งแต่เริ่มต้น แต่ขอชื่นชมทีม WordPress Core สำหรับยูทิลิตี้ที่มีประโยชน์นี้!

เมื่อคำสั่งสร้างโฟลเดอร์โปรเจ็กต์แล้ว ในทางเทคนิคแล้ว เรามีบล็อก WordPress ที่ทำงานได้อย่างสมบูรณ์ซึ่งลงทะเบียนเป็นปลั๊กอิน ดังนั้น ไปข้างหน้าและวางโฟลเดอร์โครงการลงใน wp-content/plugins ไดเร็กทอรีที่คุณติดตั้ง WordPress (น่าจะดีที่สุดถ้าทำงานในสภาพแวดล้อมท้องถิ่น) จากนั้นลงชื่อเข้าใช้ผู้ดูแลระบบ WordPress และเปิดใช้งานจากหน้าจอปลั๊กอิน

เมื่อบล็อกของเราเริ่มต้น ติดตั้ง และเปิดใช้งานแล้ว ให้เปิดโฟลเดอร์โครงการจากที่ /wp-content/plugins/football-rankings. คุณจะต้องการ cd จากบรรทัดคำสั่งเช่นกันเพื่อให้แน่ใจว่าเราสามารถพัฒนาต่อไปได้

ไฟล์เหล่านี้เป็นไฟล์เดียวที่เราต้องให้ความสนใจในขณะนี้:

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

ไฟล์อื่นๆ ในโครงการมีความสำคัญแน่นอน แต่ไม่จำเป็นในตอนนี้

การตรวจสอบแหล่งที่มาของ API

เรารู้แล้วว่าเรากำลังใช้ Api-ฟุตบอล ซึ่งมาถึงเราด้วยความอนุเคราะห์จาก RapidAPI. โชคดีที่ RapidAPI มีแดชบอร์ดที่สร้างสคริปต์ที่จำเป็นโดยอัตโนมัติซึ่งเราจำเป็นต้องใช้เพื่อดึงข้อมูล API สำหรับอันดับพรีเมียร์ลีก 2021

หากคุณต้องการดูโครงสร้าง JSON คุณสามารถสร้างการแสดงภาพด้วย JSONแคร็ก.

กำลังดึงข้อมูลจาก edit.js ไฟล์

ฉันจะใส่รหัส RapidAPI ไว้ใน a เกิดปฏิกิริยา useEffect() เบ็ด ด้วยอาร์เรย์การพึ่งพาที่ว่างเปล่าเพื่อให้ทำงานเพียงครั้งเดียวเมื่อโหลดหน้า ด้วยวิธีนี้ เราป้องกันไม่ให้ WordPress เรียก API ทุกครั้งที่ตัวแก้ไขบล็อกแสดงผลซ้ำ คุณสามารถตรวจสอบได้โดยใช้ wp.data.subscribe() หากคุณสนใจ

นี่คือรหัสที่ฉันกำลังนำเข้า useEffect()แล้วพันรอบ fetch() รหัสที่ RapidAPI ให้มา:

/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
* @return {WPElement} Element to render.
*/

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

export default function Edit(props) {
  const { attributes, setAttributes } = props;

  useEffect(() => {
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "Your Rapid API key",
        "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
      },
    };

    fetch("https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39", options)
      .then( ( response ) => response.json() )
      .then( ( response ) => {
        let newData = { ...response };
        setAttributes( { data: newData } );
        console.log( "Attributes", attributes );
      })
      .catch((err) => console.error(err));
}, []);

  return (
    

      { __( "Standings loaded on the front end", "external-api-gutenberg" ) }
    
  );
}

สังเกตว่าฉันได้ทิ้ง return ทำงานได้ค่อนข้างสมบูรณ์ แต่มีหมายเหตุที่ยืนยันว่าอันดับฟุตบอลจะแสดงที่ส่วนหน้า อีกครั้ง เราจะเน้นเฉพาะส่วนหน้าในบทความนี้ — เราสามารถแสดงข้อมูลใน Block Editor ได้เช่นกัน แต่เราจะปล่อยให้บทความอื่นเน้นเรื่องต่างๆ

การจัดเก็บข้อมูล API ใน WordPress

ตอนนี้เรากำลังดึงข้อมูล เราต้องเก็บข้อมูลไว้ที่ใดที่หนึ่งใน WordPress นี่คือที่ที่ attributes.data วัตถุมีประโยชน์ เรากำลังกำหนด data.type ในฐานะที่เป็น object เนื่องจากข้อมูลถูกดึงและจัดรูปแบบเป็น JSON ตรวจสอบให้แน่ใจว่าคุณไม่มีประเภทอื่น ไม่เช่นนั้น WordPress จะไม่บันทึกข้อมูล และไม่ทำให้เกิดข้อผิดพลาดใดๆ ให้คุณแก้ไขข้อบกพร่อง

เรากำหนดทั้งหมดนี้ในของเรา index.js ไฟล์:

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

ตกลง ดังนั้น WordPress จึงรู้ว่าข้อมูล RapidAPI ที่เรากำลังเรียกนั้นเป็นวัตถุ หากเราเปิดบทความฉบับร่างใหม่ใน WordPress Block Editor และบันทึกโพสต์ ข้อมูลจะถูกเก็บไว้ในฐานข้อมูล อันที่จริงถ้าเราเห็นมันใน wp_posts.post_content หากเราเปิดฐานข้อมูลของเว็บไซต์ใน phpMyAdmin, Sequel Pro, Adminer หรือเครื่องมือใดก็ตามที่คุณใช้

กำลังส่งออกข้อมูล JSON ในส่วนหน้า

มีหลายวิธีในการส่งออกข้อมูลที่ส่วนหน้า วิธีที่ฉันจะแสดงให้คุณใช้แอตทริบิวต์ที่เก็บไว้ในฐานข้อมูลและส่งผ่านเป็นพารามิเตอร์ผ่าน render_callback ทำหน้าที่ของเรา football-rankings.php ไฟล์

ฉันชอบแยกข้อกังวลออกจากกัน ดังนั้นวิธีที่ฉันทำคือการเพิ่มไฟล์ใหม่สองไฟล์ไปยังปลั๊กอินบล็อก build โฟลเดอร์: frontend.js และ frontend.css (คุณสามารถสร้าง frontend.scss แฟ้มใน src ไดเร็กทอรีที่คอมไพล์เป็น CSS ใน the build ไดเรกทอรี) ด้วยวิธีนี้ รหัสส่วนหลังและส่วนหน้าจะแยกจากกันและ football-rankings.php ไฟล์อ่านง่ายกว่าเล็กน้อย

/คำอธิบาย ย้อนกลับไปที่การแนะนำการพัฒนาบล็อก WordPress มี editor.css และ style.css ไฟล์สำหรับแบ็กเอนด์และสไตล์ที่ใช้ร่วมกันระหว่างส่วนหน้าและส่วนหลังตามลำดับ โดยการเพิ่ม frontend.scss (ซึ่งรวบรวมเป็น frontend.cssฉันสามารถแยกสไตล์ที่มีไว้สำหรับส่วนหน้าเท่านั้น

ก่อนที่เราจะกังวลเกี่ยวกับไฟล์ใหม่เหล่านั้น นี่คือวิธีที่เราเรียกมันว่า football-rankings.php:

/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function create_block_football_rankings_block_init() {
  register_block_type( __DIR__ . '/build', array(
    'render_callback' => 'render_frontend'
  ));
}
add_action( 'init', 'create_block_football_rankings_block_init' );

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' ); // HIGHLIGHT 15,16,17,18
  }
  
  ob_start(); ?>

  

    

      
        
      


Rank
Logo
Team name

GP
GW
GD
GL
GF
GA
Pts
Last 5 games

  <?php return ob_get_clean();

}
เนื่องจากฉันกำลังใช้ render_callback() วิธีการสำหรับแอตทริบิวต์ ฉันจะจัดการการเข้าคิวด้วยตนเองเช่นเดียวกับ คู่มือตัวแก้ไขบล็อกแนะนำ. ที่มีอยู่ใน !is_admin() เงื่อนไข และกำลังจัดคิวไฟล์ทั้งสองเพื่อไม่ให้เข้าคิวในขณะที่ใช้หน้าจอตัวแก้ไข
ตอนนี้เรามีไฟล์ใหม่สองไฟล์ที่เรากำลังโทรหา เราต้องแน่ใจว่าเรากำลังบอกต่อ npm เพื่อรวบรวมพวกเขา ดังนั้น ทำอย่างนั้นใน package.jsonใน scripts ส่วน:
"scripts": {
  "build": "wp-scripts build src/index.js src/frontend.js",
  "format": "wp-scripts format",
  "lint:css": "wp-scripts lint-style",
  "lint:js": "wp-scripts lint-js",
  "packages-update": "wp-scripts packages-update",
  "plugin-zip": "wp-scripts plugin-zip",
  "start": "wp-scripts start src/index.js src/frontend.js"
},
อีกวิธีในการรวมไฟล์คือการกำหนดไว้ในข้อมูลเมตาของบล็อกที่มีอยู่ใน block.json ไฟล์, ตามที่ระบุไว้ ในการแนะนำการพัฒนาบล็อก:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
เหตุผลเดียวที่ฉันจะไปกับ package.json วิธีเป็นเพราะฉันกำลังใช้ .อยู่แล้ว render_callback() วิธี
กำลังแสดงผลข้อมูล JSON
ในส่วนของการเรนเดอร์ ฉันกำลังเพ่งความสนใจไปที่บล็อกเดียวเท่านั้น โดยทั่วไป คุณต้องการกำหนดเป้าหมายหลายช่วงตึกที่ส่วนหน้า ในกรณีนั้นคุณต้องใช้ประโยชน์จาก document.querySelectorAll() ด้วย ID เฉพาะของบล็อก
โดยทั่วไปฉันจะรอให้หน้าต่างโหลดและดึงข้อมูลสำหรับออบเจ็กต์หลักสองสามรายการจาก JSON และนำไปใช้กับมาร์กอัปบางรายการที่แสดงผลในส่วนหน้า ฉันกำลังจะไปแปลง attributes ข้อมูลไปยังออบเจ็กต์ JSON เพื่อให้อ่านจาวาสคริปต์ได้ง่ายขึ้น และตั้งค่ารายละเอียดจาก JSON เป็น HTML สำหรับสิ่งต่างๆ เช่น โลโก้ฟุตบอลลีก โลโก้ทีม และสถิติ
คอลัมน์ "5 เกมล่าสุด" แสดงผลการแข่งขันห้านัดล่าสุดของทีม ฉันต้องแก้ไขข้อมูลด้วยตนเองเนื่องจากข้อมูล API อยู่ในรูปแบบสตริง การแปลงเป็นอาร์เรย์สามารถช่วยให้ใช้ใน HTML เป็นองค์ประกอบแยกต่างหากสำหรับการแข่งขันห้านัดล่าสุดของแต่ละทีม
import "./frontend.scss";

// Wait for the window to load
window.addEventListener( "load", () => {
  // The code output
  const dataEl = document.querySelector( ".data pre" ).innerHTML;
  // The parent rankings element
  const tableEl = document.querySelector( ".league-table" );
  // The table headers
  const tableHeaderEl = document.querySelector( "#league-standings .header" );
  // Parse JSON for the code output
  const dataJSON = JSON.parse( dataEl );
  // Print a little note in the console
  console.log( "Data from the front end", dataJSON );
  
  // All the teams 
  let teams = dataJSON.data.response[ 0 ].league.standings[ 0 ];
  // The league logo
  let leagueLogoURL = dataJSON.data.response[ 0 ].league.logo;
  // Apply the league logo as a background image inline style
  tableHeaderEl.style.backgroundImage = `url( ${ leagueLogoURL } )`;
  
  // Loop through the teams
  teams.forEach( ( team, index ) => {
    // Make a div for each team
    const teamDiv = document.createElement( "div" );
    // Set up the columns for match results
    const { played, win, draw, lose, goals } = team.all;

    // Add a class to the parent rankings element
    teamDiv.classList.add( "team" );
    // Insert the following markup and data in the parent element
    teamDiv.innerHTML = `
      

        ${ index + 1 }
      
      

        
      
      
${ team.team.name }
      

        
${ played }
        
${ win }
        
${ draw }
        
${ lose }
        
${ goals.for }
        
${ goals.against }
        
${ team.points }
      
      

    `;
    
    // Stringify the last five match results for a team
    const form = team.form.split( "" );
    
    // Loop through the match results
    form.forEach( ( result ) => {
      // Make a div for each result
      const resultEl = document.createElement( "div" );
      // Add a class to the div
      resultEl.classList.add( "result" );
      // Evaluate the results
      resultEl.innerText = result;
      // If the result a win
      if ( result === "W" ) {
        resultEl.classList.add( "win" );
      // If the result is a draw
      } else if ( result === "D" ) {
        resultEl.classList.add( "draw" );
      // If the result is a loss
      } else {
        resultEl.classList.add( "lost" );
      }
      // Append the results to the column
      teamDiv.querySelector( ".form-history" ).append( resultEl );
    });

    tableEl.append( teamDiv );
  });
});
ตราบใดที่การจัดแต่งทรงผมดำเนินไป คุณมีอิสระที่จะทำสิ่งที่คุณต้องการ! ถ้าคุณต้องการทำงานด้วย เรามีสไตล์ครบชุดที่คุณสามารถใช้เป็นจุดเริ่มต้นได้
ฉันจัดสไตล์สิ่งต่าง ๆ ใน SCSS ตั้งแต่ the @wordpress/create-block แพ็คเกจรองรับตั้งแต่แกะกล่อง วิ่ง npm run start ในบรรทัดคำสั่งเพื่อดูไฟล์ SCSS และคอมไพล์เป็น CSS เมื่อบันทึก หรือคุณสามารถใช้ npm run build ในการบันทึกแต่ละครั้งเพื่อคอมไพล์ SCSS และสร้างบันเดิลปลั๊กอินที่เหลือ


          ดู SCSS      
body {
  background: linear-gradient(to right, #8f94fb, #4e54c8);
}

.data pre {
  display: none;
}

.header {
  display: grid;
  gap: 1em;
  padding: 10px;
  grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
  align-items: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
}

.frontend#league-standings {
  width: 900px;
  margin: 60px 0;
  max-width: unset;
  font-size: 16px;

  .header {
    .stats {
      display: flex;
      gap: 15px;

      & > div {
        width: 30px;
      }
    }
  }
}

.league-table {
  background: white;
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  padding: 1em;

  .position {
    width: 20px;
  }

  .team {
    display: grid;
    gap: 1em;
    padding: 10px 0;
    grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
    align-items: center;
  }

  .team:not(:last-child) {
    border-bottom: 1px solid lightgray;
  }

  .team-logo img {
    width: 30px;
  }

  .stats {
    display: flex;
    gap: 15px;
  }

  .stats > div {
    width: 30px;
    text-align: center;
  }

  .form-history {
    display: flex;
    gap: 5px;
  }

  .form-history > div {
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 3px;
    font-size: 15px;
  }

  .form-history .win {
    background: #347d39;
    color: white;
  }

  .form-history .draw {
    background: gray;
    color: white;
  }

  .form-history .lost {
    background: lightcoral;
    color: white;
  }
}

นี่คือการสาธิต!
ลองดูสิ เราเพิ่งสร้างบล็อกปลั๊กอินที่ดึงข้อมูลและแสดงผลที่ส่วนหน้าของไซต์ WordPress
เราพบ API fetch()-ed ข้อมูลจากมัน บันทึกลงในฐานข้อมูล WordPress แยกวิเคราะห์ และนำไปใช้กับมาร์กอัป HTML เพื่อแสดงที่ส่วนหน้า ไม่เลวสำหรับการกวดวิชาเดียวใช่ไหม
อีกครั้ง เราสามารถทำสิ่งเดียวกันเพื่อให้การจัดอันดับแสดงผลในตัวแก้ไขบล็อกเพิ่มเติมจากส่วนหน้าของธีม แต่หวังว่าการให้ความสำคัญกับส่วนหน้าจะแสดงให้เห็นว่าการดึงข้อมูลทำงานอย่างไรในบล็อก WordPress และวิธีจัดโครงสร้างและแสดงผลข้อมูลเพื่อแสดงผล