מדריך לעבודה עם REST API של וורדפרס

REST API הוא אחד מהנושאים החמים בתקופה האחרונה, בוודאי כשמדברים על השילוב עם וורדפרס.
במדריך זה נכיר מהו REST API, למה הוא טוב וכיצד להשתמש ב-REST API של וורדפרס.

אז מה זה REST API ולמה זה טוב?

REST API (ראשי תיבות: Representational State Transfer) היא ארכיטקטורה שמאפשרת שיתוף מידע בין מקורות שונים.
באמצעות REST API ניתן לקבל נתונים "יבשים" ממסד הנתונים של שרת מרוחק ולהציגו באיזו דרך שנרצה.
בדרך כלל, הנתונים שנקבל יהיו בפורמט JSON, לא יודעים על מה מדובר? המדריך שכתבתי ישפוך לכם קצת אור.

אז איך נראה מידע ב-JSON?
דוגמא לפיסת מידע קטנה ופשוטה:

{
  "usersData": [
    {
      "id": "1",
      "name": "David",
      "email": "david@example.com"
    },
    {
      "id": "2",
      "name": "Maya",
      "email": "maya@example.com"
    },
    {
      "id": "3",
      "name": "Daniel",
      "email": "daniel@example.com"
    }
  ]
}

בקשת REST API הינה בקשת HTTP פשוטה.
לרוב נעבוד עם 4 בקשות HTTP נפוצות:

GET – קבלת נתונים
POST – הכנסת נתונים
PUT – עדכון נתונים
DELETE – מחיקת נתונים

הקשר בין REST API לוורדפרס

אחרי תקופה של ציפייה, בגרסת 4.7 של וורדפרס ה-REST API נכנס בליבה של וורדפרס וזהו חידוש לא פחות ממטורף שמשדרג את היכולות של וורדפרס משמעותית.

מה ניתן לעשות עם REST API של וורדפרס?

ואו, המון, צריכים דוגמאות?

1. שימוש בוורדפרס באמצעות כל שפת צד שרת העובדת עם פרוטוקול HTTP.
2. יצירת מערכת ניהול ללא קשר ל-wp-admin.
3. שליפת הנתונים לאפליקציות מובייל.

ועוד ועוד..
אז אחרי שהבנו ש-REST API זה דבר מגניב בטירוף, בואו נבין כיצד זה עובד.
לפני שנתחיל, אני ממליץ להוריד תוסף כלשהו שידאג "לסדר" את התצוגה של JSON בדפדפן.
כאן תוכלו להוריד אחד כזה (כרום).

עבודה עם REST API של וורדפרס

כפי שציינתי, REST API נכנסה לליבה של וורדפרס החל מגרסא 4.7, לכן דאגו לתרגל על גרסא זו ומעלה.
נתחיל עם שליפת נתונים באמצעות בקשת GET פשוטה.
על מנת לקבל פוסטים, ניגש באמצעות הדפדפן לכתובת URL הבאה:

http://domain.co.il/wp-json/wp/v2/posts/

אם אעשה בקשה דומה עם הדומיין של בלוג זה, זהו חלק מהפלט שאקבל בחזרה:

דוגמא לפלט של REST API
דוגמא לפלט של REST API

 

החליפו את posts ל-categories על מנת לקבל קטגוריות, ל-tags על מנת לקבל תגיות, ל-comments…טוב הבנתם, אני אעצור פה.

