英雄的な知識ベース–テンプレートシステムの使用

公開: 2016-01-11

同じサポートの質問に何度も何度も答えるのに多くの時間を費やすなら、HeroThemesの私たちが答えを持っています…。

注:この記事は、WordPress、プラグインのインストール方法を理解しており、親/子テーマ、HTML、CSS、PHPの基本的な知識などのテーマ開発の知識があることを前提としています。

英雄的な知識ベース

ナレッジベースプラグインは、Webサイトにカスタムナレッジベースを作成するための、すばやく簡単にセットアップできるソリューションを提供します。 よくある質問への回答を顧客に即座に提供し、サポートコールやメールへの応答にかかる時間を短縮できるため、代わりにデイジーのフィールドをスキップして(または集中したいことを何でも行うことができます)代わりに)そしてあなたがより幸せな顧客を持っていることを保証します。

ほとんどのWordPressプラグインと同様に、初期インストールはこれ以上ないほど簡単です。 ダッシュボードからプラグインをプラグインディレクトリにアップロードしてアクティブ化するだけです。 ナレッジベースプラグインは、最も適切にコーディングされたテーマとシームレスに統合されるため、完全にオーダーメイドのテーマ、プレミアムHeroThemes製品のいずれか、またはWordPressのデフォルトテーマを使用しているかどうかに違いはありません。 ほんの少しの手間で、完全に機能するナレッジベースが数分でWordPressWebサイトに統合されます。

テーマ開発の知識があり、プラグインをさらにカスタマイズしたい場合は、クリーンで開発者に優しいコード、プラグイン可能な関数、およびわかりやすいテンプレートシステムを使用して、高度なカスタマイズを行うことができます。 この記事では、テンプレートシステムを使用してプラグインをカスタマイズするために実行できるいくつかの優れた機能について説明します。

以下の概要を簡単に説明します。

  • プラグインのインストール、一般設定、コンテンツの追加
  • WordPress4.4で利用可能な新しいTwentySixteenテーマとの基本的な統合
  • 高度な統合:さらにカスタマイズするためのテンプレートの変更

入門

WordPressの初期インストール後、TwentySixteenテーマとナレッジベースプラグインの両方がインストールされ、アクティブ化されていることを確認してください。

TwentySixteenは、WordPress4.4に付属する新しいデフォルトのテーマです。 WordPressのインストールをアップグレードした後、 [外観]> [テーマ]の下に新しいテーマが表示されていない場合は、WordPress.orgのTwentySixteenテーマページからダウンロードできます。

ナレッジベースプラグイン

WordPress自体と同じように、ナレッジベースプラグインの設定は非常に簡単です。 プラグインがアクティブ化されると、「はじめに」画面が自動的に表示されます。この画面には、作業を始めるのに役立ついくつかの基本的なヒントが記載されています。 ダッシュボードの左側のメニューには、ナレッジベースと呼ばれる新しいメニュー項目もあります。

ナレッジベースは、WordPressが使用する標準の「投稿」投稿タイプと非常によく似た方法で機能します。 記事はカテゴリ別およびタグ別に整理できます。 カテゴリは、投稿の場合と同じようにいつでも追加または削除できますが、ナレッジベースができるだけ役立つように、コンテンツの作成を開始する前にカテゴリ構造を計画することをお勧めします。

デフォルトでは、ナレッジベースの記事は標準の投稿とまったく同じように投稿日の順序で表示されますが、プラグイン設定内でこれを変更できます。

kb-blog1-settings

ナレッジベースには、テンプレートをまったく使用せずにインストールをカスタマイズできるようにするためのさまざまな設定が付属しています。

これらをそのままにしておくと、ナレッジベースは完全に機能しますが、記事の順序、カテゴリの表示方法、ライブ検索機能のカスタマイズ、記事への投票とコメントの有効化などを変更したい場合は、他の多くのオプションでは、コーディングの知識がなくても実行できます。

