DE{CODE}: Atlas の新機能

公開: 2023-02-12

WP Engine の Atlas ヘッドレス開発ツールの更新は、クライアントの最も厳しい要件を実現するのに役立ちます。このデモでは、無料のサンドボックスアカウントを使用して、これらの新機能をヘッドレスサイトに追加する方法を示します。以下のビデオをチェックして、これまでで最も高性能で安全な Web サイトの構築を開始してください!

ビデオ: Atlas の新機能

セッションスライド

デモ – WP EngineのAtlas.pdf の新機能

全文トランスクリプト

ケレン・メイス：こんにちは。 WP Engine の開発者関係チームの Kellen です。この講演では、Atlas エコシステムの新しいエキサイティングな機能のいくつかを探っていきます。 WP Engine ユーザーポータルで、新しい Atlas アプリを作成し、このポートフォリオブループリントを選択する方法を確認します。そうすることで、ほんの数分で本格的なヘッドレス WordPress サイトをインターネット上に公開できます。

次に、そのプロジェクトをローカルマシンに複製し、ローカル開発用にセットアップする方法を見て、新しいサイトをカスタマイズできるようにします。次に、Atlas Content Modeler に注目し、それを使用して Photos という新しいカスタムコンテンツモデルを作成する方法を見ていきます。

また、この Photos コンテンツモデルには、最近 Atlas Content Modeler に追加された新機能である繰り返し可能なフィールドを含む、独自のカスタムフィールドがいくつかあります。そして最後に、フロントエンドの JavaScript アプリでカスタム開発を行い、そのカスタム Photos データをクエリして、それをページにレンダリングする方法を見ていきます。

WP Engine アカウントを作成し、ユーザーポータルの Atlas ページにログインしたら、ボタンをクリックして新しいアプリを作成します。ここから、事前に構築されたサイトである青写真から始めるか、既存のリポジトリから引き出すことができます。設計図から始めましょう。これで、使用したいブループリントを選択できます。 Portfolio blueprint を選択し、Continue をクリックします。

次のステップは、このアプリを GitHub に接続することです。ボタンをクリックしてこれを行い、GitHub にサインインします。その後、この画面が表示され、アプリが承認されたことを示します。次に、このレポを実際に複製する必要があります。 Clone Blueprint をクリックして、新しいリポジトリに名前を付けます。ボタンをクリックして、このブループリントテンプレートを使用して新しいリポジトリを作成します。

ここで、この新しいアプリリポジトリが私の GitHub アカウントに作成されていることがわかります。次に、このリポジトリを Atlas アプリにリンクする必要があります。ユーザーポータルに戻り、[選択したリポジトリ] セクションまで下にスクロールします。すべてのリポジトリへのアクセスを許可した場合は、リストに表示されることがあります。そうでない場合は、[リポジトリの管理] をクリックできます。

このページでは、Atlas がアクセスできるリポジトリを選択できます。そのため、リストでレポを選択します。 [保存] をクリックすると、ユーザーパネルに戻ると、追加したリポジトリがリストにポップアップ表示されます。それでは、それを選択してください。アプリの地域については、米国中部に固執します。最後に、ボタンをクリックしてこの Atlas アプリを作成します。

ここで、アプリがビルド中であることを示す通知が表示されます。ちょっと待ってください。 Atlas アプリの構築が完了したので、この Atlas URL リンクをクリックして、新しい Atlas アプリがインターネット上でライブで実行されていることを確認できます。ホームページには、最新の投稿のリストが表示されます。お客様の声をご覧いただけます。

ポートフォリオページに移動して、ここでポートフォリオプロジェクトのリストを確認できます。個々のプロジェクトをクリックします。次に、ブログをチェックします。ブログページにアクセスして、ここに投稿のグリッドを表示してください。また、クリックして個々のブログ投稿ページを表示することもできます。そして、準備ができて、設定して、クリックして、私たちのホームページに戻ります。

そのため、これらのページ遷移が非常に高速であることに気付くかもしれません。あるページから別のページにすぐにカットオーバーします。これは、ヘッドレス WordPress アーキテクチャを採用する利点の 1 つです。次に、この体験を支える舞台裏の WordPress サイトを見てみましょう。それでは、WP Engine ユーザーポータルに戻りましょう。ここから、リンクされた WordPress 環境へのこのリンクをクリックできます。