במקרה זה ניתן לראות כי קיבלנו אובייקטים וכל אובייקט מכיל את פרטי הפוסט (id, date, slug, title, content וכ'ו).

סינונים

מה אם נרצה לסנן את התוצאות?

קבלת פוסט לפי ID מסוים:

http://domain.co.il/wp-json/wp/v2/posts/2

קבלת 10 תוצאות בלבד:

http://domain.co.il/wp-json/wp/v2/posts/?per_page=10

שינוי את ה-Order (ברירת מחדל: DESC):

http://domain.co.il/wp-json/wp/v2/posts/?order=asc

לפי ID של קטגוריה/ות:

http://domain.co.il/wp-json/wp/v2/posts/?categories=4,6

שניגש לתכל'ס? קוד לדוגמא

בחלק זה של המאמר אראה לכם כיצד יצרתי Front-End שיודע לגשת ל-REST API של וורדפרס, לקבל ממנו 10 פוסטים אחרונים ולהציגם באמצעות AJAX, וכל זה בדקות בודדות וללא שימוש בטכנולוגיית צד שרת כגון PHP.
אז מהי התוצאה הסופית? לחץ כאן

index.html – הדף הראשי, תצוגת התוצאות:

<!DOCTYPE html>
<html dir="rtl" lang="he-IL">
<head>
    <meta charset="UTF-8">
    <title>WordPress REST API Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/main.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="loaders.css-master/loaders.min.css"/>
</head>
<body>
    <div id="result">
        <div class="loader-div ball-pulse-rise"><div></div><div></div><div></div><div></div><div></div></div>
    </div>

    <script type="text/javascript" src="js/ajax.js"></script>
</body>
</html>

אז מה יש כאן? מלבד טמפלייט בסיסי של HTML, מעט מאוד:
שורה 8: ייבוא של קובץ ה-CSS שעליו נרחיב בהמשך.
שורה 9: ייבוא של ספריית jQuery באמצעות ה-CDN של גוגל.
שורה מספר 11: ייבוא של ספריית CSS של Loaders נחמדים מאוד שעליה המלצתי בפוסט ספריות CSS מומלצות
שורות 14-16: דיב שבו יוצגו התוצאות. עד שיוצגו התוצאות, ה-Loader הנחמד יתפקד.
שורה 18: ייבוא של קובץ ה-JS שעליו נרחיב בהמשך.

קובץ main.css – עיצוב הדף:

html {
    font-size:16px;
}
body {
    font-family:Arial;
    direction: rtl;
    text-align: right;
    background-color: #F5F5F5;
}

html {
    font-size:16px;
}
body {
    font-family:Arial;
    direction: rtl;
    text-align: right;
    background-color: #F5F5F5;
}

/*Result*/
#result {
    padding:2rem;
    width:90%;
    box-sizing: border-box;
    min-height:600px;
    background-color:#FFFFFF;
    margin:1.5rem auto;
}
#result .postContainer {
    margin-bottom:3rem;
}
#result .postContainer h2 {
    margin:0;
    color: #245156;
    font-size:1.6rem;
    font-weight: normal;
}
#result .postContainer p {
    color: #4c4c4c;
    font-size:1rem;
    font-weight: normal;
}
#result .postContainer a {
    display: inline-block;
    background: #DCDCDC;
    padding: 0.6rem 0.8rem;
    border-radius: 1.2rem;
    color: #000000;
    font-size: 1rem;
    text-decoration: none;
    font-weight: normal;
}

/*Loader*/
.loader-div {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    height: 2em;
    width: 6em;
    margin: auto;
}
.loader-div.ball-pulse-rise > div {
    background-color: #ff7902;
}

עיצוב CSS מינימליסטי מאוד.
הגדרות בסיסיות לדף, עיצוב של בלוק התוצאות ועיצוב ה-Loader.

ajax.js – הדף שבו jQuery עובדת. שליפה והצגת התוצאות:

$(document).ready(function() {
    var result = $('#result');
    $.ajax({
        type: 'GET',
        url: 'http://codebrain.co.il/wp-json/wp/v2/posts/?per_page=10',
        success: function(data) {
            $('.loader-div').fadeOut();
            $.each( data, function( key, value ) {
                result.append('' +
                    '<div class="postContainer">' +
                    '<h2>' + value.title.rendered + '</h2>' +
                    '<p>' + value.excerpt.rendered + '</p>' +
                    '<a href="'+ value.link +'">קרא את המאמר »</a>' +
                    '</div>');
            });
        },
        error: function() {
            $('#result').text('Error!');
        }
    });
});

הסבר:

שורה 1: דאגתי שה-AJAX יתבצע לאחר שה-DOM ייטען.
שורה 2: "שמרתי" את הסלקטור הפונה אל הדיב שבו יוצגו התוצאות.
שורות 3-20: ה-AJAX:
פנייה ל-REST API באמצעות מתודת GET שתחזיר לנו כפלט 10 פוסטים כאובייקטים.
שורות 6-12: במקרה של הצלחה, נעלים את ה-Loader, ובאמצעות each ניצור דיב בשם postContainer לכל פוסט. דיב זה יכיל את הכותרת, התקציר והקישור למאמר.
מדוע פניתי למידע בצורה הבאה: title.rendered.value?
כך בנוי ה-JSON החוזר אלינו:

חלק מה-JSON המתקבל
חלק מה-JSON המתקבל

שורות 17-19: במידה וישנו כישלון בקבלת המידע, נקבל Error.

סיכום

אין ספק כי ה-REST API של וורדפרס הוא Game Changer רציני בכל מה שקשור לוורדפרס וליכולותיה.
REST API מאפשר לנו לעשות המון דברים והוא מוסיף גמישות רבה למפתחים שרוצים ללכת צעד אחד קדימה. אני הלכתי, מה איתכם?
בהצלחה!

נהנת ממאמר זה? לחץ כאן על מנת להירשם לרשימה התפוצה ולקבל עדכונים על מאמרים נוספים!

2 תגובות בנושא “מדריך לעבודה עם REST API של וורדפרס”

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *