Membuat laman WordPress tanpa kepala dengan Frontity

Frontity, rangka kerja berasaskan React, memudahkan penciptaan laman web WordPress yang cepat dan tanpa kepala. Fikirkannya sebagai Next.js untuk WordPress. Walaupun WordPress tanpa kepala mungkin menjadi niche sekarang, pameran Frontity menyoroti popularitasnya yang semakin meningkat, yang menampilkan laman web terkenal seperti CNBC Africa dan Forbes Africa. Dokumentasi dan tutorialnya terutamanya memberi tumpuan kepada blog tanpa kepala.

Butiran panduan ini mewujudkan tapak depan asas dan menyesuaikan tema MARS lalainya (dalam artikel berikutnya). Kami akan merangkumi menubuhkan tapak WordPress tanpa kepala menggunakan kerangka depan.

Jadual Kandungan

• Prasyarat dan keperluan
• Memahami Frontity
• Pemasangan Laman Frontity:
  • Langkah 1: Penciptaan Projek
  • Langkah 2: Memilih Tema Marikh
  • Langkah 3: Pemasangan Projek
  • Langkah 4: Perubahan direktori dan mulakan semula pelayan
• Persediaan Laman WordPress:
  • Membolehkan permalink cantik
• Menyambung Frontity ke WordPress:
  • Langkah 1: Kemas kini Menu
  • Langkah 2: Struktur Folder Projek
  • Langkah 3: Pengubahsuaian Gaya
• Penyebaran ke Vercel:
  • Langkah 1: Membina versi pengeluaran
  • Langkah 2: Penciptaan Akaun Vercel
  • Langkah 3: Membuat vercel.json
  • Langkah 4: Penempatan
• Kesimpulan
• Sumber

Ini bukan panduan pakar, tetapi panduan praktikal. Untuk butiran komprehensif, rujuk dokumentasi rasmi Frontity.

Prasyarat dan keperluan

Kebiasaan dengan React dan ES6 JavaScript disyorkan. Keperluan tambahan (terperinci dalam dokumentasi Frontity):

• Kemahiran HTML dan CSS
• Pengalaman baris arahan
• Pelayan node.js
• Editor Kod

Memahami Frontity

Frontity adalah kerangka React yang direka khusus untuk WordPress. Ia mempunyai pengurus negeri sendiri dan penyelesaian gaya CSS. Ia beroperasi dalam dua mod:

• Mod Decoupled: Frontity mengambil data dari API REST WordPress, menjadikan HTML akhir sebagai aplikasi reaksi isomorfik. Domain utama menunjuk ke depan, dan subdomain ke WordPress.
• Mod Embedded: Tema Frontity menggantikan tema WordPress. Plugin membuat permintaan HTTP dalaman ke pelayan frontity untuk HTML. Domain utama menunjuk kepada WordPress.

Ciri amp terbina dalam Frontity mengoptimumkan kelajuan halaman.

Pemasangan tapak depan

Ini melibatkan menubuhkan projek frontity dan tapak WordPress (sebagai sumber data).

Pertama, pastikan Node.js dan NPM dipasang:

 nod --version
npm --version
NPM Pasang NPM@terbaru -G # menaik taraf NPM jika diperlukan

Langkah 1: Membuat projek Frontity

Gunakan CLI Frontity:

 Frontity NPX Buat Frontity My

Langkah 2: Memilih Tema Mars

Frontity menawarkan dua tema; Pilih mars-theme .

Langkah 3: Pemasangan Projek Frontity

Pelayan Frontity memasang projek dan kebergantungannya.

Langkah 4: Menukar direktori dan memulakan semula pelayan pembangunan

Navigasi ke direktori projek dan mulakan pelayan:

 CD My-Frontity
NPX Frontity Dev # atau Benang Dev Frontity Dev

Akses laman web di http://localhost:3000 .

Pemasangan Laman WordPress

Sediakan tapak WordPress (tempatan atau sedia ada). Pastikan API REST WordPress boleh diakses (misalnya, http://mytestsite.local/wp-json ).

Dayakan permalink cantik

Aktifkan permalink cantik (nama pos) dalam Tetapan> Permalinks .

Menyambung Frontity ke WordPress

Kemas kini frontity.settings.js :

 // frontity.settings.js
tetapan const = {
  ...,
  Pakej: [
    ...,
    {
      Nama: "@frontity/wp-source",
      Negeri: {
        Sumber: {
          API: "http://your-wordpress-site.com/wp-json" // Ganti dengan URL anda
        }
      }
    }
  ]
}

Mulakan semula pelayan.

Langkah 1: Mengemas kini menu

Tambah item menu anda ke frontity.settings.js seperti yang diperlukan, mengikuti struktur tema Marikh.

Langkah 2: Struktur Folder Projek

Memahami struktur projek: node_modules , package.json , frontity.settings.js , packages/mars-theme .

Langkah 3: Mengubah gaya

Frontity menggunakan emosi untuk gaya. Ubah suai gaya yang diperlukan dalam komponen tema.

Penempatan ke Vercel

Langkah 1: Membuat versi pengeluaran

 NPX Frontity Build

Langkah 2: Penciptaan Akaun Vercel

Buat akaun Vercel dan log masuk:

 Log masuk NPX Vercel

Langkah 3: Membuat vercel.json

Buat vercel.json :

 {
  "Versi": 2,
  "Membina": [
    {
      "SRC": "Package.json",
      "Gunakan": "@frontity/now"
    }
  ]
}

Langkah 4: Penempatan

 NPX Vercel

Kesimpulan

Frontity menyediakan pendekatan mesra pengguna untuk membina tapak WordPress tanpa kepala.

Sumber

• Dokumentasi Frontity
• Blog Frontity
• Tutorial YouTube yang berkaitan (cari "tutorial depan")

Atas ialah kandungan terperinci Membuat laman WordPress tanpa kepala dengan Frontity. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!