コンテンツの作成

ナレッジベースの高度なカスタマイズを開始する前に、いくつかのコンテンツが必要です。 したがって、最初に行う必要があるのは、いくつかの記事を作成することです。 TwentySixteenテーマをインストールすると、新しい画面が追加されます

kb-blog1-add-new-screen
kb-blog1-add-new-options

これまでにWordPressを使用したことがある場合、これは非常に見覚えがあるはずです。 投稿のタイトル、コンテンツ、公開、投稿の形式、カテゴリ、タグボックスはすべて同じです。 実際、異なるのは記事のオプションと投票のオプションだけです。

または、開始時に開始画面からデフォルトのコンテンツをインストールすることもできます。

TwentySixteenとの統合

ナレッジベースプラグインをTwentySixteenテーマと統合するのは本当に簡単です。 上記の手順を実行した場合は、それだけです。 あなたはそれをそこに残すことができ、あなたはそれ以上何もする必要のない見栄えの良い機能的な知識ベースを持つでしょう。 コードをあまり知らない場合や、すばやく簡単にセットアップしたい場合に最適です。

しかし…もっとやりたいと思ったらどうしますか?

テーマ開発者向けのプラグインの本当に素晴らしいところは、テンプレートシステムです。

テンプレートシステムは、プラグインからテーマフォルダに変更するテンプレートファイルをコピーすることで機能します。 次に、WordPressは最初にテーマを調べます。 テーマに関連するテンプレートファイルがある場合は、それが使用されます。 そうでない場合は、代わりにプラグインフォルダー内のフォールバックテンプレートを使用して、 the_content()関数をハイジャックし、ナレッジベースコンテンツを標準のpage.phpに挿入します。

プラグイン内またはテーマ内のテンプレートの階層は、標準のWordPressテンプレート階層と非常によく似た方法で機能するため、簡単に頭を動かすことができます。

たとえば、 hkb-taxonomy-category.phpは、categoryとほぼ同じ方法でhkb-archive.phpをオーバーライドしcategory-$slug.phpは標準のarchive.phpをオーバーライドします。

kb-blog1-template-heirachy
注文テンプレートは、表示されるコンテンツと、テーマに存在するかどうかに応じて使用されます。 たとえば、カテゴリを表示する場合、ファイルが存在する場合はhkb-taxonomy-category.phpが使用され、存在しない場合はhkb-archive.phpが使用されます。

WordPressテンプレート階層について詳しく知りたい場合は、開発者コーデックスを読んでください。

テンプレートのカスタマイズ

デフォルトでは、TwentySixteenテーマを使用すると、ナレッジベースセクションは次のようになります。

ナレッジベースの目次ページと単一の記事
ナレッジベースの目次ページと単一の記事

これは問題ありません。TwentySixteenは非常にスタイルの良いモバイルファーストテーマです。 ただし、ページテンプレートのレイアウトのため、ナレッジベースページにはWebサイトの他のページと比較して多くのデッドスペースがあります。

標準のブログ投稿と比較した同じナレッジベースの目次ページ
標準のブログ投稿と比較した同じナレッジベースの目次ページ

ナレッジベースページにこの空白のすべてが必要なわけではないため、必要なのは、関連するテンプレートのHTMLを変更して削除することです。

ただし、その前に、TwentySixteenの子テーマを作成して、テーマの更新がリリースされたときに変更が失われないようにする必要があります。 私は自分のフォルダを26子と呼んでいます。 子のテーマの詳細については、子のテーマに関する記事をご覧ください。

子テーマを設定したら、テンプレートの編集作業を開始できます。 26-childフォルダー内に新しいフォルダーを作成し、 hkb-templatesという名前を付けます。 次に、編集するテンプレートをプラグインフォルダーから新しく作成したテンプレートフォルダーにコピーします。

