Base de Conhecimento Heroica – Usando o sistema de modelagem

Se você gasta muito tempo respondendo as mesmas perguntas de suporte repetidamente, então nós da HeroThemes temos a resposta….

Nota: Este artigo pressupõe que você saiba como instalar o WordPress, plugins e tenha algum conhecimento de desenvolvimento de temas, incluindo temas Pai/Filho, HTML, CSS e um conhecimento básico de PHP.

Base de conhecimento heroica

Nosso plug-in Knowledge Base fornece uma solução rápida e muito fácil de configurar para criar uma base de conhecimento personalizada em seu site. Fornecendo instantaneamente a seus clientes as respostas para as perguntas mais frequentes e permitindo que você reduza o tempo gasto respondendo a chamadas e e-mails de suporte para que você possa sair e pular campos de margaridas (ou fazer o que você gostaria de focar em vez disso) e garantindo que você tenha clientes mais felizes.

Como a maioria dos plugins do WordPress, a instalação inicial não poderia ser mais fácil. Basta fazer o upload do plug-in para o diretório de plug-ins através do painel e ativá-lo. O plugin Knowledge Base integra-se perfeitamente com a maioria dos temas bem codificados, portanto, não faz diferença se você está usando um tema totalmente personalizado, um dos nossos produtos HeroThemes premium ou o tema padrão para WordPress. Você terá uma base de conhecimento totalmente funcional integrada ao seu site WordPress em minutos com muito pouco incômodo.

Se você tem algum conhecimento de desenvolvimento de temas e deseja personalizar ainda mais o plug-in, nosso código limpo e amigável ao desenvolvedor, funções conectáveis ​​e sistema de modelagem fácil de seguir permitem que você faça personalizações avançadas. Este artigo dará uma olhada em algumas das coisas legais que você pode fazer para personalizar o plugin usando o sistema de templates.

Vou dar uma rápida visão geral de:

• Instalando o plugin, configurações gerais e adicionando algum conteúdo
• Integração básica com o novo tema TwentySixteen disponível com WordPress 4.4
• Integração avançada: Modificando modelos para maior personalização

Começando

Após a instalação inicial do WordPress, certifique-se de ter o tema TwentySixteen e o plugin Knowledge Base instalados e ativados.

TwentySixteen é o novo tema padrão que acompanha o WordPress 4.4. Se, depois de atualizar sua instalação do WordPress, você não tiver o novo tema listado em Aparência > Temas , você pode baixá-lo na página do tema TwentySixteen no WordPress.org

O plug-in da base de conhecimento

Assim como o próprio WordPress, configurar o plugin Knowledge Base é super fácil. Assim que o plug-in for ativado, você será automaticamente levado a uma tela de 'Introdução' que abrange algumas dicas básicas para ajudá-lo a começar. Há também um novo item de menu no menu à esquerda do painel chamado Knowledge Base.

A Base de Conhecimento funciona de maneira muito semelhante ao tipo de postagem 'post' padrão que o WordPress usa. Os artigos podem ser organizados por categoria e também por tag. Categorias podem ser adicionadas ou removidas a qualquer momento, assim como com postagens, no entanto, para ajudar a garantir que sua base de conhecimento seja o mais útil possível, é aconselhável planejar sua estrutura de categorias antes de começar a criar conteúdo.

Por padrão, os artigos da base de conhecimento são exibidos na ordem de data de postagem exatamente como as postagens padrão, no entanto, você pode alterar isso nas configurações do plug-in.

A base de conhecimento vem com uma ampla variedade de configurações para personalizar sua instalação sem a necessidade de se aprofundar em modelos.

Você pode deixá-los exatamente como estão e sua base de conhecimento funcionará perfeitamente, no entanto, se você quiser alterar a forma como os artigos são ordenados, como as categorias são exibidas, personalizar o recurso de pesquisa ao vivo, habilitar votação e comentários em artigos e uma ampla várias outras opções, você pode fazer isso sem precisar ter nenhum conhecimento de codificação.

Criando conteúdo

Antes de começar a fazer qualquer personalização avançada em nossa base de conhecimento, você precisa de algum conteúdo. Portanto, a primeira coisa que você precisa fazer é criar alguns artigos. Com o tema TwentySixteen instalado, adicione uma nova tela

Isso deve parecer muito familiar se você já usou o WordPress antes. O título da postagem, conteúdo, publicação, formatos de postagem, categorias e caixas de tags são todos iguais. Na verdade, as únicas áreas que são diferentes são as opções de artigos e opções de votação

Como alternativa, você pode instalar o conteúdo padrão da tela de introdução enquanto começa.

Integrando com TwentySixteen

Integrar o plugin Knowledge Base com o tema TwentySixteen é muito simples. Se você seguiu os passos acima, é isso. Você poderia deixá-lo lá e você teria uma base de conhecimento funcional de boa aparência, sem necessidade de fazer mais nada. Perfeito se você não conhece muito código ou apenas quer algo rápido e simples de configurar.

Mas… e se você quiser fazer mais?

O que é realmente legal sobre o plugin para desenvolvedores de temas é o sistema de templates.

