Erstellen einer kopflosen WordPress -Site mit Frontalität

Die Frontalität, ein auf React-basiertes Framework, vereinfacht die Erstellung schneller, kopfloser WordPress-Websites. Betrachten Sie es als Next.js für WordPress. Während kopfloser WordPress jetzt vielleicht eine Nische sein mag, unterstreicht das Schaufenster von Angrenzheit seine wachsende Popularität mit bemerkenswerten Websites wie CNBC Africa und Forbes Africa. Die Dokumentation und Tutorials konzentrieren sich hauptsächlich auf kopflose Blogs.

In diesem Handbuch wird beschrieben, dass eine grundlegende Frontitätsseite erstellt und ihr Standard -Mars -Thema angepasst wird (in einem nachfolgenden Artikel). Wir werden mit dem Frontity -Framework eine kopflose WordPress -Site einrichten.

Inhaltsverzeichnis

• Voraussetzungen und Anforderungen
• Frontalität verstehen
• Installation von Frontity Site:
  • Schritt 1: Projekterstellung
  • Schritt 2: Auswahl des Mars -Themas
  • Schritt 3: Projektinstallation
  • Schritt 4: Verzeichnisänderung und Server neu starten
• WordPress Site Setup:
  • Ermöglichen Sie ziemlich Permalinks
• Anschließen an die Frontheit mit WordPress:
  • Schritt 1: Menü -Updates
  • Schritt 2: Projektordnerstruktur
  • Schritt 3: Stiländerungen
• Bereitstellung von Vercel:
  • Schritt 1: Erstellen der Produktionsversion
  • Schritt 2: Erstellung von Vercel Account
  • Schritt 3: Erstellen von vercel.json
  • Schritt 4: Bereitstellung
• Abschluss
• Ressourcen

Dies ist kein Expertenführer, sondern eine praktische Vorgehensweise. Für umfassende Details wenden Sie sich an die offizielle Dokumentation von Frontity.

Voraussetzungen und Anforderungen

Die Vertrautheit mit React und ES6 JavaScript wird empfohlen. Zusätzliche Anforderungen (detailliert in der Dokumentation der Frontity):

• HTML- und CSS -Kompetenz
• Befehlszeilenerfahrung
• Node.js Server
• Code Editor

Frontalität verstehen

Die Grenze ist ein React -Framework, das speziell für WordPress entwickelt wurde. Es verfügt über seinen eigenen State Manager und CSS -Styling -Lösungen. Es arbeitet in zwei Modi:

• Entkoppelter Modus: Die Frontität baut Daten von einer WordPress -REST -API ab und rendert die endgültige HTML als isomorphe React -App. Die Hauptdomain zeigt auf die Frontheit und eine Subdomain für WordPress.
• Embedded -Modus: Das Frontitätsthema ersetzt das WordPress -Thema. Ein Plugin stellt interne HTTP -Anforderungen an den Frontity -Server für HTML durch. Die Hauptdomain zeigt auf WordPress.

Die integrierte AMP-Funktion von Frontity optimiert die Seitengeschwindigkeit.

Installation der Frontitätsstelle

Dies beinhaltet das Einrichten eines Frontitätsprojekts und einer WordPress -Site (als Datenquelle).

Stellen Sie zunächst sicher, dass Node.js und NPM installiert sind:

 Knoten --version
NPM -Verssion
NPM Installieren Sie NPM@LESTIGE -G # Upgrade NPM bei Bedarf

Schritt 1: Erstellen eines Frontitätsprojekts

Verwenden Sie die Frontalität CLI:

 NPX-Frontheit erzeugen My-Frontität

Schritt 2: Auswählen des Mars -Themas

Die Frontalität bietet zwei Themen; Wählen Sie mars-theme .

Schritt 3: Installation des Frontity -Projekts

Der Frontity -Server installiert das Projekt und seine Abhängigkeiten.

Schritt 4: Verzeichnis ändern und den Entwicklungsserver neu starten

Navigieren Sie zum Projektverzeichnis und starten Sie den Server:

 CD My-Frontity
NPX Frontity Dev # oder Garn Frontity Dev

Greifen Sie auf die Website unter http://localhost:3000 zu.

WordPress Site Installation

Richten Sie eine WordPress -Site (lokal oder vorhanden) ein. Stellen Sie sicher, dass die WordPress-REST-API zugänglich ist (z. B. http://mytestsite.local/wp-json ).

Aktivieren Sie ziemlich Permalinks

Aktivieren Sie hübsche Permalinks (Postname) in Einstellungen> Permalinks .

Anschließen an die Frontheit mit WordPress

Aktualisieren Sie frontity.settings.js :

 // Frontity.Setings.js
const Einstellungen = {
  ...,
  Pakete: [
    ...,
    {
      Name: "@Frontity/WP-Source",
      Zustand: {
        Quelle: {
          API: "http://your-wordpress-ite.com/wp-json" // Ersetzen Sie durch Ihre URL
        }
      }
    }
  ]
}

Starten Sie den Server neu.

Schritt 1: Aktualisieren des Menüs

Fügen Sie Ihre Menüelemente zu frontity.settings.js nach Bedarf hinzu, folgt der Struktur des Mars -Themas.

Schritt 2: Projektordnerstruktur

Verstehen Sie die Struktur des Projekts: node_modules , package.json , frontity.settings.js , packages/mars-theme .

Schritt 3: Stile ändern

Die Frontheit verwendet Emotionen zum Styling. Ändern Sie die Stile nach Bedarf in den Komponenten des Themas.

Bereitstellung für Vercel

Schritt 1: Erstellen einer Produktionsversion

 NPX -Frontalität Build

Schritt 2: Erstellung von Vercel Account

Erstellen Sie ein Vercel -Konto und melden Sie sich an:

 NPX Vercel Login

Schritt 3: Erstellen von vercel.json

Erstellen Sie vercel.json :

 {
  "Version": 2,
  "baut": [
    {
      "Src": "package.json",
      "Verwenden": "@angrenzt/jetzt"
    }
  ]
}

Schritt 4: Bereitstellung

 NPX Vercel

Abschluss

Die Frontalität bietet einen benutzerfreundlichen Ansatz zum Aufbau kopfloser WordPress-Sites.

Ressourcen

• Frontitätsdokumentation
• Frontity Blog
• Relevante YouTube -Tutorials (Suche nach "Frontity Tutorial")

Das obige ist der detaillierte Inhalt vonErstellen einer kopflosen WordPress -Site mit Frontalität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!