WordPress

rest api — Przesyłaj nagłówki i stopki za pośrednictwem interfejsu API z jednej witryny do drugiej

  • 22 listopada, 2023
  • 3 min read
rest api — Przesyłaj nagłówki i stopki za pośrednictwem interfejsu API z jednej witryny do drugiej


Próbuję mieć ten sam nagłówek i stopkę, co moja witryna WordPress w innej witrynie (która nie korzysta z WordPressa) z inną domeną i hostingiem. Menedżer drugiej witryny chce tego za pośrednictwem interfejsu API, ale nigdy tego nie robiłem i nie jestem zbyt ekspertem. Musisz mieć ten sam nagłówek i stopkę (łącznie ze stylem), aby nie trzeba było ich ręcznie zmieniać za każdym razem, gdy zmienia się łącze w menu. Znam się trochę na PHP, sam stworzyłem motyw strony WordPress, ale nie miałem jeszcze do czynienia z tego typu rzeczami.

To jest kod, którego używam w mojej witrynie WordPress Functions.php:

add_action( 'rest_api_init', function() {
    register_rest_route( 'top-section/v1', '/header', [
        'method'   => WP_REST_Server::READABLE,
        'callback' => 'return_header',
    ] );
} );
function return_header( $request ) {
    $response = get_header();
    return rest_ensure_response( $response );
}

add_action( 'rest_api_init', function() {
    register_rest_route( 'bottom-section/v1', '/footer', [
        'method'   => WP_REST_Server::READABLE,
        'callback' => 'return_footer',
    ] );
} );
function return_footer( $request ) {
    $response = get_footer();
    return rest_ensure_response( $response );
}

i nazywam to w ten sposób w pliku Index.html w innej domenie, aby wykonać kilka testów:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non WordPress Site</title>
</head>
<body>

    <div id="header-container"></div>

    <script>
        // Funzione per ottenere le informazioni dell'header
        function getWordPressHeader() {
            fetch('
                .then(response => response.text())  // Puoi anche usare .json() se la risposta è JSON
                .then(data => {
                    // Aggiungi il codice dell'header al tuo sito non WordPress
                    document.getElementById('header-container').innerHTML = data;
                })
                .catch(error => console.error('Error fetching WordPress header:', error));
        }

        // Chiama la funzione per ottenere le informazioni dell'header
        getWordPressHeader();
    </script>

</body>
</html>

Ten kod „działa” w tym sensie, że przesyła nagłówek i stopkę, ale jest kilka problemów:

  1. pasek wyszukiwania nie działa w witrynie kopiowania (tej innej niż WordPress)
  2. używając get_header() otrzymuję całą zawartość header.php, który zawiera również znaczniki przydatne do zapewnienia stylu, ale może byłoby lepiej je rozdzielić? tak, aby nagłówek i głowa były oddzielone
  3. header.php oczywiście, jak wszystkie motywy, zawiera nie tylko statyczny HTML, ale także php (np. wp_head(); body_class(); get_template_part(); …), którego nie widzę w punkcie końcowym, ale widzę, że jest wykonywany, gdy Oddzwonię do niego. Czy jest to kwestia bezpieczeństwa?
  4. używając kodu, który napisałem, co mogą zrobić ci, którzy go używają? Bardzo interesuje mnie część dotycząca bezpieczeństwa, więc nie chciałbym, aby miał dostęp do czegokolwiek lub modyfikował cokolwiek
  5. Jak można to poprawić? Czy w tym przypadku zalecane jest użycie json?
Warto przeczytać!  WordPress 6.6 Release Candidate 2 – Aktualności WordPress

Mam nadzieję, że mi pomożecie, bo nie wiem jak inaczej to zrobić.


Źródło