owned this note   changed 3 years ago  
Published Linked with GitHub

FSEプログラムのテスト募集 #15: カテゴリーのカスタマイズ

以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #15: Category Customization」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください。

この投稿は、フルサイト編集アウトリーチプログラムの15回目のテスト募集です。この実験的なプログラムの詳細については、こちらの FAQ を参照してください。プログラムに参加するには、Make Slack の #fse-outreach-experiment で共有される、今後のテストの告知や役に立つ投稿などを参照してください。

概要

今回のテスト募集では、表面的には、サイトエディターでこれまで行ってきた一般的なタスクに焦点を当てます。つまり、新しいテンプレートを作成し、いくつかの投稿に適用します。しかし、タスクを進めていくうちに、次のような機能の連携に (きっと) 驚き、サイト編集体験の奥深さを実感するでしょう。

追加のテンプレートオプション

サイトエディタから作成可能なテンプレートの拡張は、引き続き高い優先度で開発されていて、多くの新しいオプションがあります。今回のテストでは特に一般的な「カテゴリーテンプレート」に焦点を当てますが、Gutenberg 13.7 (次のバージョン) では、特定のカテゴリー用のテンプレートを作成できるようになります。例えば「WordPress」に分類されたすべての投稿に、固有のテンプレートを用意できます。このテスト募集に参加するタイミングによっては、この新しいオプションを試せるかもしれません。

新しいテンプレートピッカーデザイン

Gutenberg 13.6では、テンプレートピッカーのデザインが新しくなりました。スペースを取らず、他の投稿の詳細とより自然に整合します。

新しいテンプレートパーツ選択体験のビジュアル

より分かりやすいレイアウトコントロール

「継承デフォルトレイアウト」と聞くたびに困惑していたのであれば、最近、この機能の説明が更新されたのは嬉しい知らせでしょう]。

(セミロック) 新しい投稿を作成する際のスターターパターン

パターンも、そして、さまざまなブロックがロックされている事実もすべて、エディタ体験のカスタマイズに利用される機能の一部です。新しい WordPress サイトにそのまま組み込まれることはなさそうですが、それらを利用する人が素晴らしい体験をできるようにテストすることは重要です。今回のテストでは、WordPress 6.0のページで初めて導入され、Gutenberg 13.6ではすべての投稿タイプで利用できるようになった新しいスターターパターンを確認します。ボーナスとして、各パターンではいくつかのブロックがロックされ、よりきめ細かな方法で体験を制御する方法を模索しています。

カバーブロックでのアイキャッチ画像の使用

今回のテストに登場する、WordPress 6.0から搭載されたもう一つの機能は、アイキャッチ画像使用時のプレースホルダーの改善や、メディアの置換オプションでの見つけやすさです。

アイキャッチ画像を使用するカバーブロック機能のビジュアル

テスト手順

ヒント: このテスト実行でのコンテンツ間の移動には、リストビューが便利です。

InstaWP についての注意

InstaWP チームが、この FSE プログラムテストのために利用可能なアカウントを準備してくれました。自分でテストサイトを立ち上げなくても、一時的なテストサイトを使用できます。InstaWP でサイトを立ち上げた場合、InstaWP はメールアドレスを収集しません。このため、再度サイトにアクセスするには、リンクを保存しておく必要があります。InstaWP チームに感謝します。

テストサイトの立ち上げ、または、テスト環境のセットアップ

構築済みのテストサイトを使用する

  1. 次のリンクを1度だけ開く: https://app.instawp.io/launch?t=fse-fifteenth-call-for-testing このリンクを繰り返し開かないでください。クリックのたびに新しいサイトが作成されます。作成可能なサイト数は50に制限されています。
  2. これにより、最長で14日間使用できるサイトが起動します。「Access Now (今すぐアクセス)」を選択し、WordPress 管理画面でログインします。
  3. テスト中に再びアクセスできるように、リンクを保存してください。
  4. 日本語に切り替える場合は、「Settings」を選択し、「Site Language」で「日本語」を選択し、「Save Changes」をクリックします。また Gutenberg 系の文字列が英語の場合は、「プラグイン」画面で、「Gutenberg」を一度無効化してから、再度、有効可し、「ダッシュボード」 > 「更新」で翻訳を更新してください。
  5. 「外観」 > 「エディター (ベータ)」にアクセスします。自動的に、サイトエディターでホームページのテンプレートが開かれます。

自分でテストサイトをセットアップする

  1. 最新バージョンの WordPress を使用したテストサイトを用意します。これは、本番またはライブサイトではないことが重要です。
  2. Twenty Twenty-Two テーマを「外観」 > 「テーマ」からインストールし、有効化します。Twenty Twenty-Two テーマにパターンフォルダを追加し、以下の2つのファイルを追加してください。
    new-event-announcement.php と event-recap.php
    この機能についての詳細はこちらです。

