FSEプログラムのテスト募集 #6: WordCamp のランディングページを作る
以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #6: Stick the landing (pages)」を訳したものです。
誤字脱字誤訳などありましたらフォーラムまでお知らせください。
フルサイト編集アウトリーチプログラムとして6回目のテスター募集です。Version 5.8のリリースに向けて非常に重要なテストです。まだ参加されていない方は、ぜひこの機会に参加してください。また、今後の活動に協力したいという方は、今後のプログラムスケジュールを参照してください。
この実験的なプログラムについての詳細情報はFAQ をご覧ください。程よく楽しんで参加するために、Make Slack の #fse-outreach-experiment チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。
機能の概要
テンプレート編集に焦点を当てた最初のテスト募集から多くの変更がありました。このため、同じテストを繰り返すのでは、と心配されている方はご安心ください。念のため、「テンプレート編集モード」とは、フルサイト編集機能のうち、個々の投稿やページのコンテンツと、個々の投稿やページが使用しているテンプレートを切り替えて編集できる機能です。この機能のリリース当初は、テンプレートの編集はできても、新しいテンプレートを作成したり、投稿やページに特定のテンプレートを使用するように割り当てることはできませんでした。しかし現時点では、新しいテンプレートを作成したり、現在のテンプレートを編集したり、ページや投稿に使用するテンプレートを選択することができます。これに関連して、インターフェースも更新され、テンプレート編集モードにいることがわかりやすくなりました。この新機能の詳細について、こちらの動画も参照してください。
テストを少し現実的にするために、WordCamp サイトのカスタムランディングページを制作するとします。あなたの主催する WordCamp を他のどんなイベントよりも輝かせましょう !
テスト環境
以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します:
- テストサイトを使用してください。本番サイトは使わないでください。ここの指示に従ってローカルインストールを設定するか、このような開発用サイトを設定するツールを使用してください。
- 最新の WordPress を使用してください（ここからダウンロード可能）。
- 最新の TT1 Blocks テーマ を使用してください。
- 最新の Gutenberg を使用してください。この記事の執筆時点ではVersion 10.6です。
基本のルールとして、セットアップでは各プログラムの最新バージョンを使用してください。またこの記事の公開後もバージョンは更新される可能性がある点に注意してください。
テストフロー
重要なお知らせ:
このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。
既知の問題:
この記事の作成中に、いくつかの問題が発生しました。同じ問題に遭遇するかもしれませんが、これらの問題は報告されていますので安心してください。以下に大きな問題をいくつか挙げます。
- テンプレート編集モードでの保存の通知は、テンプレート自身の保存について言及しません。
- 「ブロックの追加」プロンプトにリグレッションがあり、「ブロックの追加」という文字が様々な場所に表示され、文字がつぶれたように見えるものもあります。
- テンプレート編集モードの上部にあるブロックの編集がが難しい (サイトエディターでも同様です)。
- ナビゲーションブロックは、「ブロックを追加」プロンプト問題の影響を受け、配置場所によってはプレースホルダーが少しつぶれます。
Gutenberg は今もアクティブに開発されています。開発の段階ではまた別の問題が見つかることも予想されます。
設定手順:
- 最新バージョンの WordPress をインストールしたテストサイトを準備します。本番サイトは絶対に使わないようにしてください。
- 「外観 > テーマ > 新規追加」で TT1 Blocks テーマをインストールし、テーマを有効化します。
- サイトの管理画面にアクセスします。
- 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.6以降を使用してください。
- これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。ただし、このテストでサイトエディターは使用しません。
ページの作成
- 「固定ページ > 新規追加」を選択して3つの固定ページ、「About」(WordCamp とは)、「Contact」(連絡先)、「Code of Conduct」(行動規範) を作成し、公開してください。中身は必要ありません。後で作成するメニューのリンク先になります。
- 4番目の固定ページを作成してください。タイトルは何か楽しい、お客様を引き付けるフレーズを考えてみてください。ただしその他のコンテンツは加えないでください。私は「Feeling inspired from WordCamp Couch?」(WordCamp カウチで感じたこと) としてみました。
- 固定ページを公開し、エディターを開いたままにしておいてください。
新しいテンプレートの作成
- サイドバーで「設定」を開きます。「固定ページ」タブと「ブロック」タブが表示されるうち、「固定ページ」タブをクリックして固定ページの設定を開きます。「テンプレート」セクションの下の「新規」をクリックして、新規テンプレートを作成します。詰まった方は、こちらで短い動画をご覧ください。
- 新しいテンプレートのタイトルを「WordCamp Outreach」とします。
- ここから、テンプレート編集モードに入ります。
テンプレートのカスタマイズ
- テンプレートの先頭の「サイトタイトル」ブロック、「キャッチコピー」ブロック、「区切り」ブロックを削除します。
- 「投稿タイトル」ブロックの上に「カバー」ブロックを追加し、好きな画像を挿入してください。このテスト手順を作る際、私は こちらをダウンロード しました。「投稿タイトル」ブロックのツールバーの「前に挿入」オプションを使う必要があるかもしれません。
- 画像を追加したら、内部の「段落」ブロックではなく「カバー」ブロックを再度選択し、「配置を変更」を使用して「全幅」を選択します。
- 「投稿タイトル」ブロックを「カバー」ブロック内にドラッグアンドドロップします。
- ブロックの配置設定を使用して「投稿タイトル」ブロックを中央揃えにし、余計な「段落」ブロックを削除します。
- 再度カバーブロックを選択し、デュオトーンフィルターを適用してください。ツールバーのアイコンは こちらのスクリーンショット を参照してください。注意: 「影」と「ハイライト」を選択すると、カスタムカラーを作成できます。
- 「カバー」ブロックの下に「スペーサー」ブロックを追加し、50px に設定します。
- 「スペーサー」ブロックの下に「カラム」ブロックを追加し、「50 / 50」を選択します。
- 挿入したら、親のカラムブロックを選択し、「配置を変更」を使用して「全幅」にします。
- 最初のカラムにイベントの簡単な情報を追加し、好きな配置を設定してください。
- 2番目のカラムに2つボタンを追加して、「登壇者申し込み」と「スポンサー申し込み」を作成します。このテストでは、実際にリンクする必要はありません。自由にボタンをカスタマイズしてみてください。
- 「カラム」ブロックの下に、別の「カバー」ブロックを追加し、背景色を選択してください。
- 背景色を設定したら、内部の「段落」ブロックではなく「カバー」ブロックを再度選択し、「配置を変更」を使用して「全幅」を選択します。
- 「カバー」ブロック内に、ディスカウントコード用のメッセージ、その下にチケット購入用の「ボタン」ブロックを追加してください。テキストを編集し、配置、カスタム色等を自由にカスタマイズしてください。
カスタムフッターの作成
- ２番目の「カバー」ブロックの下に「テンプレートパーツ」ブロックを追加します。「新規テンプレートパーツ」を選択して、このテンプレートのカスタムフッターを作成します。
- 作成したら、サイドバーの「ブロック」設定に移動し、「高度な設定」セクションで「タイトル」を入力し、「エリア」で「フッター」を選択し、「レイアウト」セクションで「デフォルトレイアウトの検証」をオンにします。
- テンプレートパーツに、「カラム」ブロックを追加し、「30 / 70」を選択します。
- 最初のカラムに、「サイトロゴ」ブロックを追加します。ロゴが必要であれば、http://www.logodust.com からダウンロードした、無料のものがあります。
- ２番めのカラムに、「ナビゲーション」ブロックを追加し、「新規作成」を選択します。なおここでバグにぶつかる かもしれませんが、すでに報告されています。
- 「ページリンク」オプションを使用して、固定ページ「About」「Contact」「Code of Conduct」を追加してください。「ナビゲーション」ブロックを自由にカスタマイズしましょう。
- 「更新」をクリックして、変更を保存してください。
新規固定ページの作成と新しいテンプレートの割り当て
- 管理画面に戻り、「固定ページ > 新規追加」を選択して、新規固定ページを作成します。
- 「タイトル」に別の魅力的なイベントへの案内を入力してください。私は「Feeling inspired from WordCamp Bed?」(WordCamp ベッドで感じたこと) としてみました。
- 「投稿の設定」の「テンプレート」セクションで、上で作成したテンプレートを選択し、「公開」してください。
- 固定ページを表示し、最初の固定ページと同じテンプレートが使用されていることを確認してください。
上級者向けのガイド
もっとテクニカルで、将来のアイデアベースのものを試したい方は、この PR を参照してください。試す場合は便宜のため、対応したバージョンの Gutenberg プラグインをこちらからダウンロードしてください。この PR は、テンプレート編集モード時、投稿コンテンツの編集機能を無効化して、投稿コンテンツとテンプレートの編集をより明確に区別することを目的としています。この PR に関する意見や感想は、以下のコメント欄または PR へ直接お寄せください。
テストの様子のビデオ
注意: 上の手順に関連する章がビデオに追加されています。
注意する点:
作成した画面のスクリーンショットを共有してください !
- どこかでクラッシュしませんでしたか ?
- 正しく保存できましたか ?
- 不足する機能はありませんでしたか ?
- テストで困った点、イライラした点はありませんか ?
- テストで楽しかった点、いいねと思った点はありますか ?
- テンプレート編集モードで作成したページは、サイトで表示された場合にマッチしますか?
- キーボードだけで動作しましたか ?
- スクリーンリーダーだけで動作しましたか ?
フィードバックをお願いします(2021年5月26日まで)
この投稿にコメントでフィードバックをお願いします。あるいは、Gutenberg の GitHub リポジトリディレクトリ や TT1 ブロックの GitHub リポジトリ) に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。
#fse-outreach-program, #fse-testing-call, #full-site-editing