Menggunakan Plugin WordPress Sumber Gatsby Baru

Dalam artikel saya sebelumnya , saya membahas bagaimana saya belajar membuat situs Gatsby bertenaga WordPress terpisah menggunakan plugin Gatsby Source WPGraphQL. Proyek ini dilakukan mengikuti versi pengembangan WPGraphQL yang sedang berlangsung dan tutorial yang sangat baik oleh Henrik Wirth . Meskipun WPGraphQL digunakan di beberapa situs produksi pada saat itu, ada banyak iterasi yang menyebabkan perubahan yang dapat merusak. Sejak rilis WPGraphQL v1.0 November lalu, plugin ini stabil dan tersedia melalui direktori plugin WordPress.

Plugin WPGraphQL dapat digunakan untuk membuat situs yang menggunakan WordPress untuk manajemen konten, tetapi dengan front-end yang digerakkan oleh Gatsby. Kami menyebutnya CMS “decoupled” atau “headless” karena back-end dan front-end situs adalah entitas terpisah yang masih terhubung satu sama lain melalui API di mana komponen di front end menggunakan data dari CMS.

Situs plugin WPGraphQL memiliki dokumentasi langkah demi langkah yang solid untuk memulai, dan posting pengumuman rilis mencantumkan sembilan contoh situs tingkat produksi yang menggunakan plugin.

Tangkapan layar yang dipilih dari tingkat produksi memisahkan situs WordPress dengan WPGraphQL.
The Denver Post, The Twin Cities Pioneer Press, The San Jose Mercury News, dan Credit Karma memiliki situs WordPress yang dipisahkan dengan WPGraphQL.

Dalam arti sebenarnya dari situs "decoupled" atau "headless", WPGraphQL dapat digunakan untuk mem-port data WordPress ke framework lain, sepertiNext.js , Vue.js , dan lain-lain. Untuk framework Gatsby, plugin Gatsby Source WordPress direkomendasikan, dan menggunakan WPGraphQL untuk sumber data dari WordPress.

Mari kita siapkan semuanya dan tur plugin.

Prasyarat

Dalam artikel saya sebelumnya, kami membahas prasyarat yang diperlukan untuk menyiapkan situs WordPress dan Gatsby, dan memindahkan data WordPress back-end ke situs front-end yang didukung Gatsby dengan penerapan situs. Saya melewatkan banyak detail itu di sini karena konsep dasarnya sama untuk artikel ini, kecuali bahwa data WordPress kali ini diambil oleh plugin Gatsby Source WordPress.

Jika Anda baru mengenal Gatsby dan baru saja terjun ke kereta musik generator situs statis yang dibuat oleh Gatsby, saya sarankan untuk membaca “Ulasan yang Jujur tentang Gatsby” oleh pakar React David Cramer dan “Gatsby vs Next.js” oleh Jared Palmer. Apa yang akan kami bahas bukan untuk semua orang, dan artikel ini mungkin berguna untuk mengevaluasi diri Anda sendiri apakah itu teknologi yang tepat untuk Anda dan proyek Anda.

WPGraphQL, atau GraphQL adalah API bahasa kueri utama yang digunakan dalam kerangka Gatsby . Ada pembaruan yang sering terjadi di GraphQL dan itu sering kali membutuhkan pengetahuan ahli dan mengawasi perubahan yang melanggar. Bagaimanapun, GraphQL dirancang oleh para ahli React untuk para ahli React lainnya. Karena itu, ada beberapa instruksi pemecahan masalah dan WPGraphQL Slack di mana penulis plugin WPGraphQL dan Gatsby Source WordPress secara aktif berpartisipasi dan membantu menjawab pertanyaan.

Artikel ini bukan panduan langkah demi langkah tentang cara menggunakan Plugin WordPress Sumber Gatsby. Sekali lagi, itu sudah tersedia di dokumentasi Gatsby . Sebaliknya, jika Anda kebetulan ahli dalam React , JavaScript, Node.js atau GraphQL, maka yang kami bahas di sini mungkin adalah hal-hal yang sudah Anda ketahui. Artikel ini adalah opini berdasarkan pengalaman pribadi saya, yang saya harap bermanfaat bagi rata-rata pengguna WordPress dengan pengetahuan dasar tentang subjek ini.

Dan, sebelum kita memulai, perlu disebutkan bahwa plugin Gatsby Source WordPress telah sepenuhnya ditulis ulang dalam versi 4 dan menggunakan WPGraphQL sebagai sumber datanya. Rilis sebelumnya, versi 3, dibuat dengan REST API sebagai sumber datanya. Karena versi stabil plugin baru-baru ini dirilis, jumlah tema pemula dan demo yang mendukungnya menjadi terbatas.

Pertama, kita membutuhkan WordPress