ここで WP Admin をクリックすると、サイトの WordPress 管理者に送信されます。これが、このエクスペリエンスを強化するバックエンドです。投稿に進みましょう。ここには、多数のダミーのブログ投稿が事前に入力されていることがわかります。これが、新しいサイトのすべてのデータの取得元です。プラグインも見てみましょう。ここでは、ヘッドレス WordPress 開発を可能にするために、いくつかのプラグインがインストールされ、アクティブ化されていることがわかります。

Atlas Content Modeler に注目してみましょう。サイドバーで Content Modeler をクリックします。ここでは、プロジェクトと証言という 2 つのカスタムコンテンツが作成されていることがわかります。これらはサイドバーに表示されます。そのため、プロジェクト、それらのリスト、証言、およびそれらのリストがあります。これが、フロントエンドサイトで見たプロジェクトと証言のデータがどこから来ているかということです。

そのため、私たちは大きな進歩を遂げました。ユーザーポータルから新しい Atlas アプリを作成する方法を見てきました。これを行うと、サイトのページを提供するためのフロントエンド JavaScript アプリケーションが作成されるだけでなく、そのエクスペリエンスを強化し、2 つをリンクする手間を省く WordPress バックエンドも作成されます。この 2 つを接続して、フロントエンドアプリが WordPress バックエンドからデータを取得できるようにします。

そこから、フロントエンドアプリを見て、それがオンラインでライブで実行されていることを確認したり、WordPress 管理画面を調べたりして、いくつかのカスタムデータタイプまたはデータモデルと、いくつかのダミーデータを確認することができました。私たちのために作成されました。したがって、すぐに、完全に動作するヘッドレス WordPress アプリケーションが実行されていることがわかります。

ただし、この時点で変更を加えたい場合はどうすればよいでしょうか? 実際のポートフォリオサイトを構築していて、これは本当にクールだと思う場合はどうでしょうか。これは素晴らしい有利なスタートです。しかし、今、私はいくつかの変更を加えたいと思っています。コードを変更して、一部の色を交換したり、サイトにページを追加したりしたいと考えています。それ、どうやったら出来るの？ローカル開発を開始するにはどうすればよいですか? 次に調べてみましょう。

まず、リンクを GitHub リポジトリにコピーしてから、コマンドラインで git clone を実行してプロジェクトのクローンを作成します。ここから、そのプロジェクトディレクトリに CD で移動し、NPM install を実行してプロジェクトの依存関係をインストールします。それが完了したら、先に進み、コードエディターでプロジェクトを開きます。

次に、いくつかの環境変数を設定する必要があります。サンプルファイルがここに作成されていることがわかります。あとは、これが正しい値であることを確認する必要があります。ユーザーポータルに戻り、[変数の管理] をクリックして、運用アプリが使用する環境変数を確認します。先に進み、両方をコピーしてアプリに貼り付け、ローカルアプリが本番環境と同じ環境変数を使用するようにします。

ここでの最後のステップは、このファイルの名前を変更し、末尾から .sample を削除して有効にすることです。ここで使用しているフロントエンドアプリは、Faust.js の上に構築されています。また、Faust がデータフェッチマジックを実行するには、GraphQL イントロスペクションクエリと呼ばれるものを実行できる必要があります。

つまり、これは基本的にファウストが WordPress バックエンドに質問することです。GraphQL スキーマでクエリできるデータは何ですか? したがって、これを機能させるには、イントロスペクションを有効にする必要があります。ここで WordPress 管理画面に戻り、GraphQL に移動してから、サイドバーの設定に移動します。

[設定] ページで、下にスクロールして [パブリックイントロスペクションを有効にする] を表示し、そのボックスをクリックします。ここでは、グラフィカルデバッグモードも有効にすることをお勧めします。これにより、より詳細なデバッグメッセージが表示されます。それが完了したら、ボタンをクリックして変更を保存します。最後に、ターミナルを開いて NPM run generate を実行します。そして、それが完了したら、最後に NPM run dev を実行して、アプリをローカルで起動して実行します。

ここで、この localhost 3,000 リンクをクリックすると、サイトが実際にローカルで実行されていることがわかります。そこで、これにコンテンツを追加してサイトをカスタマイズしたいと言いました。ローカル開発の準備ができたので、まさにそれを行うことができます。このプロジェクトでは、ブログの投稿だけでなく、私たちが見たポートフォリオプロジェクトやこれらの証言など、いくつかのカスタムコンテンツを用意したいと考えています。

