无法在 WordPress 多站点中使用 Rest Api 获取和预加载发布数据

Question

我有一个多站点设置，其中主站点和子站点都使用相同的主题。在 index.php 页面上，它应该使用查询循环每页显示 3 个帖子。帖子显示在主网站上，但子网站上没有提取。

我使用不同的方法来显示帖子数据而不加载页面。我为此使用了灯箱。单击加号图标时，灯箱将打开并显示发布数据。它在主站点上工作，但在子站点上它不会获取灯箱中的数据。

主域名：https://www.bahai.in/ 子站点：https://www.bahai.in/hi（未获取数据）

github目录：https://github.com/Trushar10/bahaiindia2024

下面是代码 索引.php：

<div class="featured-stories">
                <div class="story-cards">
                    <?php
                    // Query to get 3 posts per page
                    query_posts('posts_per_page=3');

                    if (have_posts()) {
                        while (have_posts()) {
                            the_post();

                            get_template_part('template-parts/posts/content-stories');
                        }
                    }

                    // Reset Query
                    wp_reset_query();
                    ?>

                </div>
                <div class="light-box">
                    <div class="box-wrapper">
                        <div class="box">
                            <span class="close-btn">&times</span>
                            <h2></h2>
                            <!-- <p class="box-excerpt"></p> -->
                            <img src="" alt="" class="light-img" />
                            <p class="box-content"></p>
                        </div>
                    </div>
                </div>
            </div>

内容故事模板：

<div>
    <figure>
        <div class="overlay"></div>
        <?php the_post_thumbnail(); ?>
    </figure>
    <div class="card-content">
        <h2><?php the_title(); ?></h2>
        <!-- <?php the_excerpt(); ?> -->
    </div>
    <?php $featured_img_url = get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>
    <span class="close-btn view-btn" data-post-id="<?php the_ID(); ?>" data-src="<?php echo esc_url($featured_img_url); ?>">+</span>
</div>

函数.php

// Add an action to handle the Ajax request
add_action('wp_ajax_get_post_data', 'get_post_data');
add_action('wp_ajax_nopriv_get_post_data', 'get_post_data');

function get_post_data()
{
  $post_id = $_POST['post_id'];

  // Get the post data by ID
  $post = get_post($post_id);

  if ($post) {
    $response = array(
      'title' => $post->post_title,
      'excerpt' => get_the_excerpt($post_id),
      'content' => apply_filters('the_content', $post->post_content),
    );

    echo json_encode($response);
  }

  wp_die();
}

app.js

// Lightbox
let lightImg = document.querySelector('.light-img');
let viewBtn = document.querySelectorAll('.view-btn');
let lightboxTitle = document.querySelector('.light-box h2');
// let lightboxExcerpt = document.querySelector('.box-excerpt');
let lightboxContent = document.querySelector('.box-content');

// Create an object to store post data
const postData = {};

// Preload data for all view buttons
viewBtn.forEach((el) => {
    const postId = el.getAttribute('data-post-id');
    const imgSrc = el.getAttribute('data-src');

    // Use the REST API to fetch post data in the background
    fetch(`/wp-json/wp/v2/posts/${postId}`)
        .then((response) => response.json())
        .then((data) => {
            postData[postId] = {
                title: data.title.rendered,
                // excerpt: data.excerpt.rendered,
                content: data.content.rendered,
                imgSrc: imgSrc,
            };
        });
});

viewBtn.forEach((el) => {
    el.addEventListener('click', (event) => {
        event.preventDefault(); // Prevent the default behavior of the anchor tag

        document.body.classList.add('effect');
        let postId = el.getAttribute('data-post-id');
        let imgSrc = postData[postId].imgSrc;

        lightImg.src = imgSrc;
        lightboxTitle.textContent = postData[postId].title;
        // lightboxExcerpt.innerHTML = postData[postId].excerpt;
        lightboxContent.innerHTML = postData[postId].content;
    });
});

window.addEventListener('click', (event) => {
    if (
        event.target.className == 'box-wrapper' ||
        event.target.className == 'close-btn'
    ) {
        document.body.classList.remove('effect');
    }
});

我使用chatgpt解决了它建议使用switch_to_blog(subsite-ID)的问题，其中子站点ID为3。我尝试了提供的代码，但它也不起作用。

还检查了

/wp-json/wp/v2/posts/${postId}

，其中

postId

是899。

您检查数据是否正在 https://www.bahai.in/hi/wp-json/wp/v2/posts/899 获取。

但在控制台中显示：

{"code":"rest_post_invalid_id","message":"Invalid post ID.","data":{"status":404}}

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rendered')

Uncaught TypeError: Cannot read properties of undefined (reading 'imgSrc')

.

如果您能够提供解决此问题的学习方法，将会很有帮助。

Answer 1

添加window.location.origin + window.location.pathname以确保子站点的URL是动态的，以便REST API请求发送到正确的子站点端点。

// Lightbox
let lightImg = document.querySelector('.light-img');
let viewBtn = document.querySelectorAll('.view-btn');
let lightboxTitle = document.querySelector('.light-box h2');
// let lightboxExcerpt = document.querySelector('.box-excerpt');
let lightboxContent = document.querySelector('.box-content');

// Create an object to store post data
const postData = {};

// Preload data for all view buttons
viewBtn.forEach((el) => {
  const postId = el.getAttribute('data-post-id');
  const imgSrc = el.getAttribute('data-src');

  // Get the current subsite URL
  const subsiteURL = window.location.origin + window.location.pathname;

  // Use the REST API to fetch post data in the background
  fetch(`${subsiteURL}/wp-json/wp/v2/posts/${postId}`)
    .then((response) => response.json())
    .then((data) => {
      postData[postId] = {
        title: data.title.rendered,
        // excerpt: data.excerpt.rendered,
        content: data.content.rendered,
        imgSrc: imgSrc,
      };
    });
});

viewBtn.forEach((el) => {
  el.addEventListener('click', (event) => {
    event.preventDefault(); // Prevent the default behavior of the anchor tag

    document.body.classList.add('effect');
    let postId = el.getAttribute('data-post-id');
    let imgSrc = postData[postId].imgSrc;

    lightImg.src = imgSrc;
    lightboxTitle.textContent = postData[postId].title;
    // lightboxExcerpt.innerHTML = postData[postId].excerpt;
    lightboxContent.innerHTML = postData[postId].content;
  });
});

window.addEventListener('click', (event) => {
  if (
    event.target.className == 'box-wrapper' ||
    event.target.className == 'close-btn'
  ) {
    document.body.classList.remove('effect');
  }
});