DE{CODE}: エージェンシー向けのブループリントとその他のローカル機能

WP Engine は、Local であまり知られていないが非常に愛されている機能である Blueprints を強化しています! WP Engine プロダクト マーケティング マネージャーの Britt Dreisbach とシニア プロダクト マネージャーの Austin Wendt が、新しいブループリント ワークフローと、それをビジネスに役立てる方法について詳しく説明します。 ボーナス: ローカルで利用可能な新しい Atlas ブループリントのスニーク プレビューを入手してください! このセッションには、代理店や開発者が WordPress ワークフローを合理化しながら複数のサイトを簡単に管理できるようにするために構築された他のローカル機能も含まれています。

セッションスライド

全文トランスクリプト

AUSTIN WENDT:みなさん、ようこそ。今日はご参加いただきありがとうございます。 ローカル、特にエージェンシー向けのブループリントやその他のローカル機能についてお話しできることを楽しみにしています。 私の名前はオースティン・ウェントです。 私はここ WP Engine のローカル製品のシニア プロダクト マネージャーです。 また、ローカル プロダクト マーケティング マネージャーである Britt Dreisbach が本日少し遅れて参加し、このトピックについて説明します。

始める前に簡単に概要を説明するために、議題について説明したいと思います。 そのため、Local に慣れていない場合は、Local とは何か、なぜ Local を使用する必要があるのか​​を紹介したいと思います。次に、私たちが取り組んできたいくつかの新しい機能と改善された機能について詳しく説明します。ブループリントに関連しています。 Britt に手渡します。Britt は、代理店のワークフローでうまく機能するその他の機能やアドオンについて説明し、Local の使用を開始する方法を説明します。

ご存じない方もいらっしゃると思いますが、Local はローカルの WordPress 開発ツールの第 1 位です。 そのため、Local は 2016 年初頭に、WordPress サイトの構築を容易にすることを目的とした Mac OS 専用のアプリケーションとして、Pressmatic として知られる会社として開始されました。 当時、新しい WordPress サイトをスピンアップするのは非常に困難でした。または、サイトの変更をテストしたい場合は、本番環境でそれを行う必要がありました。 本番環境で何かを試してみて、それが壊れた場合、クライアント サイトが壊れる可能性があるという多くのリスクが伴います。

2016 年後半、Flywheel は Pressmatic を買収し、名前を Local By Flywheel に変更しました。 Local のリーチを拡大し、より多くのオペレーティング システムとより多くのユーザーに提供し、Flywheel のような企業へのサイトの開発と展開を容易にすることが私たちの目標でした。 そして 2019 年に Flywheel が WP Engine に買収され、現在に至ります。

そのため、名前からBy Flywheelを削除し、今では私たち全員が知っていて愛しているのはローカルです. しばらくの間、Local は有料サービスでした。 そのため、以前は料金を支払う必要がありました。 そして 2021 年 6 月に、すべてのユーザーが Local を無料で利用できるようにすることを決定しました。 私たちが WP Engine で非常に強く信じていることは、私たちの使命の一部です。私たちの使命は、作成の自由を強化することです。

私たちは、WordPress コミュニティにとって非常にシームレスなプロセスで WordPress を構築するために、できるだけ多くの開発者に利益をもたらすために、できるだけ多くの Local を手に入れたいと考えていました。 今では無料のツールになったので、毎月 100,000 人を超える月間アクティブ ユーザーが Windows、Mac OS、Linux で Local を使用してサイトを構築し、変更をテストしてから、自分自身またはクライアントのために公開しています。

今日お話ししたいのは、ブループリント機能への投資です。 ブループリントは、Local の長年の機能です。 彼らは最初から存在していましたが、より多くの人々がエージェンシーのワークフローを強化するために提供する真の力を利用することを望んでいます.

そのため、私たちが取り組んできたのはブループリントです。 ブループリントは、ユーザー定義の WordPress サイト テンプレートであり、反復的で時間のかかるセットアップをスキップするのに役立ちます。 Local は、非常に基本的な Hello World 状態と呼ぶ新しいサイトを非常に迅速に作成するのに優れています。 したがって、新しいサイトが作成されます。 Hello World の投稿がわかっている場合は、作成されます。 これは非常に基本的な WordPress テーマであり、データやメディアは添付されておらず、プラグインも有効化されておらず、好きなものを作成する準備が整っています。