Untuk proyek ini, saya menyiapkan situs WordPress baru dengan Local by Flywheel yang menggunakan tema Twenty Twenty default. Saya mengimpor data pengujian unit tema untuk halaman dan posting, seperti yang dijelaskan di WordPress Codex . Meskipun ini adalah baseline yang saya kerjakan, ini bisa saja dengan mudah menjadi situs WordPress yang ada yang ada di server jarak jauh atau instalasi lokal.

Sekarang bahwa kita memiliki dasar yang ditetapkan, kita bisa login ke admin WordPress dan menginstal WPGraphQL dan WPGatsby plugin yang kita butuhkan dan mengaktifkan mereka.

Seperti yang kita bahas di artikel sebelumnya , yang dilakukannya adalah mengekspos API GraphQL dan WPGraphiQL di admin WordPress, memungkinkan API GraphiQL membuat "taman bermain" untuk menguji kueri GraphQL berdasarkan data WordPress.

Tangkapan layar UI GraphiQL di admin WordPress, menampilkan UI tiga panel.
Layar GraphiQL menyediakan tiga panel: satu untuk menavigasi di antara objek yang berbeda (kiri), satu untuk meminta data (tengah), dan satu untuk memvisualisasikan data yang dikembalikan (kanan).

Sekarang kita membutuhkan front-end Gatsby

Gatsby terkenal dengan dokumentasi yang bagus dan template pemula yang solid. Untuk membuat situs baru yang diberdayakan WordPress, tutorial Gatsby menyarankan bahwa baik menggunakan starter atau memulai dari awal sudah cukup untuk apa yang kita lakukan.

Gatsby juga menawarkan perpustakaan situs web contoh untuk kasus penggunaan dasar yang dibangun di sekitar teknologi tertentu. Saat ini kebetulan ada yang menggunakan WordPress dan satu lagi yang menggunakan WordPress dengan plugin Advanced Custom Fields . Perhatikan bahwa situs contoh di perpustakaan masih menggunakan plugin gatsby-source-wordpress 3 dan belum diperbarui ke versi 4, saat tulisan ini dibuat.

Menurut tutorial Gatsby , ada tiga opsi untuk membuat situs Gatsby yang didukung WordPress. Mari kita lihat satu per satu.

Opsi 1: Menggunakan starter Gatsby

Dokumen memiliki panduan langkah demi langkah tentang cara menyiapkan situs WordPress-Gatsby, tetapi inilah intinya.

Jalankan perintah berikut di baris perintah untuk mengambil starter dari repositori GitHub dan menggandakannya ke folder proyek my-wpstarter

 #! clone starter repo gatsby new my-wpstarter https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

Kemudian, instal paket npm

 #! npm npm install #! or yarn yarn install

Sekarang starter sudah dikloning, mari buka file gatsby-config.js di editor kode kita dan perbarui opsi URL-nya untuk mengambil data dari titik akhir WordPress kita (lihat di atas).

 // gatsby-config.js { resolve: gatsby-source-wordpress, options: { // WordPress is the GraphQL url. url: process.env.WPGRAPHQL_URL || https://wpgatsbydemo.wpengine.com/graphql, }, },

Sekarang, kami akan mengganti URL titik akhir sumber data pemula dengan URL situs WordPress kami sendiri:

 // gatsby-config.js file { resolve: `gatsby-source-wordpress`, options: { url: `http://gatsbywpv4.local/graphql`, }, },

Mari pastikan kita berada di direktori proyek my-wpstarter Dari folder proyek, kita akan menjalankan perintah gatsby develop untuk membangun situs Gatsby baru dari titik akhir sumber data WordPress kita. Di terminal kita seharusnya dapat melihat gatsby-source-wordpress , termasuk kesalahan dan proses situs yang berhasil di sepanjang jalan.

Jika kita melihat pesan success Building development bundle di bagian akhir, itu berarti proses pembuatan situs Gatsby telah selesai dan situs tersebut dapat dilihat di http://localhost:8000 .

Halaman beranda situs awal kami, menampilkan postingan yang diambil dari data WordPress dalam satu kolom.

Ini adalah blog pemula tanpa tulang dengan file dasar dan beberapa komponen. Struktur filenya sangat mirip dengan gatsby-starter-blog , kecuali yang ini memiliki folder template yang menyertakan file template blog-post.js dan blog-post-achive.js

Saat kami melihat penjelajah API GraphiQL di http://localhost:8000/___graphql kami dapat melihat semua data dari WordPress yang diekspos oleh WPGraphQL, serta melakukan kueri dan mengambil data tertentu langsung dari UI.

UI GraphiQL menampilkan tiga panel, satu untuk Explorer, satu untuk kueri GraphiQL, dan satu lagi yang menampilkan data yang dikembalikan dari kueri.
Contoh ini menunjukkan kueri untuk item menu di WordPress (panel tengah) dan data yang dikembalikan dari kueri itu (panel kanan).

Benar! Gatsby menganggap sisanya terserah kita untuk membangun, menggunakan komponen Gatsby yang menarik data WordPress untuk presentasi.

