Base di conoscenza eroica – Utilizzo del sistema di creazione di modelli

Se passi molto tempo a rispondere alle stesse domande di supporto più e più volte, allora noi di HeroThemes abbiamo la risposta….

Nota: questo articolo presuppone che tu sappia come installare WordPress, plugin e che tu abbia una certa conoscenza dello sviluppo di temi, inclusi temi genitore/figlio, HTML, CSS e una conoscenza di base di PHP.

Base di conoscenza eroica

Il nostro plug-in Knowledge Base fornisce una soluzione rapida e molto facile da configurare per creare una knowledge base personalizzata sul tuo sito web. Fornisce istantaneamente ai tuoi clienti le risposte alle domande più frequenti e ti consente di ridurre il tempo impiegato per rispondere alle chiamate e alle e-mail di supporto in modo che tu possa invece andare e saltare i campi delle margherite (o fare qualunque cosa vorresti concentrare attivo invece) e assicurandoti di avere clienti più felici.

Come la maggior parte dei plugin di WordPress, l'installazione iniziale non potrebbe essere più semplice. Basta caricare il plug-in nella directory dei plug-in tramite la dashboard e attivarlo. Il plug-in Knowledge Base si integra perfettamente con la maggior parte dei temi ben codificati, quindi non fa differenza se stai utilizzando un tema completamente personalizzato, uno dei nostri prodotti HeroThemes premium o il tema predefinito per WordPress. Avrai una base di conoscenza completamente funzionale integrata nel tuo sito Web WordPress in pochi minuti con pochissimi problemi.

Se hai una certa conoscenza dello sviluppo di temi e desideri personalizzare ulteriormente il plug-in, il nostro codice pulito e intuitivo per gli sviluppatori, le funzioni collegabili e il sistema di modelli facile da seguire ti consentono di effettuare personalizzazioni avanzate. Questo articolo darà un'occhiata ad alcune delle cose interessanti che puoi fare per personalizzare il plug-in utilizzando il sistema di modelli.

Darò una rapida panoramica di:

• Installazione del plugin, impostazioni generali e aggiunta di alcuni contenuti
• Integrazione di base con il nuovo tema TwentySixteen disponibile con WordPress 4.4
• Integrazione avanzata: modifica dei modelli per un'ulteriore personalizzazione

Iniziare

Dopo l'installazione iniziale di WordPress, assicurati di aver installato e attivato sia il tema TwentySixteen che il plug-in della Knowledge Base.

TwentySixteen è il nuovo tema predefinito fornito con WordPress 4.4. Se, dopo aver aggiornato l'installazione di WordPress, non hai il nuovo tema elencato in Aspetto > Temi , puoi scaricarlo dalla pagina del tema TwentySixteen su WordPress.org

Il plugin della base di conoscenza

Proprio come lo stesso WordPress, configurare il plugin della Knowledge Base è semplicissimo. Una volta attivato il plug-in, vieni automaticamente indirizzato a una schermata "Guida introduttiva" che copre alcuni suggerimenti di base per aiutarti a iniziare. C'è anche una nuova voce di menu nel menu a sinistra della dashboard chiamata Knowledge Base.

La Knowledge Base funziona in modo molto simile al tipo di post standard utilizzato da WordPress. Gli articoli possono essere organizzati per categoria e anche per tag. Le categorie possono essere aggiunte o rimosse in qualsiasi momento, proprio come con i post, tuttavia, per assicurarsi che la base di conoscenza sia il più utile possibile, è consigliabile pianificare la struttura delle categorie prima di iniziare a creare contenuti.

Per impostazione predefinita, gli articoli della knowledge base vengono visualizzati in ordine di data di pubblicazione esattamente come fanno i post standard, tuttavia, puoi modificarlo all'interno delle impostazioni del plug-in.

La knowledge base include un'ampia gamma di impostazioni per poter personalizzare l'installazione senza la necessità di approfondire la creazione di modelli.

Puoi lasciarli esattamente come sono e la tua knowledge base funzionerà perfettamente, tuttavia, se desideri modificare l'ordine degli articoli, la visualizzazione delle categorie, personalizzare la funzione di ricerca in tempo reale, abilitare la votazione e i commenti sugli articoli e un'ampia numero di altre opzioni, puoi farlo senza la necessità di avere alcuna conoscenza di codifica.

Creazione di contenuti

Prima di poter iniziare a eseguire personalizzazioni avanzate nella nostra knowledge base, hai bisogno di alcuni contenuti. Pertanto la prima cosa che dovrai fare è creare degli articoli. Con il tema TwentySixteen installato, aggiungi una nuova schermata

Questo dovrebbe sembrare molto familiare se hai mai usato WordPress prima. Il titolo del post, il contenuto, la pubblicazione, i formati del post, la categoria e le caselle dei tag sono tutti uguali. In effetti, le uniche aree diverse sono le opzioni dell'articolo e le opzioni di voto

In alternativa, puoi installare il contenuto predefinito dalla schermata introduttiva mentre inizi.

Integrazione con TwentySixteen

L'integrazione del plugin Knowledge Base con il tema TwentySixteen è davvero semplice. Se hai seguito i passaggi precedenti, il gioco è fatto. Potresti lasciarlo lì e avresti una base di conoscenza funzionale di bell'aspetto senza bisogno di fare nient'altro. Perfetto se non conosci molto codice o desideri semplicemente qualcosa di semplice e veloce da configurare.

Ma... e se volessi fare di più?

La cosa veramente bella del plugin per gli sviluppatori di temi è il sistema di creazione di modelli.

