WordPress

Wtyczka WordPress standardowa funkcjonalność AJAX

  • 19 kwietnia, 2023
  • 3 min read
Wtyczka WordPress standardowa funkcjonalność AJAX


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:

  1. 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();
    }
  1. 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' ),
            ]
        );
  1. 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.

Warto przeczytać!  Znaczenie kompatybilności mobilnej w responsywnych motywach

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óż !


Źródło