Local でしばらく作業している場合、または WordPress を構築しているだけの場合は、通常、新しいサイトを構築するときに行う傾向があるいくつかのセットアップ手順があることを知っています。あなたのサイトで使用したいのは、インストールしたい特定のテーマです。 これにより、開発者は既知の定義された状態から非常に迅速にサイトを作成できます。 したがって、ブループリントを作成するときは、基本的に、テーマ、プラグイン、ページとメディア、サイト設定を含む、構築したサイトを取得し、それらをまとめて、次にサイトを作成するときに次のことができるようにします。その既知の場所から非常に簡単に作成できます。

これの非常に良い点は、エージェンシーのユーザーと話すとき、ブループリントはエージェンシーの顧客にとって多くの価値があるということです。 これは、エージェンシーにとって非常にうまく機能するいくつかのベスト プラクティスとパターンをエージェンシーが確立できるようにするためです。 これらのパターンのベスト プラクティスは何ですか。エージェンシーによって異なりますが、エージェンシーの開発者と話しているときにわかったことは次のとおりです。 各エージェンシーは、共通のプラグイン、テーマ、またはソフトウェア バージョンのセットを持っているようで、それらを使用して、ほとんどではないにしてもほとんどのサイトで共有しています。

Blueprints を使用すると、エージェンシーでこれらのベスト プラクティスとパターンを確立し、最終的には、新しいクライアントのオンボーディングやサイトの変更のテストにかかる時間を短縮できます。 たとえば、私がここの代理店である場合、目の前の画面に表示されているように、宝石のウェブサイトを作成しているとします。 新しいクライアントをオンボーディングしようとしているときに、ゼロから非常に迅速に立ち上げ、最終的にはより多くのクライアントをより迅速に代理店に参加させるのに役立つテンプレートを使用できるかもしれません.

第二に、開発チーム間で共有するのに最適であるというユーザーから多くのことを聞いているので、それらのベストプラクティスと標準を成文化したのと同じ方法で、開発チーム間でそれらを共有し、それらを使用することができます。新しいサイトを作成するときの開始ブロックとして、既存の開発者だけでなく、代理店でオンボーディングしている新しいエンジニアの両方のために。 通信するブループリントを彼らと共有できるのは素晴らしいことです。これがどのように通信するかです。私たちのベスト プラクティスは、私たちが従うのが好きなパターンに過ぎず、私たちの代理店で新しいサイトを構築するとき、これが彼らが見るべき方法です。

前述したように、ブループリントは伝統的に常にユーザー定義であり、ユーザーがローカル内で作成したことを意味します。 今週のローカル リリースの DE{CODE} カンファレンスで発表し、開始できることを非常に楽しみにしていることの 1 つは、時間を短縮する方法として、WP エンジン提供のブループリントと呼んでいるものを開始することです。起動するのに時間がかかるだけでなく、開発者が新しいテクノロジーをより簡単に試すことができます。

Local 内の Atlas Blueprints のこの概念について説明します。 Atlas は WP Engine のヘッドレス WordPress 製品です。 ご存じない方のために説明すると、ヘッドレス WordPress は、WordPress テクノロジーに関して市場が進んでいる方向であり、Node.js フロントエンドと提携した WordPress バックエンドを使用したスケーラブルなソリューションです。 これにより、あなたとあなたのチームに多くの柔軟性とスケーラビリティが提供されます。

また、開発者は、より高速で SEO とページの読み込み速度を向上させるいくつかの新しいフロントエンド テクノロジで作業できるようになり、同時に、私たち全員が知っていて愛用している非常に強力で使いやすい WordPress バックエンドを引き続き活用できます。 これらのエージェンシーの開発者と話をしたところ、彼らはヘッドレス WordPress テクノロジーを掘り下げたいと思っているが、通常は時間が制限要因になっている、またはクライアントからの要望がありながらも満足していないことがわかりました。代理店向けの有料サービスとして提供しています。