Opsi 2: Membangun dari awal

Dokumentasi Gatsby menawarkan panduan langkah demi langkah terperinci tentang cara membuat situs WordPress-Gatsby baru dari awal menggunakan tema starter default Gatsby .

Kami akan menjalankan proyek baru dari baris perintah:

 #! create a new Gatsby site gatsby new wpgatsby-from-scratch-demo

Ini memberi kita wpgatsby-from-scratch-demo yang menyertakan tema starter. Dari sini, kita akan melakukan cd ke folder itu dan mulai mengembangkan:

 cd wpgatsby-from-scratch-demo gatsby develop

Sekarang kita dapat membuka http://localhost:8000 di browser dan mendapatkan halaman selamat datang.

Sekarang kita siap untuk mulai mengambil data dari situs WordPress kita. Mari instal Plugin Sumber Gatsby:

 #! install with rpm npm install gatsby-source-wordpress #! install with yarn yarn add Gatsby-source-wordpress

Jika kami memeriksa browser kami sekarang, Anda akan melihat bahwa tidak ada yang terjadi – kami masih mendapatkan sambutan Gatsby yang sama. Untuk mengambil data situs WordPress kita, kita perlu menambahkan plugin ke file gatsby-config.js . Buka file dan masukkan yang berikut ini:

 // gatsby-config.js module.exports = { siteMetadata: { // ... }, plugins: [ // Add Gatsby-source-wordpress plugin { resolve: `gatsby-source-wordpress`, options: { /* * The full URL of the WordPress site's GraphQL API. * Example : 'https://www.example-site.com/graphql' */ url: `http://gatsbywpv4.local/graphql`, }, }, // The following plugins are not required for gatsby-source-wordpress .... ], }

Sama seperti sebelumnya, kita perlu mengubah sumber titik akhir data WordPress menjadi URL situs WordPress kita. Mari kita jalankan gatsby develop di terminal kita untuk memulai.

Dua jendela terminal, berdampingan. Mereka gelap dengan teks terang.
Sekarang kita melihat bahwa createPages berjalan dengan sukses untuk membangun bundel pengembangan (kiri), dan bahwa data WordPress untuk posting, halaman, taksonomi, pengguna, menu, dan yang lainnya diambil (kanan).

Namun, saat kami membuka http://localhost:8000 di browser kami, sepertinya tidak ada yang terjadi. Kami masih melihat layar selamat datang yang sama. Tetapi jika kita memeriksa GraphiQL di browser kita (di http://localhost:8000/___graphql ) maka kita melihat semua data WordPress yang diekspos ke situs Gatsby kita yang dapat kita kueri dan tampilkan sesuai keinginan kita.

UI GraphiQL tiga panel.
GraphiQL menunjukkan bahwa data WordPress memang terekspos dan kami dapat membuat dan menjalankan kueri.

Mari kita uji kueri berikut yang saya tarik langsung dari tutorial Gatsby, di penjelajah GraphiQL:

 query { allWpPost { nodes { id title excerpt slug date(formatString: "MMMM DD, YYYY") } } }

Ketika kita menjalankan query di atas, kita akan melihat nilai allWpPost.nodes , dengan sub properti untuk id , title , excerpt , dan lain-lain.

Sekarang, mari buka src/components/pages/index.js dan ganti kodenya dengan ini:

 // src/components/pages/index.js import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" import SEO from "../components/seo" export default function Home({ data }) { return ( <Layout> <SEO title="home" /> <h1>My WordPress Blog</h1> <h4>Posts</h4> {data.allWpPost.nodes.map(node => ( <div> <p>{node.title}</p> <div dangerouslySetInnerHTML={{ __html: node.excerpt }} /> </div> ))} </Layout> ) } export const pageQuery = graphql` query { allWpPost(sort: { fields: [date] }) { nodes { title excerpt slug } } } `

Simpan, mulai ulang server dengan gatsby develop , dan segarkan halaman. Jika build berhasil, beranda situs kami akan menampilkan daftar posting blog yang diurutkan dari WordPress!

Mengikuti tutorial , mari buat halaman untuk setiap posting blog dan tautkan judul posting dari daftar ke halaman posting. Proses pembuatan halaman menggunakan data penurunan harga dijelaskan secara rinci di Bagian 7 dari tutorial dasar Gatsby , yang juga akan kita ikuti di sini.

Seperti yang dijelaskan dalam tutorial, Gatsby menggunakan createPages API, atau yang disebutnya sebagai "workhorse" API, untuk membuat halaman secara terprogram dari data (dari Markdown atau WordPress). Tidak seperti data Markdown, kita tidak perlu membuat slug di sini karena setiap postingan WordPress memiliki slug uniknya sendiri yang dapat diambil dari endpoint data WordPress.

Membuat halaman untuk setiap posting

