フロントでヘッドレスのWordPressサイトを作成します

ReactベースのフレームワークであるFrontityは、高速でヘッドレスのWordPress Webサイトの作成を簡素化します。 WordPressのnext.jsと考えてください。ヘッドレスのWordPressは現在ニッチかもしれませんが、Frontityのショーケースは、CNBCアフリカやフォーブスアフリカなどの著名なサイトを特徴とする人気の高まりを強調しています。そのドキュメントとチュートリアルは、主にヘッドレスブログに焦点を当てています。

このガイドの詳細は、基本的なフロントサイトサイトを作成し、デフォルトのMARSテーマをカスタマイズします（以降の記事で）。 Frontity Frameworkを使用して、ヘッドレスWordPressサイトのセットアップをカバーします。

目次

• 前提条件と要件
• フロントを理解する
• フロントサイトのインストール：
  • ステップ1：プロジェクトの作成
  • ステップ2：火星のテーマの選択
  • ステップ3：プロジェクトのインストール
  • ステップ4：ディレクトリの変更とサーバーの再起動
• WordPressサイトのセットアップ：
  • かなりのパーマリンクを有効にします
• フロントをWordPressに接続する：
  • ステップ1：メニューの更新
  • ステップ2：プロジェクトフォルダー構造
  • ステップ3：スタイルの変更
• Vercelへの展開：
  • ステップ1：生産バージョンの構築
  • ステップ2：Vercelアカウントの作成
  • ステップ3： vercel.jsonの作成
  • ステップ4：展開
• 結論
• リソース

これは専門家のガイドではなく、実用的なウォークスルーです。包括的な詳細については、Frontityの公式文書を参照してください。

前提条件と要件

ReactとES6 JavaScriptに精通していることをお勧めします。追加要件（Frontityのドキュメントで詳細）：

• HTMLおよびCSS習熟度
• コマンドラインエクスペリエンス
• node.jsサーバー
• コードエディター

フロントを理解する

Frontityは、WordPress専用に設計されたReactフレームワークです。独自の州のマネージャーとCSSスタイリングソリューションを備えています。 2つのモードで動作します。

• 分離モード： Frontityは、WordPress REST APIからデータを取得し、最終的なHTMLを同型Reactアプリとしてレンダリングします。主なドメインは、フロントティとワードプレスへのサブドメインを指します。
• 埋め込みモード： Frontityテーマは、WordPressテーマに取って代わります。プラグインは、HTMLのFrontityサーバーに内部HTTP要求を行います。メインドメインはWordPressを指します。

Frontityの組み込みAMP機能は、ページの速度を最適化します。

フロントサイトのインストール

これには、FrontityプロジェクトとWordPressサイト（データソースとして）のセットアップが含まれます。

まず、node.jsとnpmがインストールされていることを確認してください。

ノード - バージョン
NPM-バージョン
npmインストールnpm@datrut -g＃必要に応じてnpmをアップグレードします

ステップ1：フロントリティプロジェクトの作成

Frontity CLIを使用してください：

 NPX Frontityは私の概要を作成します

ステップ2：MARSテーマの選択

Frontityは2つのテーマを提供しています。 mars-themeを選択してください。

ステップ3：フロントプロジェクトのインストール

Frontityサーバーは、プロジェクトとその依存関係をインストールします。

ステップ4：ディレクトリの変更と開発サーバーの再起動

プロジェクトディレクトリに移動し、サーバーを起動します。

 CD My-Frontity
NPX Frontity Dev＃またはYarn Frontity Dev

http://localhost:3000でサイトにアクセスします。

WordPressサイトのインストール

WordPressサイト（ローカルまたは既存）を設定します。 WordPress REST APIにアクセスできることを確認してください（ http://mytestsite.local/wp-jsonなど）。

かなりのパーマリンクを有効にします

設定>パーマリンクでかなりのパーマリンク（投稿名）をアクティブにします。

フロントをWordPressに接続します

frontity.settings.jsを更新：

 // frontity.settings.js
const settings = {
  ...、
  パッケージ：[
    ...、
    {
      名前：「@frontity/wp-source」、
      州： {
        ソース： {
          API： "http://your-wordpress-site.com/wp-json" // URLに置き換えます
        }
      }
    }
  ]
}

サーバーを再起動します。

ステップ1：メニューの更新

MARSテーマの構造に従って、必要に応じて、メニュー項目をfrontity.settings.jsに追加します。

ステップ2：プロジェクトフォルダー構造

プロジェクトの構造を理解する： node_modules 、 package.json 、 frontity.settings.js 、 packages/mars-theme 。

ステップ3：スタイルの変更

フロントはスタイリングに感情を使用します。テーマのコンポーネント内で必要に応じてスタイルを変更します。

Vercelへの展開

ステップ1：制作バージョンの作成

NPX Frontity Build

ステップ2：Vercelアカウントの作成

Vercelアカウントを作成してログインします。

 NPX Vercel Login

ステップ3： vercel.jsonの作成

vercel.jsonを作成：

 {
  「バージョン」：2、
  「ビルド」：[
    {
      「src」：「package.json」、
      「使用」：「@frontity/now」
    }
  ]
}

ステップ4：展開

npx vercel

結論

Frontityは、ヘッドレスのWordPressサイトを構築するためのユーザーフレンドリーなアプローチを提供します。

リソース

• フロントリティドキュメント
• Frontityブログ
• 関連するYouTubeチュートリアル（「Frontityチュートリアル」の検索）

以上がフロントでヘッドレスのWordPressサイトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。