そこで、それぞれ独自のカスタム テーマとモック データを含む 3 つのブループリント、Node.js フレームワークである FaustWP プラグイン、Atlas Content Modeler と WPGraphQL を作成しました。 WordPress バックエンドと Node.js フロントエンド間のデータ転送。 ここでの考え方は、これがあなたとあなたの開発にとって素晴らしい方法であることを願っています.

次に、ローカル UI へのブループリントの導入に関連する Local の最新リリースがどのようなものかを示すデモを紹介したいと思います。 したがって、ここでローカル環境を構成します。 Chrome と Local を開いています。 そこで、Garrett's Grocery などのサイトを取り上げます。 だから私は先に進み、そのサイトを開始します。 私が代理店に所属していて、私が構築するほとんどのサイトが食料品の Web サイトであるとします。

では、このサイトを立ち上げてください。これが私がよく使うものです。典型的な食料品店のサイトが私にとってどのように見えるかを設定したテンプレートのようなものです。 そこには大きなヘッダー画像、Garrett's Grocery があり、その下にはいくつかの偽のデータといくつかの投稿があり、戻ってきたときに編集できます。 また、追加したいプラグインやその他のツールを含め、WordPress の管理ダッシュボードを希望どおりに構成しました。

ここでそのダッシュボードを開くと、他の WordPress 管理ダッシュボードと同じように表示されます。 しかし、プラグインに行くと、例のために 4 つのランダムなプラグインを選択しました。 しかし、新しいサイトを作成するときは、Elementor、Gutenberg、WooCommerce、および Yost SEO が必要であることを常に知っています。 これらをここにインストールしました。これをブループリントとしてローカルに保存すると、それらはパッケージ化され、ローカル内に新しいサイトを作成するたびに含まれます。

ローカルで新しいブループリントを作成するには、いくつかの異なるオプションがあります。 サイトのタイトルの横にあるこの 3 つのドット メニューをクリックすると、[設計図として保存] オプションが表示されます。または、サイト リストでサイトの名前を右クリックして、[設計図として保存] をクリックします。 ここで 3 つのドット メニューに戻り、[Save As Blueprint] を選択します。 ブループリントに名前を付けるように求められるので、これを My Grocery Starter Site と呼びます。

そして、ブループリントに含めたくないファイル拡張子を削除できるファイル除外フィルターがあり、そのままにしておきます。 [ブループリントを保存] をクリックすると、ローカルは基本的にコンテンツ、メディア、投稿、プラグイン、テーマ、その Web サイトで構成したもの、すべての設定のすべてをエクスポートします。再利用可能な形式に変換して、次にサイトを作成するときに、それを管理し、そこから非常に簡単に作成できるようにします。

Blueprints に移動するプロンプトが表示された Blueprint Created 確認バナーがここに表示されていることがわかります。 これをクリックすると、Local の左側のナビゲーション バーの UI ナビゲーションの前面と中央にブループリントが表示されます。 Local でこれまでに作成したすべてのブループリントがここに表示され、共同で作成した食料品のスターター サイトが表示されます。

右側にある 3 つの点のメニューに移動すると、現在のところ、将来的に追加する管理オプションがいくつかありますが、名前の変更と削除が行われます。 たとえば、このサイトの名前を変更します。ブループリントの名前を Grocery Starter Site 2 に変更し、[名前の変更] をクリックします。 これが UI で更新され、ローカルで名前が変更されていることがわかります。 また、ここで [詳細を表示] をクリックすると、ブループリント自体と、そこにインストールされているさまざまなバージョンとソフトウェアについて詳しく知ることができます。

前述したように、私たちが興奮していることの 1 つは、WP Engine が後援または提供するブループリントのアイデアであり、これらは現在、アドオンによって制御されます。 Add On ライブラリに移動して WP Engine Atlas をインストールするので、有効にして再起動します。 これをまだインストールしていない場合は、インストールして再起動します。

