Download next wordpress starter - Unduh Kode Sumber next wordpress starter

next wordpress starter

Kode Sumber AI

1.0.0

Unduh

Starter WordPress Next.js

Menskalakan WordPress dengan kekuatan Next.js dan web statis!

⚡️ Mulai cepat
Memulai
? Mengkonfigurasi proyek Anda
? Plugin
? Sponsor
Kontributor

⚡️ Mulai cepat

Persyaratan

WordPress
Wpgraphql
Variabel Lingkungan (lihat di bawah)

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

Tambahkan file .env.local ke root dengan yang berikut:

 WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"

Dalam beberapa kasus, hal di atas mungkin tidak berhasil. Ubah sebagai berikut:

 WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql

Memulai

Apa ini dan apa yang disertakan?

Tujuan dari proyek ini adalah untuk mengambil WordPress sebagai CMS tanpa kepala dan menggunakan Next.js untuk menciptakan pengalaman statis tanpa layanan pihak ke -3 yang dapat digunakan di mana saja.

Harapannya adalah membangun sebanyak mungkin fitur untuk mendukung apa yang biasanya diharapkan dari tema di luar kotak di WordPress. Saat ini, fitur -fitur tersebut termasuk:

Blog (https://next-wordpress-starter.spaceJelly.dev)
Halaman (https://next-wordpress-starter.spaceejelly.dev/about/)
Posting (https://next-wordpress-starter.spaceJelly.dev/posts/how-to-create-a-head-wordpress-blog-with-next-js-wordpress-starter/)
Kategori (https://next-wordpress-starter.spaceJelly.dev/categories/tutorial/)
Penulis (https://next-wordpress-starter.spaceJelly.dev/authors/colby-fayock/)
Cari (Sisi Klien Navigasi Global dan https://next-wordpress-starter.spaceJelly.dev/search/?q=wordpress)
RSS (https://next-wordpress-starter.spaceJelly.dev/feed.xml)
Sitemap (https://next-wordpress-starter.spaceJelly.dev/sitemap.xml)

Selain itu, tema ini diharapkan ramah SEO dan performant di luar kotak, termasuk:

Judul halaman yang unik
Deskripsi unik
Buka tag grafik

Anda juga dapat secara opsional mengaktifkan dukungan plugin SEO yoast untuk menambah SEO Anda! (Lihat di bawah)

Lihatlah masalah apa yang ada di dek!

Ingin sesuatu yang sedikit lebih mendasar ? Lihatlah starter saya yang lain dengan pengaturan MVP untuk bangun dan berjalan dengan wpgraphql di WordPress: https://github.com/colbyfayock/next-wpgraphql-basic-starter

Persyaratan

WordPress
Wpgraphql
Variabel Lingkungan (lihat di bawah)

Lingkungan

Proyek ini memanfaatkan WPGRAPHQL untuk menanyakan WordPress dengan GraphQL. Untuk membuat permintaan itu ke titik akhir yang sesuai, kita perlu mengatur variabel lingkungan untuk memberi tahu Next.js dari mana harus meminta informasi situs.

Buat file baru yang disebut .env.local dan tambahkan yang berikut:

WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] "

Ganti isi variabel dengan titik akhir wpgraphql Anda. Secara default, itu harus menyerupai [Your Host]/graphql .

Catatan: Variabel lingkungan secara opsional dapat dikonfigurasi secara statis di next.config.js

Semua variabel lingkungan

Nama	Diperlukan	Bawaan	Keterangan
Wordpress_graphql_endpoint	Ya	-	WordPress WPGraphQL Endpoint (mis: host.com/graphl)
Wordpress_menu_location_navigation	TIDAK	UTAMA	Mengkonfigurasi lokasi menu navigasi header
Wordpress_plugin_seo	TIDAK	PALSU	Mengaktifkan Dukungan Plugin SEO (Benar, Salah)

Harap dicatat beberapa tema tidak memiliki lokasi menu utama.

Perkembangan

Untuk memulai proyek secara lokal, jalankan:

yarn dev
# or
npm run dev

Proyek ini sekarang harus tersedia di http: // localhost: 3000!

Ekstensi eslint untuk kode studio visual

Dimungkinkan untuk memanfaatkan ekstensi ini untuk meningkatkan pengalaman pengembangan. Untuk mengatur ekstensi Eslint dalam kode Visual Studio, tambahkan folder baru ke root .vscode . Di dalam Tambah File settings.json dengan konten berikut:

{
  "editor.formatOnSave" : false ,
  "editor.codeActionsOnSave" : {
    "source.fixAll.eslint" : true
  }
}

Dengan file ini Eslint akan secara otomatis memperbaiki dan memvalidasi kesalahan sintaksis dan memformat kode pada simpan (berdasarkan konfigurasi yang lebih cantik).

Penyebaran

Netlify

Ada dua opsi tentang bagaimana Anda dapat menggunakan proyek ini ke Netlify:

Plugin Essential Next.js (disarankan)
Mengekspor proyek melalui next export

Plugin Essential Next.js harus disediakan sebagai opsi ketika Anda pertama kali mengimpor proyek berdasarkan starter ini. Jika tidak, Anda dapat menginstal plugin ini menggunakan direktori Netlify Plugins. Ini akan memungkinkan proyek untuk mengambil keuntungan penuh dari semua fitur Native Next.js yang didukung Netlify dengan plugin ini.

Mengekspor Proyek memungkinkan selanjutnya.js mengkompilasi proyek menjadi aset statis termasuk file HTML. Ini memungkinkan Anda untuk menggunakan proyek sebagai situs statis langsung ke netlify seperti halnya situs lainnya. Anda dapat melakukan ini dengan menambahkan next export ke akhir perintah build di dalam package.json (mis: next build && next export ).

Terlepas dari opsi mana yang Anda pilih, Anda dapat mengonfigurasi variabel lingkungan Anda saat membuat situs baru atau dengan menavigasi ke pengaturan situs> Build & Deploy> Environment dan memicu penyebaran baru yang pernah ditambahkan.

Vercel

Diberikan Next.js adalah proyek yang didukung Vercel, Anda dapat dengan mudah mengimpor proyek sebagai situs baru dan mengkonfigurasi variabel lingkungan Anda dengan menambahkannya selama impor atau dengan menavigasi ke pengaturan> variabel lingkungan dan memicu bangunan baru yang pernah ditambahkan.

? Mengkonfigurasi proyek Anda

package.json

Untuk menghindari file konfigurasi tambahan, kami memanfaatkan beberapa properti bawaan package.json untuk mengonfigurasi bagian-bagian situs web.

Nama	Diperlukan	Keterangan
beranda	Ya	Beranda atau nama host yang digunakan untuk membangun URL penuh (ex open grafik)

Beranda: Mengatur Properti homepage akan memperbarui instance di mana URL lengkap diperlukan seperti tag grafik terbuka

WordPress

Proyek ini bertujuan untuk memanfaatkan sebanyak mungkin fitur WordPress bawaan secara default seperti tema WordPress yang khas. Itu termasuk:

Nama	Penggunaan
Bahasa situs	Atribut `lang` pada tag `<html>`
Judul situs	Header beranda, metadata halaman
Tagline	Subtitle Beranda

Ada beberapa konfigurasi WordPress spesifik yang diperlukan untuk memungkinkan penggunaan starter ini terbaik.

Gambar

Pemula ini saat ini tidak menyediakan mekanisme apa pun untuk menangani konten gambar dari WordPress. Gambar tersebut ditautkan ke "sebagaimana adanya", yang berarti jika gambar diunggah melalui antarmuka WordPress, gambar akan disajikan dari WordPress.

Untuk melayani gambar secara statis, Anda memiliki beberapa opsi.

Jetpack

Dengan mengaktifkan akselerator gambar dari Jetpack, gambar Anda secara otomatis akan dilayani secara statis dan di -cache melalui CDN WP.com. Fitur ini dilarang dengan instalasi dasar JetPack, hanya membutuhkan Anda menghubungkan situs WordPress ke layanan JetPack.

Jetpack CDN

? Plugin

Yoast seo

Plugin Yoast SEO sebagian didukung termasuk sebagian besar fitur utama seperti metadata dan kustomisasi grafik terbuka.

Persyaratan

Plugin seo yoast
Tambahkan plugin seo wpgraphql

Untuk mengaktifkan plugin, konfigurasikan WORDPRESS_PLUGIN_SEO menjadi true baik sebagai variabel lingkungan atau di dalam next.config.js.

? Bootstrap dengan starter WordPress next.js

Contoh situs web yang dimulai dengan starter WordPress Next.js

colbyfayock.com
SpaceJelly.Dev

? Sponsor

Hosting WordPress untuk proyek yang menghadap publik yang disediakan oleh WP Engine.

Logo Mesin WP

Kontributor

Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):

_{Colby Fayock}	_{Kevin Cunningham}	_{Guillermo Angulo}	_{Hein Snyman}	_Grische ?	_{Jatin Rathee}	_Dave
_{Brad Garropy}	_{Penjualan Fábio}	_{Leonardo Losoviz}	_{Avneesh Agarwal}	_{Phattarapol L.}	_{Peter Cruckshank}	_{Shane O'Grady}
_{Nick Gaswirth}	_{Alexandruvisan19}	_{Ritik Chourasiya} ?	_{Rick Knowlton}	_{Jedidiah Amaraegbu}