そのカスタムコンテンツを超えて、さらに追加したいとしましょう。ブログ投稿を作成したり、ポートフォリオプロジェクトを作成したりするだけでなく、サイトのクライアントが写真家でもあり、撮影した写真を掲載したいと考えているとします。カスタムコンテンツタイプまたはカスタムコンテンツモデルをサイトに追加して、この写真のデータをサポートし、そのデータをクエリして、フロントエンドアプリケーションに写真を表示するにはどうすればよいでしょうか? 次はそうしましょう。

ここで WordPress 管理者に戻り、Content Modeler に移動します。ですから、私たちは以前に一度スクリーンに行ったことがあります。私たちはプロジェクトと証言をちらりと見ました。これらは、このブループリントの一部として作成されたカスタムコンテンツモデルであることがわかります。これらの各モデルをクリックすると、各モデルに独自のフィールドセットがあることがわかります。

たとえば、プロジェクトにはこれらの個別のフィールドがあります。また、プロジェクトとお客様の声はどちらもサイドバーに反映されています。そして、それらのそれぞれのフィールド。プロジェクトをクリックしてから、既存のプロジェクトをクリックするか、[新規追加] に移動すると、いずれの場合も、ここに反映されたすべてのフィールドが表示されます。そのため、コンテンツ作成者は、このデータを入力するために必要なすべてのフィールドを確認できます。わかった。

ただし、カスタムのコンテンツには、新しいモデルが必要です。ここでこのボタンをクリックして、新しいモデルを作成します。だから私はこの写真を呼びます。複数形の名前の場合は、末尾に S を付けて写真と呼びます。この自動生成された API 識別子 (ここでは、この ID) で問題ありません。写真は私にはよさそうです。 API の可視性については、GraphQL を介してこのデータを照会できるようにするため、これを必ず public をクリックする必要があります。モデルアイコンの場合、写真にはカメラのようなものが適しているかもしれません。 [作成] をクリックします。

このようにして、写真コンテンツモデルが作成されました。したがって、この時点で、コンテンツモデルの最初のフィールドを選択すると表示されます。この記録の時点で、これらは Atlas Content Modeler でサポートされているフィールドタイプです。このサイトで取り上げたい写真については、これらのいくつかを使用しましょう。

それぞれの写真にタイトルを付けるとしましょう。そこで、タイトルと言い、それを API 識別子として Photo Title と呼びます。これが、GraphQL スキーマで利用できるようになる方法です。それがそのためです。そして、これをエントリのタイトルとして使用したいとします。また、1 行のテキストでも問題ありません。先に進み、[作成] をクリックします。

次のフィールドでは、その画像自体を写真用にキャプチャしたいとしましょう。ということでプラスを打ちます。ここで、新しいフィールドを作成します。これを 1 つのイメージと呼びます。タイプについては、実際にはメディアを選択する必要があります。これは写真になるからです。ということで画像と名付けます。そして、ここで、これを各投稿のアイキャッチ画像として設定します。それをクリックすると、これも必須になります。だから私たちはそれがそこにあることを常に知っています。そして、[作成] をクリックします。

ほらね。 2 番目のフィールドがあります。 3つ目については、説明をしましょう。ということでプラスを打ちます。この場合、これはリッチテキストフィールドになります。ですから、description と言うと、そのフィールドに対してそれが行われます。そして、最後に必要なのは被験者です。したがって、このフィールドを使用して、写真に表示されているものをキャプチャします。たとえば、それが日没時の山脈の写真である場合、たとえば、私たちの写真の 1 つがそうであるように、写真の被写体のいくつかは山、星、空などである可能性があります。写真に写っている物のリストです。

このデータを保存するには、さまざまな方法があります。たとえば、カスタムの分類法を作成し、それらのそれぞれに用語を割り当てることができます。したがって、これらの写真のそれぞれには、1 つ以上の用語が含まれる可能性があります。それはそれを行う1つの方法でしょう。しかし、私たちの目的のために、そのようなタグや分類のようなものに基づいて写真をグループ化できることに興味がないとしましょう。

代わりに、このリストは実際にはサイトでの表示のみを目的としています。問題は、ここでプラスを押すと、それをテキストフィールドにすると、そのうちの 1 つしか得られないことです。そして、もっとある場合はどうなりますか？特定の写真にこれらの被写体がいくつ含まれているかは、事前にはわかりませんよね? そこで、ACM の反復可能フィールド機能が非常に役立ちます。それでは、それがどのように見えるか見てみましょう。

