FSEプログラムのテスター募集 #3: 楽しいカスタム404ページを作成する
以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #3: Create a fun & custom 404 page」を訳したものです。
誤字脱字誤訳などありましたらフォーラムまでお知らせください。
フルサイト編集アウトリーチプログラムとしての3回目のテスター募集です。この実験的なプログラムについての詳細情報はFAQ をご覧ください。程よく楽しんで参加するために、Make Slack の #fse-outreach-experiment チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。
機能の概要
これまでに素晴らしい404ページを経験したことがありますか ? 思わず笑ってしまったり、目的の場所に簡単に戻れる作りになっていたり。現在、この404ページはサイトの一部としてテーマによって提供されコードでしか変更できないため、多くの人は、親切で、楽しい404ページを追加して楽しむことはできません。
しかしフルサイト編集を使えば、自分だけのページを作ることができます。このテストでは、テンプレートを編集してシンプルな404ページを作成したり、本格的にユニークなページの作成に取り組んだりしていきます。クリエイティブな能力を発揮できた方は是非コメント欄にスクリーンショットを添付して、私たちを驚かせてください。インスピレーションのため、私が作った例を紹介しましょう。
テスト環境
以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します:
- テストサイトを使用してください。本番サイトは使わないでください。ここの指示に従ってローカルインストールを設定するか、このような開発用サイトを設定するツールを使用してください。
- WordPress 5.7を使用してください（ココからダウンロード可能）。
- TT1ブロックテーマを使用してください。テスター募集の最後まで進むと、このテーマを使用しているかどうかをダブルチェックする必要があります！
- Gutenberg 10.1.1を使用してください（最新バージョン）。
テストフロー
この特定の機能をテストする際の基本的な流れは以下のとおりです。何か分からないことがあれば、コメントでお知らせください。
重要なお知らせ:
このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。
設定手順:
- WordPress 5.7を使ったテストサイトを準備します。本番サイトは絶対に使わないようにしてください。
- 「外観 > テーマ > 新規追加」で TT1 Blocks テーマをインストールし、テーマを有効化します。
- サイトの管理画面にアクセスします。
- 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.1.1以降を使用するようにしてください。
- これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。
テスト手順:
ヒント: このテストを通して、コンテンツ間を移動する際にリストビューの便利さに気づくでしょう。
404テンプレートを調べる
- 「サイトエディター（ベータ）」画面に移動します。自動的にサイトエディターが開かれ、ホームページに使われているテンプレートが表示されます。
- ナビゲーショントグルを開いて、「テンプレート」>「404」へ移動します。サイトの404ページのテンプレートが表示されます。
- リストビューを使って、Headerテンプレートパーツブロックを選択します。3点アイコンのツールバーメニューを使用して「ブロックの削除」を選択し、これを削除します。
- 「Nothing Here」と書かれたデフォルトのヘッダーブロックを選択し、3点アイコンのツールバーメニューを使って、「前に挿入」オプションで上部にブロックを追加します。
- 好きなブロックの挿入方法を使って、テンプレートパーツブロックを挿入し「新規テンプレートパーツ」オプションを選択してください。
- 新しいテンプレートパーツブロックの設定を（訳注:サイドバーで）開きます。「テンプレートタイトル」の欄で、例えば「404ヘッダー」というような、カスタムのタイトル名を追加します。
- 変更を終えたら「デザインを更新」を選択し、保存の流れに沿ってすべての変更を保存してください。これで新しいテンプレートパーツには、選んだタイトルが反映されるようになります。
ナビゲーションを追加し、クリエイティビティを発揮する
- フォーカスがまだ新しいテンプレートパーツにあることを確認し、ナビゲーションブロックを追加してください。新しいメニューを作ることも、既存のものを再利用することもできます。
- リンクをいくつか追加してください。現在存在しないページへのリンクも追加してください。これには、現在サイトに存在しないページのタイトルを入力します。例えば「ヘルプ」と入力すると、「下書きページの作成」オプションが表示されます。少なくとも1つはこのようなメニュー項目を追加してください。他にもいろいろ自由に、楽しくやりましょう 🙂
- ナビゲーションブロックの外側にも、この新しいテンプレートパーツ内に好きなブロックを追加してください。例えばソーシャルアイコンブロック、検索ブロック、サイトのタイトルブロック等々。サイトで迷子になった人のガイドになるものであれば何でも追加してください。
- 「Nothing Found」見出しブロックと検索ブロックを自由に編集してください。また画像、GIF、好きなものを追加してください。
- 変更を終えたら「デザインを更新」を選択し、保存の流れに沿ってすべての変更を保存してください。
- サイトの404ページを確認します。「yoursiteurl.com/404」にアクセスしてください。このとき「yoursiteurl.com」はテストサイトの URL です。ナビゲーションブロックには追加した下書きページが表示されますが、切れたリンクであることに注意してください。管理者権限でログインしていて下書きを表示できるため、切れていないように見えます。注意: すでにバグとして記録されています。
- サイトエディターに戻り、「ナビゲーショントグル」 > 「ダッシュボード」にアクセスして管理画面を表示します。注意: 現在はバグがあり、サイトエディターナビゲーション内で下書きページを表示できませんが、将来的にはもっと簡単になる予定です。
公開し、レビューし、共有する
- 「固定ページ」 > 「固定ページ一覧」に移動し、必要なページを公開してください。
- 再度、「yoursiteurl.com/404」にアクセスして404ページを開き、以前の下書きページが正しいパーマリンクで表示されることを確認してください。
- 以下のコメント欄または GitHub ディレクトリであなたの体験を共有してください。体験は何度繰り返していただいても構いません。フィードバックは大歓迎です !
もしもまだ余力があれば、以下の項目も追加で試してみてください。
- コンテンツにカラムを追加してみてください ! カラムはパワフルなツールです。サイト構築の実際のシナリオ体験から得る、カラムを使用したフィードバックは私たちにとって有用です。
- カスタムヘッダーテンプレートパーツ作成にならって、カスタムフッターテンプレートパーツも作ってみてください。
- ページの外観を、カスタムカラーやフォントサイズで、もっとカスタマイズしてみてください。カスタマイズ方法をデモする 簡単なビデオ をご覧ください。
テストの様子のビデオ:
このビデオでは、最初のセットアップを終えてからのテストの流れを紹介します。簡潔のため、404ページの作成については深く触れていません。テストの際にはこれに縛られず、是非、創造力を発揮してみてください。
注意する点:
作成した画面のスクリーンショットを共有してください !
- どこかでクラッシュしませんでしたか ?
- 正しく保存できましたか ?
- テンプレートパーツやコンテンツ全般を変更した際、保存の動作は自然でしたか? 不自然な部分、おかしな部分はありませんでしたか ?
- テストで困った点、イライラした点はありませんか ?
- テストで楽しかった点、いいねと思った点はありますか ?
- サイトエディタで作成したページは、サイトで404ページが表示された場合にマッチしますか?
- キーボードだけで動作しましたか ?
- スクリーンリーダーだけで動作しましたか ?
フィードバックをお願いします(2021年3月23日まで)
この投稿にコメントでフィードバックをお願いします。あるいは、Gutenberg の GitHub リポジトリディレクトリ や TT1 ブロックの GitHub リポジトリ に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。
#core-editor, #fse-outreach-program, #fse-testing-call, #full-site-editing, #gutenberg, #usability-testing
