FSEプログラムのテスト募集 #7: 洗練されたポートフォリオ
以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #7: Polished Portfolios」を訳したものです。
誤字脱字誤訳などありましたらフォーラムまでお知らせください。
これは フルサイト編集アウトリーチプログラムの7回目の募集です!6回目のテスト募集で述べたように、まだ参加できていない方は、5.8に向けて今が絶好のチャンスです。
この実験的なプログラムについての詳細情報はFAQをご覧ください。程よく楽しんで参加するために、Make Slack の #fse-outreach-experiment チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。
機能の概要
注意点として、テンプレート編集モードとは、フルサイト編集の機能で、個別の投稿またはページのコンテンツと、個別の投稿またはページが使用するテンプレートを切り替えて編集する機能を解除することです。この機能では、新しいテンプレートを作成したり、既存のテンプレートを編集したり、ページまたは投稿に使用するテンプレートを選択したりすることができます。この機能については、以下のビデオで詳しくご紹介しています。
このテストを実例に基づいて行うために、仮にあなたの素晴らしい作品を紹介するポートフォリオページを作成してみましょう。デモコンテンツを使用すると、あなたの中にある建築家を受け入れ、Block Plugin HarborやGutenberg Parkour Spaceのような、架空の場所のビジュアルを披露することになるでしょう。あなたが作ったものをみんなで称えることができるように、コメントにはスクリーンショットを添えてください。インスピレーションのために、ここに私の作成例があります。また、ここにいくつかのGutenbergを使用したデザイナーによるハイエンドな例があります。
注釈: 第6回目のテスト募集に比べて、今回のテスト募集では、意図的により自由な設定を行い、テスターであるあなたにこの機能の限界に挑戦してもらいます。楽しんでくださいね!
テスト環境
以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します:
- テストサイトを使用してください。本番サイトは使わないでください。ここの指示に従ってローカルインストールを設定するか、このような開発用サイトを設定するツールを使用してください。
- 最新の WordPress を使用してください(ここからダウンロード可能)。
- 最新の TT1 Blocks テーマ を使用してください。
- 最新の Gutenberg を使用してください。この記事の執筆時点ではVersion 10.7.1です。
基本のルールとして、セットアップでは各プログラムの最新バージョンを使用してください。またこの記事の公開後もバージョンは更新される可能性がある点に注意してください。
テスト手順
このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。
既知の問題:
この記事の作成中に、いくつかの問題が発生しました。同じ問題に遭遇するかもしれませんが、これらの問題は報告されていますので安心してください。以下に大きな問題をいくつか挙げます。
- テンプレート編集モードでの保存の通知は、テンプレート自身の保存について言及しない。
- テンプレート編集モードの上部にあるブロックの編集が難しい (サイトエディターでも同様)。
- 新しいテンプレートを作成した時、テンプレートエディタとフロントエンドの位置揃えがデフォルトでは一致しない。
積極的に繰り返し開発されているものには、この段階で既知の問題が出てくるものです。
設定手順:
- 最新バージョンの WordPress をインストールしたテストサイトを準備します。本番サイトは絶対に使わないようにしてください。
- 「外観 > テーマ > 新規追加」で TT1 Blocks テーマをインストールし、テーマを有効化します。
- 2種類のカテゴリーとお好みの画像を使用した6つの記事と、メニューに使用する最低4つのページを作成してください。または、このテスト用に作成された デモコンテンツ をダウンロードし、「ツール」>「インポート」にあるWordPress Importer を使ってインポートすることができます。
- サイトの管理画面にアクセスします。
- 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.7.1以降を使用してください。
- これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。今回のテストではサイトエディターを使用しませんので、これをクリックしないでください。
ポートフォリオページを設定
- 固定ページで「新規追加」を選択して、タイトルを「Portfolio」にします。
- 固定ページのコンテンツで、クエリブロックを追加し、好きなパターンを選択するか、インサータを使ってクエリパターンを追加します。ココにパターンの挿入方法が分かるビデオがあります。
- パターンを挿入したら、ブロック設定を開くことができ、「設定」>「URLからクエリを継承(Inherit query from URL)」をオフにします。すると、このクエリブロックに含まれる投稿をカスタマイズするオプションが表示されます。デモコンテンツでは以下のようなカテゴリーが用意されており、使用することができます: Portfolio, Parks, Buildings。
- クエリブロックを好きにカスタマイズしましょう!これは違うクエリブロックの中にカラムを作成して違う投稿カテゴリを表示させたり、投稿者ブロックなど追加のブロックを加えたりすることも含まれるでしょう。 もし困ったら「カスタマイズの手順やアイデア」に移動して参考にしてください。
新しいテンプレートの作成とカスタマイズ
- サイドバーで(開いていなければ)「設定」を開き、固定ページ設定を選択します(固定ページとブロックのタブがあるはずです)。
- 新しいテンプレートのタイトルを「Portfolio」とします。
- そこから、テンプレート編集モードに入り、ヘッダーにサイトタイトル、サイトタグラインと区切りブロックが表示されるでしょう。これらのブロックはそのままでも、カラムに変換しても、または全部削除しても構いません。
- ヘッダーにナビゲーションブロックを追加し「空欄で始める(Start Empty)」オプションを選択します。そこから、作成した各ページをメニューに追加して構成を決めていきます。デモコンテンツを使用している場合、ページの名前は以下のようになっていますので、これらを検索することができます: About, Contact, Resume, Partners, Influences
- ここから、ヘッダー、フッターなどを好きにカスタマイズできます。もし困ったら「カスタマイズの手順やアイデア」に移動して参考にしてください。工夫を凝らして、自分だけのオリジナルを作ってみましょう!
- 変更を保存して、ポートフォリオページを確認してください。
カスタマイズの手順やアイデア
前回のテストでは、カスタマイズテンプレートを作成する具体的な方法を説明しましたが、今回のテストでは、具体的にどのようにカスタマイズするかを探ります。ユーザー体験の最先端を試す、より自由で広がりのあるテストで、理想的には、バグや機能拡張の意見が見つかることを期待しています。今回のテストでは、カスタマイズのポイントが2つあるため、以下の説明やアイデアではそれぞれをカバーするように分かれています。ただし、ここで紹介する内容は、テスト可能なカスタマイズのほんの一例に過ぎません。
ポートフォリオページのアイデア:
- 投稿タイトルブロックを変更する。背景色を設定し、文字サイズや配置を変更できます。
- アイキャッチ画像ブロックの入っている、カラムの幅を変更する。画像の大きさを変更できます。
- クエリーブロックにブロックを追加し、カスタマイズする。
- クエリブロックが提供するメインブロックの全体の配置を変更する。
- 「紹介」セクションを追加する。見出しブロックやカバーブロックなどを使用して、ポートフォリオページをよりリアルにできます。
- 投稿のカテゴリーごとに複数のクエリブロックを使用する。 デモコンテンツには、3つのカテゴリー「Portfolio」「Parks」「Buildings」があります。
ポートフォリオテンプレートのアイデア:
- ナビゲーションブロックでカスタムメニューを作成し、「表示設定」の「レスポンシブメニューを有効にする」オプションを使用する。例えば、「私について」「経歴」「問い合わせ」ページをサイトの上部のメニューで、「パートナー」「影響」ページを下部のメニューで表示できます。
- テンプレートパーツ、クエリブロック、グループブロックなど、さまざまなブロックのレイアウトや幅をカスタマイズする。
- さまざまなブロックの色、フォントサイズ、配置をカスタマイズする。サイトタイトルブロックの例。
- テンプレートパーツブロックを使ってカスタムフッターを追加し、作品への関心を高める。
注意する点:
作成した画面のスクリーンショットを共有してください !
- どこかでクラッシュしませんでしたか ?
- 正しく保存できましたか ?
- 不足する機能はありませんでしたか ?
- テストで困った点、イライラした点はありませんか ?
- テストで楽しかった点、いいねと思った点はありますか ?
- テンプレート編集モードで作成したページは、サイトで表示された場合にマッチしますか?
- キーボードだけで動作しましたか ?
- スクリーンリーダーだけで動作しましたか ?
フィードバックをお願いします(2021年6月9日まで)
この投稿にコメントでフィードバックをお願いします。あるいは、Gutenberg の GitHub リポジトリディレクトリ や TT1 ブロックの GitHub リポジトリ) に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。
注意: 当初、フィードバックは6月9日までとしていましたが、フィードバックの時間を確保するため、6月16日までに変更されました。
#fse-outreach-program, #fse-testing-call, #full-site-editing
Thanks!
この記事は、@atachibana の翻訳協力により公開することができました。ありがとうございます。