編集コードボタンなしでテーマをカスタマイズする

Discourse テーマをカスタマイズしたいが、「カスタムコード」セクションに「コードの編集」ボタンがない場合があります。これは、リモートテーマ(外部ソースからインストールされたテーマ)やプリインストールされたテーマ(Horizon & Foundation)でよく発生します。それでもカスタマイズを追加する方法は次のとおりです。

制限の理解

プリインストールされたテーマの場合、次のバナーが表示されます。

このテーマはプリインストールされており、削除またはカスタマイズすることはできません

リモートテーマの場合、通常は次のようなメッセージが表示されます。

このテーマを編集したい場合は、リポジトリに変更を送信する必要があります

:discourse2: Discourseでホストされていますか?その場合、「リモートテーマの編集はDiscourseで無効になっています。お問い合わせください。カスタマイズされたリモートテーマをローカルテーマに移行するのを支援します。」と表示される場合があります。

カスタマイズのオプション

  1. メインリポジトリに変更を送信する: 変更が他のユーザーにも役立つ可能性がある場合は、テーマの元の作成者に提案することを検討してください。これには、gitとGitHubに関する知識が必要です。
  2. リポジトリのコピー(フォーク)を作成する: テーマのコードリポジトリの独自のバージョンを作成し、カスタマイズを追加して、コピーしたバージョンを使用します。この方法には技術的な知識が必要であり、自分で更新を維持する必要があることを意味します。
  3. カスタムコンポーネントを作成する: この方法により、元のテーマを変更せずにカスタマイズを追加できます。これはほとんどの管理者にとって推奨されるアプローチであり、このガイドで焦点を当てます。

カスタムコンポーネントの作成

テーマのカスタマイズのためにカスタムコンポーネントを作成するには、次の手順に従います。

  1. サイトの管理パネルに移動し、/admin/config/customize/components に移動します。

  2. 右上にある「インストール」ボタンをクリックします。

  3. 「+新規作成」を選択し、コンポーネントの名前(例:「カスタムコンポーネント」)を入力し、タイプとして「コンポーネント」を選択して、「作成」をクリックします。

  4. コンポーネントのリストで新しく作成されたコンポーネントを見つけて、「編集」ボタンをクリックします。

  5. カスタマイズしたいテーマにコンポーネントを追加します。

    :warning: 緑色のチェックマークをクリックして保存することを忘れないでください

  6. 「コードの編集」をクリックします。

  7. 適切なセクション(CSS、<head>など)にカスタマイズを追加します。

  8. 「保存」をクリックして変更を適用します。

重要な注意点

  • カスタマイズは、既存のテーマの上に適用されます。
  • ベーステーマが更新されても、カスタムコンポーネントは引き続き変更を適用します。これにより、予期しない結果が生じる場合があります。
  • テーマの更新後は、必ずカスタマイズを徹底的にテストしてください。

これらの手順に従うことで、リモートテーマファイルを直接編集することなく、DiscourseテーマにカスタムCSS、HTML、またはその他の変更を追加できます。この方法は、サイトの外観や機能を少しカスタマイズしたいほとんどの管理者にとって適しています。

「いいね!」 9