Các công nghệ web tiên tiến mới nhất

Mục tiêu của một trang web nhanh

Một trang web tải nhanh mang lại những lợi ích sau cho các nhà phát triển:

• Lưu lượng truy cập và tương tác: Bạn sẽ có nhiều người truy cập hơn trên một trang web nhanh, điều này chuyển thành ROI tốt hơn và sự tương tác của người dùng.
• Xếp hạng trang: Các trang web nhanh sẽ được xếp hạng cao hơn trên trình duyệt.

<details class="collapsible" open=""> <summary>

Cải thiện tốc độ trang với Gatsby.js và WordPress

</summary>

Gatsby.js là một framework miễn phí và mã nguồn mở dựa trên React.js giúp các nhà phát triển xây dựng các trang web và ứng dụng. Nó là một phần của xu hướng chung về các trang JAMstack (JavaScript APIs Markup), nhằm tăng tốc độ và thời gian tải trang tổng thể.

Nhưng Gatsby phù hợp như thế nào với WordPress, một trong những hệ thống quản lý nội dung (CMS) được sử dụng rộng rãi nhất hiện nay? Mặc dù WordPress rất dễ sử dụng và có cộng đồng mạnh mẽ, nhưng nó có thể gây ra một số thách thức khi xây dựng front-end hiện đại, bởi những lý do sau:

• Cập nhật và thay đổi: WordPress được cập nhật thường xuyên, nhưng vẫn chưa theo kịp các công nghệ front-end phát triển nhanh. Việc cập nhật các công nghệ này tạo thêm gánh nặng cho nhà phát triển.
• Tích hợp liên tục và triển khai: Hiện tại, có rất ít các lựa chọn tích hợp và triển khai liên tục (CI/CD) trong hệ sinh thái WordPress.
• Chi phí tích hợp: Việc tích hợp một số công nghệ front-end mới nhất với ứng dụng WordPress có thể gặp khó khăn.

Việc sử dụng Gatsby có thể giải quyết một số hạn chế này. Trong các bước tiếp theo, chúng tôi 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, chúng ta sẽ cấu hình một dự án Gatsby cơ bản. Sau đó, dùng nó để lấy dữ liệu từ trang WordPress của bạn. </details>

<details class="collapsible" open=""> <summary>

Tích hợp Gatsby.js với WordPress

</summary>

Đầu tiên, chúng ta sẽ thiết lập một dự án Gatsby demo.

Cài đặt Gatsby CLI bằng lệnh sau trong terminal:

npm install -g gatsby-cli

Tiếp theo, tạo một trang Gatsby mới với lệnh:

gatsby new site-name

Để truy cập vào thư mục trang của bạn, nhập:

cd site-name

Cuối cùng, khởi động máy chủ phát triển để bắt đầu xây dựng trang của bạn:

gatsby develop

</details>

<details class="collapsible" open=""> <summary>

Cài đặt plugin gatsby-source-wordpress

</summary>

Giả sử bạn đã có một trang WordPress được thiết lập, và muốn có một frontend xây dựng bằng Gatsby.js, tất cả những gì bạn cần làm là kéo dữ liệu từ trang hiện tại của bạn vào trang Gatsby tĩnh.

Hướng dẫn này sử dụng trang WordPress REST API mặc định, tuy nhiên bạn hoàn toàn có thể dùng một trang WordPress hiện có nếu bạn có.

Trong terminal, gõ lệnh sau để cài đặt plugin:

npm install gatsby-source-wordpress

</details>

<details class="collapsible" open=""> <summary>

Cấu hình Plugin

</summary>

Trong file <code>gatsby-config.js</code>, file cấu hình chính của Gatsby, bạn sẽ thêm các tùy chọn cấu hình đặc thù cho WordPress. Bao gồm <code>baseUrl</code> của trang WordPress, giao thức HTTP ưa thích <code>protocol</code>, và các cài đặt liên quan đến plugin Advanced Custom Fields (ACF). Trường <code>includedRoutes</code> chỉ định dữ liệu mà chúng ta muốn lấy.

Cho mục đích hướng dẫn, bạn thêm đoạn mã sau vào file <code>gatsby-config.js</code>:

