Ajax și WordPress

Tehnica Ajax, așa cum am explicat în articolul nostru introductiv despre Ajax, a devenit populară, deoarece ne permite să actualizăm o parte a conținutului paginii web fără a fi nevoie să reîmprospătăm pagina. Acest lucru asigură o experiență de utilizator îmbunătățită.

Site-urile WordPress nu fac, desigur, o excepție. Cu toate acestea, modul în care folosim Ajax în WordPress diferă în comparație cu utilizarea în alte aplicații web.

Ce este admin-ajax și cum funcționează?

WordPress a implementat deja Ajax pentru propriile sale funcții de administrare, cum ar fi salvarea automată, actualizările instantanee, moderarea comentariilor, adăugarea/ștergerea postărilor etc. Aceasta înseamnă că este gata de utilizare utilizând doar funcțiile aferente oferite de WordPress.

Fișierul cheie în acest scop este fișierul admin-ajax.php , aflat sub folderul wp-admin, care este folosit pentru crearea unei conexiuni între client și server.

În interiorul acestui fișier, în jurul liniei 159, puteți vedea cum toate cererile Ajax sunt înregistrate de niște cârlige de acțiune.

 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} se referă la utilizatorii conectați și wp_ajax_nopriv_{$_REQUEST['action']} la vizitatorii site-ului. Dacă doriți să creați o solicitare care să includă toți utilizatorii, va trebui să folosim ambele cârlige.

Deci, cu ajutorul acestor acțiuni, puteți conecta o funcție personalizată și puteți transmite datele dvs. către WordPress pentru a face o solicitare Ajax. Să aruncăm o privire la asta în acțiune.

Exemplu WordPress Ajax

Vom folosi același exemplu ca și în articolul nostru introductiv Ajax și vom crea un formular care să permită utilizatorului să caute în titlurile articolelor și să vadă rezultatele sugerate din mers.

În spațiul antet al temei noastre, vom insera rezultatul HTML pentru formularul nostru de căutare. Folosim tema Twenty Twenty-One, așa că am editat fișierul header.php aflat sub folderul principal al temei și am inserat următoarele rânduri înaintea liniei <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>

Acum, formularul pe care îl poate utiliza utilizatorul ar trebui să fie vizibil în partea frontală.

NOTĂ: Aici, vom edita direct fișierul header.php al temei fără a crea o temă copil. Aceasta nu este o practică bună și are o serie de dezavantaje. Dacă doriți să aflați mai multe despre importanța temelor pentru copii, vă rugăm să citiți articolul nostru conex. În scopul acestui exemplu, am păstrat codul simplu și la subiect. Ca atare, nu este recomandat să utilizați acest cod într-un site web de producție.

Următorul lucru este să includeți funcția JavaScript care va trimite cererea. Vom folosi jQuery în schimb, deoarece vine deja cu WordPress și este gata de utilizare. Desigur, trebuie să includem un script în modul WordPress.

Puneți în coadă Scriptul nostru

Vom spune lui WordPress despre existența fișierului JS, prin editarea fișierului function.php al temei și puneți în coadă scriptul astfel. Fișierul nostru va fi custom.js pe care l-am creat și l-am pus într-un nou folder „js” sub folderul principal al temei.

 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' );

În funcția ajax_search_script() , am înregistrat și localizat scriptul, apoi am pus în coadă datele localizate cu funcția încorporată wp_enqueue_script(). Apoi am conectat funcția ajax_search_script() pe wp_enqueue_scripts, care este acțiunea potrivită de utilizat atunci când puneți în coadă scripturile în WordPress.

Utilizarea wp_localize_script ar putea fi confuză aici, deoarece, ca funcție WordPress, a fost concepută inițial pentru a traduce orice șiruri utilizate în scriptul dvs. Cu toate acestea, este, de asemenea, frecvent utilizat pentru a transmite date generice de la PHP la JavaScript. În cazul nostru, pentru a trece URL-ul Ajax și obiectul nonce.

Utilizarea nonce este necesară pentru ca cererea jQuery Ajax să poată fi validată ca o solicitare care vine de pe site. Dacă nu sunteți familiarizat cu utilizarea nonces-urilor în WordPress, puteți citi mai multe în articolul nostru asociat.

ajax_object este valoarea parametrului $object_name necesar al funcției wp_localize_script() și este ceea ce va fi folosit ulterior în codul jQuery.

Grozav! Acum să completăm funcția noastră cu conținutul potrivit.

JavaScript

În interiorul fișierului custom.js am inclus 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); }); } }); });

De data aceasta am folosit jQuery și JSON pentru a transmite datele dorite, acțiunea, text_text, nonce, către scriptul de pe server. Funcția callback get_articles_titles() va fi responsabilă pentru procesarea datelor din back-end, pregătirea rezultatelor și trimiterea înapoi a unui răspuns.

De asemenea, după cum puteți vedea, folosim ajax_object din wp_localize_script cu cele două valori ale sale, nonce și url.

The Hooks

Acum trebuie să legăm acțiunile Ajax autentificate cu cârligele necesare pe care le-am menționat anterior. Vă reamintim că pentru a include atât utilizatorii logați, cât și utilizatorii nelogați, trebuie să utilizați ambele cârlige. În fișierul functions.php adăugați aceste două linii sub codul adăugat înainte pentru a pune în coadă scriptul.

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

După cum probabil ați observat deja, numele cârligului este de fapt un prefix urmat de numele acțiunii noastre. Funcția get_articles_titles hooked este locul în care vom prelua de fapt titlurile articolelor. Vom defini această funcție și în interiorul 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 este responsabil pentru verificarea faptului că cererea Ajax nu este procesată extern.

Parametrii necesari aici sunt acțiunea, care este legată de 'nonce' => wp_create_nonce( 'ajax_nonce' ) din interiorul funcției dvs. ajax_search_script() , împreună cu valoarea aferentă nonce.

Si asta e! Tocmai am creat un exemplu Ajax-PHP foarte simplu. În acest moment, dacă încercați codul într-un mediu WordPress de testare, ar trebui să funcționeze așa.

Unde Serviciul 1-5 sunt titlurile posturilor noastre de testare.

Concluzie

Acesta a fost un articol despre cum putem crește capacitatea de răspuns și performanța pe un site web WordPress profitând de avantajele Ajax. Sperăm că sunteți gata acum să utilizați tehnici similare pe propriul site web și să vă bucurați de îmbunătățirea experienței utilizatorului!