Ajax และ WordPress

เผยแพร่แล้ว: 2021-11-02

เทคนิค Ajax ตามที่เราอธิบายไว้ในบทความแนะนำของเราเกี่ยวกับ Ajax ได้รับความนิยมเนื่องจากช่วยให้เราอัปเดตเนื้อหาหน้าเว็บบางส่วนโดยไม่ต้องรีเฟรชหน้า สิ่งนี้ทำให้ประสบการณ์ผู้ใช้ดีขึ้น

แน่นอนว่าเว็บไซต์ WordPress นั้นไม่มีข้อยกเว้น วิธีที่เราใช้ Ajax ใน WordPress นั้นแตกต่างกันเมื่อเทียบกับการใช้งานบนเว็บแอปพลิเคชันอื่นๆ

admin-ajax คืออะไรและทำงานอย่างไร

WordPress ได้ใช้ Ajax สำหรับคุณสมบัติการดูแลระบบของตัวเองแล้ว เช่น การบันทึกอัตโนมัติ การอัปเดตทันที การดูแลความคิดเห็น การเพิ่ม/ลบโพสต์ ฯลฯ ซึ่งหมายความว่าพร้อมให้เราใช้งานโดยเพียงแค่ใช้ฟังก์ชันที่เกี่ยวข้องที่ WordPress มีให้

ไฟล์คีย์สำหรับจุดประสงค์นี้คือไฟล์ admin-ajax.php ซึ่งอยู่ใต้โฟลเดอร์ wp-admin ซึ่งใช้สำหรับสร้างการเชื่อมต่อระหว่างไคลเอนต์และเซิร์ฟเวอร์

ภายในไฟล์นี้ ประมาณบรรทัดที่ 159 คุณสามารถดูได้ว่าคำขอ Ajax ทั้งหมดได้รับการลงทะเบียนโดยขอดำเนินการบางอย่างอย่างไร

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

wp_ajax_{$action} หมายถึงผู้ใช้ที่ล็อกอินและ wp_ajax_nopriv_{$_REQUEST['action']} ต่อผู้เยี่ยมชมไซต์ หากคุณต้องการสร้างคำขอที่รวมผู้ใช้ทั้งหมด เราจะต้องใช้ทั้งสองตะขอ

ด้วยความช่วยเหลือของการกระทำเหล่านี้ คุณสามารถขอฟังก์ชันที่กำหนดเองและส่งข้อมูลของคุณไปยัง WordPress เพื่อส่งคำขอ Ajax ลองมาดูที่การดำเนินการนี้

ตัวอย่าง WordPress Ajax

เราจะใช้ตัวอย่างเดียวกันกับที่เราทำในบทความแนะนำ Ajax และสร้างแบบฟอร์มที่อนุญาตให้ผู้ใช้ค้นหาในชื่อบทความและดูผลลัพธ์ที่แนะนำได้ทันที

ในพื้นที่ส่วนหัวของธีม เราจะแทรกเอาต์พุต HTML สำหรับแบบฟอร์มการค้นหาของเรา เราใช้ธีม Twenty Twenty-One ดังนั้นเราจึงแก้ไข header.php ที่อยู่ใต้โฟลเดอร์หลักของธีม และแทรกบรรทัดต่อไปนี้ก่อนบรรทัด <div id=”content” class=”site-content”>

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

ตอนนี้แบบฟอร์มที่ผู้ใช้สามารถใช้ได้ควรมองเห็นได้ในส่วนหน้า

หมายเหตุ: ที่นี่ เราจะแก้ไข header.php ของธีมโดยตรงโดยไม่ต้องสร้างธีมย่อย นี่ไม่ใช่แนวปฏิบัติที่ดีและมีข้อเสียหลายประการ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับความสำคัญของธีมย่อย โปรดอ่านบทความที่เกี่ยวข้องของเรา เพื่อจุดประสงค์ของตัวอย่างนี้ เราได้ทำให้โค้ดเรียบง่ายและตรงตามหัวข้อ ดังนั้นจึงไม่แนะนำให้คุณใช้รหัสนี้ในเว็บไซต์ที่ใช้งานจริง

สิ่งต่อไปคือการรวมฟังก์ชัน JavaScript ที่จะส่งคำขอ เราจะใช้ jQuery แทน เพราะมันมาพร้อมกับ WordPress อยู่แล้วและพร้อมใช้งาน แน่นอน เราต้องใส่สคริปต์ในแบบของ WordPress

เข้าคิวสคริปต์ของเรา

เราจะบอก WordPress เกี่ยวกับการมีอยู่ของไฟล์ JS โดยแก้ไขไฟล์ function.php ของธีมและจัดคิวสคริปต์แบบนี้ ไฟล์ของเราจะเป็นไฟล์ custom.js ที่เราได้สร้างไว้และใส่ไว้ในโฟลเดอร์ "js" ใหม่ภายใต้โฟลเดอร์หลักของธีม

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

