by You can add API data to your custom HTML pages by using our custom component tags.
This allows you to make really custom layouts. For example, you could show one post from category A, then a YouTube video, then 5 posts from category B, then some custom HTML. The possibilities are endless.
To add some API data (WordPress posts, pages, etc) to your custom HTML page, use the ap-list component.
AP List Component
<ap-list route="https://mysite.com/wp-json/wp/v2/posts?per_page=9"></ap-list>
Inputs:
route: string = the full url to a WP-API post endpoint. URL parameters allowed. (required)
card: boolean = display list as cards
infiniteScroll: boolean = load more posts when user scrolls down. Only use when it’s the last element on the page.
<ap-list card="true" infiniteScroll="true" route="https://mysite.com/wp-json/wp/v2/posts?per_page=9"></ap-list>
AP Slider Component
To add a slider with API data to your page, use the ap-slider component.
<ap-slider route="https://mysite.com/wp-json/wp/v2/posts"></ap-slider>
Inputs:
route: string = the full url to a WP-API post endpoint. URL parameters allowed. (required)
pager: boolean = set to false to hide the pager bullets
slidesPerView: number = how many slides to show at a time
loop: boolean = set to true to loop slides
effect: string = The animation effect of the slides. Possible values are: slide, fade, cube, coverflow or flip. Default: slide.
paginationType: string = Type of pagination. Possible values are: bullets, fraction, progress. Default: bullets.
preventClicks: boolean = don’t allow clicking of slide to enter detail view
freeMode: boolean = slides freely according to momentum
<ap-slider slidesPerView="2" freeMode="false" effect="slide" paginationType="progress" route="https://mysite.com/wp-json/wp/v2/posts"></ap-slider>
To see full code of the example layout, click here.