Heroic Knowledge Base – Verwenden des Templating-Systems

Wenn Sie viel Zeit damit verbringen, immer wieder die gleichen Support-Fragen zu beantworten, dann haben wir bei HeroThemes die Antwort….

Hinweis: In diesem Artikel wird davon ausgegangen, dass Sie wissen, wie man WordPress und Plugins installiert, und dass Sie über einige Kenntnisse in der Themenentwicklung verfügen, einschließlich übergeordneter / untergeordneter Themen, HTML, CSS und ein grundlegendes Verständnis von PHP.

Heroische Wissensbasis

Unser Wissensdatenbank-Plugin bietet eine schnelle und sehr einfach einzurichtende Lösung zum Erstellen einer benutzerdefinierten Wissensdatenbank auf Ihrer Website. Geben Sie Ihren Kunden sofort die Antworten auf diese häufiger gestellten Fragen und ermöglichen Sie es Ihnen, die Zeit zu reduzieren, die Sie mit der Beantwortung von Support-Anrufen und E-Mails verbringen, sodass Sie stattdessen losgehen und durch Gänseblümchenfelder springen können (oder tun, worauf Sie sich konzentrieren möchten). stattdessen eingeschaltet) und sicherzustellen, dass Sie zufriedenere Kunden haben.

Wie bei den meisten WordPress-Plugins könnte die Erstinstallation nicht einfacher sein. Laden Sie das Plugin einfach über das Dashboard in Ihr Plugin-Verzeichnis hoch und aktivieren Sie es. Das Knowledge Base-Plugin lässt sich nahtlos in die meisten gut codierten Themen integrieren, daher macht es keinen Unterschied, ob Sie ein vollständig maßgeschneidertes Thema, eines unserer Premium-HeroThemes-Produkte oder das Standardthema für WordPress verwenden. Sie haben in wenigen Minuten und mit sehr wenig Aufwand eine voll funktionsfähige Wissensdatenbank in Ihre WordPress-Website integriert.

Wenn Sie über Kenntnisse in der Themenentwicklung verfügen und das Plugin weiter anpassen möchten, können Sie mit unserem sauberen, entwicklerfreundlichen Code, den Plug-in-Funktionen und dem leicht verständlichen Templating-System erweiterte Anpassungen vornehmen. Dieser Artikel wirft einen Blick auf einige der coolen Dinge, die Sie tun können, um das Plugin mit dem Templating-System anzupassen.

Ich gebe einen kurzen Überblick über:

• Installieren des Plugins, allgemeine Einstellungen und Hinzufügen einiger Inhalte
• Grundlegende Integration mit dem neuen TwentySixteen-Theme, das mit WordPress 4.4 verfügbar ist
• Erweiterte Integration: Ändern von Vorlagen zur weiteren Anpassung

Einstieg

Stellen Sie nach der Erstinstallation von WordPress sicher, dass Sie sowohl das TwentySixteen-Design als auch das Knowledge Base-Plugin installiert und aktiviert haben.

TwentySixteen ist das neue Standarddesign, das mit WordPress 4.4 ausgeliefert wird. Wenn Sie nach dem Upgrade Ihrer WordPress-Installation das neue Design nicht unter Aussehen > Designs aufgeführt haben, können Sie es von der TwentySixteen-Themenseite auf WordPress.org herunterladen

Das Wissensdatenbank-Plugin

Genau wie WordPress selbst ist das Einrichten des Knowledge Base-Plugins super einfach. Sobald das Plugin aktiviert ist, werden Sie automatisch zu einem Bildschirm „Erste Schritte“ weitergeleitet, der einige grundlegende Tipps enthält, die Ihnen den Einstieg erleichtern. Es gibt auch einen neuen Menüpunkt im Menü links neben dem Dashboard namens Knowledge Base.

Die Wissensdatenbank funktioniert auf sehr ähnliche Weise wie der standardmäßige Beitragstyp „Beitrag“, den WordPress verwendet. Artikel können nach Kategorien und auch nach Tags organisiert werden. Kategorien können jederzeit hinzugefügt oder entfernt werden, genau wie bei Beiträgen. Um jedoch sicherzustellen, dass Ihre Wissensdatenbank so nützlich wie möglich ist, ist es ratsam, Ihre Kategoriestruktur zu planen, bevor Sie mit der Erstellung von Inhalten beginnen.

Standardmäßig werden Artikel in der Wissensdatenbank in der Reihenfolge des Veröffentlichungsdatums genau wie Standardbeiträge angezeigt, Sie können dies jedoch in den Plugin-Einstellungen ändern.

