使用Gatsby更快的WordPress网站

来自菜鸟教程
跳转至：导航、​搜索

谈论最新的尖端网络技术，你会发现一些令人印象深刻的名字，如 React.js、Vue.js、Next.js 等等。 他们开辟了新的门户和方法来构建可以快速为用户提供内容的网站。

Gatsby.js 是一种可以提高网站整体速度和加载时间的框架。

快速网站的目标

快速加载的网站为开发人员带来以下好处和好处：

  • 流量和参与度：您可以在快速网站上吸引更多网站访问者，这意味着更高的投资回报率和用户参与度。
  • 页面排名：快速网站获得更高的浏览器排名。

使用 Gatsby.js 和 WordPress 提高网站速度

Gatsby.js 是一个免费且开源的基于 React.js 的框架，可帮助开发人员构建网站和应用程序。 这是 JAMstack (JavaScript APIs Markup) 网站总体趋势的一部分，旨在提高网站的整体速度和加载时间。

但 Gatsby 与 WordPress（当今最广泛使用的 CMS 选项之一）在哪里匹配？ 尽管它的可用性和强大的社区，WordPress 可能对构建现代前端构成挑战，原因如下：

  • 更新和变化：WordPress 会定期更新，但与其他快速变化的前端技术相比仍然缺乏同等水平。 与这些技术保持同步为开发人员增加了额外的负担。
  • 持续集成和部署：目前，WordPress 生态系统中几乎没有持续集成/部署 (CI/CD) 选项。
  • 集成成本：将一些最新的前端技术与 WordPress 应用程序集成可能具有挑战性。

使用 Gatsby 可以解决其中的一些限制。 在以下步骤中，我们将向您展示如何将 Gatsby 与 WordPress 集成以充分利用两者。 首先，我们将配置一个基本的 Gatsby 项目设置。 然后，我们将使用它从我们的 WordPress 站点获取数据。

将 Gatsby.js 与 WordPress 集成

首先，我们将建立一个演示 Gatsby 项目。

通过在终端中键入以下命令来安装 Gatsby CLI： 

npm install -g gatsby-cli

接下来，使用以下命令创建一个新的 Gatsby 站点： 

gatsby new site-name

要访问您的站点文件夹内容，请键入以下内容： 

cd site-name

最后，启动开发服务器以开始构建您的站点： 

gatsby develop

安装 gatsby-source-wordpress 插件

假设您已经建立了一个 WordPress 站点，并且您希望使用 Gatsby.js 构建一个前端，您需要做的就是将现有站点数据拉入静态 Gatsby 站点。 您可以使用 gatsby-source-wordpress 插件来做到这一点。

本教程使用默认的 WordPress REST API 站点，但如果您有一个预先存在的 WordPress 设置，您可以自由使用。

在您的终端中，键入以下内容以安装此插件： 

npm install gatsby-source-wordpress

配置插件

在您的 gatsby-config.js 文件（主要 Gatsby 配置文件）中，您将添加一些 WordPress 特定的配置选项。 其中包括您的 WordPress 站点的 baseUrl、首选 HTTP protocol 以及与 高级自定义字段 (ACF) 插件 相关的设置。 includedRoutes 字段指定我们要获取的数据。

使用上述步骤中的演示 WordPress 站点，当前前端如下所示：

出于本教程的目的，将以下代码添加到名为 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
        }
    },
  ],
}

使用获取的 WordPress 数据

一旦您的 Gatsby 站点从您的 WordPress 源 URL 获取数据，就该创建您的站点页面了。 这是通过在 gatsby-node.js 文件中实现 createPages API 来完成的，这使得获取的数据可用于来自 GraphQL 的查询。 在构建时，gatsby-source-wordpress 插件会获取您的数据，并使用它来“自动推断 GraphQL 模式”，您可以对其进行查询。

将以下代码添加到名为 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
            }
        });
    });
};

这将遍历现有的 WordPress 帖子数据。

步骤 #4：创建 post.js 模板

接下来，我们将为模板创建一个文件夹，您可以在其中为帖子、页面和布局添加文件。 现在，我们将创建一个 post.js 文件来从我们的 WordPress 站点获取帖子。

将以下代码添加到文件中： 

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
        }
    }
`;

检查最终结果

要启动开发服务器并查看最终结果，请在终端中键入以下命令： 

npm start

您将获得可以在本地访问该站点的链接，以及其他详细信息，例如正在获取的 posts、categories 和 tags 的数量。

这是一个 GIF，演示了它的外观：

让我们看一下这个改进后的前端，它现在由 Gatsby.js 和 WordPress 后端提供支持：

您可以看到我们的应用程序如何仅从 WordPress 站点获取所需的数据。 这包括 posts、tags 和 categories。 要检索小部件或评论等其他类型的数据，您需要将适当的值添加到 includedRoutes 选项。

结论

通过学习本教程，您现在拥有与 Gatsby.js 前端集成的 WordPress 应用程序后端。 Gatsby 提供快速的网络体验，并带来额外的好处，可以增强您现有的 WordPress 网站。 您现在有了一个平台，可以进一步试验使用 Gatsby 为您的网站提供动力，

取自“https://cainiaojiaocheng.com/index.php?title=使用Gatsby更快的WordPress网站&oldid=26951”
Powered by MediaWiki