Các trang web WordPress nhanh hơn với Gatsby
Nói về các công nghệ web tiên tiến nhất và bạn sẽ tìm thấy một số cái tên ấn tượng như React.js, Vue.js, Next.js, v.v. Họ đã mở ra những cánh cổng và cách tiếp cận mới để xây dựng các trang web có thể phục vụ nội dung cho user một cách nhanh chóng.
Một khung công tác có thể tăng tốc độ trang web tổng thể và thời gian tải là Gatsby.js .
Mục tiêu của một trang web nhanh
Một trang web tải nhanh đòi hỏi các quyền và lợi ích sau dành cho nhà phát triển:
- Lưu lượng truy cập và mức độ tương tác : Bạn nhận được nhiều khách truy cập trang web hơn trên một trang web nhanh chóng, điều này dẫn đến ROI và mức độ tương tác của user tốt hơn.
- Xếp hạng Trang : Các trang web nhanh kiếm được thứ hạng trình duyệt cao hơn.
Cải thiện tốc độ trang web với Gatsby.js và WordPress
Gatsby.js là một framework dựa trên React.js open-souce và miễn phí giúp các nhà phát triển xây dựng các trang web và ứng dụng. Đây là một phần của xu hướng chung đối với các trang web JAMstack (JavaScript APIs Markup) , nhằm mục đích tăng tốc độ trang web tổng thể và thời gian tải.
Nhưng Gatsby phù hợp với WordPress ở đâu, một trong những tùy chọn CMS được sử dụng rộng rãi nhất hiện nay? Mặc dù khả năng sử dụng và cộng đồng mạnh mẽ của nó, WordPress có thể đặt ra những thách thức đối với việc xây dựng giao diện user hiện đại, vì những lý do sau:
- Cập nhật và thay đổi : WordPress được cập nhật thường xuyên, nhưng nó vẫn thiếu tính ngang bằng với các công nghệ front-end thay đổi nhanh chóng khác. Luôn cập nhật những công nghệ này sẽ tạo thêm gánh nặng cho nhà phát triển.
- Tích hợp và triển khai liên tục : Hiện tại, rất ít tùy chọn Tích hợp / Triển khai liên tục (CI / CD) tồn tại trong hệ sinh thái WordPress.
- Chi phí tích hợp : Có thể là một thách thức để tích hợp một số công nghệ front-end mới nhất với một ứng dụng WordPress.
Sử dụng Gatsby có thể giải quyết một số hạn chế này. Trong các bước sau, ta sẽ hướng dẫn bạn cách tích hợp Gatsby với WordPress để tận dụng tối đa cả hai. Đầu tiên, ta sẽ cấu hình cài đặt dự án Gatsby cơ bản. Sau đó, ta sẽ sử dụng nó để tìm nạp dữ liệu từ trang WordPress của ta .
Tích hợp Gatsby.js với WordPress
Đầu tiên, ta sẽ cài đặt một dự án Gatsby demo.
Cài đặt Gatsby CLI bằng lệnh lệnh sau vào terminal của bạn:
- npm install -g gatsby-cli
Tiếp theo, tạo một trang Gatsby mới bằng lệnh sau:
- gatsby new site-name
Để truy cập nội dung folder trang web , hãy nhập như sau:
- cd site-name
Cuối cùng, khởi động server phát triển để bắt đầu xây dựng trang web :
- gatsby develop
Cài đặt Plugin gatsby-source-wordpress
Giả sử rằng bạn đã cài đặt một trang web WordPress và bạn muốn có một giao diện user được xây dựng với Gatsby.js, tất cả những gì bạn cần làm là kéo dữ liệu trang web hiện có của bạn vào trang Gatsby tĩnh của bạn. Bạn có thể làm điều đó với plugin gatsby-source-wordpress .
Hướng dẫn này sử dụng trang web WordPress REST API mặc định, mặc dù bạn có thể tự do sử dụng cài đặt WordPress có sẵn nếu có.
Bên trong terminal của bạn, nhập thông tin sau để cài đặt plugin này:
- npm install gatsby-source-wordpress
Cấu hình Plugin
Bên trong file gatsby-config.js , file cấu hình Gatsby chính, bạn sẽ thêm một số tùy chọn cấu hình dành riêng cho WordPress. Chúng bao gồm baseUrl của trang web WordPress của bạn, protocol HTTP ưa thích và các cài đặt liên quan đến plugin Trường tùy chỉnh nâng cao (ACF) . Các includedRoutes lĩnh vực quy định cụ thể các dữ liệu ta muốn lấy.
Sử dụng trang web WordPress demo từ bước trên, giao diện user hiện tại trông giống như sau:
Với mục đích của hướng dẫn này, hãy thêm mã sau vào file có tên gatsby-config.js :
module.exports = { // ... plugins: [ // ... { resolve: `gatsby-source-wordpress`, options: { // Your WordPress source. baseUrl: `demo.wp-api.org`, protocol: `https`, // Only fetches posts, tags and categories from the baseUrl. includedRoutes: ['**/posts', '**/tags', '**/categories'], // Not using ACF so putting it off. useACF: false } }, ], } Sử dụng dữ liệu WordPress đã tìm nạp
Khi trang web Gatsby của bạn đang tìm nạp dữ liệu từ URL nguồn WordPress của bạn, đã đến lúc tạo các trang trên trang web . Điều này được thực hiện bằng cách triển khai API createPages trong file gatsby-node.js , làm cho dữ liệu đã tìm nạp có sẵn cho các truy vấn từ GraphQL. Tại thời điểm xây dựng, plugin gatsby-source-wordpress tìm nạp dữ liệu và sử dụng nó để "tự động suy ra một schemas GraphQL" mà bạn có thể truy vấn.
Thêm mã sau vào file có tên gatsby-node.js :
/** * Implement Gatsby's Node APIs in this file. * * See: https://www.gatsbyjs.org/docs/node-apis/ */ // You can delete this file if you're not using it const path = require(`path`); const slash = require(`slash`); /** STEP #1: Implement the Gatsby API “createPages”. This is * called after the Gatsby bootstrap is finished so you have * access to any information necessary to programmatically * create pages. * Will create pages for WordPress pages (route : /{slug}) * Will create pages for WordPress posts (route : /post/{slug}) */ exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions; // STEP #2: Query all WordPress Posts Data. /** The “graphql” function allows us to run arbitrary * queries against the local Gatsby GraphQL schema. Think of * it like the site has a built-in database constructed * from the fetched data that you can run queries against. */ const result = await graphql(` { allWordpressPost { edges { node { id slug status template format } } } } `); // Check for any errors if (result.errors) { throw new Error(result.errors); } // Access query results via object destructuring. const { allWordpressPost } = result.data; const postTemplate = path.resolve(`./src/templates/post.js`); // STEP #3: Create pages in Gatsby with WordPress Posts Data. /** * We want to create a detailed page for each * post node. We'll just use the WordPress Slug for the slug. * The Post ID is prefixed with 'POST_' */ allWordpressPost.edges.forEach(edge => { createPage({ path: `/${edge.node.slug}/`, component: slash(postTemplate), context: { id: edge.node.id } }); }); }; Điều này sẽ lặp lại qua dữ liệu bài đăng WordPress hiện có.
Bước # 4: Tạo Mẫu post.js
Tiếp theo, ta sẽ tạo một folder cho các mẫu, nơi bạn có thể thêm file cho bài đăng, trang và bố cục. Hiện tại, ta sẽ tạo một file post.js để tìm nạp các bài đăng từ trang WordPress của ta .
Thêm mã sau vào file :
import { graphql } from 'gatsby'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import Layout from '../layouts'; class PostTemplate extends Component { render() { const post = this.props.data.wordpressPost; // STEP #5: Use title and content in Gatsby. return ( <Layout> <h1 dangerouslySetInnerHTML={{ __html: post.title }} /> <div dangerouslySetInnerHTML={{ __html: post.content }} /> </Layout> ); } } PostTemplate.propTypes = { data: PropTypes.object.isRequired, edges: PropTypes.array }; export default PostTemplate; // STEP #4: Get current WP Post data via ID. export const pageQuery = graphql` query($id: String!) { wordpressPost(id: { eq: $id }) { title content } } `; Kiểm tra kết quả cuối cùng
Để khởi động server phát triển và xem kết quả cuối cùng, hãy nhập lệnh sau vào terminal của bạn:
- npm start
Bạn sẽ nhận được liên kết nơi bạn có thể truy cập trang web local , cùng với các chi tiết khác như số lượng posts , categories và tags đang được tìm nạp.
Đây là một GIF minh họa điều này sẽ trông như thế nào:
Hãy cùng xem giao diện user được tân trang này hiện được hỗ trợ bởi Gatsby.js và giao diện user WordPress:
Bạn có thể thấy cách ứng dụng của ta chỉ tìm nạp dữ liệu cần thiết từ trang WordPress. Điều này bao gồm các posts , tags và categories . Để lấy các loại dữ liệu như các widget hoặc ý kiến, bạn cần phải thêm các giá trị phù hợp với includedRoutes tùy chọn.
Kết luận
Theo hướng dẫn này, bây giờ bạn đã có phần backend ứng dụng WordPress được tích hợp với giao diện user Gatsby.js. Gatsby cung cấp trải nghiệm web nhanh chóng và mang lại những lợi ích bổ sung có thể nâng cao trang web WordPress hiện có của bạn. Đến đây bạn có một nền tảng để thử nghiệm thêm với việc sử dụng Gatsby để tăng sức mạnh cho trang web ,
Các tin liên quan
