Base de connaissances héroïque – Utilisation du système de modèles

Si vous passez beaucoup de temps à répondre aux mêmes questions d'assistance encore et encore, alors chez HeroThemes, nous avons la réponse….

Remarque : Cet article suppose que vous savez comment installer WordPress, les plugins et que vous avez des connaissances en développement de thèmes, y compris les thèmes parent/enfant, HTML, CSS et une compréhension de base de PHP.

Base de connaissances héroïque

Notre plugin de base de connaissances fournit une solution rapide et très facile à configurer pour créer une base de connaissances personnalisée sur votre site Web. Fournir instantanément à vos clients les réponses aux questions les plus fréquemment posées et vous permettre de réduire le temps passé à répondre aux appels d'assistance et aux e-mails afin que vous puissiez plutôt partir et sauter à travers les champs de marguerites (ou faire tout ce que vous souhaitez vous concentrer à la place) et vous assurer d'avoir des clients plus satisfaits.

Comme la plupart des plugins WordPress, l'installation initiale ne pourrait pas être plus simple. Téléchargez simplement le plugin dans votre répertoire de plugins via le tableau de bord et activez-le. Le plug-in de la base de connaissances s'intègre de manière transparente à la plupart des thèmes bien codés. Par conséquent, peu importe que vous utilisiez un thème entièrement sur mesure, l'un de nos produits HeroThemes premium ou le thème par défaut pour WordPress. Vous aurez une base de connaissances entièrement fonctionnelle intégrée à votre site Web WordPress en quelques minutes avec très peu de tracas.

Si vous avez une certaine connaissance du développement de thèmes et que vous souhaitez personnaliser davantage le plug-in, notre code propre et convivial pour les développeurs, nos fonctions enfichables et notre système de modèles facile à suivre vous permettent d'effectuer des personnalisations avancées. Cet article examinera certaines des choses intéressantes que vous pouvez faire pour personnaliser le plugin en utilisant le système de modèles.

Je vais donner un aperçu rapide de:

• Installation du plugin, paramètres généraux et ajout de contenu
• Intégration de base avec le nouveau thème TwentySixteen disponible avec WordPress 4.4
• Intégration avancée : modification des modèles pour une personnalisation plus poussée

Commencer

Après l'installation initiale de WordPress, assurez-vous que le thème TwentySixteen et le plug-in de la base de connaissances sont installés et activés.

TwentySixteen est le nouveau thème par défaut fourni avec WordPress 4.4. Si, après la mise à niveau de votre installation WordPress, vous n'avez pas le nouveau thème répertorié sous Apparence > Thèmes , vous pouvez le télécharger à partir de la page de thème TwentySixteen sur WordPress.org

Le plug-in de la base de connaissances

Tout comme WordPress lui-même, la configuration du plugin Knowledge Base est super facile. Une fois le plugin activé, vous êtes automatiquement redirigé vers un écran "Getting Started" qui couvre quelques conseils de base pour vous aider à démarrer. Il existe également un nouvel élément de menu dans le menu à gauche du tableau de bord appelé Base de connaissances.

La base de connaissances fonctionne de manière très similaire aux utilisations standard du type de publication "post" de WordPress. Les articles peuvent être organisés par catégorie et également par tag. Les catégories peuvent être ajoutées ou supprimées à tout moment, tout comme pour les publications. Cependant, pour vous assurer que votre base de connaissances est aussi utile que possible, il est conseillé de planifier votre structure de catégories avant de commencer à créer du contenu.

Par défaut, les articles de la base de connaissances s'affichent dans l'ordre de la date de publication exactement comme les publications standard, cependant, vous pouvez modifier cela dans les paramètres du plug-in.

La base de connaissances est livrée avec un large éventail de paramètres pour pouvoir personnaliser votre installation sans avoir à vous plonger dans les modèles.

Vous pouvez les laisser exactement tels quels et votre base de connaissances fonctionnera parfaitement, cependant, si vous souhaitez modifier l'ordre des articles, l'affichage des catégories, personnaliser la fonction de recherche en direct, activer le vote et les commentaires sur les articles et un large nombre d'autres options, vous pouvez le faire sans avoir besoin de connaissances en codage.

Création de contenu

Avant de pouvoir commencer à effectuer des personnalisations avancées sur notre base de connaissances, vous avez besoin de contenu. Par conséquent, la première chose que vous devrez faire est de créer des articles. Avec le thème TwentySixteen installé, ajoutez un nouvel écran

Cela devrait vous sembler très familier si vous avez déjà utilisé WordPress auparavant. Le titre de la publication, le contenu, la publication, les formats de publication, la catégorie et les zones de balise sont tous les mêmes. En fait, les seuls domaines qui diffèrent sont les options d'article et les options de vote

Vous pouvez également installer le contenu par défaut à partir de l'écran de démarrage pendant que vous démarrez.

Intégration avec TwentySixteen

L'intégration du plugin Knowledge Base avec le thème TwentySixteen est vraiment simple. Si vous avez suivi les étapes ci-dessus, c'est tout. Vous pourriez le laisser là et vous auriez une bonne base de connaissances fonctionnelles sans avoir besoin de faire quoi que ce soit d'autre. Parfait si vous ne connaissez pas beaucoup de code ou si vous voulez simplement quelque chose de simple et rapide à configurer.

Mais… et si vous voulez en faire plus ?

Ce qui est vraiment bien avec le plugin pour les développeurs de thèmes, c'est le système de modèles.

