Wtyczka WordPress standardowa funkcjonalność AJAX
![Wtyczka WordPress standardowa funkcjonalność AJAX](https://oen.pl/wp-content/uploads/2023/01/apple-touch-icon@2.png)
Używam szablonu wtyczki WP-STRAP WordPress.
Chcę wysłać dane z frontendu przez formularz do backendu za pomocą JS Fetch API. Na żądanie tworzony jest niestandardowy post i wypełniany danymi z interfejsu użytkownika, takimi jak tytuł postu i tak dalej.
Problem: otrzymuję błąd odpowiedzi 400/500, jeśli umieszczam akcję/funkcje php w klasie.
Zgodnie ze stroną Github, wszystkie publiczne haki/funkcje powinny być umieszczone w folderze src -> App -> Frontend. Próbowałem, ale to nie działa. Na przykład stworzyłem plik/klasę FrontEndRequests.php i umieściłem tam moje akcje/funkcje, ale bez powodzenia – akcja nie działa na żądanie ajax.
Domyślam się więc, że akcja/funkcja jest wywoływana za pomocą niewłaściwego haka lub ze względu na strukturę płyty kotłowej są wywoływane w niewłaściwym czasie (za późno lub za wcześnie).
Sprawiłem, że „działa” dzięki następującej strukturze, ale chcę to zrobić we właściwy sposób:
- W głównym pliku wtyczki
the-plugin-name.php
w folderze głównym dodałem moje haczyki akcji i funkcję:
add_action( 'init', 'my_ajax_actions');
function my_ajax_actions() {
add_action("wp_ajax_nopriv_insert_post", 'insert_post');
add_action("wp_ajax_insert_post", 'insert_post');
}
/**
* Insert post with data from frontend
*
* @since 1.0.0
*/
function insert_post() {
if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( $_POST['nonce'], 'fetch_fr_ajax_nonce' ) ) {
wp_send_json_error( 'Invalid nonce' );
}
echo "inserting Post" . "\n";
$page_slug = 'custom-post'; // Slug of the Post
$new_page = array(
'post_type' => PostTypes::POST_TYPE['id'], // Post Type Slug eg: 'page', 'post'
'post_title' => $_POST['title'], // Title of the Content
'post_content' => 'Test Page Content', // Content
'post_status' => 'pending', // Post Status
'post_name' => $page_slug // Slug of the Post
);
if (!get_page_by_path( $page_slug, OBJECT, 'page')) { // Check If Page Doesn't Exits
$new_page_id = wp_insert_post($new_page);
}
echo "Post Inserted successfully" . "\n";
wp_die();
}
- Lokalizacja skryptu w
Frontend folder -> Enqueue.php
plik :
global $wp_query;
// localize script and send variables
wp_localize_script( 'ajax-frontend', 'fetch_fr_ajax',
[
'ajax_url' => admin_url( 'admin-ajax.php' ),
'wp_query_vars' => $wp_query->query_vars,
'nonce' => wp_create_nonce( 'fetch_fr_ajax_nonce' ),
]
);
- W
assets -> src -> js
mam plik JS Fetch:
'use strict'
window.addEventListener('load', function () {
const sendCTA = document.querySelector('.insert-post-btn');
const data = new FormData()
data.append('action', 'insert_post')
data.append( 'nonce', fetch_fr_ajax.nonce);
data.append('title', 'Post from frontend');
const params = new URLSearchParams(data)
if (sendCTA) {
sendCTA.addEventListener('click', function () {
console.log('.post-btn clicked')
fetch(fetch_fr_ajax.ajax_url, {
method: 'POST',
mode: 'same-origin',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
credentials: 'same-origin',
body: params,
})
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Network response was not ok');
})
.then(data => {
console.log(data); // handle the response from the server
})
.catch(error => {
console.error(error); // handle any errors that occur
});
})
}
})
W celach demonstracyjnych dodałem przycisk templates -> test-template.php
a po kliknięciu przez Fetch Api wywoływana jest odpowiednia akcja, a post jest wstawiany do niestandardowego typu postu WordPress.
Jak mogę to uporządkować w sposób OOP, w którym tworzona jest płyta kotłowa?
Tak, mógłbym zapytać tutaj, ale wygląda na to, że projekt został porzucony, ponieważ nikt tam nie odpowiada. Proszę pomóż !