next wordpress starter
1.0.0
Skalierung von WordPress mit der Kraft von Next.js und dem statischen Web!
yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter
# or
npx create-next-app -e https://github.com/colbyfayock/next-wordpress-starter Fügen Sie dem Root eine .env.local -Datei mit Folgendes hinzu:
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
In einigen Fällen funktioniert die oben genannten möglicherweise nicht. Ändern Sie es wie folgt:
WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
Ziel dieses Projekts ist es, WordPress als kopfloses CMS zu nehmen und als Next.js ein statisches Erlebnis ohne Dienste von Drittanbietern zu erstellen, die überall eingesetzt werden können.
Die Hoffnung besteht darin, so viele Funktionen wie möglich zu erstellen, um das zu unterstützen, was normalerweise von einem Out -of -the -Box -Thema auf WordPress erwartet wird. Derzeit umfassen diese Funktionen:
Darüber hinaus wird erwartet, dass das Thema SEO -freundlich und leistungsstärker ist, einschließlich:
Sie können den Yoast SEO -Plugin -Support auch optional aktivieren, um Ihre SEO zu beenden! (Siehe unten)
Schauen Sie sich die Probleme an, was auf Deck ist!
Willst du etwas einfacheres ? Schauen Sie sich meinen anderen Starter mit einem MVP
Dieses Projekt verwendet WPGRAPHQL, um WordPress mit GraphQL abzufragen. Um diese Anfrage an den entsprechenden Endpunkt zu stellen, müssen wir eine Umgebungsvariable so festlegen, dass sie als nächstes.js wissen.
Erstellen Sie eine neue Datei, die lokal .env.local genannt wird, und fügen Sie Folgendes hinzu:
WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] " Ersetzen Sie den Inhalt der Variablen durch Ihren WPGRAPHQL -Endpunkt. Standardmäßig sollte es [Your Host]/graphql ähneln.
HINWEIS: Umgebungsvariablen können optional statisch in Next.config.js konfiguriert werden
| Name | Erforderlich | Standard | Beschreibung |
|---|---|---|---|
| WordPress_Graphql_endpoint | Ja | - - | WordPress wpgraphql Endpoint (Beispiel: host.com/graphl) |
| WordPress_Menu_Location_Navigation | NEIN | Primär | Konfigurieren Sie den Standort des Header -Navigation Menü |
| WordPress_plugin_seo | NEIN | FALSCH | Aktiviert SEO Plugin Support (True, False) |
Bitte beachten Sie, dass einige Themen keinen primären Menüstandort haben.
Um das Projekt lokal zu starten, laufen Sie:
yarn dev
# or
npm run devDas Projekt sollte jetzt unter http: // localhost: 3000 verfügbar sein!
Es ist möglich, diese Erweiterung zu nutzen, um die Entwicklungserfahrung zu verbessern. Um die Eslint -Erweiterung im Visual Studio -Code einzurichten, fügen Sie dem Root .vscode einen neuen Ordner hinzu. In Inside eine settings.json hinzufügen. JSON mit dem folgenden Inhalt:
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}Mit dieser Datei repariert und validiert ESLINT Syntaxfehler automatisch und formatieren Sie den Code auf Speichern (basierend auf schöner Konfiguration).
Es gibt zwei Optionen, wie Sie dieses Projekt für Netlify bereitstellen können:
next exportEs ist ein Plugin von Essential Next. Wenn dies nicht der Fall ist, können Sie dieses Plugin über das Netlify -Plugins -Verzeichnis installieren. Auf diese Weise kann das Projekt alle native native ned.js -Funktionen, die Netlify mit diesem Plugin unterstützt, voll ausnutzen.
Durch exportieren des Projekts werden das Projekt als nächstes in statische Vermögenswerte zusammengefasst, einschließlich HTML -Dateien. Auf diese Weise können Sie das Projekt als statische Site direkt für Netlify wie jede andere Website bereitstellen. Sie können dies tun, indem Sie next export zum Ende des build -Befehls in package.json (Beispiel: next build && next export ) hinzufügen.
Unabhängig davon, welche Option Sie auswählen, können Sie Ihre Umgebungsvariablen entweder beim Erstellen Ihrer neuen Website oder durch Navigieren zu Site -Einstellungen> Build & Bereitstellung> Umgebung und Auslösen eines neuen Bereitstellers konfigurieren.
Angesichts des nächsten Projekts können Sie das Projekt einfach als neue Site importieren und Ihre Umgebungsvariablen konfigurieren, indem Sie sie entweder während des Imports oder durch Navigieren zu Einstellungen> Umgebungsvariablen und Auslösen eines neuen Builds nach dem Hinzufügen von Einstellungen> Umgebungsvariablen konfigurieren.
Um eine zusätzliche Konfigurationsdatei zu vermeiden, nutzen wir einige integrierte Eigenschaften von package.json , um Teile der Website zu konfigurieren.
| Name | Erforderlich | Beschreibung |
|---|---|---|
| Homepage | Ja | Homepage oder Hostname zum Bau vollständiger URLs (Ex Open Graph) |
homepage -Immobilie aktualisiert Instanzen, in denen die vollständige URL erforderlich ist, z. B. Open -Graph -TagsDieses Projekt zielt darauf ab, so viele integrierte WordPress-Funktionen standardmäßig wie ein typisches WordPress-Thema zu nutzen. Dazu gehören:
| Name | Verwendung |
|---|---|
| Standortsprache | lang -Attribut auf dem <html> -Tag |
| Site -Titel | Homepage Header, Seitenmetadaten |
| Slogan | Homepage Untertitel |
Es ist eine bestimmte WordPress -Konfiguration erforderlich, um diesen Starter am besten zu verwenden.
Dieser Starter bietet derzeit keine Mechanismen für den Umgang mit Bildinhalten von WordPress. Die Bilder sind mit "wie ist" verknüpft. Wenn das Bild über die WordPress -Schnittstelle hochgeladen wird, wird das Bild von WordPress bedient.
Um die Bilder statisch zu bedienen, haben Sie einige Optionen.
Durch Aktivieren des Bildbeschleunigers von Jetpack werden Ihre Bilder automatisch statisch und über die WP.com CDN zwischengespeichert und zwischengespeichert. Diese Funktion wird mit der grundlegenden Installation von Jetpack kostenlos geliefert, sodass Sie die WordPress -Site mit dem Jetpack -Dienst verbinden.
Jetpack CDN
Das Yoast SEO -Plugin wird teilweise unterstützt, einschließlich der wichtigsten Funktionen wie Metadaten und offener Graphenanpassung.
Um das Plugin zu aktivieren, konfigurieren Sie WORDPRESS_PLUGIN_SEO so, dass sie entweder als Umgebungsvariable oder innerhalb von Next.config.js true sein.
Beispiele für Websites, die mit Next.js WordPress Starter begannen
WordPress-Hosting für das von WP Engine bereitgestellte öffentlich ausgerichtete Projekt.
Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):
Colby Fayock | Kevin Cunningham | Guillermo Angulo | Hein Snyman | Grische ? | Jatin Rathee | Dave |
Brad Garropy | Fábio -Verkauf | Leonardo Losoviz | Avneesh Agarwal | Phattarapol L. | Peter Crockshank | Shane O'Grady |
Nick Gaswirtschaft | Alexandruvisan19 | Ritik Chourasiya ? | Rick Knowlton | Jedidiah Amaraegbu |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
