Tworzenie responsywnej wtyczki WordPress za pomocą AJAX

WordPress to doskonała platforma do tworzenia stron internetowych; jednak narzędzie do zarządzania treścią ma swoje wady. Jeśli zbudowałeś swoją witrynę na WordPressie, często zdarza się, że napotykasz problem z niską prędkością ładowania. Ze względu na dużą liczbę dodanych wtyczek wraz z napływem baz danych i baz kodu, nie jest to rzadkością. Jednak ważne jest, aby skupić się na rozwiązaniu. Nie chcesz, aby Twoi widzowie zniecierpliwili się i odeszli z powodu niskiej prędkości i stracili potencjalny biznes!

Co jeśli powiemy Ci, że możesz zoptymalizować szybkość swojej witryny WordPress, integrując prostą funkcję z wtyczkami, znaną jako AJAX. Termin AJAX jest skrótem od asynchronicznego JavaScript i XML. AJAX pomaga poprawić szybkość Twojej witryny. Załaduje tylko określoną część strony, a pozostała część pozostanie statyczna, co skróci czas ładowania. Kilka wtyczek i aplikacji już dziś korzysta z tej funkcji, aby poprawić szybkość swoich stron internetowych.

W krótkim czasie AJAX zyskał doskonałą reputację w świecie marketingu cyfrowego i jest używany przez większość właścicieli witryn internetowych. Na szczęście WordPress zapewnia doskonałą obsługę AJAX, ułatwiając pisanie wtyczek zintegrowanych z AJAX. Dzięki wsparciu WordPressa i naszemu artykułowi powinieneś być w stanie zintegrować AJAX ze swoimi wtyczkami w mgnieniu oka.

Poniżej znajduje się przewodnik krok po kroku, który przeprowadzi Cię przez ten proces.

Krok #1 – Stwórz swoją wtyczkę

Pierwszym krokiem jest stworzenie prostej wtyczki, której możesz następnie użyć do opracowania bardziej zaawansowanego produktu, który jest bardziej responsywny i skraca czas ładowania Twojej strony internetowej. Dobrą wiadomością jest to, że nie będziesz miał trudności z tworzeniem wtyczki, ponieważ wszystko, co musisz zrobić, to utworzyć plik zawierający dane jednowierszowe.

Możesz to zrobić, przeszukując plik „wp-content/plugins” i wygeneruj folder o dowolnej nazwie. Gdy to zrobisz, musisz teraz otworzyć folder i utworzyć plik o nazwie: „nazwa_wtyczki.php”. Po otwarciu tego pliku w edytorze tekstu wpisz następujący kod w edytorze tekstu.

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

Krok #2 – Dodaj bibliotekę JavaScript

Rozpoczynasz ten krok od utworzenia katalogu „ajaxloadpost”. Jak to zrobić? Jest to dość proste, ponieważ możesz go zainstalować wraz z wtyczką WordPress. Po zakończeniu tego kroku możesz teraz utworzyć zakodowaną wtyczkę i ją uruchomić. Następnie musisz dodać poniższy kod 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);

Musisz skierować WordPress przez adres URL utworzonej wtyczki; dlatego musisz zdefiniować zmienną o nazwie AJAXLOADPOSTURL.

AJAX jest zawsze używany z kombinacją języków programowania, będziemy pracować z JavaScript w naszym pozostałym artykule. Poszukaj ajaxloadpost.js w folderze \wp-content\plugins\ajaxloadpost\js\ i dodaj do niego JavaScript. Możesz teraz dodać zmienną JavaScript do swojego skryptu.

Krok #3 – Integracja obsługi AJAX

Po posortowaniu wszystkich powyższych elementów możesz w końcu przejść do integracji obsługi AJAX z wtyczką. Poniżej znajduje się kod obsługi AJAX:

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

Powyższy kod będzie w zasadzie spełniał dwa zadania. Najpierw opracuje identyfikator dla postów wymaganych przez użytkownika. Drugim zadaniem jest stworzenie „nonce”. O drugi element nie musisz się na razie martwić (szczegółowo opisaliśmy go na końcu artykułu).

Zamiast tego powinieneś przejść do drugiego kroku, którym jest rejestracja programu obsługi AJAX w katalogu WordPress. Umożliwi to wywołanie funkcji AJAX po zażądaniu. To działanie można osiągnąć za pomocą kodu wymienionego poniżej:

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

Posiadanie podstawowej wiedzy na temat JavaScript jest dla Ciebie ogromnym plusem, jeśli nie jesteś biegły w tym języku programowania, skorzystaj z pomocy eksperta, który poprowadzi Cię przez cały proces. Możesz także szlifować swoje umiejętności w zakresie języka JavaScript poprzez nauczyciela stron internetowych lub czytając artykuły tutaj .

Krok #4 – Używanie JavaScript dla AJAX

Następną rzeczą, której potrzebujesz, jest napisanie funkcji, która umożliwi AJAX wywoływanie i aktualizowanie danych, które zostały zwrócone przez procedurę obsługi AJAX. Funkcja to zazwyczaj ajacloadpost.js. Poniższy kod może służyć do określenia akcji opisanej powyżej.

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

Powyższa funkcja przyjmie dwa wejścia, jedno z nich to id posta, a drugie to nonce. Możesz użyć funkcji jQuery.ajax do wykonania połączenia z serwerem. Po pomyślnym zaktualizowaniu <div> identyfikatora #loadpostresult danymi, które zostały zwrócone przez procedurę obsługi AJAX. Ostatni bit kodu jest warunkiem w przypadku błędu. W przypadku wystąpienia błędu system jest ostrzegany za pomocą wyskakującego okienka.

Krok #5 – Wyświetlanie list

Po posortowaniu wszystkich funkcji możesz przejść do ostatniego kroku, czyli do wyświetlenia tytułu posta. Pamiętaj, że każde kliknięcie może prowadzić do innego tytułu posta, a Twój kod powinien być w stanie pobrać wywołany kod. Poniższy kod może ci w tym pomóc:

function ajaxloadpost_show_latest_posts($number = '5'){  

$results ='';
$the_query = new WP_Query( 'posts_per_page='.$number );  

while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");  

$arguments = get_the_ID().",'".$nonce."'";  

$link = ' <a>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

Czym jest „nonce”?

Wartość jednorazowa służy do sprawdzenia, czy żądanie pochodzi z autentycznego źródła, czy nie. Jednorazową można wygenerować za pomocą prostej funkcji WordPress: „wp_create_nonce”. Można to dodatkowo sprawdzić za pomocą programu obsługi AJAX za pomocą funkcji: „wp_verify_nonce”. Korzystanie z tej funkcji jest niezwykle ważne, jeśli wykonujesz wrażliwe zadanie na swoim WordPressie.

  Wniosek

  Integracja AJAX z wtyczkami może pomóc widocznie poprawić responsywność Twoich stron. Jeśli nie znasz się na JavaScript, możesz wybrać język programowania, który jest dla Ciebie łatwiejszy do kodowania, lub znaleźć eksperta, który pomoże Ci w pisaniu kodu dla Twojej wtyczki. Spróbuj zintegrować AJAX ze swoimi wtyczkami, a nie zawiedziesz się!