عرض بيانات API الخارجية في قوالب WordPress على الواجهة الأمامية

ظهرت هنا بعض البرامج التعليمية الجديدة حول CSS-Tricks للعمل مع قوالب WordPress. واحد منهم هي مقدمة لتطوير قوالب WordPress وهي مكان جيد للتعرف على الكتل وتسجيلها في WordPress لاستخدامها في الصفحات والمنشورات.

بينما تتم تغطية أساسيات الكتلة بشكل جيد في هذا المنشور ، إلا أنني أريد أن أخطو خطوة أخرى إلى الأمام. كما ترى ، في هذه المقالة ، تعلمنا الفرق بين عرض الكتل في محرر قوالب WordPress الخلفي وعرضها على سمة الواجهة الأمامية. كان المثال عبارة عن Blockquote Block البسيط الذي يقدم محتوى وأنماط مختلفة في كل نهاية.

دعنا نذهب أبعد من ذلك وننظر في استخدام محتوى ديناميكي في قالب WordPress. وبشكل أكثر تحديدًا ، دعنا نجلب البيانات من واجهة برمجة تطبيقات خارجية ونعرضها على الواجهة الأمامية عند إسقاط كتلة معينة في محرر الكتلة.

سنقوم ببناء كتلة تنتج البيانات التي تظهر كرة القدم (أي ، كرة القدم) من الترتيب 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 على لوحة تحكم تقوم تلقائيًا بإنشاء البرامج النصية المطلوبة التي نحتاجها لجلب بيانات API الخاصة بترتيب الدوري الممتاز لعام 2021.

إذا كنت تريد إلقاء نظرة على بنية JSON ، فيمكنك إنشاء تمثيل مرئي باستخدام JSONCrack.

إحضار البيانات من ملف edit.js ملف

سأقوم بلف كود RapidAPI داخل ملف رد فعل useEffect() صنارة صيد مع مصفوفة تبعية فارغة بحيث يتم تشغيلها مرة واحدة فقط عند تحميل الصفحة. بهذه الطريقة ، نمنع WordPress من استدعاء واجهة برمجة التطبيقات (API) في كل مرة يعيد Block Editor التصيير. يمكنك التحقق من ذلك باستخدام 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 وحفظنا المنشور ، فسيتم تخزين البيانات الآن في قاعدة البيانات. في الواقع ، إذا استطعنا رؤيته في ملف wp_posts.post_content الحقل إذا فتحنا قاعدة بيانات الموقع في phpMyAdmin أو Sequel Pro أو Adminer أو أي أداة تستخدمها.

إخراج بيانات JSON في الواجهة الأمامية

هناك عدة طرق لإخراج البيانات على الواجهة الأمامية. الطريقة التي سأعرضها لكم تأخذ السمات المخزنة في قاعدة البيانات وتمريرها كمعامل من خلال render_callback تعمل في منطقتنا football-rankings.php ملف.

أحب الاحتفاظ بفصل المخاوف ، لذا كيف أفعل ذلك هو إضافة ملفين جديدين إلى المكوِّن الإضافي للكتلة build المجلد: frontend.js و frontend.css (يمكنك إنشاء ملف frontend.scss ملف في src الدليل الذي تم تجميعه إلى CSS بتنسيق 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() طريقة للسمات ، سأقوم بمعالجة قائمة الانتظار يدويًا تمامًا مثل يقترح دليل Block Editor Handbook. هذا موجود في ملف !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 بحيث يسهل قراءتها من خلال JavaScript وتعيين التفاصيل من 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 منذ @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 لعرضها على الواجهة الأمامية. ليس سيئًا في برنامج تعليمي واحد ، أليس كذلك؟
مرة أخرى ، يمكننا أن نفعل نفس الشيء بحيث تظهر التصنيفات في Block Editor بالإضافة إلى الواجهة الأمامية للموضوع. ولكن من المأمول أن يُظهر لك التركيز على الواجهة الأمامية كيفية عمل جلب البيانات في قالب WordPress ، وكيف يمكن تنظيم البيانات وعرضها للعرض.