אייאקס, או Asynchronous JavaScript and XML, משמשת לתקשורת עם סקריפטים בצד השרת ומאפשרת לטעון תוכן דינמי מבלי שתצטרך לטעון מחדש את הדף.

נניח, למשל, שאתה בונה א אתר אינטרנט עבור ארגון צדקה מקומי ואתה רוצה לעודד אווירה חיובית. אתה יכול להוסיף כפתור שכותרתו "הראה קצת אהבה! »עם דלפק בדף הבית ובזכות AJAX, בכל פעם שהלחצן מופעל (נלחץ על ידי א מבקר), מונה מצטבר מבלי לטעון מחדש את הדף.

זו הדוגמה שנבנה במדריך זה.

במדריך זה תלמדו יותר מה AJAX, כיצד ניתן להשתמש בו וכיצד ליצור איתו תכונות מדהימות ב- WordPress.

בואו נתחיל.

היסודות של AJAX

• הזנת ה- AJAX בדרך כלל נוקטת בשלבים הבאים:
• התחל שיחת AJAX עקב פעולת משתמש
• קבל ועבד את הבקשה בשרת
• לכוד את התגובה ולבצע את כל הפעולות הדרושות באמצעות JavaScript
• הגדרת סביבת נושא חדשה

בואו לממש את זה על וורדפרס. הדוגמה הראשונה שלנו מציגה חלון קופץ פשוט המכיל את מספר התגובות למאמר כאשר אנו לוחצים על הכותרת. נשתמש בנושא ילדים המבוסס על " עשרים Sixteen מ- WordPress.

הנה מה שאתם צריכים לעשות:

צור תיקיה חדשה בספריית העיצובים בהתקנת WordPress שלך ב " wp-תוכן "ושמו" test ajax ", צרו את שני הקבצים נדרש על ידי וורדפרס, כלומר " functions.php "," Styles.css "והוסף קובץ חדש בשם" script.js ". הוסף את הקוד הבא לכותרת גיליון הסגנונות של CSS שלך (style.css).

/ * Theme שם: ערכת נושא בדיקת אייאקס URI: http://premium.wpmudev.com תיאור: נושא לבדיקת מחבר AJAX ידיעתנו: דניאל פטאקי הסופר אורי: http://danielpataki.com תבנית: גרסה twentysixteen: רישיון 1.0.0 הרישיון הציבורי הכללי של GNU או במאוחר רישיון v2 URI: http://www.gnu.org/licenses/gpl-2.0.html * /

יש לטעון את גיליון הסגנונות של נושא האב על ידי נושא הילד. בעבר זה נעשה על ידי ייבוא ​​קובץ ה- CSS לנושא הצאצא, אך הדרך המומלצת לעשות זאת היא להשתמש ב"הצבעה ". זכור, הראינו לך כיצד להשתמש בתכונה זו.

אז בואו נוסיף את גיליון סגנונות ההורה ואת קובץ ה- JavaScript שלנו ישירות:

ADD_ACTION ( 'wp_enqueue_scripts', 'ajax_test_scripts'); פונקצית ajax_test_scripts () {wp_enqueue_style (בסגנון-הורי ", get_template_directory_uri () '/style.css'.); wp_enqueue_script (. get_stylesheet_directory_uri 'ajax-מבחן סקריפטים' () '/scripts.js', array ( 'JQuery'), 1.0.0 ', נכון); }

אם אתה מרגיש שיש לך כוח לקחת את זה צעד קדימה, למצוא תמונה נחמדה, לחתוך אותה ל 880 פיקסלים על 660 פיקסלים ולמקם אותה בתיקיית הנושא של הילד ואז לשנות את השם שלה " screenshot.png ". זה יופיע בסעיף המראה כאשר תרצו להפעיל את ערכת הנושא.

מכיוון שנושא הילד הזה מבוסס על " עשרים Sixteen ושלא שינינו כלום (עדיין!), האתר צריך להראות בדיוק כמו נושא קלאסי עם הנושא " עשרים Sixteen ".

הוספת כפתור

כדי להתחיל, נוסיף את הכפתור " הצג unpeu אהבה! ". מקום נהדר להציג אותו יהיה בסרגל הצד של מאמרים בנושא.

לאחר מחקר מסוים, מסתבר שהסרגל הצד נוצר על ידי פונקציה בשם " twentysixteen_entry_meta () »השוכן בספרייה« inc / תבנית-tags.php ".

פונקציה זו היא " לחיבור מה שאומר שאנו יכולים לשנות אותו על ידי הגדרתו בקובץ functions.php שלנו. השלב הראשון של זה הוא העתקה והדבקה של כל הפונקציה בקובץ functions.php שלנו:

פונקציה twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('מחבר', 'משמש לפני שם מחבר ההודעה.', 'עשרים ושש עשרה'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } אם (in_array (get_post_type (), array ('post', 'attachment'))) {twentysixteen_entry_date (); } $ format = get_post_format (); אם (current_theme_supports ('פורמטים של פוסט', $ פורמט)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'משמש לפני פורמט ההודעה.', ' twentysixteen ')), esc_url (get_post_format_link (פורמט $)), get_post_format_string (פורמט $)); } אם ('פוסט' === get_post_type ()) {twentysixteen_entry_taxonomies (); } אם (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('השאירו תגובה ל- % s ', 'twentysixteen'), get_the_title ())); הד "; }}