Die Wissensdatenbank verfügt über eine Vielzahl von Einstellungen, mit denen Sie Ihre Installation anpassen können, ohne sich überhaupt mit der Erstellung von Vorlagen befassen zu müssen.

Sie können diese genau so lassen, wie sie sind, und Ihre Wissensdatenbank wird perfekt funktionieren, wenn Sie jedoch ändern möchten, wie die Artikel geordnet sind, wie Kategorien angezeigt werden, die Live-Suchfunktion anpassen, Abstimmungen und Kommentare zu Artikeln aktivieren und vieles mehr Anzahl anderer Optionen können Sie dies tun, ohne über Programmierkenntnisse verfügen zu müssen.

Inhalte erstellen

Bevor Sie erweiterte Anpassungen an unserer Wissensdatenbank vornehmen können, benötigen Sie einige Inhalte. Daher müssen Sie zunächst einige Artikel erstellen. Wenn das TwentySixteen-Design installiert ist, können Sie einen neuen Bildschirm hinzufügen

Dies sollte Ihnen sehr bekannt vorkommen, wenn Sie WordPress schon einmal verwendet haben. Titel, Inhalt, Veröffentlichung, Formate, Kategorien und Tag-Felder des Beitrags sind alle gleich. Tatsächlich sind die einzigen Bereiche, die sich unterscheiden, die Artikeloptionen und die Abstimmungsoptionen

Alternativ können Sie den Standardinhalt vom Bildschirm „Erste Schritte“ installieren, während Sie beginnen.

Integration mit TwentySixteen

Die Integration des Knowledge Base-Plugins in das TwentySixteen-Design ist wirklich einfach. Wenn Sie die obigen Schritte befolgt haben, war es das. Sie könnten es dort belassen und Sie hätten eine gut aussehende funktionale Wissensdatenbank, ohne dass Sie weitere Maßnahmen ergreifen müssten. Perfekt, wenn Sie nicht viel Code kennen oder einfach nur etwas schnell und einfach einrichten möchten.

Aber … was ist, wenn Sie mehr tun möchten?

Was wirklich nett an dem Plugin für Theme-Entwickler ist, ist das Templating-System.

Das Vorlagensystem funktioniert, indem es die Vorlagendateien, die Sie ändern möchten, aus dem Plugin in Ihren Themenordner kopiert. WordPress schaut sich dann zuerst dein Theme an. Wenn Ihr Design eine relevante Vorlagendatei enthält, wird diese verwendet. Wenn nicht, wird stattdessen das Fallback-Template im Plugin-Ordner verwendet, um die Funktion the_content() zu entführen und den Inhalt der Wissensdatenbank in Ihre Standard page.php .

Die Hierarchie der Vorlagen innerhalb des Plugins oder innerhalb des Themes funktioniert dann sehr ähnlich wie die Standard-WordPress-Vorlagenhierarchie, was es einfach macht, sich zurechtzufinden.

Zum Beispiel wird hkb-taxonomy-category.php hkb-archive.php auf die gleiche Weise überschreiben, wie die category-$slug.php die standardmäßige archive.php überschreiben würde.

Wenn Sie mehr über die WordPress-Template-Hierarchie erfahren möchten, können Sie sich im Entwicklercodex darüber informieren.

Anpassen der Vorlagen

Standardmäßig sieht der Knowledge Base-Bereich bei Verwendung des TwentySixteen-Designs folgendermaßen aus:

Das ist in Ordnung, TwentySixteen ist ein sehr schön gestyltes Mobile-First-Theme. Aufgrund des Layouts der Seitenvorlagen haben die Seiten der Wissensdatenbank jedoch viel Totraum im Vergleich zu anderen Seiten der Website:

Sie benötigen diesen gesamten Leerraum auf den Seiten der Wissensdatenbank nicht. Sie müssen also nur den HTML-Code der relevanten Vorlage ändern, um ihn zu entfernen.

Bevor Sie jedoch dazu kommen, müssen Sie ein untergeordnetes Design für TwentySixteen erstellen, damit keine Ihrer Änderungen verloren gehen, wenn Updates für das Design veröffentlicht werden. Ich habe meinen Ordner Twentysixteen-Child genannt. Weitere Informationen zu Child-Themes finden Sie in unserem Artikel zu Child-Themes.

Sobald Sie Ihr untergeordnetes Thema eingerichtet haben, können Sie nun mit der Bearbeitung der Vorlagen beginnen. Erstellen Sie einen neuen Ordner innerhalb des Twentysixteen-Child- Ordners und nennen Sie ihn hkb-templates . Kopieren Sie dann die Vorlage, die Sie bearbeiten möchten, aus dem Plugin-Ordner in den neu erstellten Vorlagenordner.

