Wordpress rest API自定义端点,使用Jquery .getJSON模板文字,只有一个项目不显示的问题。

问题描述 投票:0回答:1

因此,为了进一步深入了解我的标题,我目前正试图通过我在wordpress rest API中创建的自定义端点来显示。我能够检索到我所需要的东西,除了有一部分总是出现未定义。我相信我只是输入了我认为正确的语法,但每次都会导致未定义的结果。这里是自定义端点,用于从邮递员那里搜索查询一个位置。我试图从JSON翻译到模板文字的代码是gallery部分,我将在下面的代码部分后对其进行更多评论。

[
    {
        "ID": 75,
        "post_author": "1",
        "post_date": "2020-04-29 19:28:38",
        "post_date_gmt": "2020-04-29 19:28:38",
        "post_content": "<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></blockquote>\n<!-- /wp:quote -->",
        "post_title": "Ogden St.",
        "post_excerpt": "",
        "post_status": "publish",
        "comment_status": "closed",
        "ping_status": "closed",
        "post_password": "",
        "post_name": "ogden-st",
        "to_ping": "",
        "pinged": "",
        "post_modified": "2020-05-07 19:09:42",
        "post_modified_gmt": "2020-05-07 19:09:42",
        "post_content_filtered": "",
        "post_parent": 0,
        "guid": "http://olson-landscaping.local/?post_type=project&#038;p=75",
        "menu_order": 0,
        "post_type": "project",
        "post_mime_type": "",
        "comment_count": "0",
        "filter": "raw",
        "acf": {
            "acreage": "1.4 Acres",
            "completed": "2017",
            "days_sun": "17",
            "photo": "http://olson-landscaping.local/wp-content/uploads/2020/04/ogdenST.png"
        },
        "link": "http://olson-landscaping.local/projects/ogden-st/",
        "image": "http://olson-landscaping.local/wp-content/uploads/2020/04/ogdenST.png",
        "gallery": [
            {
                "id": 82,
                "title": "2018-07_large-yard-landscape-designers-daybreak",
                "caption": "",
                "full_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-scaled.jpg",
                "thumbnail_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-150x150.jpg",
                "large_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-1024x768.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-300x225.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-768x576.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-1536x1152.jpg 1536w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-2048x1536.jpg 2048w",
                "medium_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-300x225.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-1024x768.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-768x576.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-1536x1152.jpg 1536w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-2048x1536.jpg 2048w",
                "url": "",
                "target": ""
            },
            {
                "id": 84,
                "title": "647a097e8b23088f485a848284dae811",
                "caption": "",
                "full_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811.jpg",
                "thumbnail_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-150x150.jpg",
                "large_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-300x240.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-768x614.jpg 768w",
                "medium_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-300x240.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-768x614.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811.jpg 1024w",
                "url": "",
                "target": ""
            },
            {
                "id": 85,
                "title": "landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059",
                "caption": "",
                "full_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059.jpg",
                "thumbnail_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-150x150.jpg",
                "large_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-1024x682.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-300x200.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-768x512.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-1536x1024.jpg 1536w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-2048x1365.jpg 2048w",
                "medium_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-300x200.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-1024x682.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-768x512.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-1536x1024.jpg 1536w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-2048x1365.jpg 2048w",
                "url": "",
                "target": ""
            }
        ]
    }
]

现在,这里是我写的代码,以显示在我的页面上的div。

    $menuPosts =  $("#search-section");
    $('.getResults').on("click", function(e) {
      //console.log("im clicked");
      //console.log($(this).prop("value"));
      $.getJSON('http://olson-landscaping.local/wp-json/wp/v1/projects?s=' + $(this).prop("value"), posts => {
        $menuPosts.html(`
          ${posts.map(item => `


            <div class="projectFeaturedImage" style="background-image:url(${item.image});"></div>

            <p class="projectTitle">${item.post_title}</p>

            <div class="projectDescription">
              <div class="projectDescription__top">
                <div class="projectDescription__title">
                  <p>project profile</p>
                  <img src="https://olson-landscaping.flywheelsites.com/wp-content/themes/olson/resources/images/logoGreenSmall.png">
                  <p>form o.l. 1298_1</p>
                </div><!-- projectDescription__title close -->

                <div class="projectDetails">
                  <div class="projectDetail">
                  <p class="projectDetail__title">Title</p>
                  <p class="projectDetail__content">${item.post_title}</p>
                  </div>
                  <div class="projectDetail">
                  <p class="projectDetail__title">Acreage</p>
                  <p class="projectDetail__content">${item.acf.acreage}</p>
                  </div>
                  <div class="projectDetail">
                  <p class="projectDetail__title">Completed</p>
                  <p class="projectDetail__content">${item.acf.completed}</p>
                  </div>
                  <div class="projectDetail">
                  <p class="projectDetail__title">Days of Sun</p>
                  <p class="projectDetail__content">${item.acf.days_sun}</p>
                  </div>
                </div>

                <div class="projectContent">
                  <p class="projectDetail__title">Project Notes</p>
                  ${item.post_content}
                </div>

              </div>
              <div class="projectDescription__bottom">scroll for more <img src="https://olson-landscaping.flywheelsites.com/wp-content/themes/olson/resources/images/arrowUp.png"></div>
            </div>

            <div class="projectFeaturedImage projectGallery" style="background-image:url(${item.gallery.full_image_url});"></div>
            <div class="projectEnd"><p>the end</p></div>


          `).join('')}
        `);
      });

    }); //json request close

另外还有一点,这是我的functions.php代码,用于添加自定义端点,不知道这是否会对改变画廊端点的输出有帮助。


function project_endpoint( $request_data ) {
// setup query argument
$args = array(
'post_type' => 'project',
'posts_per_page'=> -1,
'numberposts'=> -1,
's' => $request_data['s'],
);

// get posts
$posts = get_posts($args);

// add custom field data to posts array
foreach ($posts as $key => $post) {
$posts[$key]->acf = get_fields($post->ID);
$posts[$key]->link = get_permalink($post->ID);
$posts[$key]->image = get_the_post_thumbnail_url($post->ID);
$posts[$key]->gallery = acf_photo_gallery('gallery', $post->ID);
}


return $posts;
}

// register the endpoint
add_action( 'rest_api_init', function () {
register_rest_route( 'wp/v1', '/projects/', array(
'methods' => WP_REST_Server::READABLE,
'callback' => 'project_endpoint',
)
);
});

除了最后一个div的底部的画廊部分,所有的东西都完美地出来了。"projectFeaturedImage" 随着 ${item.gallery.full_image_url}

另外,我希望每篇文章都能显示每张图片,而不是只显示这个例子中的三张图片之一。

谁能帮我找到正确的语法?我也可以用PHP写出来,但我真的希望这是一个ajax,而不是一个动画来让每个人在页面上。任何帮助都是非常感激的。谢谢你的帮助

jquery wordpress wordpress-rest-api template-literals
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.