これにより、Local はそれをインストールして再起動し、Local は再起動時にまったく同じように見えるようになります。 Garrett's Grocery はまだここにあります。 必要に応じてサイトを変更できます。 しかし、ナビゲーションでそのブループリントに戻って下にスクロールすると、Atlas ブループリント セクションがここに追加されていることがわかります。 前述したように、これは私たちが提供するものを理解するための優れた方法ですが、これを最大限に活用する方法を学び始めるためのカリキュラムへのリンクでもあります. 3 つのオプションがあります。

基本ブループリント、ブログ ブループリントがあります。これは、WordPress に関して考えられる標準のようなものです。ポートフォリオ ブループリントは、そのブログと他のコンポーネントを組み合わせたもので、プロジェクトのサンプルを作成して作業を表示するのに役立ちます。 . これらの最も良い点は、Portfolio Blueprint がどのように見えるかを確認したい場合、これらすべてを独自のインフラストラクチャでホストしているため、Portfolio Blueprint を起動して、ここにいくつかの画像があることを確認できることです.いくつかの偽のデータがあり、編集して独自のメディアを追加できる投稿が既にいくつか作成されています。

ページ全体にいくつかの CTA があり、お客様の声のセクションに自分の見積もりをドロップできます。これが食料品店の場合は、ここに何かをドロップしてください。 そして人気のあるソーシャル メディアへのリンクは、一番下で編集したり、必要がなければ削除したりできます。 さらに良いことに、ヘッドレス WordPress に慣れていない場合、またはこれがどのように機能するかを知りたいだけの場合、開発者は GitHub でこのコードを開くことができ、これらはすべて WP Engine によってオープンソース化されています.

そのため、舞台裏のすべてのコードを見て、私たちがどのようにそれを構築したかを理解し、ヘッドレス WordPress で構築するためのいくつかのヒントとコツ、そしておそらくベスト プラクティスを理解することができます。ヘッドレス WordPress をスピンアップしてマシンや Web 上で実行するための最良の方法。 ですから、私が言ったように、アトラス ブループリントまたは任意のブループリントを WP Engine からコミュニティに提供したのはこれが初めてであり、非常に興奮しており、多くの可能性があります。

今のところ、これはすべてヘッドレスに焦点を当てていると思います。 将来的には、さまざまなテクノロジを追加したり、ユーザーが独自のブループリントを作成して共有できるコミュニティに焦点を当てた部分を追加したりする可能性があります。 今日、これが素晴らしいのは、これらの Atlas ブループリントまたは私のブループリントから作成したい場合、非常に簡単だということです。 左下隅にあるプラス アイコンに移動して新しいサイトを作成すると、ユーザーが見逃さないように、ブループリントの作成が最前面と中央に移動されます。 .

ここでブループリントから新しいサイトを作成できるようにするために、以前は詳細オプション メニューに隠されていましたが、多くのユーザーがそれを見つける方法を知っているかどうかはわかりません. [Create From Blueprint] を選択して [Continue] をクリックすると、先ほど見たものと同様の画面が表示されます。 作成したばかりのブループリントのリストと、表示したい詳細が表示されるので、サイトを作成する前に何が得られるかがわかります。

下にスクロールすると、これらの Atlas ブループリントもあることがわかります。これにより、先ほど説明した Atlas ブループリントから非常に迅速に作成できます。 そのサイトをプレビューし、GitHub でコードを開き、最終的に自分にとって最適な選択を行うことができます。 たとえば、Portfolio ブループリントから作成したい場合は、Portfolio を選択して [Continue] をクリックすると、残りは Local が現在と同じ方法で処理してくれます。

つまり、Node.js フロントエンドを起動し、WordPress バックエンドを起動して、それら 2 つが確実に通信できるようにします。 WPエンジンが提供するすべてのデータとプラグイン、および事前に構成された設定がインポートされるため、すぐにマシンにヘッドレスWordPressサイトを構成する必要があります. 私たちは、これの可能性と、これをより多くのテクノロジーとより多くの種類のサイトにもたらすことに本当に興奮しています. また、community.localwp.com のコミュニティ フォーラムに参加するだけでなく、本日もフィードバックをお待ちしております。