Gatsby menggunakan file gatsby-node.js , yang terletak di root proyek kami, untuk membuat entri blog secara terprogram. Mari buka file gatsby-node.js di editor teks kita tambahkan kode berikut dari tutorial .

 // gatsby-node.js const path = require(`path`) exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return graphql(` { allWpPost(sort: { fields: [date] }) { nodes { title excerpt content slug } } } `).then(result => { console.log(JSON.stringify(result, null, 4)) process.exit() }) }

Seperti disebutkan dalam tutorial Gatsby Part 7 , kode di atas adalah bagian pertama dari pembuatan halaman posting kita dari sumber data WordPress. Mengikuti panduan ini, mari mulai ulang server kami dan kembangkan situs kami dengan gatsby develop .

Kita harus melihat console.log di terminal kita sebagai halaman yang sedang dibangun). Namun, beranda kami masih terlihat sama. Untuk membuat single post, Gatsby membutuhkan template untuk membuat halaman, yang akan kita buat di langkah selanjutnya .. Itulah yang akan kita lakukan selanjutnya.

Membuat template posting blog

Mari buat folder src/components/templates src/ dan buat file blog-post.js dengan menempelkan cuplikan kode berikut dari tutorial:

 // src/templates/blog-post.js import React from "react" import Layout from "../components/layout" import { graphql } from "gatsby" export default function BlogPost({ data }) { const post = data.allWpPost.nodes[0] console.log(post) return ( <Layout> <div> <h1>{post.title}</h1> <div dangerouslySetInnerHTML={{ __html: post.content }} /> </div> </Layout> ) } export const query = graphql` query($slug: String!) { allWpPost(filter: { slug: { eq: $slug } }) { nodes { title content } } } `

Seperti yang dijelaskan dalam tutorial, potongan kode di atas membuat satu posting dengan React JSX dan membungkus post.title dan post.content (baris 12-13) di sekitar src/components/layout.js . Di bagian bawah file, kueri GraphQL ditambahkan dan memanggil posting tertentu berdasarkan variabel post slug $slug . Variabel ini diteruskan ke blog-post.js ketika halaman dibuat di gatsby-node.js .

Selanjutnya kita juga harus memperbarui baris 12-13 dari gatsby-node.js dengan kode berikut dari tutorial.

 // gatsby-node.js const path = require(`path`) exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return graphql(` { allWpPost(sort: { fields: [date], order:DEC }) { nodes { title excerpt content slug } } } `).then(result => { result.data.allWpPost.nodes.forEach(node => { createPage({ path: node.slug, component: path.resolve(`./src/templates/blog-post.js`), context: { // This is the $slug variable passed to blog-post.js slug: node.slug, }, }) }) }) }

Mari berhenti dan restart server lokal kita dengan gatsby develop dan lihat situsnya. Kami tidak akan melihat beranda kami dengan daftar tautan entri blog. Namun, jika kita memeriksa dengan http://localhost:8000/abcdf kita akan melihat halaman 404 berikut dengan daftar halaman individu dan link posting.

Jika kita memeriksa http://localhost:8000/hello-gatsby-world , kita akan melihat posting “Hello Gatsby WordPress World” dengan segala kemuliaan.

Langkah selanjutnya adalah menautkan judul posting dari beranda ke posting sebenarnya.

Menautkan ke posting dari beranda

Menautkan pekerjaan dari beranda ke halaman posting dilakukan dengan membungkus judul posting di file index.js dengan komponen Link Mari buka index.js yang kita buat sebelumnya dan tambahkan komponen Link

 // src/components/pages/index.js import React from "react" import { Link, graphql } from "gatsby" import Layout from "../components/layout" import SEO from "../components/seo" export default function Home({ data }) { return ( <Layout> <SEO title="home" /> {/* <h1>My WordPress Blog</h1> <h4>Posts</h4> */} {data.allWpPost.nodes.map(node => ( <div key={node.slug}> <Link to={node.slug}> <h2>{node.title}</h2> </Link> <div dangerouslySetInnerHTML={{ __html: node.excerpt }} /> </div> ))} </Layout> ) } export const pageQuery = graphql` query { allWpPost(sort: { fields: [date], order: DEC }) { nodes { title excerpt slug } } } `

Kami mengimpor Link dari Gatsby dan kemudian membungkus judul posting dengan Link dan mereferensikan siput posting. Mari bersihkan kode dengan mengomentari judul halaman, mengubah elemen judul menjadi <h2> , dan menambahkan urutan posting yang diurutkan ke DEC dalam graphql kami serta file gatsby-node.js .

Seperti yang kita lakukan sebelumnya, mari berhenti dan restart server pengembangan dengan gatsby develop , dan lihat beranda kita di http://localhost:8000 . Judul posting harus terhubung ke halaman posting tunggal.

Sejauh ini kita akan menggunakan metode kedua ini. Sisa dari apa yang kami bahas akan menjelaskan cara mengambil item menu dan menanyakan tipe data lain – seperti jenis posting khusus – dan mengkonfigurasi build dan pratinjau tambahan dll.