Le système de modèles fonctionne en copiant les fichiers de modèle que vous souhaitez modifier du plugin dans votre dossier de thème. WordPress regarde ensuite votre thème en premier. S'il existe un fichier de modèle pertinent dans votre thème, il sera utilisé. Sinon, le modèle de secours dans le dossier du plugin sera utilisé à la place pour détourner la fonction the_content() et insérer le contenu de la base de connaissances dans votre page.php standard.

La hiérarchie des modèles dans le plugin ou dans le thème fonctionne alors de manière très similaire à la hiérarchie des modèles WordPress standard, ce qui facilite la compréhension.

Par exemple hkb-taxonomy-category.php hkb-archive.php de la même manière que category-$slug.php remplacerait le standard archive.php .

Si vous souhaitez en savoir plus sur la hiérarchie des modèles WordPress, vous pouvez lire le codex des développeurs.

Personnalisation des modèles

Par défaut, la section Base de connaissances ressemblera à ceci lors de l'utilisation du thème TwentySixteen :

C'est bien, TwentySixteen est un premier thème mobile très joliment stylé. Cependant, en raison de la disposition des modèles de page, les pages de la base de connaissances ont beaucoup d'espace mort par rapport aux autres pages du site :

Vous n'avez pas besoin de tout cet espace blanc sur les pages de la base de connaissances, vous devrez donc modifier le code HTML du modèle concerné pour le supprimer.

Avant d'en arriver là, vous devrez créer un thème enfant pour TwentySixteen afin qu'aucune de vos modifications ne soit perdue lors de la publication des mises à jour du thème. J'ai appelé mon dossier vingt-six-enfant . Vous trouverez plus d'informations sur les thèmes enfants dans notre article sur les thèmes enfants.

Une fois que vous avez configuré votre thème enfant, vous pouvez maintenant commencer à travailler sur l'édition des modèles. Créez un nouveau dossier dans le dossier Twentysixteen-child et nommez-le hkb-templates . Ensuite, copiez le modèle que vous souhaitez modifier du dossier du plug-in dans le dossier du modèle nouvellement créé.

Pour modifier la page d'archive de la base de connaissances, le modèle que vous devrez modifier est hkb-archive.php . Une fois copié, ouvrez-le dans votre éditeur de code. Tu devrais voir:

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

<?php get_header(); ?>

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

<?php get_footer(); ?>

Remarque : étant donné que les modèles du plug-in injectent le contenu de la base de connaissances dans la page à l'aide de la fonction the_content() de WordPress, la structure complète de la page n'est pas initialement incluse dans le modèle. Étant donné que vous remplacez le modèle par défaut, vous devrez ajouter le code HTML supplémentaire à la page.

Par conséquent, le code dans hkb-archive.php doit être modifié pour ressembler à :

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

Remarque : Il n'est pas nécessaire d'inclure la boucle while dans ce modèle

Enregistrez votre fichier et affichez la page. Cela devrait maintenant ressembler à ceci :

Ceci utilise maintenant la mise en page de la page.php standard dans le thème vingt-six et a supprimé l'espace blanc à gauche. Cependant, il a également supprimé tout le style du plug-in et s'en remet désormais au style par défaut du thème.

En effet, dès que vous commencez à personnaliser le thème, le plugin suppose que vous voulez la liberté d'écrire vos propres styles et ne charge donc pas la feuille de style. Ceci est très utile lorsque vous créez des thèmes entièrement sur mesure, cependant, si vous souhaitez conserver les styles existants, vous pouvez copier et coller les styles de hkb-style.css dans style.css dans votre thème enfant. Ou si vous créez un thème sur mesure, vous pouvez copier la feuille de style du dossier du plugin dans le dossier de votre thème, puis la mettre en file d'attente dans votre functions.php en utilisant les lignes de code suivantes :

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

Remarque : Si vous utilisez cette méthode avec un thème enfant, vous devrez utiliser get_stylesheet_directory_uri() au lieu de get_template_directory_uri() . En effet get_stylesheet_directory_uri() examinera la structure de fichier de votre thème enfant, get_template_directory_uri() pointe vers le dossier du thème parent à la place.

Si vous créez un thème sur mesure au lieu de modifier un thème existant avec un thème enfant, je préfère personnellement garder les feuilles de style séparées et utiliser la méthode de mise en file d'attente pour injecter correctement les styles dans le thème. En effet, style.css peut souvent devenir très volumineux et difficile à gérer rapidement. Garder les styles pertinents séparés les rend faciles à trouver si vous avez besoin de les modifier davantage. La même organisation pourrait être utilisée si vous utilisez un préprocesseur comme SASS, car vous pouvez alors @import votre nouvelle feuille de style afin qu'elle soit automatiquement combinée dans style.css qui peut ensuite être injectée dans votre thème à l'aide wp_enqueue_style() .

Une fois les styles réappliqués, visualisez à nouveau la page et vous devriez maintenant voir :

La page a maintenant été reformatée et l'espace mort à gauche a été supprimé, ce qui rend tout beaucoup plus ordonné sans perdre le style et la conception du thème. S'il y a d'autres modèles de page auxquels vous souhaitez appliquer ce changement de mise en page, copiez simplement les modèles pertinents dans votre thème enfant et vous avez terminé !

Dernières pensées

J'espère avoir démontré à quel point le plugin Heroic Knowledge Base est personnalisable. Il y a beaucoup de choses que vous pouvez faire sans avoir besoin de connaître le code, cependant, si vous voulez personnaliser davantage les choses et que vous comprenez les normes de code WordPress et le développement de thèmes, vous pouvez le faire très facilement.