ナレッジベースのアーカイブページを変更するには、編集する必要のあるテンプレートはhkb-archive.phpです。 コピーしたら、コードエディタで開きます。 君は見るべきだ:


<?php /** * Theme template for archive display */ ?>

<?php get_header(); ?>

<?php hkb_get_template_part('hkb-compat', 'archive'); ?>

<?php get_footer(); ?>

注:プラグイン内のテンプレートは、WordPressのthe_content()関数を使用してナレッジベースのコンテンツをページに挿入するため、ページの完全な構造は最初はテンプレートに含まれていません。 デフォルトのテンプレートを上書きするため、ページにHTMLを追加する必要があります。

したがって、 hkb-archive.phpのコードは次のように変更する必要があります。

<?php /** * Theme template for archive display */ ?>
<?php get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php // Include the page content template. hkb_get_template_part('hkb-compat', 'archive'); ?>
</main><!-- .site-main -->

<?php get_sidebar( 'content-bottom' ); ?>
</div>

<!-- .content-area -->

<?php get_sidebar(); ?><?php get_footer(); ?>

注:このテンプレートにwhileループを含める必要はありません

kb-blog1-knowledge-base-unformat

ファイルを保存してページを表示します。 これで、次のようになります。

これは現在、26のテーマで標準のpage.phpのレイアウトを使用しており、左側の空白を削除しています。 ただし、実際にはすべてのプラグインスタイルも削除されており、代わりにテーマのデフォルトのスタイルに従います。

これは、テーマのカスタマイズを開始するとすぐに、プラグインは独自のスタイルを自由に記述できることを前提としているため、スタイルシートをロードしないためです。 これは、完全にオーダーメイドのテーマを作成する場合に非常に便利ですが、既存のスタイルを保持したい場合は、スタイルをコピーして、子テーマのhkb-style.cssからstyle.cssに貼り付けることができます。 または、特注のテーマを作成している場合は、プラグインフォルダーからテーマのフォルダーにスタイルシートをコピーし、次のコード行を使用してfunctions.phpにキューに入れることができます。


// Knowledge Base plugin styles
wp_enqueue_style( 'hkb-style', get_template_directory_uri() . '/css/hkb-style.css', array( 'twentysixteen-style' ), '20151217' );

注:子テーマでこのメソッドを使用する場合は、 get_template_directory_uri() )の代わりにget_stylesheet_directory_uri()を使用する必要があります。 これは、 get_stylesheet_directory_uri()が子テーマのファイル構造を参照し、 get_template_directory_uri()が代わりに親テーマフォルダーを指すためです。

子テーマで既存のテーマを変更するのではなく、特注のテーマを作成する場合、私は個人的にスタイルシートを分離し、enqueueメソッドを使用してスタイルをテーマに適切に挿入することを好みます。 これは、style.cssが非常に大きくなり、すばやく管理するのが困難になることが多いためです。関連するスタイルを分離しておくと、さらに編集する必要がある場合に簡単に見つけることができます。 SASSのようなプリプロセッサを使用する場合は、同じ組織を使用できます。新しいスタイルシートを@importして、自動的にstyle.cssに結合し、 wp_enqueue_style()を使用してテーマに挿入できます。

スタイルが再適用されたら、ページをもう一度表示すると、次のように表示されます。

kb-blog1-knowledge-base-formatted

ページが再フォーマットされ、左側のデッドスペースが削除され、テーマのスタイルとデザインを失うことなく、すべてがよりきれいに見えるようになりました。 このレイアウト変更を適用したい他のページテンプレートがある場合は、関連するテンプレートを子テーマにコピーするだけで完了です。

最終的な考え

うまくいけば、Heroicナレッジベースプラグインがいかにカスタマイズ可能であるかを示しました。 コードを知らなくても、箱から出してすぐにできることはたくさんありますが、さらにカスタマイズしたい場合で、WordPressのコード標準とテーマ開発を理解していれば、非常に簡単に行うことができます。