Anda dapat menerapkan prosedur yang sama untuk memanggil dan membuat halaman, jenis posting kustom, kolom kustom, taksonomi, dan semua konten menyenangkan dan fleksibel yang dikenal dengan WordPress. Ini bisa sesederhana atau serumit yang Anda inginkan, jadi jelajahi dan bersenang-senanglah dengannya!

Dok tutorial Gatsby

Opsi 3: Menggunakan Gatsby's WordPress Twenty Twenty Starter

Template starter Gatsby untuk tema default WordPress Twenty Twenty dibuat dan dikelola oleh Henrik Wirth , yang juga memiliki panduan langkah demi langkah yang sangat rinci dan menyeluruh yang mungkin Anda ingat dari artikel saya sebelumnya. Starter ini, tidak seperti yang lain, sebenarnya diupdate ke versi 4 dari Gatsby Source Plugin dan bekerja langsung setelah penyiapan awal WordPress yang dijelaskan dalam dokumentasi . Ini mempertahankan gaya Dua Puluh Dua Puluh yang sama di situs front-end Gatsby, tetapi memiliki beberapa batasan – termasuk, komentar, halaman arsip bulanan, dan tag – yang tidak didukung.

Pertama, mari kita mengkloning starter di folder twenty-twenty-starter

 #! clone gatsby-starter-wordpress-twenty-twenty gatsby new twenty-twenty-starter https://github.com/henrikwirth/gatsby-starter-wordpress-twenty-twenty

Mari cd ke folder itu dan kemudian jalankan gatsby develop untuk menjalankan situs. Ini tidak akan berfungsi dengan baik pertama kali karena kami belum mengubah nilai WPGRAPHQL_URL kami di file env.example Kita perlu mengubah nama file dari .env.example untuk hanya .env , seperti yang disarankan dalam dokumentasi.

Setelah itu, restart server pengembangan dengan gatsby develop . Itu harus membangun situs dengan sukses.

Menu mungkin muncul atau tidak tergantung pada bagaimana menu WordPress dinamai. Siput menu pemula untuk menanyakan item menu adalah yang primary di Menu.js (baris 8). Karena saya telah mengatur situs WordPress saya menggunakan main-menu , saya harus memperbarui file Menu.js

Tangkapan layar menunjukkan file Menu.js dengan slug menu yang diubah menjadi "menu-utama" di baris 8.

Karena starter telah diuji dengan versi alat kami yang lebih lama, saya memutuskan memasang plugin ke versi terbaru – WPGraphQL 1.2.6, WPGatsby 1.0.6, dan Gatsby Source WordPress 4.0.1 – dan berfungsi dengan baik tanpa kesalahan.

Twenty Twenty starter mengikuti struktur file tema Twenty Nineteen Gatsby , serta Gatsby Starter WordPress Advanced . Henrik Wirth menjelaskan bagaimana data WordPress di-porting ke Gatsby dalam panduan langkah demi langkahnya , seperti halnya Muhammad Muhsin dalam tutorial . Jika tidak, membuat halaman, templat halaman, item menu porting persis sama.

Tangkapan layar yang menampilkan struktur file Gatsby Starter WordPress Twenty Twenty.

Pemula ini menggunakan CSS yang sama dengan tema default WordPress Twenty Twenty, dan folder aset yang sama, termasuk font, gambar, file SVG, dan file lain yang termasuk dalam tema default.

Tangkapan layar yang menunjukkan konten folder Gatsby Starter WordPress Twenty Twenty assets terbuka di VS Code.

Jika Anda senang dengan gaya WordPress Twenty Twenty, maka itu saja. Nikmati situs Gatsby terpisah Anda yang baru!

Tapi katakanlah kita ingin bekerja dengan gaya kustom. File CSS diimpor dari assets melalui file gatsby-browser.js .

Tangkapan layar yang menampilkan file Gatsby StarterWordPress Twenty Twenty style.css dibuka di sebelah file style.css tema Twenty Twenty WordPress. Keduanya mengandung kode yang sama persis.

Mari memodifikasi gaya untuk header, footer, posting, dan halaman situs. Gatsby menyediakan opsi berbeda untuk menata komponennya dan, dalam proyek ini, saya mengikuti modul CSS untuk menata dan memodifikasi markup CSS dari komponen awal Twenty Twenty.

Kita bisa mulai dengan membuat folder gaya di src/components/styles dan, di dalamnya, folder base Inilah struktur file umum yang kami tuju:

 #! partial structure of /style folder src |--/components |--/styles |--main.css |--/base |--reset.css |--variables.css |--/scss |--header.module.css |--mainNav.module.css |--footer.module.css |--elements.module.css // and so on...

