新しいトピックツールバーに表示されるボタン（およびその順序）をカスタマイズする方法があるかどうか疑問に思っています。
具体的には、日付/時刻ボタンをイベント追加ボタンに置き換えたいと考えています。日付/時刻は新規ユーザーを混乱させるだけで、私たちのコンテキストではイベントが強調したいことです。ユーザーに、カレンダーのように見えるボタンを無視し、歯車アイコンをクリックしてから、もう一方のカレンダーのように見えるアイコンをクリックするように指示するのは、私たちのコミュニティには多くの非技術志向の高齢者が使用していることを考えると、最善とは言えません。
新しいトピックのボタンをカスタマイズする方法についてのトピックはいくつか見られますが、ツールバー自体のカスタマイズについては見つかりませんでした。
ツールバーを設定するオプションはありませんが、テーマやプラグインを通じて設定することは可能です。
この機能があれば便利なので、機能リクエストとして再分類します。
現時点では、CSSでボタンを非表示にすることができます…たとえば：
.d-editor-button-bar {
.local-dates { // 日付ボタンを非表示にする
display: none;
}
}
または、
メニューのオプションを非表示にする場合
.toolbar-popup-menu-options {
[data-name="Build Poll"] {
display: none;
}
}
CSSを使用すると、これらのメニュー内の項目の順序を変更することも比較的簡単です…次のようなことができます。
.d-editor-button-bar {
.local-dates { // 日付ボタンを先頭に移動する
order: -1;
}
}
CSSの変更方法については、こちらのガイドをご覧ください。
とはいえ、より難しい変更は、ドロップダウンメニューからメインツールバーへの（またはその逆の）移動です。CSSで元のボタンを非表示にし、APIを使用して重複したボタンを追加する必要があります。
Discourse Gifsのようなテーマコンポーネントの例を見ると、それがどのように行われるかの一般的なアイデアが得られます…ただし、開発者でない場合はこれは難しくなります。
メニューについて
このように記述しても、表示順序が変わらなかった。
追伸: display: none; も機能しなかった。
.toolbar-popup-menu-options {
[data-name="Create event"] {
order: -1;
}
}
以下の構文は期待どおりに機能し、「Create event」を一番上に移動させる。
.select-kit-collection {
display: flex;
flex-direction: column;
}
.select-kit-row[data-name="Create event"] {
order: -1;
}
CSSには詳しくないので、上記のコードはChatGPTに作成してもらった。
はい、これは本当に必要です。「デフォルト」オプションをすべてのユーザーに提供するだけでなく、各ユーザーがカスタマイズできるようにする必要があります。なぜなら、すべての人がテキストを「太字」や「斜体」、さらには「AIに質問」するためのボタンを必要とするわけではないからです。
しかし、現時点では、少なくともグローバルに項目を移動させたり、非表示/歯車アイコンメニューに追加したりできるだけでも役立ちます。
私の13インチ画面では、少し窮屈になってきています（引用セクションなどのために、元のトピックの一部を常に表示しておきたいのです）。
「20文字必要」という注釈をどのように追加しましたか？また、入力済みの文字数を表示することはできますか？
タイトルについてはどうですか？
正直なところ、よくわかりません。以前運営していた（現在は運営していない）コミュニティにインストールされていたものです。こちらにあるようです。GitHub - discourse/discourse-characters-required: Display how many characters are required before a post be made
ありがとうございます！まさにそれです！
私のフォーラムにも高齢者がいますが、彼らにこれを説明するのは馬鹿げていると感じます。
歯車も「もっとある」という非常に明白ではないシンボルです。楕円形の方が適切でしょうか？アイコンを直接変更する方法はありますか？
ここでのもう一つのつまずきは、モバイルではツールバーを表示/非表示する小さなハンバーガーアイコンがあり、デフォルトではオフになっているようです。これは、提供できる利点よりもはるかに多くの混乱を引き起こします。これをオフにしました。
.composer-controls .toggle-toolbar {
display: none;
}
.d-editor-button-bar {
display: grid !important;
}
こんにちは、この方法はまだ推奨されていますか、それともこれの影響を受けますか？
.js イニシャライザーからの api.onToolbarCreate は引き続きサポートされています 
リンク先のトピックは、<script type="text/discourse-plugin"> タグに JavaScript を含めることのみを参照しています。
こんにちは。
「イベント作成アイコン」は、+メニューの右外側に配置されていますが、以下の手順で左側に配置できます。
<!-- カスタムイベント作成ボタン（アイコンベース、言語対応） -->
<script>
(() => {
const editorBarSelector = ".d-editor-button-bar";
const triggerSelector = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
const menuInnerContentSelector = ".fk-d-menu__inner-content";
const modalSelector = ".d-modal.fk-d-menu-modal";
const getCreateEventButton = (container) => {
const svgUse = container.querySelector('svg use[href="#calendar-day"]');
return svgUse ? svgUse.closest("button") : null;
};
const waitForElement = (selector, findFn, timeout = 4000) =>
new Promise((resolve, reject) => {
const element = findFn(selector);
if (element) return resolve(element);
const observer = new MutationObserver(() => {
const foundElement = findFn(selector);
if (foundElement) {
observer.disconnect();
resolve(foundElement);
}
});
observer.observe(document.body, { childList: true, subtree: true });
setTimeout(() => {
observer.disconnect();
reject();
}, timeout);
});
const waitForModal = (timeout = 4000) => {
const observer = new MutationObserver(() => {
if (document.querySelector(modalSelector)) {
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
setTimeout(() => observer.disconnect(), timeout);
};
const addCustomCreateEventButton = (editorBar) => {
if (editorBar.querySelector(".custom-create-event-btn")) return;
const button = document.createElement("button");
button.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
button.title = "Create event"; // 言語対応が必要な場合はここで翻訳
button.innerHTML = '<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>';
editorBar.appendChild(button);
button.addEventListener("click", async () => {
const trigger = document.querySelector(triggerSelector);
if (!trigger) return;
trigger.click();
let menuContent = document.querySelector(menuInnerContentSelector);
if (!menuContent) {
await new Promise((resolve, reject) => {
const observer = new MutationObserver(() => {
menuContent = document.querySelector(menuInnerContentSelector);
if (menuContent) {
observer.disconnect();
resolve();
}
});
observer.observe(document.body, { childList: true, subtree: true });
setTimeout(() => {
observer.disconnect();
reject();
}, 2000);
});
}
try {
(await waitForElement(menuContent, getCreateEventButton)).click();
waitForModal();
} catch {
// エラー処理
}
});
};
const observer = new MutationObserver(() => {
const editorBar = document.querySelector(editorBarSelector);
if (editorBar) {
addCustomCreateEventButton(editorBar);
}
});
observer.observe(document.body, { childList: true, subtree: true });
const initialEditorBar = document.querySelector(editorBarSelector);
if (initialEditorBar) {
addCustomCreateEventButton(initialEditorBar);
}
})();
</script>
.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }
@david、@opcourdis、有益な返信をいただき、誠にありがとうございました。
