テーマとテーマコンポーネントの新しいビジュアルレイアウトを紹介

Discourse のテーマとテーマコンポーネントの表示方法について、大幅なアップデートを発表できることを嬉しく思います!このアップデートにより、コミュニティのテーマとテーマコンポーネントの閲覧、選択、管理が、より直感的で使いやすいものになります。

:information_source: 変更点

テーマのビジュアルギャラリー体験

テーマページは、各テーマを適用する前にその見た目を簡単に確認できる、よりビジュアルなレイアウトに一新されました。

  • ビジュアルプレビュー: テーマの配色を組み合わせたサムネイル、またはテーマ開発者が追加したプレビューで、各テーマを正確に表現します。
  • 整理の改善: テーマはギャラリービューで表示され、関連情報がすぐに利用できるようになり、閲覧と選択がより直感的になりました。
  • 詳細へのクイックアクセス: 必須情報は一目でわかり、追加の詳細情報はクリックするだけで確認できます。

:light_bulb: 独自のテーマにビジュアルプレビューを追加したいですか? このガイドに従ってください

テーマコンポーネントの実用的なテーブルレイアウト

テーマコンポーネントには、効率性を重視した合理化されたテーブルレイアウトが導入されました。

  • 主要情報を一目で確認: コンポーネントの詳細と使用状況を、明確で構造化された形式で確認できます。
  • 並べ替えとフィルタリングの改善: 特定のニーズに基づいてコンポーネントを簡単に絞り込めます。
  • 簡単な操作: すべてのコンポーネントの有効化を、単一のビューから素早く制御できます。

これらのアップデートは、Discourse の管理を、特に非技術ユーザーにとって、より直感的でアクセスしやすくするための継続的な取り組みの一環です。テーマのビジュアルレイアウトは、サイトの外観に関するより情報に基づいた意思決定を支援し、コンポーネントの実用的なテーブルレイアウトは、サイトの機能を拡張しやすくします。

:eyes: 変更を確認する方法

これらの新しいページは、当社のホスティング上のすべての Discourse サイトですでに公開されています。Discourse 管理の「テーマとコンポーネント」ページに移動することで確認できます。セルフホストサイトの場合は、新しいページを実際に確認するには、最新バージョンにアップデートする必要があります。

:collision: さらなる改善にご期待ください!

これらの新しいページは、テーマ管理エクスペリエンスの継続的な改善の始まりにすぎません。テーマのカスタマイズをさらにアクセスしやすく、強力にするための追加機能に取り組んでいます。

これらの変更について、ぜひご意見をお聞かせください!ご意見をお聞かせいただくには、このトピックに返信してください。

「いいね!」 25

製品全体のモダナイゼーションの取り組み、素晴らしいですね!2021年にDiscourseで始めた頃を振り返ると、信じられない気持ちです。これからも続けてください :tada:

「いいね!」 6

スクリーンショットがある場合は、これが変わるかもしれませんが、ギャラリーよりも名前を本当に見たいです。

管理者がギャラリーを必要とする理由や目的がわかりません。

ただし、コンポーネントサイドは良好に見えます。

「いいね!」 3

テーマにスクリーンショットが追加されていない場合、テーマのカラーパレットから生成されたSVGが表示されるはずです。また、その画像の下にテーマの名前が表示されるはずです。これは、ここでの発表に示されているとおりです。

こちらの以前のトピックを見ると、そのページにカスタムCSSを追加した可能性があります。それがここで干渉しているのかもしれませんか?また、これらのテーマカードが広すぎて正しく折り返されていないため、レイアウトが正しくないようです。

このページに影響するCSSがあるかどうか確認していただけますか?

「いいね!」 3

テーマのプレビュー画像が、選択したカラーパレットを効果的に表示するために使用されると思いましたが、「クリームテーマ」のプレビュー画像が変わり続けています。

プレビュー画像の目的は何ですか?

選択したカラー スキームを伝えるために使用するのは、かなり良い選択肢だと思っていましたか?

「いいね!」 3

ページが読み込まれるたびに異なる生成画像が表示されますが、各画像はそのテーマ固有のカラーパレットによって生成されるため、まさにそのとおりです。いくつかの異なる画像形式を使用しますが、常にテーマのパレットを使用します。

ページをリロードするたびにテーマの同じ生成画像が表示される方が、より便利だとお考えになりますか?私たちはそれを検討し、それは可能なので、そこでのフィードバックは役立ちます。

「いいね!」 3

素晴らしい、意図は一致していますね。もう少し使ってみます。

各例がほぼ同等の効果で色を伝える限り、多少のバリエーションがあっても構いません。@hugh さん、ありがとうございます!

「いいね!」 2

フィードバックをお待ちしています。これらのページには、さらにいくつかの調整とアップデートを予定しており、現在すべて積極的に取り組んでいます。

「いいね!」 1

@Jagsterさんのご指摘の通り、ここで私が主に懸念していたのは、テーマコンポーネントの画像追加についてです。それが一部の方には非常に良いものかもしれませんが、その数の多さから、私の見解ではギャラリー表示は除外されるべきです。