Kami ingin gaya header situs dan footer, jadi mari kita membuka Header.js dan Footer.js komponen dalam starter dan mengganti kode dengan berikut:

 // src/components/Header.js import React from "react" import { graphql, Link, useStaticQuery } from "gatsby" import Menu from "./menu" import style from "../styles/scss/header.module.css" import logo from '../images/gatsby-icon.png' const Header = ( ) => { const { wp } = useStaticQuery(graphql` { wp { generalSettings { title description } } } `) return ( <header className={style.masthead}> <div className={style.masthead_info}> <Link to="/"> <img src={logo} alt="logo" width="100" height="100" display="inline-block" marginBottom= "0" className={style.site_logo} /> </Link> <div className={style.site_header} > <div className={style.site_title}> <Link to="/" dangerouslySetInnerHTML={{ __html: wp.generalSettings.title }} /> </div> <div className={style.site_description} dangerouslySetInnerHTML={{ __html: wp.generalSettings.description }} /></div> </div> <Menu /> </header> ) } export default Header

Demikian pula, Footer.js telah dimodifikasi sebagai berikut:

 // src/components/Footer.js import React from "react" import style from "../styles/scss/footer.module.css" export default () => ( <footer className={style.colophon}> <p>© {new Date().getFullYear()} | This site is Powered by {' ' } <a href="https://www.gatsbyjs.org">GatsbyJS</a> {' and '} <a href="https://www.wordpress.org">WordPress</a></p> </footer> )

Sekarang, mari mulai ulang server pengembangan kita. Kita akan melihat yang berikut ini, termasuk header dan footer baru yang disesuaikan. Saya menggunakan gaya yang sama dari Learning Gatsby yang merupakan kursus online oleh Morten Rand-Hendriksen (Saya seorang penggemar!).

Tangkapan layar yang menampilkan gaya header dan footer yang dimodifikasi.
Tangkapan layar yang menampilkan gaya header dan footer yang dimodifikasi.

Anda dapat mengambil semua kode yang saya gunakan di GitHub .

Apa arti semua ini bagi penggemar WordPress

Ada banyak posting yang membandingkan keuntungan dan kerugian situs WordPress dan Jamstack yang dipisahkan seperti contoh Gatsby yang telah kami bahas. Dalam penelitian saya, saya menyadari bahwa tidak ada yang selengkap apa yang telah ditulis Chris di "WordPress dan Jamstack" di mana dia membandingkan semuanya, mulai dari kinerja dan fitur, hingga pengalaman pengembang dan proses pembuatan, dan seterusnya.

Saya menemukan artikel berikut menarik beberapa kesimpulan bermanfaat tentang berbagai topik, termasuk:

Berapa biayanya?

Asumsi umum adalah bahwa hosting Jamstack murah, dan lebih murah daripada hosting tumpukan LAMP tradisional. Namun sebenarnya ada sedikit hal yang perlu dipertimbangkan dan biaya Anda yang sebenarnya mungkin berbeda.

  • “Cara Menjalankan Situs WordPress Anda di Lokal, Gatsby, dan Netlify GRATIS!” (Nate Fitch): Pendapat Nate adalah bahwa pengaturan WordPress tanpa kepala seperti ini mungkin merupakan pilihan yang baik jika proyeknya adalah blog statis atau situs yang tidak memerlukan interaksi apa pun. Misalnya, tidak perlu terlalu banyak pekerjaan untuk mendapatkan gambar yang dihosting di Cloudinary , atau CDN lain, tetapi untuk situs besar dan interaktif.
  • “WordPress dan Jamstack” (Chris Coyier): Ada bagian khusus di sini tempat Chris menguraikan harga untuk berbagai jenis hosting untuk situs Jamstack dan mengapa pernyataan umum seperti “Jamstack lebih murah” tidak berlaku karena biaya sebenarnya bergantung di situs dan penggunaannya.
  • “Memilih antara Netlify, Vercel dan Digital Ocean” oleh (Zell Liew): Zell membahas pengalamannya memilih paket hosting. Pendapatnya: Jika Anda memiliki proyek kecil, gunakan Netlify; jika Anda memiliki proyek yang lebih besar, gunakan Digital Ocean.

Mengapa menjadi statis?

Mempertimbangkan semua hal yang Anda dapatkan secara "gratis" di WordPress – pikirkan komentar, plugin, integrasi, dll. – Anda mungkin bertanya-tanya apakah itu bahkan layak untuk diperdagangkan dalam pengaturan sisi server untuk solusi sisi klien. Dalam "Static or Not?" posting, Chris merinci alasan mengapa Anda ingin memilih satu dari yang lain.

Bagaimana kami mendapatkan fungsionalitas berkomentar?

Kami mendapatkan komentar asli langsung dari kotaknya dengan WordPress. Namun, dukungan untuk komentar di situs statis adalah sedikit raksasa. Dalam “JAMstack Comments” di CSS-Tricks, penulis menjelaskan bagaimana komentar dinamis dapat diimplementasikan di situs statis, seperti Gatsby, menggunakan layanan Netlify . Saya secara singkat menyinggung hal ini di artikel saya sebelumnya.

