Tworzenie responsywnej wtyczki WordPress za pomocą AJAX

Ostatnia aktualizacja - 8 lipca 2021

AJAX to najnowsza metodologia rozwoju i ta, która powoli nabiera tempa ze względu na łatwość użytkowania, jaką zapewnia swoim programistom. Po prostu integrując AJAX z wtyczkami WordPress, zasadniczo zmniejszasz potrzebę ciągłego ponownego ładowania całej strony internetowej. Innymi słowy, AJAX sprawi, że Twoja wtyczka WordPress będzie responsywna i umożliwi użytkownikom pozyskiwanie nowych informacji poprzez ponowne wczytanie tylko tej konkretnej części, przy jednoczesnym zachowaniu statycznej reszty strony.

To nie tylko sprawia, że ​​strony internetowe lub wtyczki są responsywne, ale także skraca czas oczekiwania o połowę. Istnieje kilka wtyczek i aplikacji, które wykorzystują Ajax do tworzenia lepszych doświadczeń dla użytkowników. Na przykład WooCommerce używa funkcji Ajax, aby poprawić zachowanie Dodaj do koszyka.

Biorąc pod uwagę jego zalety, nauczymy Cię, jak sprawić, by Twoje wtyczki WordPress były responsywne dzięki AJAX.

Tworzenie wtyczki

Zanim zaczniesz działać magicznie z AJAX, musisz mieć podstawową bazę wtyczek, której możesz użyć do stworzenia zaawansowanego i responsywnego produktu.

Tworzenie wtyczki nie jest trudne, ponieważ wszystko, czego potrzebujesz, to utworzenie pliku zawierającego treść jednowierszową. W tym celu pierwszym krokiem jest przejście do pliku wp-content/plugins i utworzenie zupełnie nowego folderu o wybranej przez siebie nazwie. Otwórz folder i utwórz nowy plik nazwa_wtyczki.php. Teraz wyświetl plik w dowolnym edytorze tekstu i wpisz następujące informacje:

<?php

/*

Nazwa wtyczki: Induktor chłodu

URI wtyczki: http://coolness-inducer.com

opis: >-

wtyczka idealna do uczynienia Twojej witryny ekstra fajną.

Wersja: 1.3

Autor: Pani Vader

URI autora: http://msvader.com

Licencja: GPL2

*/

?>

Zanim to zrobisz, utwórz katalog ajaxloadpost w instalacji wtyczki WordPress. Gdy to zrobisz, utwórz wtyczkę i aktywuj ją. Następnie dołącz następujące informacje do swojego ajaxloadpost.

define('AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );

function ajaxloadpost_enqueuescripts() {

wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));

wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

}

add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

Następnie zdefiniuj zmienną AJAXLOADPOSTURL, ponieważ będziesz jej potrzebować, aby przekierować WordPress do adresu URL Twojej wtyczki. Teraz musisz kolejkować swoje skrypty, co możesz zrobić, dodając ajaxloadpost_enqueuescripts do wp_enqueue_scripts WordPressa.

Pamiętaj, że AJAX nigdy nie może być używany w swojej surowej postaci. Zawsze będzie używany w połączeniu z innymi językami programowania, np. jQuery czy JavaScript. W tym przypadku będziemy pracować z JavaScript, więc musisz mieć trochę podstawowej wiedzy na ten temat.

Idąc dalej, dodaj JavaScript do ajaxloadpost.js, który znajdziesz w folderze \wp-content\plugins\ajaxloadpost\js\folder. Wykonaj tę akcję, tworząc folder JS i umieść w nim ajaxloadpost.js.

Teraz użyj WordPress wp_localize_script, aby dodać wymaganą zmienną JS. Ta akcja zapewni strukturę twojemu katalogowi i umieści twoje skrypty w kolejce.

Pisanie obsługi AJAX

Aby napisać procedurę obsługi AJAX, będziesz potrzebować następujących kodów:

