ওয়ার্ডপ্রেস ব্লক নিয়ে কাজ করার জন্য সিএসএস-ট্রিকসে এখানে কিছু নতুন টিউটোরিয়াল এসেছে। তাদের একজন এটি ওয়ার্ডপ্রেস ব্লক ডেভেলপমেন্টের একটি ভূমিকা এবং ব্লকগুলি কী তা জানার জন্য এবং পৃষ্ঠা এবং পোস্টগুলিতে ব্যবহারের জন্য ওয়ার্ডপ্রেসে সেগুলি নিবন্ধন করার জন্য এটি একটি ভাল জায়গা।
যদিও ব্লক বেসিকগুলি সেই পোস্টে সুন্দরভাবে কভার করা হয়েছে, আমি এটিকে আরও একটি ধাপ এগিয়ে নিতে চাই। আপনি দেখুন, সেই নিবন্ধে, আমরা ব্যাক-এন্ড ওয়ার্ডপ্রেস ব্লক এডিটরে রেন্ডারিং ব্লক এবং ফ্রন্ট-এন্ড থিমে রেন্ডার করার মধ্যে পার্থক্য শিখেছি। উদাহরণটি ছিল একটি সাধারণ পুলকোট ব্লক যা প্রতিটি প্রান্তে বিভিন্ন বিষয়বস্তু এবং শৈলী রেন্ডার করেছে।
এর আরও যান এবং ব্যবহার তাকান গতিশীল বিষয়বস্তু একটি ওয়ার্ডপ্রেস ব্লকে। আরও নির্দিষ্টভাবে, আসুন একটি বাহ্যিক API থেকে ডেটা নিয়ে আসি এবং যখন একটি নির্দিষ্ট ব্লক ব্লক এডিটরে ড্রপ করা হয় তখন এটিকে সামনের প্রান্তে রেন্ডার করি।
আমরা এমন একটি ব্লক তৈরি করতে যাচ্ছি যা ডেটা আউটপুট করে যা সকার দেখায় (এর, ফুটবল) র্যাঙ্কিং থেকে টানা অপি-ফুটবল.
একটি ওয়ার্ডপ্রেস ব্লকের সাথে একটি API সংহত করার একাধিক উপায় আছে! যেহেতু ব্লক বেসিক সম্পর্কিত নিবন্ধটি ইতিমধ্যেই স্ক্র্যাচ থেকে একটি ব্লক তৈরির প্রক্রিয়ার মধ্য দিয়ে চলে গেছে, তাই আমরা ব্যবহার করে জিনিসগুলিকে সহজ করতে যাচ্ছি @wordpress/create-block প্যাকেজ আমাদের কাজ বুটস্ট্র্যাপ এবং আমাদের প্রকল্প গঠন.
আমাদের ব্লক প্লাগইন শুরু করা হচ্ছে
প্রথম জিনিসগুলি প্রথমে: আসুন কমান্ড লাইন থেকে একটি নতুন প্রকল্প তৈরি করি:
npx @wordpress/create-block football-rankingsআমি সাধারণত স্ক্র্যাচ থেকে ফাইল তৈরি করে এই মত একটি প্রকল্প বন্ধ করা হবে, কিন্তু এই সুবিধাজনক ইউটিলিটির জন্য ওয়ার্ডপ্রেস কোর টিমকে ধন্যবাদ!
একবার প্রজেক্ট ফোল্ডারটি কমান্ড দ্বারা তৈরি হয়ে গেলে, আমাদের কাছে প্রযুক্তিগতভাবে একটি প্লাগইন হিসাবে সম্পূর্ণ-কার্যকর ওয়ার্ডপ্রেস ব্লক নিবন্ধিত রয়েছে। সুতরাং, আসুন এগিয়ে যান এবং প্রকল্প ফোল্ডারটি ড্রপ করুন wp-content/plugins ডিরেক্টরি যেখানে আপনি ওয়ার্ডপ্রেস ইনস্টল করেছেন (সম্ভবত স্থানীয় পরিবেশে কাজ করার জন্য সবচেয়ে ভাল), তারপর ওয়ার্ডপ্রেস অ্যাডমিনে লগ ইন করুন এবং প্লাগইন স্ক্রিন থেকে এটি সক্রিয় করুন।
এখন যেহেতু আমাদের ব্লক শুরু, ইনস্টল এবং সক্রিয় করা হয়েছে, এগিয়ে যান এবং এ থেকে প্রজেক্ট ফোল্ডারটি খুলুন /wp-content/plugins/football-rankings. আপনি চান যাচ্ছেন cd সেখানে কমান্ড লাইন থেকে আমরা নিশ্চিত করতে পারি যে আমরা উন্নয়ন চালিয়ে যেতে পারি।
এই মুহুর্তে আমাদের মনোনিবেশ করা দরকার শুধুমাত্র এই ফাইলগুলি:
edit.jsindex.jsfootball-rankings.php
প্রকল্পের অন্যান্য ফাইলগুলি অবশ্যই গুরুত্বপূর্ণ, তবে এই সময়ে অপরিহার্য।
API উৎস পর্যালোচনা করা হচ্ছে
আমরা ইতিমধ্যে জানি যে আমরা ব্যবহার করছি অপি-ফুটবল যা আমাদের সৌজন্যে আসে RapidAPI. সৌভাগ্যবশত, RapidAPI-এর একটি ড্যাশবোর্ড রয়েছে যা স্বয়ংক্রিয়ভাবে প্রয়োজনীয় স্ক্রিপ্ট তৈরি করে যা 2021 প্রিমিয়ার লীগ স্ট্যান্ডিং-এর জন্য API ডেটা আনতে আমাদের প্রয়োজন।
আপনি যদি JSON কাঠামোটি দেখতে চান তবে আপনি এর সাথে ভিজ্যুয়াল উপস্থাপনা তৈরি করতে পারেন JSONCrack.
থেকে ডেটা আনা হচ্ছে edit.js ফাইল
আমি একটি ভিতরে RapidAPI কোড আবৃত করতে যাচ্ছি প্রতিক্রিয়া useEffect() হুক একটি খালি নির্ভরতা অ্যারের সাথে যাতে পৃষ্ঠাটি লোড করা হলে এটি শুধুমাত্র একবার চলে। এইভাবে, আমরা প্রতিবার ব্লক এডিটর পুনরায় রেন্ডার করার সময় ওয়ার্ডপ্রেসকে 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 ফাংশন মোটামুটি অক্ষত, কিন্তু একটি নোট অন্তর্ভুক্ত করেছে যা নিশ্চিত করে যে ফুটবল স্ট্যান্ডিং সামনের প্রান্তে রেন্ডার করা হয়েছে। আবার, আমরা এই নিবন্ধে শুধুমাত্র সামনের দিকে ফোকাস করতে যাচ্ছি — আমরা ব্লক এডিটরেও ডেটা রেন্ডার করতে পারি, কিন্তু বিষয়গুলিকে ফোকাস রাখার জন্য আমরা এটিকে অন্য নিবন্ধের জন্য ছেড়ে দেব।
ওয়ার্ডপ্রেসে API ডেটা সংরক্ষণ করা
এখন যেহেতু আমরা ডেটা আনছি, আমাদের এটিকে ওয়ার্ডপ্রেসে কোথাও সংরক্ষণ করতে হবে। এই যেখানে attributes.data বস্তু কাজে আসে। আমরা সংজ্ঞায়িত করছি data.type হিসাবে একটি object যেহেতু ডেটা আনা হয় এবং JSON হিসাবে ফর্ম্যাট করা হয়। নিশ্চিত করুন যে আপনার কাছে অন্য কোন প্রকার নেই বা অন্যথায় ওয়ার্ডপ্রেস ডেটা সংরক্ষণ করবে না, বা এটি আপনার ডিবাগ করার জন্য কোনো ত্রুটি নিক্ষেপ করবে না।
আমরা আমাদের এই সব সংজ্ঞায়িত index.js ফাইল:
registerBlockType( metadata.name, {
edit: Edit,
attributes: {
data: {
type: "object",
},
},
save,
} );ঠিক আছে, তাই ওয়ার্ডপ্রেস এখন জানে যে আমরা যে RapidAPI ডেটা আনছি তা একটি বস্তু। আমরা যদি ওয়ার্ডপ্রেস ব্লক এডিটরে একটি নতুন পোস্টের খসড়া খুলি এবং পোস্টটি সংরক্ষণ করি তবে ডেটা এখন ডাটাবেসে সংরক্ষণ করা হয়। আসলে, যদি আমরা এটি দেখতে পারি wp_posts.post_content যদি আমরা সাইটের ডাটাবেস phpMyAdmin, Sequel Pro, Adminer, বা আপনি যে টুল ব্যবহার করেন তাতে খুলি।
সামনের প্রান্তে JSON ডেটা আউটপুট করা হচ্ছে
সামনের প্রান্তে ডেটা আউটপুট করার একাধিক উপায় রয়েছে। আমি আপনাকে যেভাবে দেখাতে যাচ্ছি তা ডাটাবেসে সংরক্ষিত বৈশিষ্ট্যগুলি গ্রহণ করে এবং সেগুলিকে প্যারামিটার হিসাবে পাস করে render_callback আমাদের মধ্যে ফাংশন football-rankings.php ফাইল.
আমি উদ্বেগের বিচ্ছেদ রাখতে পছন্দ করি, তাই আমি কীভাবে এটি করব তা হল ব্লক প্লাগইনে দুটি নতুন ফাইল যুক্ত করা build ফোল্ডার: frontend.js এবং frontend.css (আপনি একটি তৈরি করতে পারেন frontend.scss ফাইলের মধ্যে src ডিরেক্টরি যা সিএসএস-এ কম্পাইল করা হয়েছে build ডিরেক্টরি)। এইভাবে, ব্যাক-এন্ড এবং ফ্রন্ট-এন্ড কোডগুলি আলাদা এবং football-rankings.php ফাইল পড়া একটু সহজ।
/ব্যাখ্যা ওয়ার্ডপ্রেস ব্লক ডেভেলপমেন্টের ভূমিকার কথা উল্লেখ করে, সেখানে আছে 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(); ?>
<?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()ব্লকের নির্দিষ্ট আইডি সহ।আমি মূলত 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 }`; // 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 }যতদূর স্টাইলিং যায়, আপনি যা চান তা করতে স্বাধীন! আপনি যদি কিছুর সাথে কাজ করতে চান তবে আমার কাছে শৈলীগুলির একটি সম্পূর্ণ সেট রয়েছে যা আপনি একটি সূচনা পয়েন্ট হিসাবে ব্যবহার করতে পারেন।
আমি থেকে SCSS জিনিস শৈলী
@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; } }এখানে ডেমো!
এটি পরীক্ষা করে দেখুন — আমরা এইমাত্র একটি ব্লক প্লাগইন তৈরি করেছি যা ডেটা নিয়ে আসে এবং এটি একটি ওয়ার্ডপ্রেস সাইটের সামনের প্রান্তে রেন্ডার করে।
আমরা একটি API পেয়েছি,
fetch()এটি থেকে -ed ডেটা, ওয়ার্ডপ্রেস ডাটাবেসে সংরক্ষণ করে, এটিকে পার্স করে এবং সামনের প্রান্তে প্রদর্শনের জন্য কিছু HTML মার্কআপে প্রয়োগ করে। একটি একক টিউটোরিয়ালের জন্য খারাপ নয়, তাই না?আবার, আমরা একই ধরণের জিনিস করতে পারি যাতে থিমের ফ্রন্ট এন্ড ছাড়াও ব্লক এডিটরে রেন্ডার করা যায়। তবে আশা করি সামনের দিকে এটিকে ফোকাস করা আপনাকে দেখায় কিভাবে একটি ওয়ার্ডপ্রেস ব্লকে ডেটা আনয়ন কাজ করে এবং কীভাবে ডেটা স্ট্রাকচার করা যায় এবং প্রদর্শনের জন্য রেন্ডার করা যায়।