これを改善する方法や、WordPress 開発者またはエージェンシー開発者としての生活をより良くする方法についてフィードバックがあれば、ぜひお聞かせください。 しかしそれでは、前に述べたように、私たちのプロダクト マーケティング マネージャーである Britt Dreisbach に渡したいと思います。エージェンシーが気に入っている他のローカル機能についてもっと話す機会を与えてくれます. ブリット、あなたに譲ります。

BRITT DREISBACH : みなさん、こんにちは。 Austin が言ったように、私の名前は Britt Dreisbach です。Local の製品マーケティング マネージャーです。 私は Flywheel から WP Engine に来て、かなり長い間エージェンシーと緊密に協力してきました。ローカル製品が大好きです。なぜなら、それはとても素晴らしいツールだと思うからです。エージェンシーも気に入っている美しいデザインと追加機能を組み込んでいます。 そこで今日は、私たちのエージェンシーと開発者だけが気に入っている Local に組み込まれたいくつかの機能についてお話します。

これらの組み込み機能から始めて、最初に触れたいのは One Click Admin です。 ここの画面でわかるように、私は自分のサイトをオンにして、クライアントのサイトにログインできるようにしました。そこに彼女のログインが表示されます。 これは非常に優れた機能で、より迅速にセットアップすることに集中できます。 クライアント資格情報を常に追跡する必要はありません。すべてのクライアント資格情報のリストやスプレッドシートを管理する必要もありません。 さまざまな管理者レベルから WP 管理者がどのように見えるかを確認できます。

そのため、WP Admin は非常にシンプルですが、ローカルに組み込まれている非常にシンプルで簡単なツールであり、すべての作業をよりスマートに、より速く、より安全に行うことができます. それが私たちの最初のものです。 今日お話ししたい Local に組み込まれている 2 つ目の機能は Live Links です。これはかなり人気のある機能です。 ここでわかるように、私はクライアントや誰にでも、おそらく私のチームの誰か、別の開発者、デザイナーに、サイトをライブにしたりステージングにプッシュしたりすることなく、ローカル マシンでどのように見えるかを示すことができます。または生産、たとえば。

このサイトでわかるように、私の Erin's Excellent Eats サイトができました。これをクライアントに見せる準備ができたとしましょう。 入って、ログイン資格情報、ユーザー名またはパスワードを変更して、クライアントまたは代理店に合わせてカスタマイズし、本当にブランド化された素晴らしいエクスペリエンスを維持できます.

また、これにより、より迅速なフィードバックを得たり、クライアントや社内チームと協力したり、サイトをライブにしたり、ステージングや本番環境にプッシュしたりすることなく、サイトをすばやくテストすることもできます。 そのため、Live Links は Local で非常に人気のあるツールです。 Live Links の使用を開始するには、無料のローカル アカウントを作成できます。これにより、ローカルからサイト トンネルを安全かつ迅速に作成できます。

最後に、今日お話ししたい組み込み機能の最後は Local Connect です。 ここの右側にあるように、私は Flywheel アカウントに接続しています。 あなたが見ているこれらのサイトはすべて、私の Flywheel プラットフォームにもあります。

数回クリックするだけでこのサイトを Flywheel から Local に取り込みます。すぐに Local インスタンスに取り込まれるので、サイトの最新バージョンを持っていることがわかり、すぐに作業する準備ができています。クライアントやチームが要求した変更を加えます。 また、すぐにサイトを WP Engine または Flywheel にライブでプッシュすることもできるので、これも非常に優れたツールです。 Flywheel のステージングまたは本番環境にプッシュしたり、WP Engine の開発環境にプッシュしたりできます。

そのため、Local Connect に加えて、非常に優れたツールである Magic Sync Viewer があります。 Magic Sync は、当社の差分展開テクノロジです。 ここで少し説明しますが、この例では、私のサイトのすべてのファイルをプルアップし、どのファイルを Flywheel に公開するかをインテリジェントに推奨します。

したがって、更新、追加、削除されたファイルをインテリジェントに推奨し、特定のセクションを展開したいとしましょう。 具体的に展開したいファイルを制御できます。これにより、ローカル接続の Magic Sync を使用している場合、ユーザーは実際に最大 5 倍速く展開できます。 したがって、他の多くの標準的な展開オプションと比較して、非常に強力なツールです。

