Base de conocimiento heroica: uso del sistema de plantillas

Publicado: 2016-01-11

Si pasa mucho tiempo respondiendo las mismas preguntas de soporte una y otra vez, entonces en HeroThemes tenemos la respuesta...

Nota: este artículo asume que sabe cómo instalar WordPress, los complementos y tiene algunos conocimientos de desarrollo de temas, incluidos los temas principales / secundarios, HTML, CSS y una comprensión básica de PHP.

Base de conocimiento heroica

Nuestro complemento de base de conocimiento proporciona una solución rápida y muy fácil de configurar para crear una base de conocimiento personalizada en su sitio web. Brindando a sus clientes de manera instantánea las respuestas a las preguntas más frecuentes y permitiéndole reducir el tiempo dedicado a responder llamadas de soporte y correos electrónicos para que pueda salir y omitir campos de margaritas (o hacer lo que sea que le gustaría enfocarse en su lugar) y garantizar que tenga clientes más felices.

Como la mayoría de los complementos de WordPress, la instalación inicial no podría ser más fácil. Simplemente cargue el complemento en su directorio de complementos a través del tablero y actívelo. El complemento de Knowledge Base se integra a la perfección con la mayoría de los temas bien codificados, por lo tanto, no importa si está utilizando un tema completamente personalizado, uno de nuestros productos HeroThemes premium o el tema predeterminado para WordPress. Tendrá una base de conocimiento completamente funcional integrada en su sitio web de WordPress en minutos con muy pocas molestias.

Si tiene algún conocimiento sobre el desarrollo de temas y desea personalizar aún más el complemento, nuestro código limpio y amigable para el desarrollador, las funciones conectables y el sistema de plantillas fácil de seguir le permiten realizar personalizaciones avanzadas. Este artículo analizará algunas de las cosas interesantes que puede hacer para personalizar el complemento utilizando el sistema de plantillas.

Daré una descripción general rápida de:

  • Instalación del complemento, configuración general y adición de contenido
  • Integración básica con el nuevo tema TwentySixteen disponible con WordPress 4.4
  • Integración avanzada: modificación de plantillas para una mayor personalización

Empezando

Después de la instalación inicial de WordPress, asegúrese de tener instalados y activados tanto el tema TwentySixteen como el complemento de la base de conocimientos.

TwentySixteen es el nuevo tema predeterminado que viene con WordPress 4.4. Si, después de actualizar su instalación de WordPress, no tiene el nuevo tema en Apariencia > Temas , puede descargarlo desde la página de temas de TwentySixteen en WordPress.org

El complemento de la base de conocimientos

Al igual que el propio WordPress, configurar el complemento de la base de conocimientos es muy fácil. Una vez que se activa el complemento, se lo lleva automáticamente a una pantalla de 'Primeros pasos' que cubre algunos consejos básicos para ayudarlo a comenzar. También hay un nuevo elemento de menú en el menú a la izquierda del tablero llamado Base de conocimiento.

Knowledge Base funciona de una manera muy similar al tipo de publicación estándar que usa WordPress. Los artículos se pueden organizar por categoría y también por etiqueta. Las categorías se pueden agregar o eliminar en cualquier momento, al igual que con las publicaciones; sin embargo, para ayudar a garantizar que su base de conocimientos sea lo más útil posible, es recomendable planificar su estructura de categorías antes de comenzar a crear contenido.

De forma predeterminada, los artículos de la base de conocimientos se muestran en el orden de la fecha de publicación exactamente como lo hacen las publicaciones estándar, sin embargo, puede cambiar esto dentro de la configuración del complemento.

kb-blog1-configuraciones

La base de conocimientos viene con una amplia gama de configuraciones para poder personalizar su instalación sin la necesidad de profundizar en las plantillas.

Puede dejarlos exactamente como están y su base de conocimiento funcionará perfectamente; sin embargo, si desea cambiar la forma en que se ordenan los artículos, cómo se muestran las categorías, personalizar la función de búsqueda en vivo, habilitar la votación y los comentarios en los artículos y una amplia número de otras opciones, puede hacerlo sin necesidad de tener ningún conocimiento de codificación.

Creación de contenido

Antes de que pueda comenzar a realizar personalizaciones avanzadas en nuestra base de conocimientos, necesita algo de contenido. Por lo tanto, lo primero que deberá hacer es crear algunos artículos. Con el tema TwentySixteen instalado, agregar una nueva pantalla

kb-blog1-añadir-nueva-pantalla
kb-blog1-añadir-nuevas-opciones

Esto debería parecerle muy familiar si alguna vez ha usado WordPress antes. El título de la publicación, el contenido, la publicación, los formatos de la publicación, la categoría y los cuadros de etiquetas son todos iguales. De hecho, las únicas áreas que son diferentes son las opciones de artículos y las opciones de votación.

Alternativamente, puede instalar el contenido predeterminado desde la pantalla de inicio mientras comienza.

Integración con TwentySixteen

Integrar el complemento de Knowledge Base con el tema TwentySixteen es realmente simple. Si ha seguido los pasos anteriores, eso es todo. Podrías dejarlo allí y tendrías una buena base de conocimiento funcional sin necesidad de hacer nada más. Perfecto si no sabes mucho de código o simplemente quieres algo rápido y sencillo de configurar.

Pero… ¿y si quieres hacer más?

Lo que es realmente bueno sobre el complemento para desarrolladores de temas es el sistema de plantillas.

El sistema de plantillas funciona copiando los archivos de plantilla que desea cambiar desde el complemento a su carpeta de temas. WordPress luego mira tu tema primero. Si hay un archivo de plantilla relevante en su tema, se utilizará. De lo contrario, se usará la plantilla alternativa dentro de la carpeta del complemento para secuestrar la función the_content() e insertar el contenido de la base de conocimiento en su page.php estándar.

