現在のプランを確認
Suite、すべてのバージョン Growth、Professional、EnterpriseまたはEnterprise Plus
Support + Guide ProfessionalまたはEnterprise

各ヘルプセンターテーマは、編集可能なページテンプレートとカスタムページのコレクションで構成されています。また、ヘルプセンターの「Curlybars」テンプレート言語を使用してヘルプセンターデータにアクセスし、ページ内のコンテンツを編集することもできます。

この記事では、使用できるコードスニペット付きのレシピのリストを提供します。ここで紹介するレシピの一部の機能は、標準テーマとカスタムテーマのどちらを使用しているか、またヘルプセンターを導入した日付に応じて、ヘルプセンターにすでに搭載されていることがあります。

トライアル版のユーザーには、コード編集オプションが含まれるProfessionalプランが適用されますが、その後購入時にSuite Teamプランをお選びいただいた場合、コード編集オプションは利用できなくなります。

メモ：この記事は説明のみを目的としています。記事内で例示したカスタムコードについて、Zendeskカスタマーサポートはサポートも保証もしません。
この記事では、次のトピックについて説明します。
  • Curlybarsテンプレート言語について
  • 特定のカテゴリ、セクション、記事についてページテンプレートをカスタマイズする
  • 言語セレクタの言語名をカスタマイズする
  • 言語セレクタで1つ以上の言語を非表示にする
  • 日付順または投票数順に、ユーザーが記事のコメントを並べ替えられるようにする
  • 書式ツールバーを記事のコメントエディターに追加する
  • 記事のコメントにユーザーが投票できるようにする
  • 「瞬時に検索」（自動補完）の結果をヘルプセンターに追加する
  • ヘルプセンターの検索に外部コンテンツを含めるために横串検索を追加する
  • カスタムテーマに生成検索の結果を追加する
  • 「マイアクティビティ」の「フォロー中」ページでサブスクリプションタイプ別の並べ替えを追加する
  • 「マイアクティビティ」のリクエスト用に「作成日時」と「更新日時」の並べ替えオプションを追加する
  • 共有化が行われている組織のユーザーのために「フォローする/フォローを止める」ボタンを追加する
  • サポートリクエストでユーザーがほかのユーザーをCCに含められるようにする
  • 補足リクエストに元リクエストへのリンクを追加する
  • カスタマーポータルで解決済みチケットのCSATを有効にする
  • 記事に投票ボタンを追加する
  • コンテンツタグを記事および投稿に追加する
  • バッジをカスタムヘルプセンターのテーマに追加する
  • ヘルプセンターのユーザープロフィールをユーザーが参照できるようにする
  • ヘルプセンターテーマのサブセクションを有効化する
  • 検索結果ページに複数のヘルプセンター用のサイドバーフィルターと結果を追加する
  • ヘルプセンターにスパムフィルターを追加する
  • ヘルプセンターに承認を追加する
  • ヘルプセンターにサービスカタログを追加する

Curlybarsテンプレート言語について

ヘルプセンターは、テーマフレームワークに基づいて作成されており、このフレームワークには高度なカスタマイズのための専用テンプレート言語が含まれています。各ヘルプセンターテーマは、編集可能なテンプレートとオプションのカスタムページのコレクションで構成されています。

編集可能なページテンプレートは、各ページのレイアウトを定義します。たとえば、ナレッジベースの記事用のテンプレートや、リクエストのリスト用のテンプレートなどがあります。テンプレートは、ユーザーが表示した場合にHTMLページとして描画される、シンプルなテキストファイルです。各テンプレートは、HTMLマークアップと、テンプレート内で二重の波かっこで囲んで表される式（例：{{post.title}}）で構成されます。

カスタムページは、ヘルプセンターのテーマのコードベースに組み込まれており、ヘルプセンター内のどこからでもリンクできる特定のURLを持ちます。カスタムページを使用して、個別の要件に合うページをいちから作成してコーディングすることができます。たとえば、カスタムページを使用して、ヘルプセンター用の特別なランディングページを作成したり、Zendesk以外のソースからコンテンツを埋め込むための新しいページを作成したりできます。

テンプレート化言語はCurlybarsと呼ばれ、Handlebars言語の大部分を実装しています。クライアント側でレンダリングを行うHandlebarsとは異なり、Curlybarsはサーバー側でレンダリングを行います。

また、ヘルプセンターのテンプレート言語を使用してヘルプセンターデータにアクセスし、ページ内のコンテンツを操作することもできます。次の例では、ヘルプセンターのページにコメントを残したすべてのメンバーの名前とアバターのリストが表示されます。

