อาแจ็กซ์หรือ Asynchronous JavaScript และ XMLใช้เพื่อสื่อสารกับสคริปต์ฝั่งเซิร์ฟเวอร์และอนุญาตให้คุณโหลดเนื้อหาแบบไดนามิกโดยไม่ต้องโหลดหน้าซ้ำ

สมมติว่าคุณกำลังสร้าง เว็บไซต์เว็บ เพื่อการกุศลในท้องถิ่นและคุณต้องการกระตุ้นให้เกิดความรู้สึกเชิงบวก คุณสามารถเพิ่มปุ่มที่มีป้ายกำกับว่า "แสดงความรัก! »ด้วยตัวนับในหน้าแรกและขอบคุณ AJAX ทุกครั้งที่เปิดใช้งานปุ่ม (คลิกโดยก ผู้มาเยือน) ตัวนับเพิ่มขึ้นโดยไม่ต้องโหลดหน้าซ้ำ

นี่คือตัวอย่างที่เราจะสร้างในบทช่วยสอนนี้

ในบทช่วยสอนนี้คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ AJAX คืออะไรวิธีการใช้และวิธีการสร้างคุณสมบัติที่ยอดเยี่ยมบน WordPress

ขอเริ่มต้น

พื้นฐานของ AJAX

• ฟีด AJAX มักจะทำตามขั้นตอนต่อไปนี้:
• เริ่มต้นการเรียก AJAX เนื่องจากการกระทำของผู้ใช้
• รับและประมวลผลคำขอบนเซิร์ฟเวอร์
• จับการตอบสนองและดำเนินการทุกอย่างที่จำเป็นผ่าน JavaScript
• การตั้งค่าสภาพแวดล้อมของธีมใหม่

ลองนำสิ่งนี้ไปปฏิบัติบน WordPress ตัวอย่างแรกของเราแสดงป๊อปอัปง่ายๆที่มีจำนวนความคิดเห็นสำหรับบทความเมื่อเราคลิกที่ชื่อเรื่อง เราจะใช้ธีมลูกตาม " ยี่สิบหก จาก WordPress

นี่คือสิ่งที่คุณต้องทำ:

สร้างโฟลเดอร์ใหม่ในไดเรกทอรี Themes ในการติดตั้ง WordPress ของคุณใน " wp เนื้อหา "และตั้งชื่อว่า" ajax-test "สร้างไฟล์ทั้งสอง จำเป็นโดย WordPressคือ " functions.php "," Styles.css "และเพิ่มไฟล์ใหม่ชื่อ" script.js " เพิ่มโค้ดต่อไปนี้ในส่วนหัวของสไตล์ชีท CSS ของคุณ (style.css).

/ * ชื่อธีม: อาแจ็กซ์ทดสอบธีม URI: http://premium.wpmudev.com คำอธิบาย: ชุดรูปแบบสำหรับการทดสอบความรู้ของเรา AJAX ผู้แต่ง: ดาเนียลพาตากิผู้แต่ง URI: http://danielpataki.com แม่แบบ: twentysixteen เวอร์ชัน: 1.0.0 ใบอนุญาต GNU ใบอนุญาตสาธารณะทั่วไปหรือในภายหลัง v2 ใบอนุญาต URI: http://www.gnu.org/licenses/gpl-2.0.html * /

สไตล์ชีตของธีมพาเรนต์ต้องโหลดโดยธีมลูก ในอดีตทำได้โดยการนำเข้าไฟล์ CSS ในธีมลูก แต่วิธีที่แนะนำในการทำเช่นนี้คือการใช้ "enqueueing" อย่าลืมว่าเราได้แสดงวิธีใช้คุณสมบัตินี้ให้คุณแล้ว

ดังนั้นขอเพิ่มสไตล์ชีตแม่และไฟล์ 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 'อาแจ็กซ์ทดสอบสคริปต์' () '/scripts.js', array ( 'jQuery') 1.0.0 'จริง); }

หากคุณรู้สึกว่ามีแรงที่จะก้าวไปอีกขั้นให้หาภาพสวย ๆ ครอบตัดเป็น 880px คูณ 660px แล้ววางไว้ในโฟลเดอร์ธีมของเด็ก ๆ จากนั้นเปลี่ยนชื่อ " screenshot.png ". จะปรากฏในส่วนลักษณะที่ปรากฏเมื่อคุณต้องการเปิดใช้งานธีม

เนื่องจากธีมของเด็กนี้มีพื้นฐานมาจาก“ ยี่สิบหก และเรายังไม่ได้เปลี่ยนแปลงอะไรเลย (เลย!) เว็บไซต์ควรมีลักษณะเหมือนธีมคลาสสิกกับธีม " ยี่สิบหก '

