Membuat laman web Gatsby dengan data WordPress

Tutorial ini dibina pada artikel sebelumnya, menyediakan satu langkah terperinci untuk mengintegrasikan Gatsby dan WordPress. Faedah kelajuan dan keselamatan Gatsby merayu kepada pengguna WordPress, menawarkan cara untuk memanfaatkan kelebihan ini sambil mengekalkan pengalaman pengurusan kandungan WordPress yang biasa.

Panduan ini memberi tumpuan kepada pelaksanaan praktikal, menarik dari pelbagai sumber dan menangani cabaran yang berpotensi. Perhatikan bahawa WPGraphql dan Gatsby CLI secara aktif dibangunkan, bermakna keserasian versi adalah penting. Projek ini menggunakan WPGraphQL 0.8.3, gatsby-source-wpgraphql 2.5.1, dan Gatsby CLI 2.12.21. Sentiasa merujuk kepada dokumentasi rasmi untuk kemas kini terkini.

Beberapa pemula Gatsby yang sangat baik wujud, termasuk gatsby-wordpress-theme-blog Alexandra Spalato dan Zac Gordon dan Muhammad Muhsin twenty-nineteen-gatsby-theme .

Prasyarat

Untuk mengikuti, anda memerlukan:

• REACT BASIC dan pengetahuan JavaScript. Banyak sumber dalam talian menawarkan panduan pengenalan.
• Pemahaman mekanisme penciptaan halaman dinamik Gatsby. Tutorial komprehensif sedia ada.
• Pemasangan WordPress yang berfungsi. Banyak panduan wujud untuk membantu persediaan.

Memanfaatkan sumber yang ada

Projek ini mendapat manfaat daripada pengalaman Gatsby sebelum dan komponen yang boleh diguna semula (tipografi, susun atur, dan lain -lain). Sumber utama termasuk:

• Panduan Starter Gatsby WordPress Henrik Wirth.
• Jason Lenstorf's Jamstack Migration Tutorial.
• Panduan Muhammad Muhsin untuk memindahkan dua puluh sembilan belas tema.

Tutorial ini mencerminkan struktur Henrik Wirth, menghilangkan ciri -ciri canggih seperti pengendalian imej dan kandungan fleksibel ACF.

Fasa Projek:

1. Persediaan WordPress dan Gatsby
2. Penghijrahan kandungan
3. Pelaksanaan navigasi
4. Paparan pos blog
5. Gaya dan penempatan

Fasa 1: Menyediakan WordPress dan Gatsby

Mulailah dengan menubuhkan tapak WordPress (sedia ada atau baru, walaupun kerja pemasangan tempatan). Projek ini menggunakan dua puluh dua tema.

Pasang plugin penting

Pasang WPGraphQL (untuk API GraphQL) dan WPGraphIQL (pilihan, tetapi berguna untuk pertanyaan ujian). Plugin ini tidak boleh didapati di direktori plugin WordPress; Muat turunnya terus dari GitHub dan pasang secara manual. WPGraphIQL menyediakan antara muka ujian mudah dalam papan pemuka WordPress.

Inisialisasi tapak Gatsby

Buat laman web Gatsby tempatan menggunakan starter lalai:

 Gatsby WordPress-Gatsby Gatsby Baru https://github.com/gatsbyjs/gatsby-starter-default

Mulakan pelayan pembangunan ( gatsby develop ) dan akses halaman starter di localhost:8000 .

Pasang dan konfigurasikan plugin gatsby-source-graphql :

 Benang Tambah Gatsby-Source-Graphql # atau NPM Install-Save Gatsby-Source-Graphql

Konfigurasikan gatsby-config.js :

 modul.exports = {
  Plugin: [
    {
      Selesaikan: "Gatsby-Source-Graphql",
      Pilihan: {
        TypeName: "WPGraphql",
        FieldName: "WPContent",
        URL: "https://tinjurewp.com/wp-gatsby/graphql", // atau gunakan pembolehubah persekitaran
      },
    },
  ],
};

Pertimbangkan menggunakan modul dotenv untuk pembolehubah persekitaran untuk menguruskan data sensitif.

Selepas memulakan semula pelayan, API WPGraphql boleh diakses melalui Gatsby di https://localhost:8000/__graphql/ .

Fasa 2: Menghijrah kandungan WordPress

