Menampilkan Daftar Artikel Wordpress dengan Svelte Kit Melalui Wordpress Rest Api

mrfdn.com - Sebagaimana diketahui bahwa wordpress memiliki sebuah fitur bernama Rest API.

Jika fitur ini diaktifkan maka kita bisa menggunakannya dengan bebas. Kita bisa menangkap daftar artikel pada web wordpress.

Salah satu cara menggunakan Wordpress Rest API adalah dengan Svelte/SvelteKit

SvelteKit memiliki fitur untuk menampilkan data / load data dari sebuah link api. Jadi tanpa berlama-lama begini caranya.

1. Pastikan web wordpress yang akan digunakan sudah online dan api nya aktif. Cara cek api nya bisa dengan mengetikkan ini pada akhir domainnya.

contoh*.com/wp-json/wp/v2/posts

Jika bisa diakses silahkan lanjut ke tahap berikutnya.

1. Setup sebuah projek svelte.

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

1. Edit file src/routes/+page.svelte menjadi seperti ini:

<script>
  import { onMount } from "svelte";
  let posts = [];
  onMount(async () => {
    const res = await fetch("https://contoh*.com/wp-json/wp/v2/posts");
    posts = await res.json();
  });
</script>

<main class="container">
  <h1>Fetch API Wordpress using SVELTE</h1>

  <p>Here is the list articles:</p>

  {#each posts as post}
    <article>
      <header>
        <h3><a href={post.link}>{post.title.rendered}</a></h3>

        <img src={post.jetpack_featured_media_url} alt={post.title.rendered} />
      </header>

      {@html post.excerpt.rendered}
      <footer>
        <small>Diposting pada : <b>{post.date}</b></small>
      </footer>
    </article>
  {/each}
</main>

1. Jalankan sveltekit di terminal

npm run dev -- --open

Sekarang anda berhasil membuat halaman website dengan konten yang berisi daftar artikel dari sebuah web wordpress.

Semoga bermanfaat. Selamat mencoba.