{{#each comments}}
  <li>
    <div class="comment-avatar">
      <img src="{{author.avatar_url}}" alt="Avatar" />
    </div>
    <div class="comment-author">
      {{author.name}}
    </div>
  </li>
{{/each}}

以前は、コンポーネントを使ってヘルプセンターをカスタマイズしていましたが、Javascriptによる操作を除き、コンポーネント自体をカスタマイズすることはできませんでした。Curlybarsでは、以前はコンポーネントの中に隠されていたHTMLにアクセスし、編集することができます。

詳細については、後述の以下の各セクションを参照してください。
  • ヘルプセンターのテンプレート言語リファレンス
  • ヘルプセンターテンプレート言語の使用
  • Curlybarsを使用してコンテンツをカスタマイズする

特定のカテゴリ、セクション、記事についてページテンプレートをカスタマイズする

特定のカテゴリ、セクション、記事に合わせて、「カテゴリ」、「セクション」、「記事」のテンプレートをカスタマイズできます。

適用可能なテンプレート
  • カテゴリ
  • セクション
  • 記事
レシピ
  • isブロックで、カテゴリ、セクション、または記事IDを指定します。
    {{#is id 200646205}}
  ...
{{/is}}

例

「セクション」テンプレート内に次のブロックを挿入し、テンプレートのセクション200646205と203133596をカスタマイズします。

{{#is section.id 200646205}}
  <p><strong>This is important security information! Pay attention!</strong></p>
{{/is}}
{{#is section.id 203133596}}
  <p>Videos available at <a href="https://www.somelink.com">Learning to fly</a></p>
{{/is}}

参照情報

  • isヘルパー

言語セレクタの言語名をカスタマイズする

ヘルプセンターのすべてのページの言語セレクタで、言語名をカスタマイズできます。「English」などのバリアントである個々の言語に対して、「English (U.S.)」のように言語バリアントであることを個別に示す場合に便利です。

適用可能なテンプレート
  • ヘッダー
適用可能な式
  • {{#if alternative_locales}}...{{/if}}
レシピ
  • {{current_locale.name}}式を、次の条件式に置き換えます。
    {{#is current_locale.name 'English (US)'}}
  English
{{else}}
  {{current_locale.name}}
{{/is}}

    また、代替ロケール{{name}}式を、次の条件式に置き換えます。

    {{#is name 'English (US)'}}
  English
{{else}}
  {{name}}
{{/is}}

例

{{#if alternative_locales}}
  <div class="dropdown language-selector" aria-haspopup="true">
  <a class="dropdown-toggle">
  {{#is current_locale.name 'English (US)'}}
    English
  {{else}}
    {{current_locale.name}}
  {{/is}}
  </a>
  <span class="dropdown-menu dropdown-menu-end" role="menu">
  {{#each alternative_locales}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
    {{#is name 'English (US)'}}
      English
    {{else}}
      {{name}}
    {{/is}}
    </a>
  {{/each}}
  </span>
  </div>
{{/if}}

参照情報

  • isヘルパー

言語セレクタで1つ以上の言語を非表示にする

特定の言語だけを言語セレクタで非表示にする機能は、その言語のコンテンツがリリースに間に合わない場合に便利です。

適用可能なテンプレート
  • ヘッダー
適用可能な式
  • {{#each alternative_locales}}...{{/each}}
レシピ
  • <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a>式を、次の条件式に置き換えます。
    {{#is name 'Français'}}
  {{! do nothing }}
{{else}}
  <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
  {{name}}
  </a>
{{/is}}

例

{{#each alternative_locales}}
  {{#is name 'Français'}}
    {{! do nothing }}
  {{else}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
      {{name}}
    </a>
  {{/is}}
{{/each}}

参照情報

  • isヘルパー

日付順または投票数順に、ユーザーが記事のコメントを並べ替えられるようにする

デフォルトでは、記事のコメントは、最新のものから日付順に並んでいます。日付リンクと投票数リンクを追加して、それぞれのリンクをユーザーがクリックすると、コメントが日付順または投票数順に並べ替えられるようにできます。

メモ：2015年11月30日の新しいコミュニティのリリース以降、日付と投票の並べ替えリンクは標準テーマと、カスタマイズされたテーマにデフォルトで提供されています。
適用可能なテンプレート
  • 記事
適用可能なHTML要素
  • <section class="article-comments">...</section>
レシピ
  • 次のdivタグを、コメントセクションの見出しタグ<h2>{{t 'comments'}}</h2>の後に挿入します。たとえば、{{#if comments}}式の後に挿入すると、コメントを誰も投稿していない場合にソーターが表示されないようにできます。
    <div class="comment-sorter">
  Sort by: 
  {{#each comment_sorters}}
    <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
  {{/each}}
</div>

例

<section class="article-comments">
  <h2>{{t 'comments'}}</h2>
    {{#if comments}}

    <div class="comment-sorter">
      Sort by: 
      {{#each comment_sorters}}
        <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
     {{/each}}
    </div> 
     
    <ul class="comment-list">
      {{#each comments}}
      ...

参照情報

  • comment_sortersプロパティ

書式ツールバーを記事のコメントエディターに追加する

書式ツールバーを、記事のコメント用のエディターに追加できます。ユーザーが、太字や斜体、記号付きリストや番号付きリスト、画像、リンクを追加できるようになります。

メモ：2015年11月30日の新しいコミュニティのリリース以降、書式ツールバーは標準テーマと、カスタマイズされたテーマにデフォルトで提供されています。
適用可能なテンプレート
  • 記事
適用可能なオブジェクト
  • {{#form 'comment'}}...{{/form}}
レシピ
  • フォームオブジェクト内で{{textarea 'body'}}式を探し、{{wysiwyg 'body'}}で置き換えます。

例

{{#form 'comment' class='comment-form'}}
  <div class="comment-avatar">
    {{user_avatar class='user-avatar'}}
  </div>

  <div class="comment-container">
     {{wysiwyg 'body'}}
     <div class="comment-form-controls">
       {{input type='submit'}}
     </div>
  </div>
{{/form}}

参照情報

  • wysiwygヘルパー

記事のコメントにユーザーが投票できるようにする

デフォルトで、ユーザーは記事に投票できます。また、記事のコメントへの投票もできます。

メモ：2015年11月30日の新しいコミュニティのリリース以降、投票リンクは標準テーマと、カスタマイズされたテーマにデフォルトで搭載されています。
適用可能なテンプレート
  • 記事
適用可能な式
  • {{#each comments}}...{{/each}}
レシピ
  • 次のdivタグを<li id="{{anchor}}">タグの後に挿入します。
    <div class="comment-vote vote">
  {{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
  {{vote 'sum' class="article-vote-sum"}}
  {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
</div>

    上述のvoteヘルパーが、記事の投票用にCSSクラスを借用して、コメントの投票リンクのスタイルを設定します。独自のクラスを定義して、コメントの投票のスタイルを設定することもできます。

例

{{#each comments}}
  <li id="{{anchor}}" class="comment">

  <div class="comment-vote vote">
    {{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
    {{vote 'sum' class="article-vote-sum"}}
    {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
  </div>
  
  <div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">
    <img src="{{author.avatar_url}}" alt="Avatar">
  </div>
  ...

参照情報

  • voteヘルパー

カスタムテーマに生成検索の結果を追加する

生成検索は、ヘルプセンター内の検索クエリに対してAIが生成した回答を提供します。生成検索を使用すると、ヘルプセンターで検索を行ったユーザーは、複数の検索結果をクリックすることなく、質問への回答をすぐに得られます。

メモ：生成検索は、2025年3月26日以降にリリースされた標準テーマではデフォルトで利用できます。2025年3月26日より前に作成したヘルプセンターで、カスタマイズされたテーマを使用している場合は、カスタムテーマをアップデートして生成検索を追加する必要があります。生成検索は、すべてのテンプレートAPIバージョンで利用できます。必要に応じて、検索設定で生成検索を無効にすることができます。

生成検索をアクティブにした後、ユーザーがヘルプセンターの検索に入力した質問が生成検索によって評価されます。質問に最も一致する内容の記事や投稿が生成AIによって評価され、回答が生成されます。Enterpriseプランで横串検索を設定すると、外部コンテンツも生成AIによって評価され、回答に含めることができます。生成された回答は、デフォルトで検索結果の一番上に表示されます。詳しくは「生成検索による検索クエリへのAI生成回答の提供」を参照してください。

適用可能なテンプレート
  • 検索結果のページ（search_results.hbs）
レシピ
  • 生成回答を表示させたいテーマの search_results.hbs テンプレートに、ヘルパーコード {{generative_answers}} を追加します。

例

<section id="main-content" class="search-results-column">
{{generative_answers}}
<h1 class="search-results-subheading">

参照情報

  • search_results.hbs
  • generative_answers ヘルパー
カスタムテーマを更新するには（Guide管理者）
  1. ナレッジベース管理者で、サイドバーにあるデザインのカスタマイズアイコン（）をクリックします。

    「テーマ」ページが開きます。

  2. 編集したいテーマで「カスタマイズ」をクリックします。
  3. 「コードを編集」をクリックします。

  4. テンプレートリストで、search_results.hbs をクリックします。
  5. 生成回答を表示させたいテーマの search_results.hbs テンプレートに、{{generative_answers}} ヘルパーコードを追加します。

  6. 「保存」をクリックします。
  7. アクティブにした後、クイック回答ボックスのUIがカスタムテーマのフォントや色と一致しない場合は、以下の原因が考えられます。
    • テーマ設定インターフェイスに必要な設定がありますが、テーマの外観がCSSファイルにハードコードされているため、設定値がテーマと一致するように設定されていません。色とフォントの設定を更新するには、「ヘルプセンターのブランド設定」を参照してください。
    • テーマ設定インターフェイスの設定の一部または全部が設定されていません。この場合は、設定を追加して、テーマの他の部分と一致するように値を設定する必要があります。そのためには、Githubにある以下の識別子でmanifest.jsonファイルを更新し、以下の各識別子の値をテーマに合ったフォントまたはカラーコードに置き換えます。
      • カラー設定識別子：
        • text_color
        • link_color
        • hover_link_color
        • visited_link_color
      • フォント設定識別子：
        • heading_font
        • text_font

瞬時に検索（自動補完）の結果をヘルプセンターのカスタムテーマに追加する

カスタムテーマに「瞬時に検索」を追加すると、ユーザーが検索ボックスに入力したときにおすすめの記事へのリンクを表示できます。

メモ：2016年7月5日のリリース以降、「瞬時に検索」は標準テーマと、カスタマイズされたテーマにデフォルトで提供されています。必要に応じて、テーマから「瞬時に検索」を削除して、「瞬時に検索」を無効にすることができます。

「瞬時に検索」が有効になっている場合、ユーザーが検索ボックスに検索語を入力すると、最大6つのおすすめの記事が表示されます。記事のタイトルのみに基づいて、一致した記事が「瞬時に検索」に表示されます。ユーザーは検索内容と一致した記事を、検索結果ページに移動せずに検索ボックスから直接選択できます。

適用可能なテンプレート
  • 検索式が含まれているテンプレートすべて（多くの場合、ヘッダーテンプレートまたはホームページテンプレート）

適用可能な式

  • {{search}}
レシピ
  • search式にinstant=trueを追加します。
    {{search instant=true}}

例

<div class="search-box">
  <h1 class="help-center-name">{{help_center.name}}</h1>
  {{search instant=true}}
</div>

ヘルプセンターの検索に外部コンテンツを含めるために横串検索を追加する

ヘルプセンターの検索結果テンプレートで横串検索を有効にするには、次の2つの作業を行います。

  • サイドバーフィルターを追加する
  • 結果を何度も繰り返す

サイドバーフィルターを追加する

サイドバーのフィルターで使用されているプロパティを更新することで、検索結果のテンプレートを更新する必要があります。

<div class="search-results">で、以下のコードを更新します。
<section class="search-results-sidebar">
{{#if source_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each source_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      <buttonclass="see-all-filters"aria-hidden="true"aria-label="{{t'show_more_sources'}}">{{t'show_more_sources'}}</button>    </ul>
  </section>
{{/if}}
{{#if type_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each type_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
    </ul>
  </section>
{{/if}}
{{#if subfilters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    {{#is current_filter.identifier 'knowledge_base'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
    {{/is}}
    {{#is current_filter.identifier 'community'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
    {{/is}}
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each subfilters}}
        <li>
          {{#if selected}}
            <a href="{{url}}" class="sidenav-item current" aria-current="page">
          {{else}}
            <a href="{{url}}" class="sidenav-item">
          {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      {{#is current_filter.identifier 'knowledge_base'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
      {{/is}}
      {{#is current_filter.identifier 'community'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
      {{/is}}
    </ul>
  </section>
{{/if}}
</section>

結果を何度も繰り返す

次のスニペットは、{{results}}ヘルパーを使用して横串検索の結果をループさせる方法の例です。

{{#if results}}
<ul class="search-results-list">
  {{#each results}}
	<li class="search-result-list-item result-{{type}}">
	  <h2 class="search-result-title">
		<a href="{{url}}" class="results-list-item-link"{{#if is_external}}
               target=”_blank” {{/if}}>
                     {{title}}
                     {{#if is_external}}
                       <svg viewBox="0 0 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"><path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/></svg>
                     {{/if}}

</a>
	  </h2>
	  <article>
		<div class="search-result-icons">
		  {{#if vote_sum}}
			<span class="search-result-votes">{{vote_sum}}</span>
		  {{/if}}
		  {{#if comment_count}}
			<span class="search-result-meta-count">
			  {{comment_count}}
			</span>
		  {{/if}}
		</div>
		<ul class="meta-group">
		  <li>
			<ol class="breadcrumbs search-result-breadcrumbs">
			  {{#each path_steps}}
				<li title="{{name}}"><a href="{{url}}" target="{{target}}">{{name}}</a></li>
			  {{/each}}
			</ol>
		  </li>
		  <li class="meta-data">{{author.name}}</li>
		  <li class="meta-data">{{date created_at}}</li>
		</ul>
		<div class="search-results-description">{{text}}</div>
	  </article>
	</li>
  {{/each}}
</ul>
{{else}}
<p>
  {{t 'no_results_unified'}}
  {{#link 'help_center'}}
	{{t 'browse_help_center'}}
  {{/link}}
</p>
{{/if}}

「マイアクティビティ」の「フォロー中」ページでサブスクリプションタイプ別の並べ替えを追加する

「マイアクティビティ」>「フォロー中」ページで、ユーザーがサブスクリプションをタイプ別に並べ替えられるようにすることで、契約をわかりやすく表示できるようになります。

適用可能なテンプレート
  • フォローしているページ
レシピ
  • <nav>タグの後に、次のコードを挿入します。
    <div class="my-activities-following-header">
  <span class="dropdown">
    <span class="dropdown-toggle">
      {{current_filter.label}}
    </span>
    <span class="dropdown-menu" role="menu">
      {{#each filters}}
        <a href="{{url}}" aria-selected="{{selected}}" role="menuitem">
          {{name}}
        </a>
      {{/each}}
    </span>
  </span>
</div>

「マイアクティビティ」のリクエスト用に「作成日時」と「更新日時」の並べ替えオプションを追加する

「マイアクティビティ」のエンドユーザーのリクエストページに「作成日時」と「更新日時」の並べ替えオプションを追加できます。

メモ：2016年8月以降、「作成日時」と「更新日時」の並べ替えオプションは標準テーマと、カスタマイズされたテーマにデフォルトで提供されています。
適用可能なテンプレート
  • リクエストリストページ

レシピ

  • {{t 'created'}}を次のコードで置き換えます。
    {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}}
  • {{t 'last_activity'}}を次のコードで置き換えます。
    {{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}
参照情報
  • requests linkヘルパー

共有化が行われている組織のユーザーのために「フォローする/フォローを止める」ボタンを追加する

共有化が行われている組織でリクエストが作成または更新されたときに、ユーザーにメール通知で知らせることができます。{{subscribe}}ヘルパーを使って「フォローする」ボタンを挿入します。ユーザーはこのボタンをクリックして、組織内でリクエストが作成または更新されたときにメール通知を受け取ることができます。更新を受け取る必要がなくなったら、ユーザーはフォローを解除することができます。

メモ：2016年1月23日以降、「フォローする」ボタンは標準テーマおよびカスタマイズされたテーマにデフォルトで提供されています。
適用可能なテンプレート
  • リクエストリストページ
適用可能なオブジェクト
  • {{#form 'requests_filter'}}...{{/form}}
レシピ
  • {{subscribe}}ヘルパーをformオブジェクトに追加します。

例

{{#form 'requests_filter' class='request-table-toolbar'}}
  {{input 'query' id='quick-search' type='search' class='requests-search'}}
  <div class="request-table-filters">
    {{label 'organization' for='request-organization-select' class='request-filter'}}
    {{select 'organization' id='request-organization-select' class='request-filter'}}
    {{subscribe}}
    {{label 'status' for='request-status-select' class='request-filter'}}
    {{select 'status' id='request-status-select' class='request-filter'}}
  </div>
{{/form}}

参照情報

  • subscribeヘルパー

サポートリクエストでログインユーザーがほかのユーザーをCCに含められるようにする

ヘルプセンターの新規や既存のサポートリクエストに、ログインしたユーザーがCCを追加する機能を有効にできます。サポートリクエストにCCを追加した場合、CCに含められたユーザーはチケットの更新時にメール通知を受け取ります。

メモ：2015年12月14日以降、サポートリクエストのCCオプションは標準テーマと、カスタマイズされたテーマにデフォルトで提供されています。

コードをカスタムテーマに追加した後、機能を有効にする必要があります（「CCのアクセス許可を設定する」を参照）。

適用可能なテンプレート
  • リクエストページ
適用可能なオブジェクト
  • {{#form 'comment' class='comment-form'}}...{{/form}}
レシピ
  • 次のスニペットをコメントフォーム内に挿入します。
    {{#if help_center.request_ccs_enabled}}  
  <div class="comment-ccs">
     {{token_field 'ccs'
        class="ccs-input"}}
  </div>
 {{/if}}

補足リクエストに元リクエストへのリンクを追加する

補足リクエストに元リクエストへのリンクを追加できます。

メモ：2016年8月以降、補足リクエスト内の元リクエストへのリンクは標準テーマと、カスタマイズされたテーマにデフォルトで提供されています。

適用可能なテンプレート
  • リクエストページ

レシピ

  • 次のスニペットを、元チケットへのリンクを表示させるリクエストページテンプレートに追加します（元チケットが存在する場合）。
    {{#if request.followup_source_id}}
  <dl class="request-details">
    <dt>{{t 'followup'}}</dt>
    <dd>{{link 'request' id=request.followup_source_id}}
</dd>
  </dl>
{{/if}}
参照情報
  • 新規リクエストページ

カスタマーポータルで解決済みチケットのCSATを有効にする

CSATアンケートを使用して、カスタマーポータルを通じてエンドユーザーからフィードバックを収集することができます。
メモ：CSATが有効になっている場合、カスタマーポータルのCSATオプションは、標準テーマおよびTemplating API v3.2.0（2024年2月8日リリース）以降に基づいたカスタムテーマでデフォルトで利用できます。
適用可能なテンプレート
  • リクエストページ
レシピ
  • {{#with satisfaction_response}}...{{/with}} ブロックを request_page.hbs テンプレートに追加します。
例

  • GitHubのCopenhagen theme request page.hbsを参照してください。

  • 次のテンプレートコードを追加します。
    {{#with satisfaction_response}}
  {{#with rating}}
	<dl class="request-details">
	  <dt>{{t 'rating'}}</dt>
	  <dd>
		<div>
		  {{#is scale_type 'numeric'}}
			{{t 'numerical_rating' value=value max_value=max_value}}
		  {{else}}
			{{scale_value}}
		  {{/is}}
		</div>

		{{#link 'survey_response' id=../id}}
		  {{#if ../editable}}
			{{t 'edit_feedback'}}
		  {{else}}
			{{t 'view_feedback'}}
		  {{/if}}
		{{/link}}
	  </dd>
	</dl>
  {{else}}
	{{#if editable}}
	  <dl class="request-details">
		<dt>{{t 'rating'}}</dt>
		<dd>
		  {{#link 'survey_response' id=id}}
			{{t 'add_feedback'}}
		  {{/link}}
		</dd>
	  </dl>
	{{/if}}
  {{/with}}
{{/with}}
参照情報
  • satisfaction_response

記事に投票ボタンを追加する

記事に表示される投票ボタンは、ヘルプセンターの標準のCopenhagenテーマの要素です。ただし、記事への投票オプションが表示されない場合、テーマからボタンを削除している可能性があります。

投票ボタンを追加するコードはテーマごとに異なりますが、ここでは必要な場合に備えて、標準のCopenhagenテーマ用のコードを提供します。

適用可能なテンプレート
  • 記事
レシピ
  • 記事ページテンプレートに、次のコードを追加します。
    {{#with article}}
  <div class="article-votes">
    <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span>
    <div class="article-votes-controls" role='radiogroup'>
      {{vote 'up' role='radio' class='button article-vote article-vote-up'}}
      {{vote 'down' role='radio' class='button article-vote article-vote-down'}}
    </div>
    <small class="article-votes-count">
      {{vote 'label' class='article-vote-label'}}
    </small>
  </div>
{{/with}}

コンテンツタグを記事および投稿に追加する

標準のCopenhagenテーマでは、デフォルトで記事、コミュニティ投稿、および検索ページにコンテンツタグが表示されます。カスタムテーマまたはマーケットプレイスのテーマを使用している場合、これらのページにコンテンツタグを表示するにはテーマに変更を加える必要がある場合があります。コンテンツタグの追加を開始するには、Copenhagenテーマの以下のテンプレートファイルを参考にすることができます。

  • article_page.hbs
  • community_post_page.hbs
  • new_community_post_page.hbs
  • search_results.hbs

慣れてきたら、他のページにもコンテンツタグを追加してみましょう。たとえば、次のスニペットは、コミュニティトピックのページテンプレートにコンテンツタグのリストを追加します。

{{#each posts}}
  ...

  {{#if (compare content_tags.length ">" 0)}}
    <ul class="content-tag-list">
      {{#each content_tags}}
        <li class="content-tag-item">
          {{#link "search_result" content_tag_id=id}}
            {{name}}
          {{/link}}
        </li>
      {{/each}}
    </ul>
  {{/if}}

  ...

{{/each}}

バッジをカスタムヘルプセンターのテーマに追加する

メモ：バッジは、2020年9月1日からデフォルトで利用できます。
標準のCopenhagenテーマを使用しない場合は、ユーザー設定のテーマを作成できます。ただし、バッジを使用するにはテーマテンプレートAPI v2を使用する必要があります。v1を使用している場合は、アップグレード手順を使用してください。アップグレードを行うためのヒントは、GitHubにあるZendeskのサンプルテーマでも見つかります。

このトピックでは、次の項目について説明します。

  • 新しいユーザープロフィールアクションヘルパーを追加する
  • 投稿リストのページに役職バッジを表示する
  • 投稿ページとコメントページに役職バッジを表示する
  • ユーザープロフィールページに役職バッジと実績バッジを表示する

新しいユーザープロフィールアクションヘルパーを追加する

エージェントのバッジを与えたい場合は、バッジを授与オプションを追加する必要があります。ただし、これを行う前に、新しいアクションヘルパーを追加する必要があります。

アクションヘルパー宣言を追加するには

  1. テーマのオンラインコードエディターを開き、エージェントのユーザープロフィールページに移動します。
    Page filename: user_profile_page.hbs
  2. editヘルパー宣言を見つけます。
    {{edit}}
  3. editヘルパー宣言を新しいactionsヘルパー宣言に置き換えます。
    {{actions}}

これで、エージェントがバッジを授与できるようになります。新しいボタンは、個人設定に従ってCSSでスタイル設定されます。ヒントについては、Zendeskのサンプルテーマを参照してください。

投稿リストのページに役職バッジを表示する

役職バッジは、投稿リストページの作成者名の横に表示されるラベルとして追加できます。シンプルにするためにスタイリングクラスを再利用しているため、これは投稿のステータスラベルに似ています。

投稿リストのページに役職バッジを表示するには

  1. テーマのオンラインコードエディターを開きます。
    Page filename: community_topic_page.hbs
  2. author name宣言を見つけます。Copenhagenテーマでは、コード行は次のように記述されています。
    <li class="meta-data">{{author.name}}</li>
  3. この行の後に、次のスニペットを追加します。
    {{#each author.badges}}
<li class="meta-data">
   {{#is category_slug "titles"}}
       <span class="status-label">{{name}}</span>
   {{/is}}
</li>
{{/each}}

上級者向け - このシナリオではstatus-label CSSクラスを使用せず（再使用もしない）、ステータスラベルのスタイルとは別に変更できる専用のCSSクラスを新規作成します。

以下に、コミュニティメンバーの役職バッジの例を次に示します。

Gatherの役職バッジの例

投稿ページとコメントページに役職バッジを表示する

投稿リストのページに役職バッジを表示するには

  1. テーマのオンラインコードエディターを開きます。
    Page filename: community_post_page.hbs
  2. author name宣言を見つけます。Copenhagenテーマでは、コード行は次のように記述されています。
    <li class="meta-data">{{author.name}}</li>
  3. この行の後に、次のスニペットを追加します。
    {{#each author.badges}}
<li class="meta-data">
   {{#is category_slug "titles"}}
       <span class="status-label">{{name}}</span>
   {{/is}}
</li>
{{/each}}

ユーザープロフィールページに役職バッジと実績バッジを表示する

ユーザーのプロフィールページには、役職バッジだけでなく、ユーザーの実績を追加することもできます。次の例では、実績バッジごとにグラフィックアイコンがあるものとします。Copenhagenテーマに基づいて、あなたの実績バッジは次のようになります。

Gatherの役職バッジと実績バッジ

役職バッジおよび実績バッジをユーザープロフィールページに表示するには

  1. テーマのオンラインコードエディターを開きます。
    Page filename: user_profile_page.hbs
  2. ユーザー名が表示されているファイル内の行を探します。以下はその例です。
    <h1 class="name">
  {{#if user.url}}
    <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
  {{else}}
    {{user.name}}
  {{/if}}
</h1>
  3. このスニペットを次のように置き換えます。
    <h1 class="name">
  {{#if user.url}}
    <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
  {{else}}
    {{user.name}}
  {{/if}}
  {{#each user.badges}}    {{#is category_slug "titles"}}
      <span class="status-label">{{name}}</span>
    {{/is}}  {{/each}}
</h1>
<div style="margin-top: 1em;">
  {{#each user.badges}}    {{#is category_slug "achievements"}}
      <div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;">
        <img src="{{icon_url}}" height="40"><br>
        <span style="font-size: 0.8em;">{{name}}</span>
      </div>
    {{/is}}  {{/each}}
</div>

この例では、例をシンプルにするためにCSSスタイル設定がすべてインライン化されています。ベストプラクティスとして、これらの例を参考にできますが、スタイルがテーマに合っているかどうか時間をかけて確認してください。

ヘルプセンターのユーザープロフィールをユーザーが参照できるようにする

このセクションでは、ヘルプセンターのユーザーが作成者名またはアバターをクリックしてユーザープロフィールを閲覧できるように、必要なテンプレートを更新する方法について説明します。

メモ：2016年6月20日以降、ユーザープロフィールは標準テーマと、カスタマイズされたテーマにデフォルトで提供されています。
このセクションで説明するソリューションは、ヘルプセンターテンプレート言語の link ヘルパーを使用します。以下のテンプレートを更新するには、テンプレートドキュメントの link helper を参照してください。
  • 記事
  • コミュニティの投稿
  • 検索結果のページ

記事

記事ページテンプレートに、次の更新を適用します。

記事の作成者名を更新する

次のifブロックを

{{#if article.author.url}}
  <a href="{{article.author.url}}" target="_zendesk_lotus">
    {{article.author.name}}
  </a>
{{else}}
  {{article.author.name}}
{{/if}}

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=article.author.id class="user-profile"}}
  {{article.author.name}}
{{/link}}
コメントの作成者名を更新する

次のifブロックを

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
記事とコメントの作成者のアバターを更新する

次の画像タグを

<img src="{{article.author.avatar_url}}" alt="Avatar"/>

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=article.author.id class="user-profile"}}
  <img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}

コミュニティの投稿

コミュニティの投稿ページテンプレートに、次の更新を適用します。

投稿の作成者名を更新する

次のifブロックを

{{#if post.author.url}}
  <a href="{{post.author.url}}" target="_zendesk_lotus">
    {{post.author.name}}
  </a>
  {{else}}
    {{post.author.name}}
{{/if}}

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=post.author.id class="user-profile"}}
  {{post.author.name}}
{{/link}}
コメントの投稿者名を更新する

次のifブロックを

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
投稿の作成者のアバターを更新する

次の画像タグを

<img src="{{post.author.avatar_url}}" alt="Avatar"/>

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=post.author.id class="user-profile"}}
  <img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
コメントの作成者のアバターを更新する

次の画像タグを

<img src="{{author.avatar_url}}" alt="Avatar"/>

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=author.id class="user-profile"}}
  <img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}

検索結果

検索結果テンプレートに、次の更新を適用します。

結果の記事の作成者名を更新する

次のifブロックの{{#each article_results}}ブロックを

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
結果の投稿の作成者名を更新する

次のifブロックの{{#each post_results}}ブロックを

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

次のlinkヘルパーで置き換えます。

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
古いテーマ内の検索結果を更新する

古いテーマを使用している場合、検索結果で{{meta}}ヘルパーが使用されている場合があります。その場合、このセクションで説明するコードを使用して、作成者名をヘルプセンター内のプロフィールページにリンクすることができます。

統一感を持たせるには、検索結果ページのCSSスタイルを更新する必要があります。

結果の記事の作成者名を更新する

次のdivタグを

<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>

次のタグに置き換えます。

<ol
 class="breadcrumbs">
  {{#each path_steps}}
    <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
  {{/each}}
</ol>
<div class="search-result-description">
  {{text}}
</div>
<div class="search-result-meta">
  <span dir="auto" class="search-result-meta-name">
    {{#link "user_profile" id=author.id class="user-profile"}}
      {{author.name}}
    {{/link}}
  </span>
  <span class="search-result-meta-time">{{date created_at}}</span>
</div>

検索結果用：

{{#each article_results}}
  <li class="search-result">
    <a href="{{url}}" class="search-result-link">{{title}}</a>
    {{#if vote_sum}}
      <span class="search-result-votes">{{vote_sum}}</span>
    {{/if}}
    <ol class="breadcrumbs">
      {{#each path_steps}}
        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ol>
    <div class="search-result-description">
      {{text}}
    </div>
    <div class="search-result-meta">
      <span dir="auto" class="search-result-meta-name">
        {{#link "user_profile" id=author.id class="user-profile"}}
          {{author.name}}
        {{/link}}
      </span>
      <span class="search-result-meta-time">{{date created_at}}</span>
    </div>
  </li>
{{/each}}
結果の投稿の作成者名を更新する

以下を追加します。

<ol class="breadcrumbs">
  {{#each path_steps}}
    <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
  {{/each}}
</ol>

検索結果用：

{{#each post_results}}
  <li class="search-result">
    <a href="{{url}}" class="search-result-link">{{title}}</a>
    <ol class="breadcrumbs">
      {{#each path_steps}}
        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ol>
    <div class="search-result-description">
      {{text}}
    </div>
    <div class="search-result-meta">
      <span dir="auto" class="search-result-meta-name">
        {{#link "user_profile" id=author.id class="user-profile"}}
          {{author.name}}
        {{/link}}
      </span>
      <span class="search-result-meta-time">{{date created_at}}</span>
      <span class="search-result-meta-count">
        {{t 'comments_count' count=comment_count}}
      </span>
    </div>
  </li>
{{/each}}

ヘルプセンターテーマのサブセクションを有効化する

ヘルプセンターのナレッジベースにサブセクションを追加して、コンテンツをさらに細かく階層化することができます。2019年3月29日以前にカスタマイズしたテーマを使用している場合、サブセクションを有効化するには、ヘルプセンターのテーマにコードを追加する必要があります。以下のコードは、Copenhagenテーマの新しいバージョンに付属しています。

メモ：Guide Enterpriseの場合、2019年3月29日より後にカスタマイズしたテーマと標準のテーマでは、サブセクションはデフォルトで有効です。
適用可能なテンプレート
  • セクション
適用可能なオブジェクト
  • section.sections
レシピ
  • 以下のスニペットを、Zendeskセクションページのテンプレートsection_page.hbsのヘッダタグ（<header class="page-header">...</header>）とページネーションタグ（{{pagination}}）の間に挿入します。
    {{#if section.sections}}
  <ul class="section-list section-list--collapsed">
    {{#each section.sections}}
    <li class="section-list-item">
      <a href="{{url}}">
        <span>{{name}}</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
        </svg>
      </a>
    </li>
    {{/each}}
    <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a>
  </ul>
{{/if}}

{{#if section.articles}}
  <ul class="article-list">
    {{#each section.articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
	{{#if promoted}}<span data-title="{{t 'promoted'}}" class="icon-star"></span>{{/if}}
	<a href="{{url}}" class="article-list-link">{{title}}</a>
    </li>
    {{/each}}
  </ul>
{{else}}
  <i class="section-empty">
    <a href="{{section.url}}">{{t 'empty'}}</a>
  </i>
{{/if}}

検索結果ページに複数のヘルプセンター用のサイドバーフィルターと結果を追加する

ヘルプセンター検索では、複数のヘルプセンターがある場合にすべてのヘルプセンターを横断して検索でき、ヘルプセンターとナレッジベースとコミュニティからの検索結果を、検索結果ページのフィルター機能を備えた統合フィードに表示できます。

2019年3月29日より前にカスタマイズされたテーマを使用している場合、統合された検索結果および複数のヘルプセンターでの検索を使用するには、ヘルプセンターのカスタムテーマにコードを追加する必要があります。複数のヘルプセンターがある場合は、ヘルプセンターごとにテーマを更新する必要があります。

メモ：統合された検索結果と複数のヘルプセンターを横断する検索は、標準のテーマおよび2019年9月25日以降にカスタマイズされたテーマでは、デフォルトでサポートされています。

必要な変更をテーマに反映する最速の方法は、統合された検索結果に対応しているCopenhagenテーマの最新バージョンをインポートすることです。詳しい手順については、「Guideへのヘルプセンターテーマの追加」を参照してください。

このセクションでは、既存のカスタムテーマを更新する場合に、行なう必要のあるすべての変更の概要を示します。このセクションで説明するソリューションでは、Curlybarsテンプレート言語のhelp_center_filters、filters、およびsubfiltersヘルパーを使用して、次のファイルを更新します。
  • 検索結果
  • CSS
  • JavaScript

検索結果テンプレートを更新してサイドバーフィルターを追加する

検索結果テンプレートを更新して、サイドバーフィルターを追加し、結果を何度も繰り返す必要があります。

サイドバーフィルターを追加する

このスニペットは、新しいフィルターヘルパーを使用して、検索結果ページのサイドバーに検索ファセットを実装する方法の例です。

検索結果テンプレートの<div class="search-results">に次のコードを挿入します。


<section class="search-results-sidebar">
     {{#if help_center.community_enabled}}
        <section class="filters-in-section collapsible-sidebar">
          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3>
          <ul>
            {{#each filters}}
              <li>
                <a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
      {{#if subfilters}}
        <section class="filters-in-section collapsible-sidebar">
          {{#is current_filter.identifier 'knowledge_base'}}
            <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
          {{/is}}
          {{#is current_filter.identifier 'community'}}
            <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
          {{/is}}
          <ul>
            {{#each subfilters}}
              <li>
                <a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
    </section>
結果を何度も繰り返す

このスニペットは、{{results}}ヘルパーを使用して統合された検索結果を何度も繰り返す方法の例です。

{{article_results}}ヘルパーと{{post_results}}ヘルパーの両方と、関連する検索結果の小見出しH3を

検索結果テンプレート内で次のように置き換えます。

{{#if results}}
        <ul class="search-results-list">
          {{#each results}}
            <li class="search-result-list-item result-{{type}}">
              <h2 class="search-result-title">
                <a href="{{url}}" class="results-list-item-link">{{title}}</a>
              </h2>
              <article>
                <div class="search-result-icons">
                  {{#if vote_sum}}
                    <span class="search-result-votes">{{vote_sum}}</span>
                  {{/if}}
                  {{#if comment_count}}
                    <span class="search-result-meta-count">
                      {{comment_count}}
                    </span>
                  {{/if}}
                </div>
                <ul class="meta-group">
                  <li>
                    <ol class="breadcrumbs search-result-breadcrumbs">
                      {{#each path_steps}}
                        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
                      {{/each}}
                    </ol>
                  </li>
                  <li class="meta-data">{{author.name}}</li>
                  <li class="meta-data">{{date created_at}}</li>
                </ul>
                <div class="search-results-description">{{text}}</div>
              </article>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <p>
          {{t 'no_results_unified'}}
          {{#link 'help_center'}}
            {{t 'browse_help_center'}}
          {{/link}}
        </p>
      {{/if}}

検索結果ページのサイドバーフィルターのCSSスタイルを更新する

サイドバーフィルターにCSSスタイルを追加できます。次の例は、Copenhagenテーマに基づいています。

次のCSSルールがstyle.cssファイルに含まれていることを確認してください。

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}

.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}

.search-results-sidebar .sidenav-item[aria-selected="true"] {
  background-color: $brand_color;
  color: $brand_text_color;
  text-decoration: none;
}

.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}

.search-results-list > li h2 {
  margin-bottom: 0;
}

.search-result-title {
  font-size: 16px;
}

.search-result-description {
  margin-top: 15px;
  word-break: break-word;
}

.search-result-votes, .search-result-meta-count {
  color: lighten($text_color, 20%);
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes::before, .search-result-meta-count::before {
  color: $brand_color;
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result-votes::before {
  content: "\1F44D";
}

.search-result-meta-count::before {
  content: "\1F4AC";
}

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

.search-result-breadcrumbs li:last-child::after {
  content: "·";
  display: inline-block;
  margin: 0 5px;
}

/* Non-latin search results highlight */
/* Add a yellow background for Chinese */
html[lang|="zh"] .search-result-description em {
  font-style: normal;
  background: yellow;
}

/* Use bold to highlight for the rest of supported non-latin languages */
html[lang|="ar"] .search-result-description em,
html[lang|="bg"] .search-result-description em,
html[lang|="el"] .search-result-description em,
html[lang|="he"] .search-result-description em,
html[lang|="hi"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em,
html[lang|="ru"] .search-result-description em,
html[lang|="th"] .search-result-description em {
  font-style: bold;
}

検索結果ページの折りたたみ可能なサイドバーのJavaScriptを更新する

検索結果ページの折りたたみ可能なサイドバーにJavaScriptを追加できます。次の例は、Copenhagenテーマに基づいています。

カスタムテーマのscript.jsファイルの次のブロックを

// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});

次のコードスニペットで置き換えます。

// Toggles expanded aria to collapsible elements
  var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar');

  Array.prototype.forEach.call(collapsible, function(el) {
    var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle');

    el.addEventListener('click', function(e) {
      toggleNavigation(toggle, this);
    });

    el.addEventListener('keyup', function(e) {
      if (e.keyCode === 27) { // Escape key
        closeNavigation(toggle, this);
      }
    });
  });

ヘルプセンターにスパムフィルターを追加する

使用しているカスタムヘルプセンターのテーマが、2014年4月1日より前に作成されたものである場合、スパムフィルターをサポートするには、スタイルシートにスタイル設定をいくつか追加する必要があります。

次の新しいHTML要素が追加されています。
  • 記事ページ
    • section element with class "pending-comments-list"
    • span element with class "pending-moderation-comment-badge"
  • 質問ページ
    • section element with class "pending-answers-list"
    • span element with class "pending-moderation-answer-badge"
次の記述をカスタムテーマのスタイルシートに追加します。
.pending-moderation-comment-badge, .pending-moderation-answer-badge {
border-style: solid;
border-width: 1px;
border-color: #c7aa2b;
color: #c7aa2b;
padding: 3px5px;
margin-top: 10px;
font-size: 12px;
}

ヘルプセンターに承認を追加する

標準のCopenhagenテーマでは、承認リクエスト機能を有効にすると、デフォルトで承認が表示されます。カスタムテーマやマーケットプレイステーマを使用している場合は、エンドユーザーに承認リクエストが表示されるよう、テーマを更新する必要があります。
重要：承認リクエストにはテンプレートAPI v4が必要です。バージョン3以前のバージョンを使用している場合は、カスタムテーマを更新する前にバージョン4にアップグレードしてください。
適用可能なテンプレート
  1. approval_request_page.hbs
  2. approval_request_list_page.hbs
  3. 以下のアセット：
    • approval_requests_bundle.js
    • approval_requests_translations_bundle.js
レシピ
  • 各テンプレートおよびアセットファイルで未加工ファイルのダウンロードアイコンをクリックしてダウンロードします。

  • 解凍したライブテーマのテンプレートフォルダに、テンプレートファイル（.hbs）を追加します。
  • 解凍したライブテーマのアセットフォルダにすべてのアセットをコピーします。
  • 次のコードスニペットを document_head.hbs テンプレートに追加し、<script type="importmap"> で始まるその他のスクリプトを削除します。
    <script type="importmap">
{
  "imports": {
    "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
    "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
    "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
    "approval-requests": "{{asset 'approval-requests-bundle.js'}}",
    "approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
    "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
    "service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
    "shared": "{{asset 'shared-bundle.js'}}",
    "ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
    "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
  }
}
</script>
  • 必要に応じて、ページテンプレートをカスタマイズすることもできます。
  • テーマをZIP形式で圧縮し、ヘルプセンターにアップロードします。

ヘルプセンターにサービスカタログを追加する

標準のCopenhagenテーマでは、サービスカタログのリクエスト機能を有効にすると、デフォルトでサービスカタログが表示されます。カスタムテーマまたはマーケットプレイステーマを使用している場合は、エンドユーザーにサービスカタログを表示できるようにテーマを更新する必要があります。

サービスカタログの実装は、以下の手順でCopenhagenテーマからコピーできます。UIを完全にカスタマイズする場合は、Copenhagenテーマを複製（フォーク）し、src/modules/service-catalog フォルダー内の実装を変更してください。
重要：サービスカタログには、テンプレートAPI v4が必要です。v3以前のテンプレートAPIを使用している場合は、カスタムテーマを更新する前にv4にアップグレードするか、サービスカタログをサポートできるよう下位のテンプレートAPIバージョンを手動でカスタマイズしてください。
適用可能なテンプレート
  • service_page.hbs
  • service_list_page.hbs
  • アセット
レシピ
  1. 各テンプレートおよびアセットファイルで未加工ファイルのダウンロードアイコンをクリックしてダウンロードします。

  2. 解凍したライブテーマのテンプレートフォルダに、テンプレートファイル（.hbs）を追加します。
  3. 解凍したライブテーマのアセットフォルダにすべてのアセットをコピーします。
  4. 次のコードスニペットを document_head.hbs テンプレートに追加し、<script type="importmap"> で始まるその他のスクリプトを削除します。
    <script type="text/javascript">
  // Load ES module polyfill only for browsers that don't support ES modules
  if (!(HTMLScriptElement.supports && HTMLScriptElement.supports('importmap'))) {
    document.write('<script async src="{{asset 'es-module-shims.js'}}"><\/script>');
  }
</script>
<script type="importmap">
{
  "imports": {
    "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
    "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
    "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
    "approval-requests": "{{asset 'approval-requests-bundle.js'}}",
    "approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
    "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
    "service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
    "shared": "{{asset 'shared-bundle.js'}}",
    "ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
    "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
  }
}
</script>
<script type="module">
  import { renderFlashNotifications } from "flash-notifications";

  const settings = {{json settings}};
  const baseLocale = {{json help_center.base_locale}};

  renderFlashNotifications(settings, baseLocale);
</script>
  5. リンクヘルパーを使用して、header.jsテンプレートにサービスカタログページへのリンクを追加します。
  6. 以下のスタイルを、style.cssファイルにコピーします。
    .service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: $link_color;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: $visited_link_color;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: $hover_link_color;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: darken($background_color, 5%);
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: darken($background_color, 3%);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: darken($background_color, 3%);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: lighten($text_color, 20%);
  font-style: italic;
  padding: 0 15px;
}
  7. 必要に応じて、ページテンプレートをカスタマイズすることもできます。
  8. テーマをZIP形式で圧縮し、ヘルプセンターにアップロードします。

テンプレートAPI v4より下位のバージョンで、サービスカタログを追加する

テンプレートAPI v4には、サービスカタログに必要なJSONヘルパーが含まれています。ただし、下位のテンプレートバージョンを引き続き使用する場合は、別の方法でデータをシリアル化することもできます。

下位のテンプレートAPIバージョンでサービスカタログを使用するには
  1. booleanとnumbersからJSONヘルパーを削除します。
  2. json_stringifyヘルパーを使って文字列をシリアル化します。
  3. 複合オブジェクトの場合は、各プロパティを個別にシリアル化します。

以下の例では、service_page.hbsテンプレートを修正する方法を示しています。他のテンプレートも、同様の方法で変更してください。次のように、元のコードを置き換えます。

元のコード：
<script type="module">
  import { renderServiceCatalogItem } from "service-catalog";

  const settings = {{json settings}};
  const container = document.getElementById("service-catalog-item");

  // Extract the ID from the URL
  const id = window.location.pathname.split("/").pop()

  const props = {
    baseLocale: {{json help_center.base_locale}},
    hasAtMentions: {{json help_center.at_mentions_enabled}},
    userRole: {{json user.role}},
    userId: {{json user.id}},
    brandId: {{json brand.id}},
    organizations: {{json user.organizations}},
    serviceCatalogItemId: id,
    helpCenterPath: {{json (page_path 'help_center')}},
  }

  renderServiceCatalogItem(container, settings, props);
</script>
次のコードに置き換えます。
<script type="module">
  import { renderServiceCatalogItem } from "service-catalog";

  const settings = {
    background_color: {{json_stringify settings.background_color}},
    text_color: {{json_stringify settings.text_color}},
    brand_color: {{json_stringify settings.brand_color}},
    brand_text_color: {{json_stringify settings.brand_text_color}},
    link_color: {{json_stringify settings.link_color}},
    hover_link_color: {{json_stringify settings.hover_link_color}},
    visited_link_color: {{json_stringify settings.visited_link_color}},
  };
  const container = document.getElementById("service-catalog-item");

  // Extract the ID from the URL
  const id = window.location.pathname.split("/").pop()

  const props = {
    baseLocale: {{json_stringify help_center.base_locale}},
    hasAtMentions: {{help_center.at_mentions_enabled}},
    userRole: {{json_stringify user.role}},
    userId: {{user.id}},
    brandId: {{brand.id}},
    organizations: [
     {{#each user.organizations}}
              {id: {{id}}},
     {{/each}}
    ],
    serviceCatalogItemId: id,
    helpCenterPath: {{json_stringify (page_path 'help_center')}},
  }

  renderServiceCatalogItem(container, settings, props);
</script>
Powered by Zendesk