新しいパターンフォルダとその中に置かれた2つのパターンで、テストサイトのファイルがどのように見えるかのビジュアルです。

  1. 「プラグイン」 > 「新規追加」から Gutenberg プラグインをインストールし、有効化します。すでにインストールされている場合は、最低でも Gutenberg 13.6以上をを使用していることを確認してください。
  2. そこから、「外観」 > 「エディター （ベータ）」に移動します。これで自動的にホームページのテンプレートに対応したサイトエディターが開かれます。

カテゴリーテンプレートの作成

  1. 次に 「W（訳注：左上の W ロゴ） メニュー」 > 「テンプレート」を開きます。これでテンプレートのリストが開きます。サイトのロゴを設定している場合は、大きな W の代わりにそれが表示されているでしょう。
  2. 「新規追加」>「カテゴリー」を選択します。これで新しい空のテンプレートが開きます。
  3. お好みで、ヘッダーまたはフッターのテンプレートパーツを追加してください。直接「ヘッダー （Header）」または「フッター （Footer）」で検索するか、テンプレートパーツブロックを追加して、好きなものを選択することでできます。
  4. クエリーループブロックを追加し、好きなデザインのオプションを選択してください。
  5. クエリーループブロックを選択し、ブロックの設定サイドバーを開いて「テンプレートからクエリーを継承」オプションが選択されているか確認してください。これにより適切な投稿が表示されるようになります。
  6. このテンプレートは特定のカテゴリーの投稿を表示する時に使用されることを念頭に置いて、テンプレートをカスタマイズしてください。完成したら、「保存」を押して、新しいテンプレートを公開します。

パターンを探求するために2つの新しい投稿を作成

  1. 「W メニュー」を開き (サイトアイコンを設定している場合は、そちら)、「ダッシュボード」を選択して、WordPress 管理画面に戻ります。
  2. 「投稿」 > 「新規追加」をクリックし、新しい投稿を作成します。
  1. 「New Event Announcement (新しいイベントのアナウンス)」パターンを選択し、自由に記入します。投稿一覧の中に、このパターンを使用したサンプル投稿「WordCamp Museum」がありますので参考にしてくださいさい。いくつかのブロックがロックされていることに注意してください。この操作感をどう思うか、いくつか試してみてください。例えば、もっとブロックをロックする、現行のロックを解除する、等々。
  2. アイキャッチ画像を設定し、パターンのカバーブロックでどのように表示されるかを確認してください。この機能を自由にカスタマイズしてください。
  1. 公開する前に、投稿の設定を開き、カテゴリー「Events」を割り当て、「テンプレート」セクションの新しいポップオーバーインターフェースで、自由に異なるテンプレート選択してください。
  2. 管理画面に戻り、別の新しい投稿を作成します。
  3. 「Event Recap (イベント報告)」パターンを選択し、自由に記入します。投稿一覧の中に、このパターンを使用したサンプル投稿「WordCamp Museum Recap」がありますので参考にしてくださいさい。いくつかのブロックがロックされていることに注意してください。この操作感をどう思うか、いくつか試してみてください。
  1. 見出し「Attendees(出席者)」の下の、名前の一覧を含むグループブロックを選択します。サイドバーの設定を開き、「レイアウト」の下で「インナーブロックは全幅を使用する」オプションをオンにして、自由にカスタマイズしてください。例: 色、フォントサイズ、寸法の変更等々。
  2. 公開する前に、投稿の設定を開き、カテゴリー「Events」を割り当て、「テンプレート」セクションの新しいポップオーバーインターフェースで、自由に異なるテンプレート選択してください。

カテゴリーテンプレートを確認

  1. 以上です。「イベント」カテゴリーを表示すると、テンプレートと投稿の完全な形が表示されます。カテゴリーテンプレートは、 yoursiteurl.com/category/events/ にアクセスすると表示されます。

注意する点:

必要であれば、作成したページのスクリーンショットを共有してください。

  • どこかでクラッシュしませんでしたか ?
  • 保存した際、正しく保存できましたか ?
  • テストで困った点、イライラした点はありませんか ?
  • テストで楽しかった点、いいねと思った点はありますか ?
  • もっと編集が楽になるには何があればよいですか ?
  • エディターで作成したページは、サイトの他の箇所とマッチしますか ?
  • キーボードだけで動作しましたか ?
  • スクリーンリーダーだけで動作しましたか ?

フィードバックをお願いします (2022年8月1日まで)

#fse-outreach-program, #fse-testing-call

Select a repo