WordPressでオープンソースGatsbyを構成して、ユーザーエクスペリエンスと全体的なパフォーマンスをもたらします。この静的サイトジェネレーターの使用方法を学びましょう。

ギャツビーワードプレス

概要

Gatsbyjsは、無料でオープンソースのReactベースのGraphQL搭載の静的サイトジェネレーターです。強力な事前構成を使用して、非常に高速なページロードに静的ファイルのみを使用するWebサイトを構築します。 WordPressは、優れたオープンソースブログプラットフォームです。その結果、サイトがWordPressサイトであるかどうかを把握する方法を知っている人がたくさんいます。 Gatsby WordPressを一緒に使用すると、WordPressコンテンツ管理とギャツビーの速度と同じ力が得られます。 この記事では、Gatsbyとは何か、CMSソフトウェアで使用する必要がある理由について説明します。次に、WordPressとGatsbyを一緒に使用して素晴らしいWebサイト体験を構築する方法について詳しく説明します。はじめましょう！

ギャツビーとは何ですか

Gatsbyは静的サイトジェネレーターです。これは、GatsbyがWebサイトのサーバーにアップロードされる静的HTMLファイルを生成することを意味します。訪問者がサイトに着地するとき、これらの静的ファイルは、一般的に機能する動的なコンテンツの代わりに、ブラウザに提供されます。これは、開発者が燃えるようなウェブサイトやアプリを構築するのに役立つReactに基づいた無料でオープンソースのフレームワークです。

WordPressとGatsbyを使用する長所と短所

ギャツビーの公式文書によると、彼らはテーブルをまとめました。彼らはギャツビー・ワードプレスの組み合わせが素晴らしく、そうでない人です。簡単になるために、私はそれらをここにリストしています。 {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPressとGatsbyは素晴らしいです {{LINE_27}} {{LINE_28}} {{LINE_29}} WordPressコンテンツの編集体験に満足しているコンテンツチーム {{LINE_31}} {{LINE_32}} 人気のあるオープンソーステクノロジーを使用して大切な開発チーム {{LINE_34}} {{LINE_35}} WordPressに既に保存されているコンテンツを含むサイトの再設計 {{LINE_37}} {{LINE_38}} データとハイテクスタックを所有したいチーム {{LINE_40}} {{LINE_41}} 複雑なアクセス制御ワークフローまたはコンテンツモデリングの制限 {{LINE_43}} {{LINE_44}} セキュリティが重要なプロジェクト {{LINE_46}} {{LINE_47}} パフォーマンスが最重要である高い需要プロジェクト {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPressとGatsbyはあまり良くありません {{LINE_55}} {{LINE_56}} {{LINE_57}} WordPress UIテーマの使用を必要とするチーム {{LINE_59}} {{LINE_60}} 完全に管理されたクラウドCMSを探している人 {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} これらの公式ポイントに加えて、Gatsby WordPressを一緒に使用することの長所と短所をリストアップしたいと思います {{LINE_67}} {{LINE_68}} {{LINE_69}} 長所 {{LINE_71}} {{LINE_72}} {{LINE_73}} より速い負荷速度 - 静的なWebサイトは、動的よりも速くロードされます。その結果、ページの読み込み速度とSEOランキングに影響を与えます。 {{LINE_75}} {{LINE_76}} サーバーのコストが少ない - 静的ファイルには特別なソフトウェアは必要ないため、静的HTMLページも安価なサーバーから提供できます。 {{LINE_78}} {{LINE_79}} より安全な - 静的サイトの場合、部品の移動コンポーネントはありません。したがって、ハッカーがソフトウェアを悪用する機会はありません。 {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} 短所 {{LINE_89}} {{LINE_90}} {{LINE_91}} 学習曲線 - 開発者に追加のスキルが必要です。 ReactjsやGraphQlの学習のように {{LINE_93}} {{LINE_94}} 静的コンテンツのみ - 動的コンテンツを提供する必要がある場合。その後、ギャツビーはあなたのためではありません。静的ファイルのみをサーバーできます。したがって、データベースからデータを取得するコメントシステムはありません。 {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

WordPressでギャツビーの使用方法

Gatsbyをインストールする前に、Webサイト環境にnodejsおよびnpmをインストールする必要があります。

ステップ1 - ギャツビーをインストールします

npm install -g gatsby-cli

このコマンドは、インストーラーを自動的に実行します。 Gatsbyをインストールする前に、すべての依存関係をダウンロードしてインストールします。それが完了したら、最初のGatsby Webサイトの作成を開始できます。

gatsby new gatsby-site

これにより、ギャツビーのスターターテンプレートをダウンロードして、ディレクトリ/ギャツビーワードプレスに配置します。インストールが完了したら、サイトの開発バージョンを開くことができます

gatsby develop

次に、Webブラウザで、_http：// localhost：8000_を入力し、デフォルトのテンプレートを開く必要があります。

Gatsbyスターターテンプレート

ステップ2 - ギャツビーをWordPressに接続します

Gatsby WordPressガイドのこのセクションでは、この静的サイトジェネレーターをWordPressに接続します。基本的な静的Webサイトがありますが、WordPressと統合する必要があります。これにより、GatsbyサイトにWordPressブログのアドレスに向けられているため、開発サーバーを実行するときに最新のデータをプルできるようになります。接続されると、Gatsbyは現在のテンプレートに基づいて静的Webサイトを構築します。 NPMリポジトリからGatsbyソースWordPressプラグインをインストールします。

npm install gatsby-source-wordpress

ステップ3 - Gatsbyを構成します

_gatsby-config.js_ファイルに次のコードを配置します

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseurl:  `wpexample.com`,
aliases: -  `wpexample.com`,
        protocol: `https`,
        // is it hosted on wordpress.com, or self-hosted?
        hostingWPCOM: false,
        // does your site use the Advanced Custom Fields Plugin?
        useACF: false
      }
    },
  ]
}

このコードを更新して、WordPress Webサイトを指すようにします。ウェブサイトがローカルでホストされている場合、baseurlの後、_localhost：8888/wordpress_を使用することができます。ファイルを保存した後、ページテンプレートを作成する必要があります。

ステップ4 - ページテンプレートを構築します

ビルディングページテンプレートでは、このサイトジェネレーターがWordPress Webサイトのすべてのページの投稿を生成できます。ソースプラグインは、これらのページのWordPressから必要なデータをプルしますが、デザインテンプレートを作成する必要があります。 _gatsby-node.js_ファイルで、次のコードを追加します

const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  // query content for WordPress posts
  const result = await graphql(`
    query {
      allWordpressPost {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)
  const postTemplate = path.resolve(`./src/templates/post.js`)
  result.data.allWordpressPost.edges.forEach(edge => {
    createPage({
      // will be the url for the page
      path: edge.node.slug,
      // specify the component template of your choice
      component: slash(postTemplate),
      // In the ^template's GraphQL query, 'id' will be available
      // as a GraphQL variable to query for this posts's data.
      context: {
        id: edge.node.id,
      },
    })
  })
}

すべてのデータを呼び出した後、Gatsbyは各投稿のページを生成します。開発コマンドを使用して、生成されたURLを使用して、新しいページごとにナビゲートできます。

結論

このGatsby WordPressチュートリアルでは、WordPressからGatsby Webサイトを生成する方法について説明しました。これら2つのオープンソースソフトウェアの長所と短所は何かを学びました。また、ギャツビー開発環境からインストールして始める方法についても取り上げました。 最後に、containerize.comは、さらなるオープンソース製品に関する記事を書いています。したがって、定期的なニュースと更新については、オープンソースブログプラットフォームカテゴリと連絡を取り合ってください。