funkcja ajaxloadpost_ajaxhandler() {

if (! wp_verify_nonce ($_POST['nonce'], "ajaxloadpost_nonce")) {

exit („Niewłaściwy brak”);

}

$wyniki = ”;

$content_post = get_post($_POST['postid']);

$wyniki = $content_post->post_content;

umrzeć($wyniki);

}

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

Ukończenie tego działania przyniesie dwa rezultaty. Po pierwsze, utworzy identyfikator postów, którego wymagają użytkownicy, a po drugie, utworzy jednorazowy. Ale to nie ma znaczenia! Gdy kody obsługi AJAX są już na miejscu, musisz przejść do następnego kroku, czyli zarejestrować procedurę obsługi AJAX w katalogu WordPress. Spowoduje to, że wtyczka WordPress będzie reagowała na wywołania AJAX. Możesz to osiągnąć za pomocą tych kodów:

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

Podstawy JavaScript i AJAX

Mając wywołanie AJAX i procedurę obsługi AJAX, musisz utworzyć funkcję JS, która połączy dwie kropki. Poniższy JavaScript pomoże Ci osiągnąć to działanie, które umieścisz w swoim ajaxloadpost.js:

function ajaxloadpost_loadpost(postid,nonce) {

jQuery.ajax({

typ: 'POST',

url: ajaxloadpostajax.ajaxurl,

dane: {

akcja: 'ajaxloadpost_ajaxhandler',

postid: postid,

nonce: nonce

},

sukces: function(dane, textStatus, XMLHttpRequest) {

var loadpostresult = '#loadpostresult';

jQuery(loadpostresult).html(”);

jQuery(loadpostresult).append(dane);

},

błąd: function(MLHttpRequest, textStatus, errorThrown) {

alert(wyrzucony błąd);

}

});

}

Podobnie jak w przypadku powyższego kroku, ta akcja również stworzy dwa wyniki, tj. nonce i post ID.

Kolejny krok wymaga również biegłości w jQuery. Jeśli więc Twoje umiejętności są trochę rustykalne, ten artykuł będzie dla Ciebie pomocny!

Idąc dalej, użyj funkcji jQuery.ajax, aby wykonać wywołanie AJAX do odpowiednich serwerów. W powyższych kodach adresem URL jest adres URL admin-ajax.php, który można znaleźć w zmiennej JavaScript, którą zarejestrowaliśmy podczas kolejkowania skryptów. Ponadto określ tę akcję za pomocą nazwy obsługi akcji, która została zarejestrowana w WordPress, a także opublikuj numer jednorazowy i identyfikator posta.

Jeśli wszystko pójdzie dobrze, możesz zaktualizować <div> identyfikatora #loadpostresult i zastąpić pobraną zawartość modułem obsługi AJAX.

Nadawanie twarzy Twojemu kodowi

Teraz nadszedł czas, aby stworzyć kody, które będą wyświetlały tytuły odpowiednich postów i przywoływały informacje, których pragną użytkownicy poprzez wywołanie AJAX. Oto następujące kody:

funkcja ajaxloadpost_show_latest_posts($number = '5'){

$wyniki =";

$the_query = nowe WP_Query( 'posts_per_page='.$number );

while ( $the_query->have_posts() ):

$the_query->the_post();

$ nonce = wp_create_nonce("ajaxloadpost_nonce");

$argumenty = get_the_ID().”,'”.$nonce.”'”;

$link = ' <a onclick=”ajaxloadpost_loadpost('.$arguments.');”>'. pobierz_tytuł().'</a>';

$result.= '<li>' . $link . '</li>';

koniec;

wp_reset_postdata();

$result.= '<div id=”loadpostresult”></div>';

zwróć $wynik;

}

funkcja ajaxloadpost_shortcode_function( $atts ){

zwróć ajaxloadpost_show_latest_posts();

}

add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

Mamy nadzieję, że ten artykuł pomógł ci w tworzeniu responsywnej wtyczki WordPress. Zostaw nam komentarz, jeśli masz pytanie.

Dalsza lektura

• Responsywny projekt pomaga poprawić współczynniki konwersji.
• Najlepsze responsywne motywy WooCommerce