Bagaimana dengan SEO?

  • “Gatsby SEO Untuk WpGraphQL dan Yoast” (Plugin Komunitas Gatsby): Plugin Yoast SEO yang banyak digunakan untuk WordPress dapat diintegrasikan ke dalam front-end Gatsby menggunakan plugin ini.
  • “Dasar tentang JavaScript SEO untuk WordPress” (Jono Alderson): Panduan lengkap ini mencakup bagian tentang cara mengintegrasikan Yoast SEO ke dalam arsitektur tanpa kepala dan implikasi dari mengandalkan JavaScript untuk SEO. Intinya adalah bahwa pengembang tema dan plugin tidak perlu terlalu khawatir tentang perubahan lanskap JavaScript dan SEO selama mereka terus mengikuti praktik terbaik. Pada saat yang sama, mereka harus menyadari apa yang berubah dan menyesuaikannya.

Bagaimana segala sesuatunya bekerja sama?

Saat ini tidak ada template Gatsby React yang ditujukan untuk non-pengembang tetapi beberapa agensi, seperti Gatsby WP Themes dan pasar Themeforest , mulai mengisi celah tersebut. Misalnya, Tema Gatsby WP mencakup plugin untuk konten dinamis seperti integrasi MailChimp, menggunakan plugin Formulir Kontak 7 untuk formulir, Yoast SEO , dan banyak lagi. Themeforest mencantumkan 30+ template Gatsby , termasuk Gatsby – WordPress + tema eCommerce yang memberi Anda gambaran tentang seberapa jauh kita dapat melangkah dengan pengaturan semacam ini. Ingat saja: ini adalah situs komersial, dan banyak dari apa yang akan Anda temukan memiliki biaya yang menyertainya.

Pandangan pribadi saya yang terus berkembang

Jika Anda ingat, saya mengakhiri artikel terakhir saya dengan refleksi pribadi tentang perjalanan saya membuat situs WordPress tanpa kepala yang menggunakan Gatsby sebagai ujung depannya. Pengambilan awal saya kurang dari ulasan yang bersinar:

Berdasarkan pengalaman saya yang sangat terbatas, saya pikir tema Gatsby WordPress yang tersedia saat ini belum siap digunakan untuk prime time bagi pengguna seperti saya. Ya, sangat mengasyikkan untuk mencoba sesuatu yang terbaru yang jelas ada di benak banyak pengguna dan pengembang WordPress. Pada saat yang sama, pekerjaan yang terus berkembang yang sedang dilakukan pada editor blok WordPress, plugin WPGraphQL dan Gatsby Source WordPress membuatnya sulit untuk memprediksi ke mana arahnya dan kapan akan berubah menjadi keadaan di mana aman untuk digunakan dalam konteks lain.

Jadi, setelah semua perjalanan panjang saya ke situs WordPress tanpa kepala, apa pendapat saya sekarang? Sebagai pembelajar yang berpikiran terbuka, pikiran saya masih berkembang. Tapi saya sangat setuju dengan apa yang dikatakan Chris dalam "Static or Not?" pos:

Ini adalah pilihan yang sangat dapat diterima dan sering kali cerdas untuk menjalankan situs WordPress. Saya memikirkannya dalam hal ketahanan dan kesiapan fitur. Butuh e-commerce? Itu disana. Butuh formulir? Ada plugin yang bagus. Perlu meningkatkan cara kerja CMS? Anda memiliki kendali atas jenis konten dan apa yang ada di dalamnya. Perlu autentikasi? Itu adalah fitur inti. Berharap Anda memiliki pengalaman pengeditan yang hebat? Gutenberg sangat mulia.

Saya seorang penggemar WordPress dan saya menyukai WordPress sebagai CMS. Namun, sebagai tantangan pembelajaran teknologi, saya belum menyerah untuk memiliki situs WordPress yang dipisahkan sebagai proyek pribadi.

Saya harus mengakui bahwa belajar membuat situs Gatsby terpisah dengan WordPress terus membuat frustrasi. Saya mengakui bahwa tumpukan teknologi modern bukanlah "secangkir teh" bagi banyak pengguna WordPress. Gatsby memiliki kurva pembelajaran yang curam karena tumpukan ini ditargetkan untuk pengembang React dan JavaScript yang berpengalaman.

Mempelajari sendiri teknologi baru bisa menjadi pengalaman yang membuat frustrasi. Mempelajari Gatsby sangat membuat frustasi jika kami (termasuk milik Anda benar-benar) kebetulan kurang pengalaman dengan Node , React , JavaScript dan, yang paling penting, GraphQL . Situs proyek pembelajaran saya akan rusak karena beberapa ketergantungan dan memperbaikinya mungkin memerlukan waktu beberapa hari untuk penelitian. Saya terkadang bertanya-tanya apakah masalahnya sepadan dengan hasilnya. Jangan salah paham; frustrasi saya adalah dengan kurangnya pengalaman saya sendiri, bukan kerangka itu sendiri (karena mereka luar biasa).