新しいリストは素晴らしい変更です!:heart_eyes:

画像は、何かホバー(マウスオーバー)で表示されるようなものと組み合わせることは可能でしょうか?どうでしょう…

「いいね!」 4

はい、その通りです。セーフモードでは本来表示されるべきものが表示されます。奇妙ですね。管理画面に影響を与えるようなものは何もしていないと認識していましたが、明らかに何かしていました。

それに、ギャラリーがどこで必要になるのか、まだ疑問に思っています。管理者はウィンドウショッピングをしているのではなく、設定するためのテーマを探そうとしているのです。WordPressが使用しているもの(なぜそれをしないのかいつも不思議に思っていました)に似た、中央集権的なテーマライブラリを皆さんが行うのであれば、全く別の話です。

しかし、私の設定を台無しにしているものを掘り下げてみます。

ありがとうございます。

「いいね!」 4

はい。テーマコンポーネントの画像は、当初、この新しいテーブルベースのレイアウトに向けて作業を進める上での最初のイテレーションとして意図されていました。この新しいレイアウトは、より実用的で有用であると信じており、気に入っていただけて嬉しいです!

それが解決されることを願っています!

テーマは本質的に視覚的なものであるため、期待されるものを視覚的にプレビューすることは比較的役立ち、管理者がプロセスのこの段階であっても、どのテーマを設定するかを決定するのに役立ちます。

この新しいレイアウトでは、プレビューはテーマ開発者によって追加された画像、またはテーマのカラーパレットで使用されている色から生成された画像のいずれかになります。いずれにしても、管理者はダイブインする前に、期待されるものを少しプレビューできます。

WordPressと比較すると、WordPressダッシュボードのテーマライブラリにも同様のプレビュー画像があります(ただし、テーマ開発者が提供していない場合のフォールバックは単なる空白の画像です)。

中央のテーマライブラリについては、確かに議論したことがあります!現時点では何も進んでいませんが、レーダーには載っています。

「いいね!」 3

大好きです :star_struck:

いくつか(些細な)点があります:

画像の変更

はい、その方が良いでしょう。現在の実装は人々にとって本当に混乱を招きます。そして、明確さを低下させない場合にのみ、機能は「楽しい」はずです。

コンポーネントリストの並べ替え

フィルターは便利ですが、並べ替え列の順序が「有効」-「使用済み」-「名前」であれば、さらに良くなります。

使用箇所

テーマ名が2行に分かれているのが少し乱雑に見えると思います。テーマ名をラベルのようにして、視覚的に「未使用」と区別するためにわずかに異なる背景色を付けることはできませんか?

そして、ラベルをクリックすると自動的にフィルターされ、その特定のテーマによって使用されているコンポーネントのみが表示されるようになれば、それは素晴らしいでしょう。

しかし、現時点でもすでに素晴らしいものに非常に近いです!

「いいね!」 9

これは素晴らしいフィードバックです。ありがとうございます!全体的なレイアウトを気に入っていただけて嬉しいです。

フィードバックを承知いたしました。対応を進めます。

もっともなご意見です。デフォルトの並べ順を改善することは、確かに改善につながると私も思います。検討し、最適な方法を見つけますが、あなたの提案は非常に理にかなっています。

ご指摘ありがとうございます。興味深いご提案ですね!この表示を改善するための最善の方法を調査します。

ページ上部にこのようなテーマフィルターを追加することについて話し合いました。これはおそらくすぐに追加され、この列のテーマ名をクリックしたときに同じフィルター機能が動作するようになると、素晴らしい追加機能になるでしょう。間違いなく検討します。

これらすべてについて、ありがとうございます。さらなる改善にご期待ください!

「いいね!」 5

時々、自分はなんて愚かなんだろうと思います🤦‍♂️

コンポーネントのギャラリービューを使おうとした最初の不幸な試みを修正したCSSスニペット…さて、それはテーマサイドを壊してしまいました。

もう使う必要はありません
.admin-config.customize {
  .admin-detail {
    padding: 0;
  }
  .themes-cards-container {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 0;
  }
  .admin-config-area-card__content {
    flex-grow: 0;
    margin: 0;
    padding: 0;
  }
  .theme-card {
    flex-direction: row;
    margin: 0;
    padding: 0.75rem 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--primary-low);
    &__image-wrapper,
    &__content {
      display: none;
    }
    &__footer {
      gap: 1rem;
    }
  }
  .theme-install-card {
    margin-top: 1rem;
  }
}

これらのコメントは削除した方がいいと思います。役に立たず、トピックを汚染しているだけです。

「いいね!」 4

問題が見つかってよかったです!

コメントの削除は気にしないでください。ここでは皆で一緒に学んでいますから :slight_smile:

「いいね!」 6

ダッシュボードの通知をクリックすると古いインターフェイスに遷移することに気づきました。リロードすると新しいインターフェイスが表示されます。

「いいね!」 3