בואו נוסיף את המפתח שלנו לתחתית כל המטא נתונים:

$ אהבה = get_post_meta (get_the_ID (), 'show_some_love', נכון); $ אהבה = (ריק ($ אהבה))? 0: $ אהבה; הד ' '. אהבה $. ' ';

להסביר את כל הקוד הזה:

השורה הראשונה מאחזרת את מספר האהבות שקיבל המאמר. בחלק מהמקרים נתונים אלה לא יהיו קיימים, במילים אחרות כאשר טרם נלחץ על הכפתור. מסיבה זו אנו משתמשים

השורה השנייה בקוד להגדרת הערך ל- 0 אם הערך ריק.

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

השתמשתי בתמונה הקטנה החינמית הזו שיש קישור זה. העתק והדבק את הקוד שאתה מקבל במקור התמונה כך:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

השתמשתי גם במעט CSS לעיצוב הכפתור כדי לתת לו אפקט של רחף. זה לא ברור מאליו אם זה כפתור, אבל זה יהיה למבחן הפשוט שלנו.

.love-כפתור img {-תקין margin: 6px; אטימות: 0.7; סמן: מצביע; img .love-כפתור}: לרחף {אטים: 1; }

מפעילה פעולה

סוף סוף אנו מגיעים ל- JavaScript שלנו! עלינו למקד לפריט שלנו ולגלות לחיצה עליו. כך תוכלו לעשות זאת:

(פונקציה ($) {$ (מסמך) .on ('לחץ', '. img לחצן כפתור', פונקציה () {התראה ("האהבה משותפת");})}) (jQuery);

אם תלחץ על הלחצן בנקודה זו, אתה אמור לראות התראת JavaScript עם הטקסט "האהבה משותפת." "

דרישות נתונים

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

כתובת ה- AJAX

קודם כל, אנחנו צריכים מקום לשלוח נתונים. המקום אליו אנו שולחים את הנתונים יעבד את הנתונים ויענה לשיחה. לוורדפרס יש מקום מובנה לטפל בשיחות AJAX, בו נוכל להשתמש: " admin-ajax.php "בפנים" wp-admin ". איננו יכולים להוסיף כתובת אתר זו לסקריפט שלנו (שימוש בקידוד "גולמי" אינו מקובל), אז בואו להשתמש וורדפרס כמה ערמומי.

הפונקציה wp_localize_script () במקור נועד לתרגם מחרוזות בקבצי JavaScript, וזה טוב. אנו יכולים להשתמש בו גם להעברת משתנים לקבצי ה- JavaScript שלנו, במקרה זה כתובת ה- URL של קובץ ה- AJAX שלנו. הוסף את הקוד הבא לקובץ שלנו " פונקציות כדלקמן:

wp_localize_script ('סקריפטים של ajax-test', 'ajaxTest', מערך ('ajax_url' => admin_url ('admin-ajax.php')));

התוצאה של אובייקט אחרון זה תיקרא ajaxTest, שיכיל מערך נתון בפרמטר האחרון כמאפיינים. להזנת הערך בו אנו יכולים להשתמש ajaxTest.ajax_url בקוד JavaScript שלנו.

מזהה המאמר

אנו נשלח נתונים שרירותיים כמזהה של המאמר (בה נשתמש כדי לזהות את המאמר עליו נרצה "להוסיף קצת אהבה"). ניתן לאחזר זאת מה- DOM. התבונן במבנה המשמש בנושא "עשרים ושש עשרה" להלן:

בכפתור שלנו יש "מאמר" כאחד מאבותיו. לאלמנט זה יש את הכיתה והוא מכיל את המזהה המספרי של המאמר. למרות שזה לא הפיתרון האלגנטי ביותר, אנחנו יכולים לתפוס את תעודת הזהות משם.

(מסמך) $ .on ( 'קליק', 'img-כפתור .love', הפונקציה () {var = parseInt post_id ($ (זה) .parents ( 'article.post:first'). ATTR ( 'id') .replace ( 'פוסט', '')); console.log (id)})

הפעולה

וורדפרס גם דורש שנשלח פרמטר בשם פעולה. מכיוון שכל הפעולות יישלחו ל- admin-ajax, אנו זקוקים לדרך להבדיל בין בקשות אלה, ומכאן השימוש בפרמטר זה.

שליחת בקשת AJAX

כעת אנו יכולים לחבר הכל. עלינו ליצור שיחת AJAX עבור " wp-admin / admin-ajax.php שמכיל את מזהה המאמר ופעולה. כך זה אמור להיראות.