O sistema de templates funciona copiando os arquivos de template que você deseja alterar do plugin para a pasta do seu tema. O WordPress então olha para o seu tema primeiro. Se houver um arquivo de modelo relevante em seu tema, ele será usado. Caso contrário, o modelo de fallback dentro da pasta do plugin será usado para sequestrar a função the_content() e inserir o conteúdo da base de conhecimento em seu page.php padrão.

A hierarquia dos modelos dentro do plug-in ou dentro do tema funciona de maneira muito semelhante à hierarquia de modelos padrão do WordPress, facilitando a compreensão.

Por exemplo hkb-taxonomy-category.php irá sobrepor hkb-archive.php da mesma forma que o category-$slug.php substituiria o archive.php padrão.

Se você quiser saber mais sobre a hierarquia de modelos do WordPress, leia o codex do desenvolvedor.

Personalizando os modelos

Por padrão, a seção da Base de Conhecimento ficará assim ao usar o tema TwentySixteen:

Isso é bom, TwentySixteen é um tema móvel muito bem estilizado. No entanto, devido ao layout dos modelos de página, as páginas da Base de conhecimento têm muito espaço morto em comparação com outras páginas do site:

Você não precisa de todo esse espaço em branco nas páginas da base de conhecimento, portanto, o que você precisará fazer é modificar o HTML do modelo relevante para removê-lo.

Antes de chegar a isso, porém, você precisará criar um tema filho para o TwentySixteen para que nenhuma de suas alterações seja perdida quando as atualizações do tema forem lançadas. Chamei minha pasta de vinte e dezesseis filhos . Mais informações sobre temas filhos podem ser encontradas em nosso artigo sobre temas filhos.

Depois de configurar seu tema filho, você pode começar a editar os modelos. Crie uma nova pasta dentro da pasta twentysteen- child e nomeie-a como hkb-templates . Em seguida, copie o modelo que deseja editar da pasta do plug-in para a pasta de modelo recém-criada.

Para alterar a página de arquivo da Base de Conhecimento, o modelo que você precisará editar é hkb-archive.php . Uma vez copiado, abra-o em seu editor de código. Você deveria ver:

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

<?php get_header(); ?>

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

<?php get_footer(); ?>

Observação: como os modelos dentro do plug-in injetam o conteúdo da base de conhecimento na página usando a função the_content() do WordPress, a estrutura completa da página não é incluída inicialmente no modelo. Como você está substituindo o modelo padrão, precisará adicionar o HTML adicional à página.

Portanto, o código em hkb-archive.php deve ser alterado para algo como:

<?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: Não há necessidade de incluir o loop while neste modelo

Salve seu arquivo e visualize a página. Agora deve ficar algo assim:

Isso agora está usando o layout do page.php padrão no tema vinte e dezesseis e removeu o espaço em branco da esquerda. No entanto, ele também removeu todo o estilo do plug-in e agora adia o estilo padrão do tema.

Isso ocorre porque assim que você começa a personalizar o tema, o plugin assume que você deseja a liberdade de escrever seus próprios estilos e, portanto, não carrega a folha de estilos. Isso é realmente útil quando você está construindo temas completamente personalizados, no entanto, se você quiser manter os estilos existentes, você pode copiar e colar os estilos de hkb-style.css em style.css em seu tema filho. Ou se você estiver criando um tema sob medida, você pode copiar a folha de estilo da pasta do plugin para a pasta do seu tema e então enfileirar em seu functions.php usando as seguintes linhas 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: Se você usar este método com um tema filho, precisará usar get_stylesheet_directory_uri() em vez de get_template_directory_uri() . Isso ocorre porque get_stylesheet_directory_uri() examinará a estrutura do arquivo para seu tema filho, get_template_directory_uri() apontará para a pasta do tema pai.

Se você está construindo um tema sob medida em vez de modificar um existente com um tema filho, eu pessoalmente prefiro manter as folhas de estilo separadas e usar o método enqueue para injetar corretamente os estilos no tema. Isso ocorre porque style.css muitas vezes pode se tornar muito grande e difícil de gerenciar rapidamente, mantendo os estilos relevantes separados torna-os fáceis de encontrar caso você precise editá-los ainda mais. A mesma organização pode ser usada se você usar um pré-processador como SASS, pois pode @importar sua nova folha de estilo para que seja combinada automaticamente em style.css , que pode ser injetada em seu tema usando wp_enqueue_style() .

Depois que os estilos forem reaplicados, visualize a página novamente e agora você deverá ver:

A página foi reformatada e o espaço morto à esquerda foi removido, deixando tudo muito mais organizado sem perder o estilo e o design do tema. Se houver outros modelos de página aos quais você deseja aplicar essa alteração de layout, basta copiar os modelos relevantes em seu tema filho e pronto!

Pensamentos finais

Espero ter demonstrado como o plugin Heroic Knowledge Base é personalizável. Há muito que você pode fazer imediatamente sem a necessidade de conhecer nenhum código, no entanto, se você quiser personalizar ainda mais as coisas e tiver uma compreensão dos padrões de código do WordPress e do desenvolvimento de temas, poderá fazer com muita facilidade.