そして、私が Local Connect で気に入っているもう 1 つの非常に強力な統計は、Local Connect を使用している Flywheel のお客様は、Local Connect を使用していないお客様の 2 倍の頻度で展開していることがわかっていることです。これは、機敏性を維持しようとしているエージェンシーにとって非常に重要です。

しかし、私たちの言葉を鵜呑みにする必要はありません。 クリス・コイヤーです。 彼は CSS-Tricks、CodePen、Shop Talk Show に参加しており、Local と Local Connect が大好きです。 この引用は彼からのものです。 彼は次のように述べています。 私の人生は、ローカルとフライホイールの 2 つの場所にある同じサイトのリストです。」

したがって、最新バージョンをプルダウンしたり、ステージング環境をプルダウンしたり、いくつかの変更を加えて本番環境にプッシュしたりできる機能は、使い慣れたお気に入りの 2 つのプラットフォームを統合することで、毎日欠かすことができません。本当に素晴らしいワークフロー ツールであり、Local Connect ユーザーにとってのメリットです。 それが Local の組み込み機能として私が持っているものですが、既に少し話したように、いくつかの Add On に飛び込みましょう。 繰り返しになりますが、ローカルのアドオン ライブラリからアドオンを取得できます。これは小さなパズル ピース ツールです。

また、Image Optimizer について、特にエージェンシー向けにお話ししたいと思います。これは、エージェンシーの開発者の多くが多くのサイト コンテンツを管理しているためです。ローカル環境、WordPress サイト、マシンのデスクトップのスペースを節約したい場合は、 Image Optimizer でそれを行うことができます。 そのため、必要がなければ、WordPress サイトに追加のプラグインをインストールする必要はありません。

ローカル マシンに追加のツールをインストールしたり、Web ソリューションを見つけたりする必要はありません。数回クリックするだけで、すべての画像をローカルから直接最適化できます。 これは非常に優れており、サイズを縮小して多くの時間を節約できます。これにより、自分のマシン、独自のテクノロジだけでなく、ライブ サイトのスペースも節約できます。 そして、それはクライアントのサイトのパフォーマンスを向上させるのにも役立ちます。それが私たち全員が求めていることですよね?

それがイメージオプティマイザーです。 最後に簡単に触れますアドオンは、もう 1 つの非常にシンプルですが重要なツールであるリンク チェッカーです。 ボタンをクリックするだけでサイト全体をスキャンでき、サイト上の破損したリンクのリストが作成されます。 これにより、QA チェックをはるかに高速に実行できるようになりますが、最高のクライアント エクスペリエンスを提供することも保証されますよね?

クライアントにライブ リンクを送信した後、クライアントがサイトからこれらの壊れたリンクをすべて探しに行くことは望ましくありません。 これにより、常に最高の顧客体験を提供できるようになります。 これらはアドオンのほんの一部です。 ローカル ライブラリにある追加のアドオンをすべて確認することを強くお勧めします。 そこには本当にクールで強力なツールがいくつかあります。 しかし、今日は、新しいブループリントとアトラス ブループリントに加えて、エージェンシーが気に入っている機能をいくつか取り上げました。

まとめると、ローカルは明らかに WordPress 開発者にとって非常に素晴らしい選択ですが、代理店のワークフローを支援することに焦点を当てた非常に多くの機能とツールがあり、将来的にさらに多くの機能を構築し続けるのが待ちきれません. 開始してすべてを確認するには、localwp.com にアクセスして、そこにある大きな [ダウンロード] ボタンをクリックします。 オースティンが前述したように、ローカルおよびすべての機能は無料です。

そして、引き続きアイデアやフィードバックを提供したり、考えていた新機能を提供したりしたい場合は、community.localwp.com で会話に参加できます。 そして、それが今日私たちが皆さんのために持っているものです。 お時間をいただきありがとうございました。 繰り返しますが、私はブリットです。 私とオースティンを代表して、本日はご参加いただきありがとうございます。