Menampilkan Daftar Artikel Wordpress dengan Svelte Kit Melalui Wordpress Rest Api

Cara setup Svelte Kit untuk mengakses Wordpress rest api untuk menampilkan daftar artikel


JagoTekno.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.

Cara Setup Blade Laravel+Tailwind
Ditulis oleh Rafi pada Sunday, 27 August 2023
mrfdn author

Rafi

  • 15 year+ of Linux user.
  • 5 years+ blogger and web developer.

Jika artikel yang dibuatnya ternyata bermanfaat, support dengan cara

    Share:

Baca juga


comments powered by Disqus