module.exports = {
  // ...
  plugins: [
    // ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // WordPress nguồn của bạn.
            baseUrl: `demo.wp-api.org`,
            protocol: `https`,
            // Chỉ lấy bài đăng, thẻ và danh mục từ baseUrl.
            includedRoutes: ['**/posts', '**/tags', '**/categories'],
            // Không sử dụng ACF nên đặt false.
            useACF: false
        }
    },
  ],
}

</details>

<details class="collapsible" open=""> <summary>

Sử dụng dữ liệu WordPress lấy được

</summary>

Sau khi trang Gatsby của bạn lấy dữ liệu từ nguồn WordPress, đã đến lúc tạo các trang cho trang web. Việc này được thực hiện bằng cách triển khai API <code>createPages</code> trong file <code>gatsby-node.js</code>, cho phép dữ liệu lấy được truy vấn bằng GraphQL. Khi build, plugin <code>gatsby-source-wordpress</code> sẽ lấy dữ liệu và “tự động suy luận schema GraphQL” để bạn có thể truy vấn.

Thêm đoạn mã sau vào file <code>gatsby-node.js</code>:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

// Bạn có thể xóa file này nếu không dùng

const path = require(`path`);
const slash = require(`slash`);

// Bước #1: Triển khai API Gatsby createPages
exports.createPages = async ({ graphql, actions }) => {
	const { createPage } = actions;

	// Bước #2: Truy vấn tất cả dữ liệu bài đăng WordPress.
	const result = await graphql(`
		{
			allWordpressPost {
				edges {
					node {
						id
						slug
						status
						template
						format
					}
				}
			}
		}
	`);

	// Kiểm tra lỗi
	if (result.errors) {
		throw new Error(result.errors);
	}

	// Truy cập kết quả truy vấn bằng destructuring
	const { allWordpressPost } = result.data;

	const postTemplate = path.resolve(`./src/templates/post.js`);

	// Bước #3: Tạo trang trong Gatsby với dữ liệu bài đăng WordPress
	allWordpressPost.edges.forEach(edge => {
		createPage({
			path: `/${edge.node.slug}/`,
			component: slash(postTemplate),
			context: {
				id: edge.node.id
			}
		});
	});
};

Đoạn mã trên sẽ lặp qua dữ liệu các bài đăng WordPress hiện có.

</details>

<details class="collapsible" open=""> <summary>

Bước 4: Tạo template <code>post.js</code>

</summary>

Tiếp theo, tạo một thư mục templates, nơi bạn có thể thêm file cho các bài viết, trang và layouts. Hiện tại, tạo file <code>post.js</code> để lấy bài viết từ trang WordPress.

Thêm đoạn 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;

		// Bước 5: Sử dụng title và content trong 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;

// Bước 4: Lấy dữ liệu bài đăng WP theo ID.
export const pageQuery = graphql`
	query($id: String!) {
		wordpressPost(id: { eq: $id }) {
			title
			content
		}
	}
`;

</details>

<details class="collapsible" open=""> <summary>

Kiểm tra kết quả cuối cùng

</summary>

Để khởi động máy chủ phát triển và xem kết quả cuối, gõ lệnh sau trong terminal:

npm start

Bạn sẽ nhận được link truy cập trang web cục bộ, cùng các thông tin như số lượng <code>posts</code>, <code>categories</code> và <code>tags</code> được lấy.

Bạn có thể thấy ứng dụng của chúng ta chỉ lấy dữ liệu cần thiết từ trang WordPress, bao gồm <code>posts</code>, <code>tags</code> và <code>categories</code>. Để lấy dữ liệu các loại khác như widget hoặc bình luận, bạn cần thêm các giá trị phù hợp vào tuỳ chọn <code>includedRoutes</code>.

Kết luận

Bằng việc theo dõi hướng dẫn này, hiện bạn đã có một backend ứng dụng WordPress tích hợp với frontend Gatsby.js. Gatsby cung cấp trải nghiệm web nhanh và kèm theo các lợi ích bổ sung để nâng cao trang WordPress hiện có của bạn. Bạn đã có một nền tảng cho các thử nghiệm thêm sử dụng Gatsby điều khiển trang web của mình.