프론트 엔드의 WordPress 블록에서 외부 API 데이터 렌더링

이 CSS- 트릭 튜토리얼은 WordPress 블록에 대한 이전 게시물을 작성하여 프론트 엔드의 외부 API에서 동적 컨텐츠를 가져오고 표시하는 데 중점을 둡니다. 이전의 튜토리얼은 블록 기본 사항과 백엔드 렌더링을 다루었지만 사용자 지정 블록 내에서 외부 데이터를 사용하는 것을 탐구합니다. 이것은 외부 API 데이터를 사용자 정의 WordPress 블록에 통합하는 다양한 측면을 다루는 시리즈의 일부입니다. WordPress 블록에서 외부 API로 작업

프런트 엔드의 데이터 렌더링 (현재)

백엔드에서 데이터를 렌더링하는 (미래)

사용자 지정 설정 만들기 ui
• (미래) 사용자 정의 블록 설정 저장 (미래) 라이브 API 데이터 작업 (미래)
• 우리는 API-Football에서 축구 (축구) 리그 랭킹을 표시하여 프로젝트 설정을위한 패키지를 활용합니다. 블록 플러그인 설정 는 명령 줄을 사용하여 새 프로젝트를 생성 할 것입니다 :
생성 된 폴더를 WordPress 디렉토리에 배치하고 활성화 한 후에는 다음과 같은 주요 파일에 중점을 둡니다.
API 데이터 통합 ​​ 우리는 API-Football (RapidApi를 통해)을 사용합니다. RapidApi는 데이터를 가져 오는 데 필요한 스크립트를 제공합니다. JSONCRACK은 JSON 구조를 시각화하는 데 도움이 될 수 있습니다 에서 데이터를 가져 오십시오 hook in 는 페이지로드에서 한 번만 데이터를 가져와 블록 편집기 리 렌더 중에 불필요한 API 호출을 방지합니다. WordPress의 데이터 저장 파일은 속성을 ​​정의하여 페치 된 JSON을 저장합니다 :

이렇게하면 WordPress가 데이터베이스에 API 데이터를 저장합니다. 프론트 엔드 출력

@wordpress/create-block 우리는 백엔드 논리와 분리 된 프론트 엔드 렌더링 및 스타일링을 처리하기 위해 및

(또는 )를 만들게됩니다. 는 관리자 컨텍스트에 있지 않을 때만 및

를 사용하여 이러한 자산을 큐에 넣습니다 (). in 는 속성을 프론트 엔드 JavaScript로 전달합니다.

파일 (단순화) :

npx @wordpress/create-block football-rankings

또는

의 스타일은 데이터의 시각적 표현을 담당합니다. 빌드 프로세스에 프론트 엔드 파일을 포함하도록 파일의 섹션을 업데이트해야합니다. frontend.scss 완전한 데모와 세부 스타일은 원본 기사에서 제공됩니다. 이 개정 된 응답은 주요 단계 및 코드 스 니펫에 대한 간결한 개요를 제공합니다.

위 내용은 프론트 엔드의 WordPress 블록에서 외부 API 데이터 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!