Discourse サイドバーメニューの並び替え

カスタマイズ テーマコンポーネント
1
:information_source: 概要 デフォルトおよびカスタムサイドバーメニューセクションの並べ替えを可能にします
:eyeglasses: プレビュー https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: リポジトリ https://github.com/Lillinator/discourse-sidebar-menu-reorder
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourse テーマが初めての方へ Discourse テーマの利用に関する初心者ガイド

このテーマコンポーネントをインストール

:bulb: はじめに

Discourse の管理者から、グローバルなカスタムセクションを含むサイドバーメニューセクションの並べ替えを希望するリクエストが複数寄せられていました。現在、CSS を用いてこれを行うことは直感的ではなく、多くのユーザーにとって簡単ではなく、管理や変更も困難です。そこで、管理者 UI でより簡単に操作できるようにするテーマコンポーネントを作成しました。

:woman_technologist:t2: 概要

この Discourse テーマコンポーネントを使用すると、管理者は管理者ユーザーインターフェース上で、デフォルトのセクションおよびグローバルに表示されるカスタムセクションを含む、フォーラムのサイドバーメニューセクションの並べ替えを行うことができます。

このコンポーネントは、デスクトップおよびモバイルのサイドバー表示、さらにヘッダーのドロップダウンモード（ただし、理想的にはサイドバーモード向けに設計されています）の両方で機能します。

:wrench: インストールと設定

  • Discourse テーマの利用に関する初心者ガイドに従って、このテーマコンポーネントをインストールしてください。
  • community セクションとは、サイドバーのデフォルトの最上部セクション（トピックヘッダーを持つメニューで、その他ドロップダウンサブメニューを含む）を指します。community セクションより上に移動させるセクション（デフォルトまたはカスタム）は、1〜2 つまでにすることをお勧めします。
  • 設定からデフォルトのセクションを削除しないでください。削除すると順序が崩れます（いつでも再度追加するか、設定をリセットできます）。
  • このコンポーネントを設定する最良の方法は、並べ替えリスト設定を含むコンポーネント管理画面を一つのブラウザウィンドウに、テストユーザーとしてのフォーラムサイドバー表示を別のウィンドウに並べて表示し、リスト内のメニューセクションの順序を変更するたびにページをリロードすることです。

:gear: 設定

設定 説明
Sidebar menu order デフォルトのメニューセクションを含むリスト設定です（community はサイドバーのデフォルトの最上部セクションで、More ドロップダウンサブメニューを含みます）。横にある上下矢印でメニューセクションの順序を変更できます。グローバルに表示されるカスタムセクションも追加可能です。カスタムメニューの名称スラッグを使用してください（例：「Test Menu」というカスタムメニューの場合は、設定に test-menu を追加します）。

このテーマコンポーネントは当初、デフォルトの設定になっています。管理者は、順序リストに混ぜたいグローバルなカスタムメニューセクションを追加し、デフォルトのセクションと一緒に並べ替える必要があります。

デフォルトのコンポーネント設定のスクリーンショット

image
image1632×2188 262 KB

:camera_flash: スクリーンショット

以下のスクリーンショットは、コンポーネント管理パネル（左）と通常のユーザー（右）に表示される community セクション、および「Dev Links」（dev-links）と「Toolbox」（toolbox）という 2 つのカスタムメニューセクションの例を示しています。コンポーネント管理設定でメニューセクションを上下に移動する矢印は、小さな赤い枠で示されています。

image
image1709×1200 222 KB

ここでは、デフォルトの categories セクションを community セクションの上に表示するように設定されています（折りたたみ状態と展開状態）：

image
image1632×2188 279 KB

image
image1363×2188 193 KB

image
image1462×2188 307 KB

以下は、2 つのカスタムセクションを使用した例です。デフォルトの community セクションより上に配置された dev-links と、デフォルトの tags セクションより下に配置された toolbox です。

image
image1632×2188 281 KB

image
image1411×2188 280 KB

image
image1425×2188 266 KB

また、上記の管理者スクリーンショットに表示されている inbox-section というセクションに注意してください。これは、サイドバー用のメッセージセクション コンポーネントがサイドバーに挿入する Messages セクションです（上記のカスタムメニュー toolbox の下に表示）。このコンポーネントを使用することで、このセクションの位置も変更できることがわかります。

さらに、このテーマコンポーネントは、グループサイドバーメニュー および インデントされたサブカテゴリ コンポーネントと併用可能です（上記のスクリーンショットを参照）。