การเพิ่มปุ่ม

ในการเริ่มต้นเราจะเพิ่มปุ่ม " แสดง 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 ('Author', 'Used before post author name.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-format', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Used before post format.', ' twentysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('ฝากความคิดเห็น ไว้ที่% s ', 'twentysixteen'), get_the_title ())); ก้อง ' '; }}

มาเพิ่มคีย์ของเราที่ด้านล่างของเมตาดาต้าทั้งหมด:

$ love = get_post_meta (get_the_ID (), 'show_some_love', จริง); $ love = (ว่างเปล่า ($ 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 {ขอบขวา: 6px; ความทึบ: 0.7; เคอร์เซอร์: ตัวชี้; } img .love ปุ่ม: โฉบ {ทึบ: 1; }

ทริกเกอร์การดำเนินการ

ในที่สุดเราก็มาที่ JavaScript ของเรา! เราจะต้องกำหนดเป้าหมายรายการของเราและตรวจสอบการคลิก นี่คือวิธีการ:

(ฟังก์ชั่น ($) {$ (เอกสาร) .on ('คลิก', '.love-button img', ฟังก์ชั่น () {การแจ้งเตือน ("แบ่งปันความรัก");})} (jQuery);

หากคุณคลิกปุ่ม ณ จุดนี้คุณจะเห็นการแจ้งเตือน JavaScript พร้อมข้อความ "Love is shared" "

ข้อกำหนดด้านข้อมูล

แทนที่จะต้องใช้ข้อความนี้เราต้องเริ่มการโทร AJAX ก่อนที่จะเขียนรหัสของเราเราจะเข้าใจสิ่งที่เราต้องส่ง

AJAX URL

ก่อนอื่นเราต้องมีสถานที่สำหรับส่งข้อมูล ตำแหน่งที่เราส่งข้อมูลจะประมวลผลข้อมูลและรับสาย WordPress มีสถานที่ในตัวสำหรับจัดการการโทร AJAX ซึ่งเราสามารถใช้: ผู้ดูแลระบบ ajax.php "ข้างใน" wp-admin ". เราไม่สามารถเพิ่ม URL นี้ในสคริปต์ของเรา (ไม่ยอมรับการใช้การเข้ารหัสแบบ "ดิบ") ดังนั้นขอให้ใช้บาง WordPress ไหวพริบ

ฟังก์ชั่น wp_localize_script () เดิมมีไว้เพื่อแปลสตริงในไฟล์ JavaScript ซึ่งทำได้ดี นอกจากนี้เรายังสามารถใช้เพื่อส่งตัวแปรไปยังไฟล์ JavaScript ของเราในกรณีนี้คือ URL ของไฟล์ AJAX ของเรา เพิ่มรหัสต่อไปนี้ในไฟล์ของเรา " ฟังก์ชั่น ดังนี้

wp_localize_script ('ajax-test-scripts', 'ajaxTest', อาร์เรย์ ('ajax_url' => admin_url ('admin-ajax.php')));

ผลลัพธ์ของอ็อบเจ็กต์สุดท้ายนี้จะชื่อ ajaxTest ซึ่งจะมีอาร์เรย์ที่กำหนดในพารามิเตอร์สุดท้ายเป็นคุณสมบัติ เพื่อป้อนค่าที่เราสามารถใช้ได้ ajaxTest.ajax_url ในรหัส JavaScript ของเรา

ตัวบ่งชี้ของบทความ

เราจะส่งข้อมูลโดยพลการเป็นตัวระบุของบทความ (ที่เราจะใช้เพื่อระบุบทความที่เราต้องการ "เพิ่มความรักเล็กน้อย"). สิ่งนี้สามารถดึงได้จาก DOM ดูโครงสร้างที่ใช้ในธีม "Twenty Sixteen" ด้านล่าง:

ปุ่มของเรามี "บทความ" เป็นหนึ่งในบรรพบุรุษ องค์ประกอบนี้มีคลาสและมีตัวระบุตัวเลขของบทความ แม้ว่าจะไม่ใช่วิธีการแก้ปัญหาที่หรูหราที่สุด แต่เราสามารถคว้า ID จากที่นั่นได้

$ (เอกสาร) .on ( 'คลิก' 'img .love'' ปุ่มฟังก์ชั่น () {var = parseInt POST_ID ($ (นี้) .parents ( 'article.post:first'). attr ( 'id') .replace ( 'โพสต์', '')); console.log (ID)})

การกระทำ

WordPress ต้องการให้เราส่งพารามิเตอร์ชื่อการกระทำ เนื่องจากการดำเนินการทั้งหมดจะถูกส่งไปยัง admin-ajax เราจึงต้องการวิธีแยกความแตกต่างของคำขอเหล่านั้นด้วยเหตุนี้การใช้พารามิเตอร์นี้

ส่งคำขอ AJAX

ตอนนี้เราสามารถรวมทุกอย่างเข้าด้วยกัน เราจำเป็นต้องสร้างการโทร AJAX สำหรับ " WP-admin / ผู้ดูแลระบบ ajax.php ซึ่งประกอบด้วยรหัสบทความและการดำเนินการ นี่คือลักษณะที่ควรดู

(ฟังก์ชั่น ($) {$ (เอกสาร) .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 () เป็นฟังก์ชันที่ใช้ซึ่งรับพารามิเตอร์จำนวนมาก URL มีเป้าหมายซึ่งเป็นไฟล์ของเราในปัจจุบัน อาแจ็กซ์-url.php " ชนิดถูกตั้งค่าเป็น " เสา » เช่นเดียวกับคำขอทั้งหมดที่ส่งโดย a ฟอร์ม. พารามิเตอร์ข้อมูลเป็นวัตถุที่มี " ค่าคีย์ ที่เราต้องการส่งไปยังเซิร์ฟเวอร์. หลังจากนั้นเราจะสามารถอ่านได้ด้วย $ _POST ['action'] และ $ _POST ['post_id']

การประยุกต์ใช้การประมวลผล

โดยปกติคุณจะต้องแก้ไขไฟล์ " ผู้ดูแลระบบ ajax.php », เนื่องจากมีการส่งคำขอไปที่นั่น มันเป็นไฟล์ระบบดังนั้นเราจะไม่แก้ไขมัน WordPress อนุญาตให้คุณส่งคำขอ 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' จริง); รัก = $ (ที่ว่างเปล่า ($ รัก))? 0: $ ความรัก $ รัก ++; update_post_meta ($ _ POST [ 'POST_ID'] 'show_some_love รัก $); echo $ ความรัก ตาย (); }

หากคุณคลิกที่ปุ่มตอนนี้คุณจะเห็นหน้าต่างป๊อปอัปแสดง "1" หากคุณรีเฟรชหน้านี้คุณจะเห็นหมายเลขใหม่ปรากฏขึ้น คลิกที่ปุ่มอีกครั้งจะทำให้มัน 2 ". สิ่งที่เราต้องทำตอนนี้คือตรวจสอบให้แน่ใจว่าตัวเลขนั้นแสดงใน UI โดยตรง

ทำการเปลี่ยนแปลงบนอินเทอร์เฟซผู้ใช้โดยใช้การตอบกลับ

ส่วนนี้ดูเหมือนง่าย (เพราะมันเป็น) แต่โดยทั่วไปยากที่สุดที่จะรวมเข้าด้วยกัน สำหรับตอนนี้สิ่งที่เราต้องทำคือค้นหาองค์ประกอบที่มีหมายเลขปัจจุบันและแก้ไขเนื้อหาโดยการตอบสนอง

(ฟังก์ชั่น ($) {$ (เอกสาร) .on ( 'คลิก' 'img .love' 'ปุ่มฟังก์ชั่น () {var = parseInt POST_ID ($ (นี้) .parents (' article.post:first ') . attr ( 'ID') แทน ( 'โพสต์', '')); var $ จำนวน = $ (นี้) .parent () พบ (. 'จำนวน') $ .ajax ({URL :. ajaxTest.ajax_url, ประเภท: 'โพสต์' ข้อมูล: {ดำเนินการ: 'add_love' POST_ID: POST_ID} ความสำเร็จ: ฟังก์ชั่น (การตอบสนอง) {$ number.text (การตอบสนอง);}})})}) (jQuery);

ฉันเพิ่มเพียงสองบรรทัดในโค้ด JS ก่อนหน้าของเรา ในบรรทัดที่ 5 ฉันเก็บองค์ประกอบที่มีตัวเลขบนตัวแปร จำนวน $. ในบรรทัด 14 ฉันแก้ไขข้อความขององค์ประกอบนี้เพื่อแสดงคำตอบซึ่งเป็นหมายเลขใหม่

โดยพื้นฐานแล้วคุณควรจะเห็นคุณลักษณะใหม่นี้ในการใช้งานธีมที่คุณกำหนดเอง หากคุณมีปัญหาใด ๆ โปรดแจ้งให้เราทราบ คุณมีเคล็ดลับอื่น ๆ ที่คุณต้องการแบ่งปันหรือไม่? ทำในส่วนความคิดเห็น