ここではこれをテキストフィールドにします。これに subject という名前を付けます。次に、このフィールドを繰り返し可能にします。これが重要です。先に進み、それをクリックします。これを 1 行のテキストフィールドとして保持し、[作成] をクリックします。このようにして、ここにある写真コンテンツモデルが作成されました。そして、サイドバーで見ることができます。

ここで [写真] をクリックすると、事前に作成したダミーの写真が 1 つあることがわかります。しかし、Add New を作成すると、これが反映されていることがわかります。ここのフィールドは、コンテンツモデルに追加したものを反映しています。というわけでタイトル獲得。画像を添付する機会があります。写真の説明用のリッチテキストフィールドと、1 つまたは複数の被写体を追加するための繰り返し可能なフィールドがあります。

それでは、ここで何ができるか見てみましょう。 [アイキャッチ画像を追加] をクリックします。そして、私は自分のマシンから 1 つを選択します。どれどれ。アップロードが完了したら、代替テキストを付けます。白い花、そのように言って、完了です。これが私たちのイメージです。では、戻ってタイトルを付けましょう。ボケのある白い花と言います。そのように。説明のために、ここにいくつかのきれいな白い花の素晴らしいショットがあるとします. そのように。

ここで、被写体について自問してみましょう。この写真には何が写っていますか? 花もその一つかもしれません。 [アイテムを追加] をクリックします。また、背景がぼやけたそのボケ効果もそこにあります。また、別の例として、木の幹または枝がショットに含まれていると思います。そのため、ここにそれらのいくつかを追加します。すべてをキャプチャしたと思われる場合は、[公開] をクリックしてください。それでは、行きましょう。

そして、写真に戻ると、以前にこれを作成していました。山は涼しいです。そのように設定する必要があります。これで山並みの写真が撮れます。そして、これは山、星、影のある山脈の素晴らしいショットです。それが持っているいくつかの主題。これで、フロントエンドアプリケーションで作業するための投稿が少なくともいくつか得られます。

この時点で、これらの写真に必要なデータを保存するコンテンツモデルを WordPress バックエンドに作成し、フロントエンドアプリで使用するために使用する 2 つの新しい写真投稿を作成しました。次に、このデータを WordPress から引き出して、フロントエンドアプリケーションで使用できるようにするにはどうすればよいのでしょうか。

Atlas Content Modeler には、それを非常に簡単にするための非常に優れた機能があります。ここで Content Modeler に戻り、写真モデルを見つけて、ここにある小さな省略記号のドットアイコンをクリックします。 Open in Graphical に移動します。これをクリックするとすぐに、作成したコンテンツモデルである写真を含むクエリが作成されます。

そして、それらの最初の 10 個を取得し、カスタムフィールドを含む、作成したすべてのフィールドを含むこの GraphQL フラグメントを以下に含めます。お気づきかもしれませんが、写真のタイトル、画像、説明、被写体が追加されています。これは、GraphQL スキーマでこのデータがどのように見えるかを確認するのに非常に便利です。このボタンを押して、このクエリを実行してください。

また、フロントエンド JavaScript アプリがこれとまったく同じ GraphQL クエリを実行した場合に何が返されるかを確認できます。それは写真を取り戻すでしょう。そしてその中に、ノードと呼ばれる配列と呼ばれるオブジェクトがあります。そして、その配列の中には、このようなオブジェクトがあります。これらの写真のそれぞれには、タイトル、画像があり、さらに下に説明と主題もあります。

したがって、これはまさに私たちが必要としているものです。そのため、これらのフィールドのいくつかを使用します。これで、WordPress バックエンドと、この写真データを保存および公開する機能に関して、準備が整いました。それでは、フロントエンドの JavaScript アプリでこれを使用する方法を見てみましょう。

では、あちらに戻ります。プロジェクトのリストであるポートフォリオページを見るのが良い出発点だと思いますよね？これはカスタムコンテンツモデルの投稿のリストであり、写真も同様であるため、これら 2 つのページには多くの共通点があります。したがって、それを一種の出発点として使用できます。

ここで [Portfolio] をクリックします。ポートフォリオプロジェクトのリストを取得するのはこのようなものです。それでは、コードをクラックして開き、少し手を汚してみましょう。スラッシュプロジェクトであるこのページを追跡し、これがどのように構築されているかを確認します。

