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

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

制限の理解

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

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

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

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

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

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

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

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

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

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

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

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

  4. 作成した新しいコンポーネントに自動的にリダイレクトされます。

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

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

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

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

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

重要な注意事項

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

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

「いいね!」 13