(פונקציה ($) {$ (document) .on ( 'קליק', 'img-כפתור .love', הפונקציה () {var = parseInt post_id ($ (זה .parents) ( 'article.post:first'). . attr ( 'id') להחליף ( 'פוסט', '')); .ajax $ ({url: סוג ajaxTest.ajax_url 'פוסט', נתונים: {פעולה: 'add_love' pOST_ID: pOST_ID} הצלחה,: פונקציה (תגובה) {alert ( 'הצלחה, הספירה החדשה הוא' + תגובה)}})})}) (jQuery);

$ .ajax () היא הפונקציה המשומשת שלוקחת חבורה של פרמטרים. כתובת האתר מכילה את היעד שהוא כרגע הקובץ שלנו ajax-url.php ". הסוג מוגדר כ- " פוסט » כמו כל הבקשות שנשלחו על ידי א טופס. פרמטר הנתונים הוא אובייקט שמכיל " מפתח-ערך שאנחנו רוצים לשלוח לשרת. בהמשך נוכל לקרוא אותם באמצעות $ _POST ['action'] ו- $ _POST ['post_id'].

עיבוד יישומים

בדרך כלל אתה צריך לערוך את הקובץ " admin-ajax.php », מכיוון שהבקשה נשלחת לשם. זהו קובץ מערכת, ולכן אנחנו לא הולכים לשנות אותו. וורדפרס מאפשר לך להעביר בקשות AJAX באמצעות סוגריים מרובעים עם פרמטר הפעולה. המודל הוא כדלקמן:

אם קראת לפעולה שלך add_love עליך לצרף פונקציה לוו בשם " wp_ajax_add_love ו / או wp_ajax_nopriv_add_love ". הפעולות NoPriv ”פועל למשתמשים מחוברים, אחד פועל למשתמשים מחוברים בלבד. במקרה שלנו, נרצה להשתמש בשניהם. כמבחן מהיר, נגדיר ערך החזר ברירת מחדל:

פרמטר ההצלחה הוא פונקציה שתפעל לאחר סיום שיחת AJAX. נציג התראה פשוטה שתראה "כל הכבוד! החשבון החדש הוא "עם התשובה שלנו שנוספה בסוף.

ADD_ACTION ( 'wp_ajax_add_love', 'ajax_test_add_love'); ADD_ACTION ( 'wp_ajax_nopriv_add_love', 'ajax_test_add_love'); פונקציה ajax_test_add_love () {echo 4; למות (); }

חיברנו את הפונקציה שלנו לשני הסוגריים, אחד נעשה הד 4 ואז השתמש בפונקציה " למות () ". זה הכרחי ב- WordPress, אחרת תקבל 0 בסוף כל תשובה. אם תלחץ על הכפתור כעת אתה אמור לראות את הדברים הבאים:

כדי לקבל את מספר ה"לייקים "בפועל כל שעלינו לעשות הוא לאחזר את המספר הנוכחי, להגדיל אותו אחד, לשמור אותו במסד הנתונים ולהציג את המספר החדש.

פונקציה ajax_test_add_love () {אהבה $ = get_post_meta (_POST $ [ 'post_id '] show_some_love', true); אהבה = $ (ריק (אהבת $))? 0: אהבת $; $ אהבה ++; update_post_meta ($ _ POST [ 'post_id'], 'show_some_love' $ אהבה); echo $ אהבה; למות (); }

אם תלחץ על הכפתור כעת אתה אמור לראות את חלון הקופץ המציג "1". אם תרענן את הדף, אתה אמור לראות את המספר החדש שמוצג. לחיצה נוספת על הכפתור תצליח 2 ". כל שעלינו לעשות כעת הוא לוודא שהמספר ישתקף ישירות בממשק המשתמש.

בצע שינויים בממשק המשתמש באמצעות התגובה

חלק זה נראה קל (כי זה כן), אך בדרך כלל זה הכי קשה להרכיב. לעת עתה כל שעלינו לעשות הוא לאתר את האלמנט המכיל את המספר הנוכחי ולשנות את תוכנו על ידי התגובה.

(פונקציה ($) {$ (document) .on ( 'קליק', 'img-כפתור .love', הפונקציה () {var = parseInt post_id ($ (זה .parents) ( 'article.post:first'). . attr ( 'id') להחליף ( 'פוסט', '')); var $ number = $ () זה .parent () למצוא (. 'מספר') .ajax $ ({url :. ajaxTest.ajax_url, סוג: 'פוסט', נתונים: {פעולה: 'add_love' pOST_ID: post_id,}, הצלחה: הפונקציה (תגובה) {number.text $ (תגובה);}})})}) (jQuery);

הוספתי רק שתי שורות לקוד ה- JS הקודם שלנו. בשורה 5 אני שומר את האלמנט שמכיל את המספר במשתנה מספר $. בשורת ה- 14, אני משנה את הטקסט של אלמנט זה כדי להציג את התשובה, שהיא המספר החדש.

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