:backhand_index_pointing_right: 注意事項

  • sidebar_menu_order 設定に新しいグローバルカスタムセクションを追加した後、フォーラムユーザーはブラウザをリロードするか、サイドバーを折りたたむ/展開する際に、新しい正しいメニュー順序を確認できます。
  • このコンポーネントが有効な状態で新しいグローバルカスタムメニューセクションを作成すると、サイドバーが再描画されるまで（ページのリフレッシュまたは折りたたみ/展開により）、管理者に一時的な重複セクションが表示されることがあります。
  • ユーザー作成のカスタムメニューセクションは、常にそのユーザーのサイドバーの最下部に表示されますが、それ以外は影響を受けません。
  • Admin -> 全サイト設定 -> チャット別サイドバーモード 設定が Always に設定されている場合、チャットボタンは通常通り最下部に表示され、このコンポーネントはデフォルトのチャットメニューセクション（chat-dms、chat-channels、chat-search）を無視します。
他の Discourse 関連の投稿もご覧ください
「いいね！」 26
Configuring the default sidebar for your users
Discourse Group Sidebar Menus
Messages section for sidebar
2

それは素晴らしいです。カテゴリ (1) の後にチャット (2) を設定する使い方がとても気に入りました。リリーさんの素晴らしい仕事にとても感謝しています。

「いいね！」 4
3

これはまだサポートされていますか？インストールを試みたところ、以下のエラーが発生しました。こちらから試したほか、手動の手順を使っても試しました。

Screenshot_20260225-174622
Screenshot_20260225-1746221008×2244 182 KB

4

はい、その通りです。「このテーマコンポーネントをインストール」ボタンのリンクは古いですが、上部にあるリンクはまだ正しく、手動でコンポーネントをインストールするためにそれを使用できます。

または、このボタンをお試しください。

このテーマコンポーネントをインストール

「いいね！」 2
5

OPのインストールボタンのリンクを修正したので、すべて問題ありません。

「いいね！」 4
6

折りたたみ式スマートフォンなどで「デスクトップ」画面が異常に狭い場合に、指定した順序が機能しないというバグに遭遇しました。

このように表示させたいです。

image
image458×851 33.5 KB
   
image
image1059×862 74.5 KB

画面サイズが奇妙な場合（幅が640〜820ピクセル程度）、順序が失われます。

image
image670×862 60.9 KB

「いいね！」 1
7

ああ、2カラムのサイドバーが戻ってきた。あれはなくなったと思っていたのに？見てみます…

「いいね！」 4
8

私が少し鈍かっただけでした！古いコンポーネントを使用しており、それに気づいていませんでした。

ただ一つ気づいた点があります。community と呼ばれていたものが、代わりに the-forum と呼ばれるようになっています。デフォルトを整理するためのプルリクエストは以下の通りです:

「いいね！」 1
9

私のフォーラムではまだcommunityと呼ばれており、ここMetaでも同様です。

image
image1258×159 35.2 KB

どのように変更したのか不思議に思います。

「いいね！」 2
10

それは確かに奇妙ですね！今思い返すと、ある時点でテキストを変更したことを覚えています。しかし、それがどのようにHTMLに入り込んだのかはわかりません！

そのPRを取り下げて、もう少し頭を悩ませる必要があります。私のサイトの「癖」として残るしかないかもしれません！

「いいね！」 1
11

rails コマンドで名前を元に戻せるはずです。もしセクション名が本当に the-forum であれば、rails コンソールからこれが機能するはずです。

cd /var/discourse
./launcher enter app
rails c

section = SidebarSection.find_by(title: 'the-forum', public: true)
if section
  section.update!(title: 'community')
  puts "完了: 'community' に名前が変更されました。"
else
  puts "セクションが見つかりません。"
end

必ず最初にバックアップを取ってください。

「いいね！」 3
12

ついに試してみました。ただし、セクションは見つかりませんでした：

image
image1147×245 29.6 KB

これは単にサイトの癖として残るしかないのかもしれませんね？

「いいね！」 1
13

(投稿が投稿者によって削除されました)

「いいね！」 2
14

注: このコンポーネント向けにいくつかのモバイル対応の修正をプッシュしました。以前は、デスクトップやタブレットでのみ表示されるべきサイドバーセクション間の水平線が、誤ってレンダリングされていました。

「いいね！」 2