ใน ajax_search_script() เราลงทะเบียนและโลคัลไลซ์สคริปต์ จากนั้นจัดคิวข้อมูลที่แปลด้วยฟังก์ชัน wp_enqueue_script() ในตัว จากนั้นเราได้ติดตั้ง ajax_search_script() บน wp_enqueue_scripts ซึ่งเป็นการดำเนินการที่เหมาะสมเพื่อใช้ในการจัดคิวสคริปต์ใน WordPress

การใช้ wp_localize_script อาจสร้างความสับสนในที่นี้ เนื่องจากในฐานะที่เป็นฟังก์ชันของ WordPress มันถูกออกแบบมาสำหรับการแปลสตริงใดๆ ที่ใช้ในสคริปต์ของคุณ อย่างไรก็ตาม มักใช้เพื่อส่งข้อมูลทั่วไปจาก PHP ไปยัง JavaScript ในกรณีของเรา ในการส่ง Ajax URL และอ็อบเจกต์ nonce

จำเป็นต้องใช้ nonce เพื่อให้คำขอ jQuery Ajax สามารถตรวจสอบได้ว่าเป็นคำขอที่มาจากเว็บไซต์ หากคุณไม่คุ้นเคยกับการใช้ nonce บน WordPress คุณสามารถอ่านเพิ่มเติมในบทความที่เกี่ยวข้องของเรา

ajax_object คือค่าของพารามิเตอร์ $object_name ที่ต้องการของ wp_localize_script() และเป็นสิ่งที่จะใช้ในโค้ด jQuery ในภายหลัง

ยอดเยี่ยม! ตอนนี้ มาเติมฟังก์ชันของเราด้วยเนื้อหาที่ถูกต้องกัน

JavaScript

ภายในไฟล์ custom.js เราได้รวม jQuery ไว้ด้วย

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

ครั้งนี้เราใช้ jQuery และ JSON เพื่อส่งข้อมูลที่ต้องการ, การดำเนินการ, search_text, nonce, ไปยังสคริปต์ฝั่งเซิร์ฟเวอร์ ฟังก์ชัน callback get_articles_titles() จะรับผิดชอบในการประมวลผลข้อมูลในส่วนแบ็คเอนด์ เตรียมผลลัพธ์และส่งการตอบกลับ

อย่างที่คุณเห็น เราใช้ ajax_object จาก wp_localize_script โดยมีค่าอาร์เรย์สองค่าคือ nonce และ url

ตะขอ

ตอนนี้ เราต้องผูกการกระทำ Ajax ที่รับรองความถูกต้องกับ hooks ที่จำเป็นที่เรากล่าวถึงก่อนหน้านี้ เราขอเตือนคุณว่าหากต้องการรวมผู้ใช้ทั้งที่เข้าสู่ระบบและไม่ได้เข้าสู่ระบบ คุณต้องใช้ตะขอทั้งสอง ในไฟล์ functions.php ของคุณ ให้เพิ่มสองบรรทัดนี้ภายใต้โค้ดที่เพิ่มไว้ก่อนเพื่อจัดคิวสคริปต์

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

ตามที่คุณอาจสังเกตเห็นแล้ว จริงๆ แล้วชื่อ hook เป็นคำนำหน้าตามด้วยชื่อการกระทำของเรา ฟังก์ชัน get_articles_titles hooked คือที่ที่เราจะดึงชื่อบทความจริงๆ เราจะกำหนดฟังก์ชันนี้ใน functions.php ด้วยเช่นกัน

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

check_ajax_referer มีหน้าที่ตรวจสอบว่าคำขอ Ajax ไม่ได้รับการประมวลผลจากภายนอก

พารามิเตอร์ที่จำเป็นที่นี่คือการดำเนินการ ซึ่งเกี่ยวข้องกับ 'nonce' => wp_create_nonce( 'ajax_nonce' ) ภายใน ajax_search_script() ของคุณ พร้อมด้วยค่าที่เกี่ยวข้องกับ nonce

และนั่นแหล่ะ! เราเพิ่งสร้างตัวอย่าง Ajax-PHP ที่ง่ายมาก ณ จุดนี้ หากคุณลองใช้โค้ดในสภาพแวดล้อมทดสอบของ WordPress โค้ดควรจะทำงานเช่นนี้

โดยที่บริการ 1-5 เป็นชื่อของโพสต์ทดสอบของเรา

บทสรุป

นี่เป็นบทความเกี่ยวกับวิธีที่เราสามารถเพิ่มการตอบสนองและประสิทธิภาพบนเว็บไซต์ WordPress โดยใช้ประโยชน์จากประโยชน์ของ Ajax หวังว่าคุณจะพร้อมแล้วที่จะใช้เทคนิคที่คล้ายกันบนเว็บไซต์ของคุณเองและเพลิดเพลินไปกับการปรับปรุงประสบการณ์ผู้ใช้!