Gatsbyを使用したより高速なWordPressサイト

最新の最先端のWebテクノロジーについて話すと、React.js、Vue.js、Next.jsなどの印象的な名前が見つかります。彼らは、ユーザーにコンテンツを迅速に提供できるWebサイトを構築するための新しいゲートウェイとアプローチを開きました。

サイト全体の速度と読み込み時間を増やすことができるフレームワークの1つは、Gatsby.jsです。

高速ウェブサイトの目標

高速に読み込まれるWebサイトには、開発者にとって次の特典と利点があります。

トラフィックとエンゲージメント：高速サイトでより多くのサイト訪問者を獲得できます。これは、ROIとユーザーエンゲージメントの向上につながります。
ページランク：高速なWebサイトは、より高いブラウザーランキングを獲得します。

Gatsby.jsとWordPressによるサイト速度の向上

Gatsby.jsは、開発者がWebサイトやアプリケーションを構築するのに役立つ無料のオープンソースのReact.jsベースのフレームワークです。これは、 JAMstack（JavaScript APIマークアップ）サイトへの一般的な傾向の一部であり、サイト全体の速度と読み込み時間を向上させることを目的としています。

しかし、ギャツビーは、今日利用可能な最も広く使用されているCMSオプションの1つであるWordPressとどこに適合しますか？使いやすさと堅牢なコミュニティにもかかわらず、WordPressは、次の理由により、最新のフロントエンドの構築に課題をもたらす可能性があります。

更新と変更：WordPressは定期的に更新されますが、急速に変化する他のフロントエンドテクノロジーとの同等性はまだありません。これらのテクノロジーを最新の状態に保つことは、開発者に追加の負担を追加します。
継続的インテグレーションとデプロイメント：現在、WordPressエコシステムには継続的インテグレーション/デプロイメント（CI / CD）オプションがほとんどありません。
統合コスト：最新のフロントエンドテクノロジーの一部をWordPressアプリケーションと統合するのは難しい場合があります。

Gatsbyを使用すると、これらの制限のいくつかに対処できます。次の手順では、GatsbyをWordPressと統合して、両方を最大限に活用する方法を示します。まず、基本的なGatsbyプロジェクトのセットアップを構成します。次に、それを使用してWordPressサイトからデータをフェッチします。

Gatsby.jsとWordPressの統合

まず、デモギャツビープロジェクトを設定します。

ターミナルで次のコマンドを入力して、GatsbyCLIをインストールします。

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構成ファイルであるgatsby-config.jsファイル内に、WordPress固有の構成オプションをいくつか追加します。これには、WordPressサイトのbaseUrl、優先HTTP protocol、および Advanced Custom Fields（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からデータを取得したら、サイトページを作成します。これは、createPagesAPIをgatsby-node.jsファイルに実装することで実行されます。これにより、フェッチされたデータを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`テンプレートを作成する

次に、投稿、ページ、レイアウト用のファイルを追加できるテンプレート用のフォルダーを作成します。今のところ、WordPressサイトから投稿をフェッチするためのpost.jsファイルを作成します。

次のコードをファイルに追加します。

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オプションに適切な値を追加する必要があります。

結論

このチュートリアルに従うことで、WordPressアプリケーションのバックエンドがGatsby.jsフロントエンドと統合されます。 Gatsbyは、高速なWebエクスペリエンスを提供し、既存のWordPressサイトを強化できる追加の利点をもたらします。これで、Gatsbyを使用してサイトを強化するためのさらなる実験のためのプラットフォームができました。