Source 内で Pages に移動します。そして、プロジェクトを見つけます。そこにそれがある。その中の index.js ファイルを開きます。少し下にスクロールすると、この use node pagination フックが使用されていることがわかります。これは、Hooks フォルダー内のこの場所からの React フックです。その中で、query.projects を呼び出しています。

また、query.projects を使用すると、プロジェクトのカスタム投稿タイプ (つまり、作成したプロジェクトのコンテンツモデル) に関するデータにアクセスできます。そのため、query.projects を呼び出して、事前に処理したいいくつかのフィールドを渡し、ページが読み込まれるとすぐに処理されるようにします。それが、この配列がここにあるものです。したがって、これらのフィールドは、ページの最初のロード時に存在します。

そして、実際にこのページのコンテンツをレンダリングする準備ができたら、これを実行します。 SEO コンポーネント、ヘッダー、そして下部にフッターがあります。そして、ここのページのメインセクションはこのメインタグの内側にあり、そこにヘッダーがあり、そこに引き込まれている青いセクションがあります。そして、その中にプロジェクトリストを含むラッパー div があります。そして、この Load More コンポーネントもあり、この Load More ボタンが下部に表示され、クリックすることができます。そして、さらにプロジェクトをフェッチして、UI にポップします。

それがそのページの構築方法です。そして、私が言ったように、私はこれを私たちの出発点として使いたいと思っています. それでは、このファイル全体をコピーしてみましょう。ここでは、このファイル構造を模倣します。 Pages 内で Photo を作成します。そして、そのフォルダー内に index.js ファイルを作成します。わかった。そして、この新しいファイルに、内容を貼り付けます。しかし、これにはプロジェクトデータには関心がないので、いくつか変更します。写真データが必要です。それでは、それを行う方法を見てみましょう。

したがって、この定数の名前はプロジェクトを参照しています。それでは、最初のステップとして名前を変更しましょう。写真ノードは事前パスフィールドと言えます。それでいいでしょう。独自のフィールドリストを提供する必要があります。データベース ID は今のところ残しておき、すぐにいくつか追加します。

さらに下に、見てみましょう。写真プリパス。あ、名前がかわった。では行きましょう。だから今、彼らは再び一致します。わかった。 query.projects の代わりに、カスタムコンテンツタイプに query.photos が必要であることを思い出してください。それでは、それを写真に更新してください。少し下にスクロールします。

このプロジェクトコンポーネントは、使用していないため、適用されなくなります。この時点でそれを削除しますが、これはどうですか？ H1 だけにします。ここのページで何かをレンダリングするためだけに、Hello と表示されます。また、load をさらにコメントアウトすることも考えられます。

そこで、プロジェクトの検索を実行して、忘れたものがあるかどうかを確認します。ええ、いくつかのコードコメントと、もう使用していないこのコンポーネントが取り込まれています。そのため、そのコンポーネントを削除します。そして、私たちは善良であるべきだと思います。そのため、現時点ではこれらのいくつかを使用していませんが、問題ありません。しばらくお待ちください。

これを保存して、そのレンダリングを取得できるかどうかを確認します。これで、フロントエンドアプリで、次のように Photo に移動できるはずです。そして、そこに行きます。これが私たちの新しいページです。こんにちはと書かれており、上部のヘッダーやフッターなど、ポートフォリオプロジェクトページとほとんど同じように見えます。

ポートフォリオがまだ表示されていることに気付きました。おそらくそれを交換したいと考えています。したがって、それを簡単に行うことができます。というわけでポートフォリオです。写真と言いましょう。そしてこの場所でも、それを写真に変えていきます。それを保存。では行きましょう。これでヘッダーが更新されました。

それでは、実際にそのデータを使用する方法、写真データを取得してここにリストを表示する方法について詳しく見ていきましょう。では、どこから始めればよいでしょうか。 GraphQL やここの WordPress 管理画面で見たように、クエリは大まかに次のようになります。これらのフィールドがあります。では、そうしましょう。写真のタイトルはカスタムフィールドです。しかし実際には、このフィールドを投稿のタイトルとして設定したので、タイトルのみを使用できます。投稿のタイトルは、この名前のカスタムフィールドと同じになるからです。だから私たちはそれを使うことができました。

したがって、この配列では、データベース ID だけでなく、写真、画像、説明、件名のタイトルも取得します。では、それらも追加しましょう。画像、説明、件名。わかった。最後にカンマが必要です。では行きましょう。ページが終了したときにすぐに利用できるようにしたいフィールドはこれですべてだと思います。それは私にはよさそうです。