Gatsby mencipta halaman semasa proses membina dengan menanyakan data dengan GraphQL. Ini melibatkan penggunaan onCreateNode dan createPages Gatsby.

Penyediaan kandungan

Tambah jawatan dan halaman ke laman WordPress anda. Keluarkan index.js dan page-2.js dari folder Gatsby pages untuk mengelakkan konflik.

Penciptaan templat

Buat templat untuk jawatan ( /src/templates/post/index.js ) dan halaman ( /src/templates/page/index.js ):

 // src/templat/pos/index.js (contoh)
import bertindak balas daripada "bertindak balas";
susun atur import dari "../../components/layout";
import SEO dari "../../components/seo";

const post = ({pageContext}) => {
  const Post = pageContext.post;
  kembali (
    <layout>
      <seo title="{post.title}"></seo>
      <h1 id="post-title">{post.title}</h1>
      <div dangerouslysetinnerhtml="{{" __html: post.content></div>
    </layout>
  );
};

Pos lalai eksport;

Pelaksanaan API createPages

Gunakan API createPages Gatsby untuk menjana halaman dari data WordPress. Ini melibatkan pertanyaan GraphQL dan pemetaan data. (Rujuk kod lengkap dalam repositori GitHub yang dipautkan).

Fasa 3: Melaksanakan navigasi

Pengurusan navigasi WordPress membolehkan mewujudkan menu. Bahagian ini memberi tumpuan kepada memindahkan menu utama ke Gatsby.

Penciptaan Menu di WordPress

Buat menu yang dinamakan "Utama" dalam WordPress, menambah pautan ke laman utama anda, halaman sampel, dan kandungan lain yang berkaitan.

Pertanyaan graphql

Item menu pertanyaan menggunakan GraphIQL:

 pertanyaan myQuery {
  MenuItems (di mana: {lokasi: primary}) {
    nod {
      label
      url
      tajuk
      sasaran
    }
  }
}

Penciptaan komponen

Buat komponen untuk item menu ( MenuItem.js ) dan menu itu sendiri ( Menu.js ), mengendalikan penukaran URL dari laluan mutlak ke relatif. (Rujuk kod lengkap dalam repositori GitHub yang dipautkan).

Mengintegrasikan menu

Tambah komponen Menu ke komponen Layout anda. Melaksanakan komponen UniversalLink untuk mengendalikan pautan dalaman dan luaran.

Fasa 4: Memaparkan catatan blog

Fasa ini memberi tumpuan kepada mewujudkan templat pos blog dan komponen untuk penomboran.

Pembolehubah global

Buat fail globals.js untuk menguruskan tetapan seperti blogURI .

Templat blog

Buat templat blog ( /src/templates/post/blog.js ) untuk memaparkan jawatan, menggunakan komponen PostEntry dan Pagination .

Komponen kemasukan pos

Buat komponen PostEntry untuk memaparkan jawatan individu, termasuk imej dan petikan yang diketengahkan.

Komponen imej

Buat komponen Image untuk mengendalikan imej yang dipaparkan, termasuk imej sandaran.

Komponen Pagination

Buat komponen Pagination untuk menavigasi melalui jawatan paginated.

Refactoring createPages dan createPosts

Refactor createPages.js dan createPosts.js menggunakan serpihan GraphQL untuk meningkatkan organisasi kod dan mengekalkan. (Rujuk kod lengkap dalam repositori GitHub yang dipautkan).

Fasa 5: Gaya dan penempatan

Bahagian ini meliputi strategi gaya dan penempatan.

Gaya

Gunakan SASS atau kaedah pilihan lain untuk gaya. Pertimbangkan menggabungkan gaya blok WordPress menggunakan @wordpress/block-library .

Penggunaan

Gunakan Netlify atau platform lain untuk penggunaan berterusan. Pertimbangkan menggunakan plugin Jamstack Deployments untuk penyebaran automatik yang dicetuskan oleh perubahan WordPress.

Panduan komprehensif ini menyediakan asas yang kukuh untuk mengintegrasikan Gatsby dan WordPress. Ingatlah untuk berunding dengan repositori GitHub yang dipautkan untuk contoh kod lengkap dan butiran lanjut. Proses ini melibatkan beberapa langkah dan memerlukan pemahaman yang baik tentang Gatsby dan WordPress. Walau bagaimanapun, hasilnya adalah laman web yang cepat, selamat, dan dapat dipelihara.

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