これは Discourse テーマの基礎を学ぶ速習コースです。対象読者は Discourse テーマに不慣れなすべての人です。すでに Discourse テーマやテーマコンポーネントを使用した経験がある場合は、このガイドを読む必要はないでしょう。
テーマとテーマコンポーネントとは？
テーマやテーマコンポーネントは、Discourse の外観を変更したり、新しい機能を追加したりするために設計され、パッケージ化されたファイルのセットです。
まずはテーマから始めましょう。
テーマ
一般的に、テーマは互いに互換性を持たないようになっています。なぜなら、それらは本質的に異なるスタンドアロンのデザインだからです。テーマは、Android におけるスキンやランチャーのようなものと捉えてください。複数のランチャーをインストールすることはできますが、同時に2つを使用することはできません。デフォルトの Discourse インストールには、Foundation と Horizon の2つのテーマが付属しています。
Foundation はクリーンでクラシックな Discourse の外観を提供し、Horizon は複数のカラーパレット（Horizon、Royal、Clover、Lily、Violet、Marigold — 各色にライトとダークのバリエーションあり）から選べるモダンなデザインを提供します。
Foundation
および Horizon
これだけでは物足りず、もっと多くのテーマが欲しいと思った場合、追加のテーマを比較的容易にインストールすることができます。ここでは、Meta で入手可能な無料テーマのいくつかの例を示します。
Sam’s personal “minimal” topic list design
ご覧の通り、選択するテーマによってサイトの外観は劇的に変化します。しかし、これだけではありません。テーマの上に、Discourse はテーマコンポーネントもサポートしています。
テーマコンポーネント
「テーマコンポーネント」という用語は、Discourse の特定の側面のカスタマイズに重点を置いたパッケージを説明するために使用されます。焦点が狭い性質上、テーマコンポーネントはほぼ常に互いに互換性があります。つまり、任意のテーマの下で複数のテーマコンポーネントを同時に実行できます。テーマコンポーネントは、スマートフォン上のアプリのようなものと捉えてください。
常に例が最もわかりやすい説明となるため、Meta で入手可能なテーマコンポーネントのいくつかの例を以下に示します。
このテーマコンポーネントは、既存のカテゴリの詳細（名前、説明、色を含む）を取得し、該当するカテゴリページの上部にバナーを生成します。
このテーマコンポーネントは、モバイルおよびデスクトップビューの両方で、ロゴ、ナビゲーションリンク、ソーシャルアイコンを含むブランディング用の追加のトップヘッダーを追加します。ブランドロゴは画像またはテキストにできます。
ご覧の通り、テーマコンポーネントははるかに狭い焦点を持っています。そのため、ほとんどの場合互いに互換性があります。これで、Discourse テーマとテーマコンポーネントが何であるかについて一般的な理解が得られたと思います。もう少し深く掘り下げてみましょう。
Discourse テーマインターフェース
テーマのインターフェースを見てみましょう。your.site.com/admin/customize/themes にアクセスすると、以下のような画面が表示されます。
これは Discourse のデフォルトのテーマインターフェースです。ここでは以下の操作を行うことができます。
- デフォルトの有効テーマを設定する
- ユーザーに提供するテーマを選択する
- 新しいテーマとテーマコンポーネントを作成する
- 新しいテーマとテーマコンポーネントをインポートする
- テーマにテーマコンポーネントを追加する
- カラーパレットを変更する
- テーマ設定を変更する
- テーマをプレビューする
これらを順に見ていきましょう。
デフォルトの有効テーマを設定する
テーマがデフォルトとして設定されていることを示すバッジが表示されます。
次に、有効なテーマを Horizon に変更してみましょう。メニューボタン … から、またはテーマ名をクリックして設定ページでチェックボックスを選択することでこれを行うことができます。
サイト上の有効なテーマは Horizon に設定されます。つまり、サイトを訪問するすべての人がこれを見ることになります。
ユーザーに提供するテーマを選択する
サイト用のテーマを設定できるのは便利ですが、さらに良い方法があります。ユーザーに決定させることです。Discourse では、ユーザーに異なるテーマを提供し、ユーザーが好みに合わせてテーマを設定できるようにすることができます。その選択はユーザー自身のアカウントに限定され、有効なテーマの選択や他のユーザーの選択には影響しません。
例えば、有効なテーマをデフォルトテーマ（Horizon）に設定しつつ、Foundation テーマをオプションとして提供することができます。では、テーマインターフェースで実際に試してみましょう。
メニューボタン … をクリックし、「ユーザーの選択を許可する」を選択するだけです。
これだけで完了です。「ユーザー選択可能」バッジが表示されるようになります。
そして、ユーザーは以下のページにアクセスして、好みのテーマを選択できるようになります。
your.site.com/my/preferences/interface
新しいテーマとテーマコンポーネントを作成する
新しいテーマやテーマコンポーネントを作成するには、「インストール」ボタンをクリックします。
するとダイアログボックスが表示されます。メニューの「新規作成」オプションを選択します。作成したいものの名前を入力し、それがテーマかテーマコンポーネントかを選択する必要があります。
ここで、テーマとテーマコンポーネントの基礎について少し触れました。お覚えている通り、テーマコンポーネントは通常、Discourse の特定の領域の変更に焦点を当てています。一方、テーマは一般的に複数の要素をカバーします。また、テーマの下には任意の数のテーマコンポーネントを含めることができますが、テーマコンポーネントの下には含めることはできない点にも注意してください。今はこれについて過度に心配する必要はありません。この関係性に関するより詳細な説明は後で行います。
さて、名前に決まり、テーマを作成することにしたとしましょう。「作成」ボタンを押すと、テーマが作成され、その後以下を行うことができます。
- テーマ/テーマコンポーネントの名前を変更する
- テーマ用のカラーパレットを設定または変更する
- テーマに子コンポーネントを追加する
- テーマ/テーマコンポーネントに html/css/js を追加する
- テーマにファイルまたはアップロードを追加する
具体的なカスタマイズはこのガイドの範囲外であるため、この点についてはここで終了とします。
html/css/js を追加するインターフェースは以下のようになります（上記の #4 をクリックした場合）。
新しいテーマとテーマコンポーネントをインポートする
テーマのインポート方法に関するガイドはすでにありますが、このガイドは基礎をすべてカバーすることを目的としているため、ここではその方法も含めて説明します。
テーマやテーマコンポーネントをインポートするには、「インストール」ボタンをクリックします。
「人気」セクションでは、最も人気のあるテーマやコンポーネントのリストからプレビュー/インストールを行うことができます。
デバイスからテーマファイルをインポートしたり、テーマリポジトリのリンク経由でインポートしたりすることもできます。各テーマのリポジトリリンクは、テーマトピックの著者によって提供されます。テーマをインポートすると、前述したすべての操作が適用されます。デフォルトに設定したり、ユーザー選択可能にしたりすることができます。
テーマコンポーネントをインポートした場合、それを任意のテーマに追加することもできます。これは次のセクションで詳しく説明します。
テーマにテーマコンポーネントを追加する
Discourse カテゴリバナーのテーマコンポーネントが好きで、それを使いたいとしましょう。その場合、以下の手順を実行します。
- 上記で説明したように、リポジトリからテーマをインポートする
- 有効/ユーザー選択可能なテーマにテーマコンポーネントとして追加する
以下のように行うことができます。
コンポーネントをインポートした後、追加したいテーマに移動し、「含まれているコンポーネント」セクションを探します。
このリストには、インストールされているすべてのテーマコンポーネントが表示されます。そこから、テーマにテーマコンポーネントを追加できます。Homepage Feature コンポーネントを追加する場合は以下のようになります。
同様に、個々のコンポーネントのページから「これらのテーマにコンポーネントを含める」オプションが存在します。これにより、一度に複数のテーマにコンポーネントを追加できます。
これですべてです。Homepage Feature はこれでデフォルトテーマの有効なコンポーネントになります。別のテーマにも追加したい場合は、テーマコンポーネントを追加するプロセスを繰り返します。
Foundation テーマをユーザー選択可能に設定し、Homepage Feature テーマコンポーネントもそれに追加した場合、Foundation テーマを有効なテーマとして選択するユーザーは、Foundation テーマの「子テーマ」であるため、Homepage Feature テーマコンポーネントも受け取ることになります。
テーマの下には無数のテーマコンポーネントを持つことができ、前述の通り、それらは通常互いに互換性があります。そのため、以下のようなことができます。
そして、それらのすべてのコンポーネントがテーマ上で同時に有効になります。
カラーパレットを変更する
カラーパレットは、テーマ内の要素の色を生成するために選択する色のセットです。ここでは詳細には立ち入りませんが、カラーパレットの使用方法を示します。
your.site.com/admin/config/colors に移動すると、以下が表示されます。
ここから、カラーパレットを編集したり、新しいものを作成したりできます。カラーパレットを編集するには、それをクリックして色をお好みに変更します。
新しいカラーパレットを作成するには、こちらをクリックします。
色の変更が完了したら、次に有効またはユーザー選択可能なテーマでカラーパレットを有効に設定します。そのためには、テーマのページに移動し、以下を探します。
テーマ設定
Discourse テーマには設定を持つことができます。これらの設定は、ニーズに応じてテーマやテーマコンポーネントを簡単に構成できるように設計されています。例えば、Homepage Feature テーマコンポーネントには、どのトピックを特集するかを制御するためのいくつかの設定があります。
すべてのテーマ/テーマコンポーネントに設定があるわけではありませんが、設定がある場合は常にここに表示されます。設定には、著者が提供する指示が含まれており、それに基づいてどのような変更を行うべきかを判断できます。
テーマのプレビュー
テーマを適用する前に、サイト上でどのように見えるかを確認する必要がある場合があります。Discourse は、テーマを有効にせずにプレビューできる簡単な方法を提供しています。
テーマのページにいる間に、こちらをクリックします。
すると、新しいタブが開き、テーマがサイト上でどのように見えるかのライブプレビューが表示されます。異なるページに移動して、すべてがどのように見えるかを確認できます。テーマのプレビューの最大の利点は、何か問題が発生した場合でもサイトに影響を与えることなく、変更をライブでテストできることです。
追加情報
セーフモード
Discourse には、問題が発生した場合に現在の有効なテーマをバイパスするための組み込みの機能があります。例えば、コンポーネントのコード内の JavaScript エラーにより、サイトが正常に動作しなくなる場合があります。現在の有効なテーマをバイパスするには、単に以下にアクセスします。
your.site.com/safe-mode
すると以下が表示されます。
そこから、現在の有効なテーマを無効にし、テーマページに移動して問題を修正するか、テーマを完全に無効にすることができます。
新しいテーマの入手
新しいテーマやテーマコンポーネントを見つける最も直接的な方法は、Meta の Customization > Theme および Customization > Theme component カテゴリを確認することです。
さらに読む
Designer's Guide to getting started with themes in Discourse
Developing Discourse Themes & Theme Components
Using Safe Mode to troubleshoot issues with themes and plugins
Structure of themes and theme components
Create and share a font theme component
Create and share a color scheme
Use Discourse Core Variables in your Theme
Add settings to your Discourse theme
Theme Creator, create and show themes without installing Discourse!
ご質問がある場合は、遠慮なくお尋ねください。