ここで、実際にデータのレンダリングを取得できるかどうかをテストしてみましょう。では、Hello H1 の下で、これを実行してみましょう。 JSON.stringify を実行し、その中に何かを渡します。ここでデータを処理し、ページにデータをレンダリングできるかどうかを確認します。

これを保存して、フロントエンドに戻ります。そして、確かにそれはあります。これは、データがどのように見えるかのようなものです。 WordPress バックエンドから正常にフェッチされていることがわかります。このノード配列があり、そのオブジェクトの中に、個々の写真を表すオブジェクトと、ここで繰り返し可能な件名フィールドの個々の値を含む、要求した正確なデータが含まれています。

だからこれは素晴らしいです。これはまさに私たちが必要としているものです。このようにページにデータを吐き出すだけではなく、もう少しきれいにしましょう。この事前タグだけではなく、各データをマッピングして、ページにカードをレンダリングしましょう。

私がやりたいことの 1 つは、レンダリングする投稿があると仮定する前に、何もない可能性があることを説明する必要があるということですよね? 私がやりたいことの 1 つは、コンポーネントの一番上に写真を載せることです。そして、そのように data.nodes.length を実行します。また、データがまだ存在するかどうかわからないため、オプションの連鎖に疑問符を付けます。

そして、これをそのようなブール値にキャストします。つまり、この時点で失敗し、データが定義されていない場合、これは false にキャストされます。レンダリングする写真がありません。それ以外の場合、この配列の長さまで掘り下げることができれば、投稿がない場合はゼロ、または 1 つ以上になります。したがって、その整数をブール値にキャストすると、写真があるかどうかがわかります。したがって、ゼロの場合、これは false になります。 1 つ以上の場合、havePhotos は true になります。

その知識があれば、ここでコンポーネント内で意思決定を行うことができます。それでは、それを行う方法を考えてみましょう。ですから、写真がある場合は、1 つのものをレンダリングしたいと思います。見てみましょう。 data.photos を実行したいので、それらをマップします。そのため、各写真に対して何かをレンダリングします。

ですから、最初は簡単なものを返してみましょう。返してみましょう。これは私たちのカードの 1 つに似ているので、H2 を作成します。そして、そのように photo.title と言います。わかった。そのため、それぞれの写真をマッピングします。それぞれについて、その写真のタイトルを含む H2 を返します。わかった。

したがって、実際にレンダリングする写真がある場合は、これらすべてが必要です。しかし、そうでない場合、代替案はどうでしょうか? ここにelse節を入れて、別のものをレンダリングしましょう。段落はどうですか。表示する写真はありません。では、これを保存すると、次のようになります。これで、投稿のタイトルがここにレンダリングされます。

それでは、ここでもう少し機能を完成させましょう。何か他のものを返したいと言います。わかった。そして、これらのそれぞれについて、ここで事前に書いたいくつかのスタイル、いくつかのインラインスタイルをコピーします。これは、それらを入力する時間を節約するためです。だから私はそのラッパーdivを持っています。そしてその中で、私たちが持っていたH2を復元することができます. ということで、H2にタイトルを貼り付けます。

タイトルの後に、説明を表示してみましょう。次にそれを行うことができます。これが photo.description になります。しかし、コンテナ内のように、たとえばこのようにレンダリングすることはできません。これを実行しようとしても、HTML がエスケープされないため、うまくいきません。これを保存すると、エスケープされた HTML がページに表示されていることがわかりますが、これは私たちが望んでいるものではありません。

そのため、React には HTML を操作するための安全なユーティリティがあり、このようにエスケープする必要はありません。そして、それは div を使用してから、そのように危険な方法で SetInnerHTML を使用することです。そして、1 つのプロパティが 2 つのアンダースコア HTML であるオブジェクトを渡すことができます。

そして、それに渡す値は、エスケープせずにレンダリングしたいものです。私たちの場合、それは photo.description となります。そして、この div は自己着にすることができます。わかった。だから今、私はそれを保存します。何が得られるか見てみましょう。いいね。これで、HTML がエスケープされなくなりました。だから私にはよさそうだ。

だからこれは素晴らしいです。そのアイキャッチ画像はどうですか？私たちができることは、これを最初から書くことです。注目の画像の URL を取得し、画像タグを付けて、それを URL として渡すことができます。そしてブラウザは画像をレンダリングし、それをそのソースに向けます。