Um die Archivseite der Wissensdatenbank zu ändern, müssen Sie die Vorlage hkb-archive.php bearbeiten. Öffnen Sie es nach dem Kopieren in Ihrem Code-Editor. Das solltest du sehen:

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

<?php get_header(); ?>

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

<?php get_footer(); ?>

Hinweis: Da die Vorlagen innerhalb des Plugins den Inhalt der Wissensdatenbank mithilfe der WordPress-Funktion the_content() in die Seite einfügen, ist die vollständige Struktur der Seite zunächst nicht in der Vorlage enthalten. Da Sie die Standardvorlage überschreiben, müssen Sie den zusätzlichen HTML-Code zur Seite hinzufügen.

Daher sollte der Code in hkb-archive.php so geändert werden, dass er etwa so aussieht:

<?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(); ?>

Hinweis: Es ist nicht erforderlich, die While-Schleife in diese Vorlage aufzunehmen

Speichern Sie Ihre Datei und zeigen Sie die Seite an. Es sollte jetzt in etwa so aussehen:

Diese verwendet nun das Layout der Standard page.php im Twentysixteen-Theme und entfernt die Leerzeichen von links. Es hat jedoch auch das gesamte Plugin-Design entfernt und stattdessen das Standard-Design des Themas übernommen.

Dies liegt daran, dass das Plugin, sobald Sie mit der Anpassung des Designs beginnen, davon ausgeht, dass Sie die Freiheit haben möchten, Ihre eigenen Stile zu schreiben, und daher das Stylesheet nicht lädt. Dies ist sehr nützlich, wenn Sie vollständig maßgeschneiderte Designs erstellen. Wenn Sie jedoch die vorhandenen Stile beibehalten möchten, können Sie die Stile aus hkb-style.css kopieren und in style.css in Ihrem untergeordneten Design einfügen. Oder wenn Sie ein maßgeschneidertes Design erstellen, können Sie das Stylesheet aus dem Plugin-Ordner in den Ordner Ihres Designs kopieren und es dann mit den folgenden Codezeilen in Ihre functions.php einreihen:

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

Hinweis: Wenn Sie diese Methode mit einem untergeordneten Design verwenden, müssen Sie get_stylesheet_directory_uri() anstelle von get_template_directory_uri() verwenden. Dies liegt daran, dass get_stylesheet_directory_uri() die Dateistruktur für Ihr untergeordnetes Design betrachtet, get_template_directory_uri() zeigt stattdessen auf den Ordner des übergeordneten Designs.

Wenn Sie ein maßgeschneidertes Design erstellen, anstatt ein vorhandenes mit einem untergeordneten Design zu ändern, bevorzuge ich es persönlich, die Stylesheets getrennt zu halten und die Enqueue-Methode zu verwenden, um die Stile ordnungsgemäß in das Design einzufügen. Dies liegt daran, dass style.css oft sehr groß und schnell schwer zu verwalten sein kann. Wenn Sie die relevanten Stile getrennt halten, sind sie leicht zu finden, falls Sie sie weiter bearbeiten müssen. Dieselbe Organisation könnte verwendet werden, wenn Sie einen Präprozessor wie SASS verwenden, da Sie dann Ihr neues Stylesheet @importieren können, sodass es automatisch in style.css kombiniert wird, das dann mit wp_enqueue_style() in Ihr Design eingefügt werden kann.

Sobald die Stile erneut angewendet wurden, zeigen Sie die Seite erneut an und Sie sollten jetzt Folgendes sehen:

Die Seite wurde jetzt neu formatiert und der Totraum auf der linken Seite wurde entfernt, wodurch alles viel aufgeräumter aussieht, ohne den Stil und das Design des Themas zu verlieren. Wenn es andere Seitenvorlagen gibt, auf die Sie diese Layoutänderung anwenden möchten, kopieren Sie einfach die entsprechenden Vorlagen in Ihr untergeordnetes Thema, und Sie sind fertig!

Abschließende Gedanken

Hoffentlich habe ich demonstriert, wie anpassbar das Heroic Knowledge Base-Plugin ist. Es gibt viel, was Sie sofort tun können, ohne Code kennen zu müssen. Wenn Sie die Dinge jedoch weiter anpassen möchten und ein Verständnis für WordPress-Codestandards und die Themenentwicklung haben, können Sie dies sehr einfach tun.