Il sistema di creazione di modelli funziona copiando i file modello che si desidera modificare dal plug-in nella cartella del tema. WordPress quindi esamina prima il tuo tema. Se nel tuo tema è presente un file modello pertinente, verrà utilizzato. In caso contrario, il modello di fallback all'interno della cartella del plug-in verrà utilizzato invece per dirottare la funzione the_content() e inserire il contenuto della knowledge base nel tuo page.php standard.

La gerarchia dei modelli all'interno del plug-in o all'interno del tema funziona quindi in modo molto simile alla gerarchia dei modelli standard di WordPress, rendendo facile spostarsi.

Ad esempio hkb-taxonomy-category.php hkb-archive.php più o meno allo stesso modo in cui la category-$slug.php sovrascriverebbe lo standard archive.php .

Se desideri saperne di più sulla gerarchia dei modelli di WordPress, puoi leggere il codice dello sviluppatore.

Personalizzazione dei modelli

Per impostazione predefinita, la sezione della Knowledge Base avrà questo aspetto quando si utilizza il tema TwentySixteen:

Va bene, TwentySixteen è un primo tema mobile molto ben disegnato. Tuttavia, a causa del layout dei modelli di pagina, le pagine della Knowledge Base hanno molto spazio morto rispetto alle altre pagine del sito Web:

Non hai bisogno di tutto questo spazio bianco nelle pagine della knowledge base, quindi quello che dovrai fare è modificare l'HTML del modello pertinente per rimuoverlo.

Prima di arrivarci, però, dovrai creare un tema figlio per TwentySixteen in modo che nessuna delle tue modifiche venga persa quando vengono rilasciati gli aggiornamenti al tema. Ho chiamato la mia cartella ventisei-figlio . Maggiori informazioni sui temi figlio sono disponibili nel nostro articolo sui temi figlio.

Dopo aver impostato il tema figlio, ora puoi iniziare a lavorare sulla modifica dei modelli. Crea una nuova cartella all'interno della cartella ventisedici figli e chiamala hkb-templates . Quindi, copia il modello che desideri modificare dalla cartella del plug-in nella cartella del modello appena creata.

Per modificare la pagina dell'archivio della Knowledge Base, il modello che dovrai modificare è hkb-archive.php . Una volta copiato, aprilo nel tuo editor di codice. Tu dovresti vedere:

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

<?php get_header(); ?>

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

<?php get_footer(); ?>

Nota: poiché i modelli all'interno del plug-in iniettano il contenuto della knowledge base nella pagina utilizzando la funzione the_content() di WordPress, l'intera struttura della pagina non è inizialmente inclusa nel modello. Poiché stai sovrascrivendo il modello predefinito, dovrai aggiungere l'HTML aggiuntivo alla pagina.

Pertanto il codice in hkb-archive.php dovrebbe essere modificato per assomigliare a qualcosa di simile:

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

Nota: non è necessario includere il ciclo while in questo modello

Salva il tuo file e visualizza la pagina. Ora dovrebbe assomigliare a questo:

Questo ora sta usando il layout del page.php standard nel tema ventisedici e ha rimosso lo spazio bianco da sinistra. Tuttavia, in realtà ha rimosso anche tutto lo stile del plug-in e ora rinvia allo stile predefinito del tema.

Questo perché non appena inizi a personalizzare il tema, il plugin presume che tu voglia la libertà di scrivere i tuoi stili e quindi non carica il foglio di stile. Questo è davvero utile quando stai creando temi completamente personalizzati, tuttavia, se vuoi mantenere gli stili esistenti puoi copiare e incollare gli stili da hkb-style.css in style.css nel tuo tema figlio. Oppure, se stai creando un tema su misura, puoi copiare il foglio di stile dalla cartella del plugin alla cartella del tuo tema e quindi accodarlo nel tuo functions.php usando le seguenti righe di codice:

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

Nota: se usi questo metodo con un tema figlio dovrai usare get_stylesheet_directory_uri() invece di get_template_directory_uri() . Questo perché get_stylesheet_directory_uri() esaminerà la struttura del file per il tema figlio, get_template_directory_uri() punta invece alla cartella del tema principale.

Se stai costruendo un tema su misura invece di modificarne uno esistente con un tema figlio, personalmente preferisco mantenere separati i fogli di stile e utilizzare il metodo di accodamento per inserire correttamente gli stili nel tema. Questo perché style.css può spesso diventare molto grande e difficile da gestire rapidamente, mantenere separati gli stili pertinenti li rende facili da trovare se è necessario modificarli ulteriormente. La stessa organizzazione potrebbe essere utilizzata se utilizzi un preprocessore come SASS, poiché puoi @importare il tuo nuovo foglio di stile in modo che venga combinato automaticamente in style.css che può quindi essere iniettato nel tuo tema usando wp_enqueue_style() .

Una volta che gli stili sono stati riapplicati, visualizza di nuovo la pagina e ora dovresti vedere:

La pagina è stata ora riformattata e lo spazio morto a sinistra è stato rimosso rendendo tutto molto più ordinato senza perdere lo stile e il design del tema. Se ci sono altri modelli di pagina a cui desideri applicare questa modifica del layout, copia semplicemente i modelli pertinenti nel tuo tema figlio e il gioco è fatto!

Pensieri finali

Spero di aver dimostrato quanto sia personalizzabile il plug-in Heroic Knowledge Base. C'è molto che puoi fare immediatamente senza bisogno di conoscere alcun codice, tuttavia, se vuoi personalizzare ulteriormente le cose e hai una comprensione degli standard di codice di WordPress e dello sviluppo di temi, puoi farlo molto facilmente.