ただし、このプロジェクトでは、この青写真のコードベースを掘り下げると、実際にはフィーチャーイメージと呼ばれるまさにこの目的のために事前に構築されたコンポーネントがあります。だから私たちにとって、それは私たちが使用するのに最適です. コンポーネントディレクトリからさまざまなコンポーネントをインポートしている場所まで、少し上にスクロールします。そして、アイキャッチ画像と呼ばれるものを最後にタグ付けします。これで、注目の画像を好きな場所にレンダリングできるようになりました。

この div と写真の説明がある場所のすぐ下に、注目の画像をレンダリングします。そして、これには画像プロップが必要です。ここで渡す必要があるのは、このイメージのノード全体です。私たちにとっては、それは photo.feauredimage.node です。そして、それは私たちのイメージのトリックを行うべきだと思います. だから私はそれを保存します、そして確かに、ここに行きます。ここでページをリロードすると、タイトル、説明、写真自体が表示されます。同様に、次の写真でも、その画像がリストに表示されています。

だからこれはかっこいい。私たちは大きな進歩を遂げています。最後に、写真に写っている被写体の再現可能なフィールドを処理しました。ここで段落を作成し、それを閉じます。そして、この段落タグ内でいくつかのカーリーを開いて、同じ photo.subject を実行できます。しかし、ここで結合の最後に取り組みます。 [INAUDIBLE] にコンマやスペースなどで結合したいことを伝えます。そして、私はそれを保存します。

ホットリロードが発生したら、下にスクロールできるはずです。案の定、これで終わりです。そのため、リストに表示されています。ユーザーはそれらが何であるかわからない場合があります。そのため、おそらく私たちのアプリでは、戻って何らかのラベルを追加することができます。その少し前に、Subjects may というようなものです。題材は花、ボケ、枝。そして、ここにあるもう 1 つの写真には、例として、山、星、影が被写体として含まれています。

ここで一時停止しますが、私がこのページをどれだけ迅速にまとめることができたかがわかります。 Hello, world on top を削除する必要があると思います。それはあまり必要ありません。またはこんにちは言葉。だから私はそれを削除します。そこにいます。ですから、私が言ったように、私たちがどれだけ早くこれをまとめることができたかがわかります.

ポートフォリオリストページからコードを作成するだけで、ここで写真リストページを作成し、個々の写真をマッピングして、Atlas Content Modeler カスタムフィールドにアクセスすることができました。タイトル、説明、画像、次に、サブジェクトの繰り返し可能なフィールドをここに示します。ですから、あなた自身のプロジェクトでこれによって力を与えられていると感じていただければ幸いです.

私たちの青写真の 1 つを、プロジェクトの大部分を完了させることができるこの大きな有利なスタートとして利用したい場合は、多くの準備作業が完了します。そこから、この講演で行ったことと同様のことを行うことができます。さらにカスタマイズして、独自のカスタマイズやその他のコンテンツモデルなどを追加できます。

ご覧いただきありがとうございます。この講演が本当に役に立ち、Atlas エコシステムに登場し、今後も登場する予定のすべての優れた機能について十分に理解していただけたことを願っています。

プレゼンター: これで DE{CODE} 2022 の締めくくりです。インスピレーションを得て、WordPress の専門知識と新しいコミュニティとのつながりを深めていただければ幸いです。金曜日にサイトで録画されたコンテンツを探して、見逃した可能性のあるものに追いついたり、ビデオをもう一度見たりしてください.

最後に、スポンサーパートナーである Amsive Digital、Box UK、Candyspace、Drewl、Elementary Digital、Illustrate Digital、Kanopi Studios、Springbox、Studio Malt、StrategiQ、WebDevStudios、および 10Up に感謝の意を表したいと思います。 DE{CODE} 募金活動に寄付していただき、誠にありがとうございます。ご厚意に感謝いたします。

さて、出席者ハブとセッションで私たちとやり取りしてきたすべての人のために、上位 3 人の勝者を選び、DE{CODE} の終わりに賞品を請求する方法をお知らせします. 今後のイベントで直接またはオンラインでお会いできることを楽しみにしています。最新の WordPress 開発トレンドと、それらを実装して WordPress サイトをより迅速に構築する方法について、さらにお届けできることを楽しみにしています。

それは私からのすべてです。どうぞよろしくお願いいたします。