FSE プログラムのテスト募集 #9: 高等教育のヘッダーの取り扱い
以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #9: Handling HigherEd Headers」を訳したものです。
誤字脱字誤訳などありましたらフォーラムまでお知らせください。
これはフルサイト編集アウトリーチプログラムの9回目の募集です ! この実験的なプログラムについての詳細情報は FAQ をご覧ください。程よく楽しんで参加するために、Make Slack の #fse-outreach-experiment チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。
これまでに募集してきたテストと比較して、今回のテストは幾分コミュニティ主導のもので、@blake が提案した高等教育をテーマにしたテストになります。フルサイト編集テストのアイデアの提案を歓迎します。すべてのアイデアは、現在のプロジェクトの優先順位と照らし合わせ、もっとも効果的と判断されたものが実行されます。アイデアは、Slack チャンネルで直接共有するか、私 (@annezazu) にメッセージを送ってください。
機能の概要
このテストを実世界の例に基づいて行うために、私たちはサイト管理者として学校に戻って、仮想の大学で学生、親、教師を歓迎するためのカスタマイズされたヘッダーを作成してみます。インスピレーションを得るために、次のような大学サイトのサンプルをチェックしたり、近くの大学を探してみてください。このテストでは、ヘッダー部分の構築に焦点を当てているので、その点に集中して、それぞれのサイトでどのような工夫がなされているかを参考にしてください。
https://www.ni.ac.rs/en/student-info
ご想像のとおり、このテストでは「ナビゲーションブロック」を深く掘り下げることになります。おさらいしておくと、ナビゲーションブロックとは、サイトのナビゲーションメニューを構造的にもデザイン的にも編集できるようにする、強力で新しいブロックです。このテストは、将来の WordPress リリースに搭載するための準備として、このブロックでできることの端緒を探ることを目的としています。
これまでのテストと同様に、創造性を発揮してくださった場合には、コメント欄にスクリーンショットを添付してください。インスピレーションを得るために、以下の例では、サブメニュー項目の複数のレイヤーが表示されています。
テスト環境
以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します:
- テストサイトを使用してください。本番サイトは使わないでください。ここの指示に従ってローカルインストールを設定するか、このような開発用サイトを設定するツールを使用してください。
- 最新の WordPress を使用してください (ここからダウンロード可能)。
- 最新の TT1 Blocks テーマ を使用してください。
- 最新の Gutenberg を使用してください。この記事の執筆時点ではVersion 11.2.1です。
- このテスト用に作成された Gutenberg デモコンテンツをダウンロードします。リンクをクリックし、「ダウンロード」を選択してください。次に管理画面で、「ツール」>「インポート」にアクセスし、「WordPress Importer」を使用してデモコンテンツをインポートします。
基本のルールとして、セットアップでは各プログラムの最新バージョンを使用してください。またこの記事の公開後もバージョンは更新される可能性がある点に注意してください。
既知の問題
この記事の作成中に、いくつかの問題が発生しました。同じ問題に遭遇するかもしれませんが、これらの問題は報告されていますので安心してください。以下に大きな問題をいくつか挙げます。
- ナビゲーションブロックをカラムブロックの中に配置すると、余白が崩れてブロック内の項目の間隔が狭くなります。
- ナビゲーションブロックに一括で項目を追加できません
- TT1 Blocks テーマでは、検索ブロックの背景色が、フロントエンドで設定されません。
初心者向けのテスト方法
このセクションは、具体的な手順に従ってヘッダーを作成したい方や、FSE をテストする十分な時間がない方のためのテスト方法です。
このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。
構造の作成 (テンプレートパーツ、カラムなど)
- 管理画面で「サイトエディター (ベータ)」をクリックします。自動的にサイトエディターが開き、ホームページに使用されているテンプレートが表示されます。
- ホームページを開いたら、「ヘッダーテンプレートパーツ」の内部ににある「ナビゲーションブロック」を削除してください。後の追加のために、ヘッダーをリセットします。
- 親の「カラムブロック」を選択し、サイドバーの「ブロック設定」を使用して、カラムを2列から3列に変更します。
- カラムブロックに戻り、「ブロックツールバー」の設定で、「全幅」になっていることを確認します。
サイトブランドの作成
- 1列目に「サイトロゴブロック」を追加し、サイトのロゴをアップロードします。必要であれば logodust.com のこの無料ロ ゴを使用してください。
- 「サイトのタイトル」、「サイトのキャッチフレーズ」、「サイトロゴ」の各ブロックを組み合わせ、自由にカスタマイズしてください (フォントの変更、色の変更、配置の変更など)。
- 2列目に「ボタンブロック」を追加して、COVIDに関する警告を追加し、記事「August COVID Update」にリンクします。記事は投稿のタイトルを検索すれば見つかります。必要なデモコンテンツをまだインポートしていない場合は、このエクスポートファイルのリンクを開いて「ダウンロード」を選択し、インポートしてください。
上位レベルの項目のシンプルなメニューの作成
- 3列目に「ナビゲーションブロック」を追加し、「空から始める」オプションを選択します。
- 「固定ページリンクブロック」を使用して、インポートしたコンテンツの中から以下のページを追加します。「Contact」「Directions」「Make a Donation」。追加するには、各ページのタイトルの最初の数文字を入力すると表示されます。恐らく、Gutenberg 11.3で修正予定のスペーシングのバグに気づかれるでしょう。
- メニュー項目の「Make a Donation」を短く「Donate」に変更します。これには、固定ページリンクブロックのテキストを編集します。
- メニューの最後には、「検索ブロック」を追加し、サイドバーの設定を使用して、自由にカスタマイズしてください (背景色、テキストの色、幅など)。
- メインメニュー項目を配置したら、ナビゲーションブロック全体を再度選択し、サイドバーの設定の「表示設定」で、「レスポンシブメニューを有効化」オプションをオンにします。必要であれば、この時点で、ブロックのスタイルをカスタマイズすることもできます。
より複雑な仕様のメニューの作成
- 3つのカラムを含む全体の「カラム」ブロックを選択します（ここでリストビューが役に立つかもしれません）。メニューの「その他の設定」で「後に挿入」を選択し、後にブロックを追加します。
- カラムブロックをもう1つ追加し、30/70オプションを選択します。
- 再びカラムブロック全体を選択し、ブロックツールバーの設定で「全幅」になっていることを確認します。
- 幅70％の大きなカラムにナビゲーションブロックを追加し、「空から始める」オプションを選択します。
- 「固定ページリンクブロック」を使って、取り込んだコンテンツの中から以下のページを追加します。About、Admissions、Student Life、Research、News です。追加するには、各ページのタイトルの最初の数文字を入力すると表示されます。
- メインメニュー項目を配置したら、もう一度ナビゲーションブロック全体を選択し、サイドバー設定の「表示設定」で「レスポンシブメニューを有効化」オプションをオンにしてください。
- メインメニュー項目 About、Admissions、Student Life、Research のサブメニュー項目を追加します。ヒントが必要な方のために、こちらがサブメニュー項目を追加するためのアイコンのスクリーンショットです。
- About には、以下のサブメニュー項目が必要です。Distinguished Alumni、Diversity and Inclusion、Faculty、History、Leadership。
- Admissions には、以下のサブメニュー項目を追加してください。Career Paths、Undergraduate Graduate Admissions、Scholarship & Financial Aid、Tuition。
- Research には、以下のサブメニュー項目を設けます。Awards & Honors、Partnerships、Undergraduate Research、Graduate Research。
- Student Life には、以下のサブメニューを用意してください。Athletics、Tutoring Services、FAQ、Study Abroad Opportunities、Tutoring、Services。
- Admissions > Career Paths の下に Business、Design、Technology というサブメニュー項目を追加します。
- サブメニュー項目を追加したら、様々なサブメニュー項目を自分の好みに合わせて再配置し、名前を変更します。ナビゲーションブロック全体を選択して、ブロックナビゲーションオプションを使用すると、この GIF のように、メニュー項目を並べ替えられます。
- まだ存在していないページを追加したい場合は、現在サイトに存在していないタイトルを入力することで追加できます。そこから、下書きページを作成するオプションが表示されます。これを少なくとも1つのメニュー項目に対して行います。この作業をお楽しみください。高等教育がテーマの内容にすることをお忘れなく。
- ナビゲーションブロック全体をお好みにカスタマイズします (配置、色、フォントサイズなどの変更)。サブメニューの項目については、オーバーレイの色設定を使って好きな色を設定できることを覚えておいてください。 作業内容を保存してさらにカスタマイズしましょう。
- 「保存」を選択して変更を保存し、フロントエンドでサイトを表示します。エディターで表示される内容とフロントエンドで表示される内容の違いを確認してください。下書き状態のページがある場合は、メニューに表示するために公開する必要があります。
- モバイル端末でサイトを表示し、メニューがハンバーガーメニューとしてレスポンシブ表示されるかどうかを確認します。
- ここからは、配置や色、文字サイズの変更、項目の削除・並べ替え・再配置など、自由にカスタマイズしてください。また、スペーサーやソーシャルアイコンなどのブロックをナビゲーションブロックに追加することもできます。
上級者向けのテスト方法
このセクションは、テストをさらに続ける時間があり、ガイドなしでもサイトエディターを使える方向けのテストです。
このセクションのテスト方法は簡単です。既存の大学サイトのヘッダーの全部または一部を再現してみてください。TT1 Blocks テーマを使い続けても自分の好きなブロックテーマを使っても構いません (違うテーマを使用する場合は注意してください)。上に挙げた大学を利用しても良いですし、自分で探してもいいでしょう。コメントを残す際には、自分が何をしようとしていたか、そして何ができたかを示すスクリーンショットを共有してください。みなさんが何を実装しようとしているかを知ることはとても参考になります。自由な発想とデザインを遠慮なく、共有してください。
注意する点:
作成した画面のスクリーンショットを共有してください !
- どこかでクラッシュしませんでしたか ?
- 正しく保存できましたか ?
- ヘッダーを作成中に不足する機能はありませんでしたか ? できる限り詳しく説明してください。上級者向けのテスト方法を実施した場合は特に !
- テストで困った点、イライラした点はありませんか ?
- テストで楽しかった点、いいねと思った点はありますか ?
- サイトエディターで作成したページは、サイトで表示された場合にマッチしますか?
- 小さな画面サイズで見たときの、ナビゲーションブロックの動作はいかがですか ?
- キーボードだけで動作しましたか ?
- スクリーンリーダーだけで動作しましたか ?
- よろしければ、https://wave.webaim.org や https://www.accessify.com/ のようなツールでテストサイトを実行して、動きを確認してみてください。
フィードバックをお願いします(2021年9月1日まで)
この投稿にコメントでフィードバックをお願いします。あるいは、Gutenberg の GitHub リポジトリディレクトリ や TT1 ブロックの GitHub リポジトリ に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。
#fse-outreach-experiment, #fse-outreach-program, #fse-testing-call, #full-site-editing
この記事は @nao, @atachibana, @mimitips で翻訳しました。
