Đã có một số hướng dẫn mới xuất hiện ở đây về CSS-Tricks để làm việc với các khối WordPress. Một trong số chúng là phần giới thiệu về phát triển khối trong WordPress và đây là một nơi tốt để tìm hiểu các khối là gì và đăng ký chúng trong WordPress để sử dụng trong các trang và bài đăng.
Mặc dù các khái niệm cơ bản về khối được đề cập một cách độc đáo trong bài đăng đó, nhưng tôi muốn thực hiện thêm một bước nữa. Bạn thấy đấy, trong bài viết đó, chúng ta đã tìm hiểu sự khác biệt giữa các khối hiển thị trong Trình chỉnh sửa khối WordPress back-end và hiển thị chúng trên chủ đề front-end. Ví dụ là một Khối Pullquote đơn giản hiển thị nội dung và phong cách khác nhau ở mỗi đầu.
Hãy đi xa hơn và xem xét việc sử dụng nội dung động trong một khối WordPress. Cụ thể hơn, hãy tìm nạp dữ liệu từ một API bên ngoài và hiển thị nó trên giao diện người dùng khi một khối cụ thể được đưa vào Trình chỉnh sửa khối.
Chúng tôi sẽ xây dựng một khối xuất dữ liệu hiển thị bóng đá (ờ, bóng đá) thứ hạng được lấy từ Api-Bóng đá.
Có nhiều cách để tích hợp API với khối WordPress! Vì bài viết về kiến thức cơ bản về khối đã hướng dẫn quá trình tạo khối từ đầu, chúng tôi sẽ đơn giản hóa mọi thứ bằng cách sử dụng @wordpress/create-block gói để khởi động công việc của chúng tôi và cấu trúc dự án của chúng tôi.
Khởi tạo plugin khối của chúng tôi
Điều đầu tiên trước tiên: hãy tạo một dự án mới từ dòng lệnh:
npx @wordpress/create-block football-rankingsTôi thường bắt đầu một dự án như thế này bằng cách tạo các tệp từ đầu, nhưng hãy gửi lời chúc đến nhóm WordPress Core cho tiện ích hữu ích này!
Khi thư mục dự án đã được tạo bằng lệnh, về mặt kỹ thuật, chúng tôi có một khối WordPress đầy đủ chức năng được đăng ký làm plugin. Vì vậy, hãy tiếp tục và thả thư mục dự án vào wp-content/plugins thư mục mà bạn đã cài đặt WordPress (có lẽ tốt nhất là làm việc trong môi trường cục bộ), sau đó đăng nhập vào quản trị viên WordPress và kích hoạt nó từ màn hình Plugins.
Bây giờ khối của chúng ta đã được khởi tạo, cài đặt và kích hoạt, hãy tiếp tục và mở thư mục dự án từ lúc /wp-content/plugins/football-rankings. Bạn sẽ muốn cd cũng từ dòng lệnh để đảm bảo chúng ta có thể tiếp tục phát triển.
Đây là những tệp duy nhất chúng tôi cần tập trung vào lúc này:
edit.jsindex.jsfootball-rankings.php
Tất nhiên, các tệp khác trong dự án là quan trọng, nhưng không cần thiết vào thời điểm này.
Xem xét nguồn API
Chúng tôi đã biết rằng chúng tôi đang sử dụng Api-Bóng đá mà đến với chúng tôi với sự lịch sự của API nhanh. May mắn thay, RapidAPI có một bảng điều khiển tự động tạo các tập lệnh bắt buộc mà chúng tôi cần để tìm nạp dữ liệu API cho Bảng xếp hạng Premier League 2021.
Nếu bạn muốn xem cấu trúc JSON, bạn có thể tạo biểu diễn trực quan với JSONCrack.
Tìm nạp dữ liệu từ edit.js hồ sơ
Tôi sẽ bọc mã RapidAPI bên trong Phản ứng useEffect() móc với một mảng phụ thuộc trống để nó chỉ chạy một lần khi trang được tải. Bằng cách này, chúng tôi ngăn WordPress gọi API mỗi khi Trình chỉnh sửa khối hiển thị. Bạn có thể kiểm tra điều đó bằng cách sử dụng wp.data.subscribe() nếu bạn quan tâm.
Đây là mã mà tôi đang nhập useEffect(), sau đó quấn nó xung quanh fetch() mã mà RapidAPI đã cung cấp:
/**
* 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" ) }
);
}Lưu ý rằng tôi đã rời khỏi return chức năng còn khá nhiều nguyên vẹn, nhưng đã bao gồm một ghi chú xác nhận bảng xếp hạng bóng đá được hiển thị ở giao diện người dùng. Một lần nữa, chúng tôi sẽ chỉ tập trung vào giao diện người dùng trong bài viết này - chúng tôi cũng có thể hiển thị dữ liệu trong Trình chỉnh sửa khối, nhưng chúng tôi sẽ để điều đó cho một bài viết khác để giữ mọi thứ tập trung.
Lưu trữ dữ liệu API trong WordPress
Bây giờ chúng ta đang tìm nạp dữ liệu, chúng ta cần lưu trữ nó ở đâu đó trong WordPress. Đây là nơi attributes.data đối tượng có ích. Chúng tôi đang xác định data.type như một object vì dữ liệu được tìm nạp và định dạng là JSON. Đảm bảo rằng bạn không có bất kỳ loại nào khác, nếu không WordPress sẽ không lưu dữ liệu, cũng như không tạo ra bất kỳ lỗi nào để bạn gỡ lỗi.
Chúng tôi xác định tất cả những điều này trong index.js tập tin:
registerBlockType( metadata.name, {
edit: Edit,
attributes: {
data: {
type: "object",
},
},
save,
} );OK, vì vậy WordPress hiện biết rằng dữ liệu RapidAPI mà chúng tôi đang tìm nạp là một đối tượng. Nếu chúng tôi mở bản nháp bài đăng mới trong Trình chỉnh sửa khối WordPress và lưu bài đăng, dữ liệu hiện được lưu trữ trong cơ sở dữ liệu. Trên thực tế, nếu chúng ta có thể thấy nó trong wp_posts.post_content nếu chúng tôi mở cơ sở dữ liệu của trang web bằng phpMyAdmin, Sequel Pro, Adminer hoặc bất kỳ công cụ nào bạn sử dụng.
Xuất dữ liệu JSON trong giao diện người dùng
Có nhiều cách để xuất dữ liệu trên giao diện người dùng. Cách tôi sẽ chỉ cho bạn là lấy các thuộc tính được lưu trữ trong cơ sở dữ liệu và chuyển chúng dưới dạng tham số thông qua render_callback chức năng của chúng tôi football-rankings.php tập tin.
Tôi muốn tách biệt các mối quan tâm, vì vậy cách tôi thực hiện là thêm hai tệp mới vào plugin khối build thư mục: frontend.js và frontend.css (bạn có thể tạo một frontend.scss tập tin trong src thư mục được biên dịch sang CSS trong build danh mục). Bằng cách này, mã back-end và front-end là riêng biệt và football-rankings.php tệp dễ đọc hơn một chút.
/ giải thích Tham khảo lại phần giới thiệu về phát triển khối WordPress, có editor.css và style.css các tệp cho kiểu back-end và kiểu chia sẻ giữa front-end và back-end tương ứng. Bằng cách thêm frontend.scss (biên dịch thành frontend.css, Tôi có thể tách riêng các kiểu chỉ dành cho giao diện người dùng.
Trước khi chúng tôi lo lắng về những tệp mới đó, đây là cách chúng tôi gọi chúng trong 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(); ?>
<?php return ob_get_clean();
}Vì tôi đang sử dụng
render_callback()cho các thuộc tính, tôi sẽ xử lý hàng đợi theo cách thủ công giống như Sổ tay Trình chỉnh sửa Khối đề xuất. Nó được chứa trong!is_admin()điều kiện và đang xếp hàng hai tệp để chúng tôi tránh xếp chúng vào hàng trong khi sử dụng màn hình trình chỉnh sửa.Bây giờ chúng tôi có hai tệp mới mà chúng tôi đang gọi, chúng tôi phải đảm bảo rằng chúng tôi đang nói
npmđể biên dịch chúng. Vì vậy, hãy làm điều đó trongpackage.json, Trongscriptsphần:"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" },Một cách khác để bao gồm các tệp là xác định chúng trong siêu dữ liệu khối có trong
block.jsontập tin, như đã nêu trong phần giới thiệu về phát triển khối:"viewScript": [ "file:./frontend.js", "example-shared-view-script" ], "style": [ "file:./frontend.css", "example-shared-style" ],Lý do duy nhất tôi đi với
package.jsonlà bởi vì tôi đã sử dụngrender_callback()phương pháp.Hiển thị dữ liệu JSON
Trong phần kết xuất, tôi chỉ tập trung vào một khối duy nhất. Nói chung, bạn sẽ muốn nhắm mục tiêu nhiều khối trên giao diện người dùng. Trong trường hợp đó, bạn cần tận dụng
document.querySelectorAll()với ID cụ thể của khối.Về cơ bản, tôi sẽ đợi cửa sổ tải và lấy dữ liệu cho một vài đối tượng chính từ JSON và áp dụng chúng cho một số đánh dấu hiển thị chúng trên giao diện người dùng. Tôi cũng sẽ chuyển đổi
attributesdữ liệu vào đối tượng JSON để dễ dàng đọc qua JavaScript và đặt các chi tiết từ JSON thành HTML cho những thứ như biểu trưng giải đấu bóng đá, biểu trưng đội và số liệu thống kê.Cột "5 trận gần đây" hiển thị kết quả của XNUMX trận gần đây nhất của một đội. Tôi phải thay đổi dữ liệu theo cách thủ công vì dữ liệu API ở định dạng chuỗi. Chuyển đổi nó thành một mảng có thể giúp sử dụng nó trong HTML như một phần tử riêng biệt cho năm trận đấu gần đây nhất của mỗi đội.
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 }`; // 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 ); }); });${ played }${ win }${ draw }${ lose }${ goals.for }${ goals.against }${ team.points }Về kiểu dáng, bạn có thể tự do làm bất cứ điều gì bạn muốn! Nếu bạn muốn thứ gì đó hoạt động, tôi có một tập hợp đầy đủ các phong cách mà bạn có thể sử dụng làm điểm khởi đầu.
Tôi đã tạo kiểu mọi thứ trong SCSS kể từ khi
@wordpress/create-blockgói hỗ trợ nó ra khỏi hộp. Chạynpm run starttrong dòng lệnh để xem các tệp SCSS và biên dịch chúng thành CSS khi lưu. Ngoài ra, bạn có thể sử dụngnpm run buildtrên mỗi lần lưu để biên dịch SCSS và xây dựng phần còn lại của gói plugin.Xem 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; } }Đây là bản demo!
Kiểm tra điều đó - chúng tôi vừa tạo một plugin khối tìm nạp dữ liệu và hiển thị nó trên giao diện người dùng của một trang web WordPress.
Chúng tôi đã tìm thấy một API,
fetch()dữ liệu -ed từ nó, lưu nó vào cơ sở dữ liệu WordPress, phân tích cú pháp nó và áp dụng nó vào một số đánh dấu HTML để hiển thị trên giao diện người dùng. Không tồi cho một hướng dẫn duy nhất, phải không?Một lần nữa, chúng ta có thể làm điều tương tự để xếp hạng hiển thị trong Trình chỉnh sửa khối ngoài giao diện người dùng của chủ đề. Nhưng hy vọng việc giữ cho điều này tập trung vào giao diện người dùng sẽ cho bạn thấy cách tìm nạp dữ liệu hoạt động trong một khối WordPress và cách dữ liệu có thể được cấu trúc và hiển thị để hiển thị.