La jerarquía de las plantillas dentro del complemento o dentro del tema funciona de una manera muy similar a la jerarquía de plantillas estándar de WordPress, lo que facilita la comprensión.

Por ejemplo hkb-taxonomy-category.php hkb-archive.php de la misma manera en que category-$slug.php anulará el archive.php estándar.

kb-blog1-template-heirachy
Las plantillas de pedido se utilizan según el contenido que se muestra y si existen en su tema. Por ejemplo, al ver una categoría, hkb-taxonomy-category.php si el archivo existe; de ​​lo contrario, se hkb-archive.php .

Si desea obtener más información sobre la jerarquía de plantillas de WordPress, puede leer el códice del desarrollador.

Personalización de las plantillas

De manera predeterminada, la sección de la base de conocimientos se verá así cuando se use el tema TwentySixteen:

La página de contenido de la base de conocimientos y un solo artículo
La página de contenido de la base de conocimientos y un solo artículo

Esto está bien, TwentySixteen es un primer tema móvil muy bien diseñado. Sin embargo, debido al diseño de las plantillas de página, las páginas de la base de conocimientos tienen mucho espacio muerto en comparación con otras páginas del sitio web:

La misma página de contenido de la base de conocimientos en comparación con una publicación de blog estándar
La misma página de contenido de la base de conocimientos en comparación con una publicación de blog estándar

No necesita todo este espacio en blanco en las páginas de la base de conocimientos, por lo que deberá modificar el código HTML de la plantilla correspondiente para eliminarlo.

Sin embargo, antes de llegar a eso, deberá crear un tema secundario para TwentySixteen para que ninguno de sus cambios se pierda cuando se publiquen actualizaciones del tema. He llamado a mi carpeta veintiséis niños . Puede encontrar más información sobre temas secundarios en nuestro artículo sobre temas secundarios.

Una vez que haya configurado su tema hijo, ahora puede comenzar a trabajar en la edición de las plantillas. Cree una nueva carpeta dentro de la carpeta de veintiséis niños y asígnele el nombre hkb-templates . Luego, copie la plantilla que desea editar desde la carpeta del complemento a la carpeta de plantilla recién creada.

Para cambiar la página de archivo de la base de conocimientos, la plantilla que deberá editar es hkb-archive.php . Una vez copiado, ábralo en su editor de código. Deberías ver:


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

<?php get_header(); ?>

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

<?php get_footer(); ?>

Nota: debido a que las plantillas dentro del complemento inyectan el contenido de la base de conocimientos en la página mediante la función the_content() de WordPress, la estructura completa de la página no se incluye inicialmente en la plantilla. Debido a que está anulando la plantilla predeterminada, deberá agregar el código HTML adicional a la página.

Por lo tanto, el código en hkb-archive.php debe cambiarse para que se parezca a:

<?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: No es necesario incluir el bucle while en esta plantilla.

kb-blog1-conocimiento-base-sin formato

Guarde su archivo y vea la página. Ahora debería verse algo como esto:

Esto ahora usa el diseño de la page.php en el tema veintiséis y eliminó el espacio en blanco de la izquierda. Sin embargo, en realidad también eliminó todo el estilo del complemento y, en cambio, ahora difiere del estilo predeterminado del tema.

Esto se debe a que tan pronto como comienza a personalizar el tema, el complemento asume que desea la libertad de escribir sus propios estilos y, por lo tanto, no carga la hoja de estilo. Esto es realmente útil cuando crea temas completamente personalizados; sin embargo, si desea mantener los estilos existentes, puede copiar y pegar los estilos de hkb-style.css en style.css en su tema secundario. O si está creando un tema personalizado, puede copiar la hoja de estilo de la carpeta del complemento a la carpeta de su tema y luego ponerla en cola en su functions.php usando las siguientes líneas de código:


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

Nota: si usa este método con un tema secundario, deberá usar get_stylesheet_directory_uri() en lugar de get_template_directory_uri() . Esto se debe a que get_stylesheet_directory_uri() observará la estructura de archivos de su tema secundario, mientras que get_template_directory_uri() apunta a la carpeta del tema principal.

Si está creando un tema personalizado en lugar de modificar uno existente con un tema secundario, personalmente prefiero mantener las hojas de estilo separadas y usar el método de poner en cola para inyectar correctamente los estilos en el tema. Esto se debe a que style.css a menudo puede volverse muy grande y difícil de administrar rápidamente, mantener los estilos relevantes separados hace que sea fácil encontrarlos en caso de que necesite editarlos más. Se podría usar la misma organización si usa un preprocesador como SASS, ya que puede @importar su nueva hoja de estilo para que se combine automáticamente en style.css , que luego se puede inyectar en su tema usando wp_enqueue_style() .

Una vez que se hayan vuelto a aplicar los estilos, vuelva a ver la página y ahora debería ver:

kb-blog1-conocimiento-base-formateada

Ahora se ha reformateado la página y se ha eliminado el espacio muerto a la izquierda para que todo se vea mucho más ordenado sin perder el estilo y el diseño del tema. Si hay otras plantillas de página a las que desea aplicar este cambio de diseño, simplemente copie las plantillas relevantes en su tema secundario y ¡listo!

Pensamientos finales

Espero haber demostrado lo personalizable que es el complemento Heroic Knowledge Base. Hay muchas cosas que puede hacer sin necesidad de saber ningún código, sin embargo, si desea personalizar aún más las cosas y comprende los estándares de código de WordPress y el desarrollo de temas, puede hacerlo muy fácilmente.