Bahkan pengembang berpengalaman seperti David Cramer dan Jared Palmer merasa menggunakan Gatsby dan GraphQL membuat frustrasi dan menggemakan beberapa sentimen yang sama yang kita hadapi pemula saat menggunakan GraphQL. Saya sangat setuju dengan David yang menulis:

Ini adalah generator situs web statis. Ini benar-benar tidak membutuhkan GraphQL di semua tempat. Meskipun ada beberapa contoh di dunia nyata yang berharga, tidak diperlukan API GraphQL untuk membaca objek yang sudah ada di memori.

GraphQL adalah API bahasa kueri beropini dan spesifikasinya sering berubah. Memang, sebagian besar diskusi di WPGraphQL Slack terkait dengan kueri.

Saat mengerjakan proyek ini, saya menemukan Frontity React Framework saat membaca artikel tentang CSS-Tricks . Itu mengambil semua data WordPress dengan REST API tanpa menulis satu kueri pun. Tampaknya itu opsi yang lebih baik, setidaknya untuk kasus penggunaan saya. Selain itu, ini tampaknya menjadi alternatif yang jauh lebih sederhana. Dalam pengalaman singkat saya dengannya, saya tidak harus berurusan dengan ketergantungan atau masalah perpustakaan sama sekali. Konsep tema Frontity sangat mirip dengan WordPress-y dan menyediakan tutorial yang sangat bagus.

Saat ini saya sedang menjajaki apakah kerangka kerja Frontity akan menjadi pilihan yang lebih baik untuk situs proyek terpisah saya dan akan berbagi pengalaman saya di artikel mendatang.

Sumber daya

Gatsby sepertinya ditargetkan untuk developer React dan JavaScript yang berpengalaman, bukan untuk pemula seperti saya! gatsby-source-wordpress dan gatsby-source-wpgraphql melakukan pekerjaan yang sangat baik untuk mengekspos data WordPress ke situs Gatsby, tetapi sisanya terserah pengguna untuk menyajikan data di ujung depan menggunakan kerangka pilihan Anda: React , Vue , Selanjutnya , dll.

Kurangnya pengetahuan suara tentang React dan JavaScript adalah rintangan utama bagi pemula. Komunitas Gatsby mengisi banyak celah ini, dan ada banyak sumber daya yang tersedia untuk terus belajar dan menjelajah.

Gatsby Conference 2021 berbicara

Dua pembicaraan lokakarya dari Konferensi Gatsby 2021 baru-baru ini terkait dengan situs WordPress Gatsby. Salah satunya, Jason Bahl menyelenggarakan lokakarya yang membahas cara membuat blog Gatsby yang didukung oleh data WordPress, termasuk mendukung plugin Yoast SEO, dan cara menerapkan situs ke Gatsby Cloud .

Ada bengkel lain yang diselenggarakan oleh Matt Landers dari WP Engine di mana dia mendemonstrasikan cara mengatur berbagai hal menggunakan plugin Bidang Kustom Lanjutan untuk membuat halaman anggota tim.

Kedua pembicaraan itu bagus, terutama jika Anda belajar lebih baik dengan pengalaman langsung. Saya juga menemukan episode podcast Matt Report ini dengan Jason Bahl di mana Jason menjawab pertanyaan dasar yang ditujukan untuk pemula.

Kursus tutorial

Morten Rand-Hendriksen memiliki kursus luar biasa tentang Pembelajaran LinkedIn yang menggunakan plugin Gatsby Source WordPress. Jika Anda tertarik dengan pengalaman yang lebih langsung dalam membuat situs kustom yang dikembangkan pada dua permulaan Gatsby yang kami bahas, kursus ini sangat bagus karena dalam mengajarkan cara membuat situs yang berfungsi lengkap, lengkap dengan navigasi header dropdown, menu footer, posting , halaman, kategori, tag, dan navigasi halaman.

Lihat itu, beranda, templat posting, kategori, tag, tajuk yang menyertakan navigasi… ada banyak hal yang terjadi di sini!

File latihan untuk kursus tersedia di repositori GitHub LinkedIn Learning.

Pemula Gatsby

Saat saya menulis ini, ada sepuluh pemula Gatsby untuk WordPress. Seperti yang kami sebutkan sebelumnya, hanya Gatsby Starter WordPress Twenty Twenty yang didasarkan pada versi terbaru plugin Gatsby Source WordPress; sisanya adalah versi 3.


Terima kasih sudah membaca. Saya selalu tertarik untuk mengetahui bagaimana sesama pengguna WordPress yang tidak memiliki pengalaman teknis berat seperti saya menggunakan plugin ini. Jika Anda memiliki umpan balik, jangan ragu untuk mempostingnya di komentar.


Postingan Menggunakan Plugin WordPress Sumber Gatsby Baru muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

April 23, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *