Diviを使用してWebサイトのナレッジベースを作成する方法
公開: 2019-01-09Webサイトにナレッジベースを置くことは、顧客と従業員の両方にとって非常に貴重な資産になる可能性があります。 そして、正しく行われた場合、知識ベースはあなたのビジネスの品質保証の長年の特徴となる可能性があります。 これらは、FAQ、ドキュメント、ソフトウェアマニュアル、チュートリアルなどの優れたソリューションになる可能性があります。
このチュートリアルでは、Diviを使用してWebサイトにナレッジベースを追加する方法を紹介します。 これを行うには、Echoナレッジベースプラグイン（無料バージョン）を使用します。このプラグインには、ナレッジベースページの整理とスタイル設定を簡単にする便利な構成オプションがいくつかあります。 また、DiviBuilderを使用してナレッジベースのメインページと記事ページのスタイルを設定する方法についても説明します。
スニークピーク
これが私たちが構築するもののスニークピークです。
メインナレッジベースページ
サンプル記事ページ
このチュートリアルに必要なもの
- Diviテーマ（インストール済みおよびアクティブ）
- Echoナレッジベースプラグイン（インストール済みおよびアクティブ）
- デジタル製品レイアウトパック（Divi Builder内で無料で入手可能）
Diviでナレッジベースの投稿タイプを有効にする
Diviを使用すると、特定のサードパーティのカスタム投稿タイプのサポートを簡単に提供できます。 ナレッジベースプラグインは記事に独自の投稿タイプを使用するため、Diviでそれらを有効にする必要があります。 これにより、DiviBuilderを使用してこれらの記事を編集できるようになります。
これを行うには、WordPressダッシュボードに移動し、Divi>テーマオプションに移動します。 [ビルダー]タブをクリックして、投稿タイプ「KB：ナレッジベース」を有効にします。
ナレッジベースの記事とカテゴリの作成
デザインがどのように見えるかをよく理解するには、ナレッジベースの記事とカテゴリを設定する必要があります。 今のところ、モックコンテンツを使用しても問題ありません。
ナレッジベースカテゴリの作成
WordPressの通常の投稿カテゴリの場合と同じように、ナレッジベースのカテゴリを作成できます。
これを行うには、[ナレッジベース]> [カテゴリ]に移動します。 次に、ナレッジベースの記事に使用するカテゴリごとに、名前、スラッグ、および親カテゴリ（該当する場合）を追加します。 この例では、それぞれ2つのサブカテゴリを持つ6つの親カテゴリを追加しました。
これがどこに向かっているのかを理解するために、ナレッジベースのメインページに親カテゴリとサブカテゴリがどのように表示されるかを次に示します。
新しい記事へのカテゴリの割り当て
現在、カテゴリは設定されていますが、それらに割り当てられた記事はありません。 記事を作成し、作成したカテゴリの1つ（または複数）をそれぞれに割り当てる必要があります。
WordPressの新しい投稿と同じように、新しい記事を作成できます。 [ナレッジベース]> [新しい記事の追加]に移動します。 次に、タイトルを追加し、記事にカテゴリを割り当てます。 テーマオプションでこの投稿タイプを有効にしているため、DiviBuilderをアクティブ化できることがわかります。 これを行うためのヒントを後で共有します。 しかし今のところ、モックコンテンツのデフォルトのWordPressエディターを追加するだけです。 その後、記事を公開します。
これと同じプロセスを続けて、必要なすべての記事を作成し、各カテゴリに少なくとも1つの記事が割り当てられるようにします。
デフォルトのナレッジベースページを確認する
プラグインをアクティブ化すると、ナレッジベースページが自動的に作成されます。 このページには、メインナレッジベースを展開するために必要なショートコードがあります。
デフォルトでページがどのように表示されるかを次に示します。
ナレッジベースのレイアウトとスタイルの構成
ナレッジベースプラグインには、Webサイトのデザインに一致するようにナレッジベースを構成するための便利なオプションがたくさんあります。 メインページ、記事ページ、アーカイブページにはカスタマイズ可能なオプションがあります。
メインページの構成
メインページの設定
まず、ナレッジベース構成ページの上部にある[メインページ]ボタンをクリックします。 [設定]タブで、デフォルトのレイアウトスタイルと色をそのままにしておくことができます。 ただし、この例では、「記事用に設計されたナレッジベーステンプレート」を使用するようにテンプレートオプションを変更します。 これを行うのは、主に、さまざまな既成のスタイルオプションを使用してアーカイブページをカスタマイズできるためです。 ただし、このためにDiviテーマテンプレートを保持する場合は、[投稿とページに使用される現在のテーマテンプレート]オプションを選択したままにすることができます。
[テンプレート]ポップアップで、[メインタイトルの表示]オプションの選択を解除し、すべてのパディングとマージンを0pxに設定します。 これにより、ページのタイトルと間隔にDiviBuilderを使用できるようになります。
メインページの整理とすべてのテキストオプション
今のところ、[整理]オプションと[すべてのテキスト]オプションはデフォルトのままにしておきますが、自由に変更してください。 [整理]タブでは、カテゴリを好きな順序でドラッグアンドドロップすることもできます。 また、[すべてのテキスト]オプションを使用すると、ページ全体で使用される文言（つまり、検索タイトルとボタンテキスト）を変更できます。
メインページのチューニングオプション
次に、[チューニング]タブをクリックします。 これは、ほとんどのスタイリングがメインナレッジベースで行われる場所です。 これらの設定のすべてを使用するつもりはありませんが、いくつかの色を変更し、いくつかのアイコンを追加します。 これにより、ナレッジベースを事前に作成されたDiviレイアウトと一致させることができます。 Digital Productレイアウトパックを使用する予定なので、これらの色を使用してナレッジベースページのスタイルを設定します。
検索ボックスの色
検索ボックスのカテゴリで、色を選択し、以下を更新します。
タイトル：＃333333
検索の背景：#ffffff
ボタンの背景：＃091c4f
コンテンツスタイル
[コンテンツ]カテゴリで、[スタイル]を選択し、以下を更新します。
ページ幅：全幅
記事のスタイルと色のリスト
[記事のリスト]カテゴリで、[スタイル]を選択し、以下を更新します。
アイコン：矢印の三角形
記事リストの高さ：100px以上の高さ（これはすべてのボックスを同じ高さにするのに便利です）
次に、[色]を選択し、以下を更新します。
記事のテキスト：＃091c4f
記事アイコン：＃6767ef
カテゴリスタイルと色
次に、[カテゴリ]で、[スタイル]を選択し、以下を更新します。
アイコンの場所：上
次に、プレビューのカテゴリボックスの1つをクリックして、それを選択します。 次に、その特定のカテゴリのカテゴリアイコンを選択します。 カテゴリボックスごとにこれを行います。
500以上のアイコンから選択できます！
次に、[色]を選択し、以下を更新します。
トップレベルのカテゴリアイコン：#ffffff
サブカテゴリのテキストとアイコン：＃333333
仕切り：#ffffff
カテゴリボックスの見出しテキスト：#ffffff
カテゴリボックスの見出しの背景：＃091c4f
記事ページの特徴
メインページが構成されたので、ページ上部の記事ページをクリックします。 次に、[機能]タブをクリックします。 ここでは、記事のレイアウトの上部に表示される戻るボタンやブレッドクラムなどの要素をカスタマイズできます。
今のところ、戻るボタンを記事ページに使用する既成のレイアウトと一致させます。 [機能]で、[戻るナビゲーション]を選択し、以下を更新します。
テキストの色：#ffffff
背景色：＃091c4f
ボーダーカラー：＃091c4f
ボーダー幅：3px
アーカイブページのレイアウトスタイル
アーカイブページのレイアウトを変更するには、ページ上部の「アーカイブページ」をクリックしてください。 [設定]タブの下に、使用可能なさまざまなスタイルのドロップダウンリストが表示されます。 私はデフォルトを維持していますが、他のスタイルを自由に試してみてください。
これは、デフォルトのスタイル1でカテゴリアーカイブページがどのように表示されるかの例です。
Diviを使用したナレッジベースページの設計
ナレッジベースページの構成が完了したので、DiviBuilderを使用してナレッジベースのメインページの設計を完了する準備ができました。
まず、プラグインによって自動的に作成されたページタイトル「ナレッジベース」を編集します。
次に、DiviBuilderをデプロイします。 [既成のレイアウトを選択]オプションを選択し、[ライブラリからロード]ポップアップから[デジタル製品レイアウトパック]を選択します。 次に、ドキュメントページレイアウトをページに配置します。
レイアウトがページに読み込まれたら、「フロントエンドでビルド」を選択します。
上部のセクションには、新しくスタイル設定されたナレッジベースを表示するショートコード付きのテキストモジュールが含まれていることがわかります。
これで、事前に作成されたレイアウト内に配置したい場所に移動し、必要に応じてDiviBuilderオプションを使用してデザインを調整するだけです。
この例では、KBショートコードを保持するテキストモジュールを、タイトル「ドキュメント」のテキストモジュールのすぐ下に移動しました。
次に、「ドキュメント」テキストモジュールとショートコードを含むテキストモジュールを含む1行を含む上部セクションだけが残るまで、すべてを削除しました。 また、CTAで下部セクションを保持しました。
デザインを完成させるには、ショートコードを含むテキストモジュールの設定を開き、以下を更新します。
背景色：#ffffff
テキストフォント：ポピンズ
丸みを帯びた角：10px
これが最終的なデザインです。
また、モバイルでもうまく調整できます。
DiviBuilderを使用した記事ページのデザイン
DiviテーマオプションでKBナレッジベースの投稿タイプをアクティブ化したため、DiviBuilderを使用して記事をデザインできます。 ナレッジベースの記事テンプレートは、Divi Builderをページタイトルとブレッドクラム、および戻るボタンの下のコンテンツに制限します。 また、diviビルダーのコンテンツを最大幅1080pxに制限します。
この例では、事前に作成されたレイアウトを使用してナレッジベース記事の設計を開始します。 これを行うには、記事の1つを編集し、DiviBuilderをデプロイします。 「既成のレイアウトを選択」を選択し、「ライブラリポップアップからロード」から「デジタル製品レイアウトパック」を選択して、デジタル製品の連絡先ページを展開します。
次に、記事がどのように見えるかを見てください。 Divi Builderのコンテンツは、Divi Builderでカスタマイズできない記事のタイトル、ブレッドクラム、および戻るボタンのすぐ下にあることに注意してください。
ただし、DiviBuilderを使用できるコンテンツの強力なカスタマイズオプションはまだいくつかあります。 連絡先ページレイアウトの上部セクションの背景を使用して、記事のさまざまなセクション（またはステップ）のセクション背景として検索できます。 また、画像モジュールを使用してスクリーンショットを簡単に追加できます。 基本的に、記事全体でDiviBuilderの無限の可能性があります。
これは、Diviでデザインされた記事ページがどのように見えるかの簡単な例です。
もちろん、カスタムCSSを追加して、記事コンテナの幅を調整し、全幅のレイアウトを取得することもできます。 また、コードを追加してタイトルを非表示にし、Diviの動的コンテンツを使用して、DiviBuilder内の任意の場所に記事のタイトルを配置できます。
最終的な考え
Echoナレッジベースプラグインは、利用可能なすべてのプレミアムアドオンがなくても、驚くほど強力です（ただし、チェックする価値があります）。構成オプションを使用すると、Diviレイアウトに合わせてナレッジベースページを簡単に整理およびスタイル設定できます。 さらに、Divi Builderを使用して、ナレッジベースページと記事ページを設計することもできます。 このチュートリアルが、DiviWebサイトにナレッジベースを追加しようとしている人に役立つことを願っています。
コメントでお返事をお待ちしております。
乾杯！