Distansakademin

WordPress Headless intro

Vad är WordPress Headless?

Skillnaden mellan vanliga WordPress och Headless

Hur fungerar WordPress Headless?

Fördelar med WordPress Headless

Nackdelar med WordPress Headless

Användningsområden för WordPress Headless

SEO och WordPress Headless

Kom igång med WordPress Headless

Testa WordPress REST API

  1. Från och med WordPress version 4.7 finns ett inbyggt REST API. Se till att det är aktiverat på din webbplats genom att besöka {DIN_WORDPRESS_URL}/wp-json/.
    • Om du ser en JSON-utmatning är REST API aktiverat.

WordPress REST API endpoints

Skapa egen endpoint

// Register custom REST API routes
add_action('rest_api_init', function () {
    register_rest_route('custom', '/menus', array(
        'methods' => 'GET',
        'callback' => 'get_menus',
    ));

    register_rest_route('custom', '/menus/(?P<slug>[a-zA-Z0-9-]+)', array(
        'methods' => 'GET',
        'callback' => 'get_menu',
    ));
});

Skapa egen endpoint (forts.)

// Callback for getting all menus
function get_menus()
{
    return get_nav_menu_locations();
}

// Callback for getting a specific menu
function get_menu($data)
{
    $menu_items = wp_get_nav_menu_items($data['slug']);
    return $menu_items;
}

Skapa din Headless Frontend

  1. Kör npm create vue@latest i terminalen för att skapa en ny Vue-applikation.
  2. Anropa /{wp-json}/custom/menus med Postman för att se vilka IDn dina menyer har.
    • Kom ihåg ett ID för att använda i nästa steg.
  3. Uppdatera src/App.vue, src/router/index.js för att hämta och visa er meny.
  4. Skapa en ny vy (src/views/PageView.vue) för att visa en sida från WordPress.
  5. Installera dotenv (npm install dotenv) och skapa en .env-fil för att lagra URLn till er WordPress-installation.

.env

Exempel

VITE_WP_JSON=http://localhost/wordpress/wp-json

src/App.vue

<script setup>
import { onMounted, ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router'

// Function to fetch menu items from the API
async function fetchMenuItems() {
  const response = await fetch(import.meta.env.VITE_WP_JSON + '/custom/menus/10');
  let data = await response.json();

  // Filter only the menu items that are pages
  menuItems.value = data.filter(item => item.object === 'page');;
}

const menuItems = ref([]);

onMounted(fetchMenuItems);
</script>

src/App.vue (forts.)

<template>
  <header>
    <div class="wrapper">
      <nav v-if="menuItems">
        <RouterLink v-for="item in menuItems" :key="item.ID" :to="item.object_id">
          
        </RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home', // Home kan ni lämna tom eller uppdatera hur ni vill
      component: () => import('../views/HomeView.vue')
    },
    {
      path: '/:id',
      name: 'page-post',
      component: () => import('../views/PageView.vue')
    }
  ]
})

export default router

src/views/PageView.vue

<script setup>
import { onMounted, ref } from 'vue';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';

// Function to fetch menu items from the API
async function fetchPost(id) {
  const response = await fetch(import.meta.env.VITE_WP_JSON + '/wp/v2/pages/' + id);
  post.value = await response.json();
}

const route = useRoute();
const post = ref(false);

// Watch for route changes
onBeforeRouteUpdate(async (to, from, next) => {
  await fetchPost(to.params.id);
  next();
});

onMounted(async () => { await fetchPost(route.params.id); });
</script>

src/views/PageView.vue (forts.)

<template>
  <main>
    <div class="wrapper" v-if="post">
      <h1></h1>
      <div v-html="post.content.rendered"></div>
    </div>
  </main>
</template>

Testa och optimera

  1. Testa din WordPress Headless-webbplats noggrant på olika enheter och webbläsare för att säkerställa att allt fungerar korrekt.
  2. Optimera din frontend och server för bättre prestanda och användarupplevelse.

Publicera din WordPress Headless-webbplats

  1. När du är nöjd med din WordPress Headless-webbplats är det dags att publicera den.
  2. Ladda upp frontend-applikationen på en webbserver eller en molnplattform och se till att din WordPress-installation är tillgänglig via REST API.

Övningar