next wordpress starter
1.0.0
next.jsと静的Webの力でWordPressをスケーリングします！
yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter
# or
npx create-next-app -e https://github.com/colbyfayock/next-wordpress-starter .env.localファイルを次のようにルートに追加します。
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
場合によっては、上記が機能しない場合があります。次のように変更します。
WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
このプロジェクトの目標は、WordPressをヘッドレスCMSとして採用し、next.jsを使用して、どこにでも展開できるサードパーティサービスなしで静的なエクスペリエンスを作成することです。
希望は、WordPressのボックス外のテーマから通常期待されることをサポートするために、できるだけ多くの機能を構築することです。現在、これらの機能には以下が含まれます。
さらに、このテーマは、以下を含むSEOフレンドリーでパフォーマンスがあると予想されます。
また、オプションでYoast SEOプラグインサポートを有効にして、SEOを充電することもできます。 （以下を参照してください）
デッキにあるものの問題をチェックしてください！
もう少し基本的なものが欲しいですか？ MVPセットアップで私の他のスターターをチェックして、WordPressでWPGRAPHQLを使用して起きて実行してください：https：//github.com/colbyfayock/next-wpgraphql-basic-starter
このプロジェクトでは、WPGRAPHQLを使用して、GraphQLを使用してWordPressを照会します。適切なエンドポイントにそのリクエストを行うには、環境変数を設定して、next.jsにサイト情報をリクエストする場所を知らせる必要があります。
.env.localと呼ばれるローカルで新しいファイルを作成し、以下を追加します。
WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] "変数の内容をWPGRAPHQLエンドポイントに置き換えます。デフォルトでは、 [Your Host]/graphqlに似ているはずです。
注：環境変数はオプションでnext.config.jsで静的に構成できます
| 名前 | 必須 | デフォルト | 説明 |
|---|---|---|---|
| wordpress_graphql_endpoint | はい | - | wordpress wpgraphqlエンドポイント（ex：host.com/graphl） |
| wordpress_menu_location_navigation | いいえ | 主要な | ヘッダーナビゲーションメニューの場所を構成します |
| wordpress_plugin_seo | いいえ | 間違い | SEOプラグインのサポートを有効にする（true、false） |
一部のテーマにはプライマリメニューの場所がないことに注意してください。
プロジェクトをローカルに開始するには、実行してください。
yarn dev
# or
npm run devこのプロジェクトは、http：// localhost：3000で入手できるようになりました。
この拡張機能を活用して、開発エクスペリエンスを向上させることができます。 Visual StudioコードでESLINT拡張機能を設定するには、root .vscodeに新しいフォルダーを追加します。内部は、次のコンテンツを含むファイルsettings.jsonを追加します。
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}このファイルを使用すると、ESLINTは構文エラーを自動的に修正および検証し、[きれいな構成]に基づいてコードを保存のコードをフォーマットします。
このプロジェクトをどのように展開してNetLifyを展開できるかについては、2つのオプションがあります。
next exportを介してプロジェクトをエクスポートしますこのスターターに基づいてプロジェクトを最初にインポートするときは、OptionとしてEssential Next.jsプラグインを提供する必要があります。そうでない場合は、Netlifyプラグインディレクトリを使用してこのプラグインをインストールできます。これにより、プロジェクトは、このプラグインを使用してネットライフがサポートするすべてのネイティブのnext.js機能を最大限に活用できます。
プロジェクトをエクスポートすると、next.jsがプロジェクトをHTMLファイルを含む静的資産にコンパイルすることができます。これにより、他のサイトと同様に、プロジェクトを静的サイトとして直接展開することができます。これを行うには、 build Command内のBuild package.jsonの最後にnext exportを追加することで、JSON（例： next build && next export ）を追加できます。
選択したオプションに関係なく、新しいサイトを作成するときに環境変数を構成するか、サイト設定> [Build＆Deploy>環境]に移動し、追加された新しいデプロイをトリガーすることで構成できます。
next.jsはvercelSupportedプロジェクトであるため、プロジェクトを新しいサイトとしてインポートし、インポート中に追加するか、設定>環境変数に移動し、追加された新しいビルドをトリガーすることにより、環境変数を構成するだけです。
追加の構成ファイルを回避するために、 package.jsonの組み込みプロパティを利用して、Webサイトの一部を構成します。
| 名前 | 必須 | 説明 |
|---|---|---|
| ホームページ | はい | フルURLを構築するために使用されるホームページまたはホスト名（Ex openグラフ） |
homepageプロパティの設定は、開いたグラフタグなどの完全なURLが必要なインスタンスを更新しますこのプロジェクトは、典型的なWordPressテーマのようにデフォルトでは、多くの組み込みのWordPress機能を利用することを目的としています。それらには次のものがあります：
| 名前 | 使用法 |
|---|---|
| サイト言語 | <html>タグのlang属性 |
| サイトタイトル | ホームページヘッダー、ページメタデータ |
| キャッチフレーズ | ホームページサブタイトル |
このスターターを最大限に活用できるようにするために必要な特定のWordPress構成があります。
このスターターは現在、WordPressの画像コンテンツを扱うためのメカニズムを提供していません。画像は「現状のまま」にリンクされています。つまり、画像がWordPressインターフェイスを介してアップロードされた場合、画像はWordPressから提供されます。
画像を静的に提供するには、いくつかのオプションがあります。
JetPackから画像アクセラレータを有効にすることにより、画像は自動的に静的に提供され、WP.com CDNを介してキャッシュされます。この機能には、JetPackの基本的なインストールが無料で、WordPressサイトをJetPackサービスに接続することのみが必要です。
ジェットパックcdn
Yoast SEOプラグインは、メタデータやオープングラフのカスタマイズなどのほとんどの主要な機能を含む部分的にサポートされています。
プラグインを有効にするには、 WORDPRESS_PLUGIN_SEO環境変数として、またはnext.config.js内のいずれかとしtrue構成します。
next.js WordPressスターターで始まったWebサイトの例
WP Engineが提供するパブリック面プロジェクトのWordPressホスティング。
これらの素晴らしい人々に感謝します（絵文字キー）：
コルビーフェヨック | ケビン・カニンガム | Guillermo Angulo | ハイン・スナイマン | グリシェ ？ | ジェイティン・ラシー | デイブ |
ブラッドグロピー | ファビオセールス | レオナルド・ロソビズ | Avneesh Agarwal | Phattarapol L. | ピーター・クルクシャンク | シェーン・オグラディ |
ニック・ガスヴィルス | Alexandruvisan19 | Ritik Chourasiya ？ | リック・ノウルトン | Jedidiah Amaraegbu |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎します！
