Herringbone

O que é Herringbone?

Herringbone é um tema e-commerce para WordPress que é totalmente compatível com WooCommerce. Ele foi projetado para facilitar a criação de uma loja virtual funcional e esteticamente agradável, permitindo que você venda seus produtos de maneira eficiente e atraente. A página inicial deste tema é composta por uma área widgetizada, onde você pode utilizar widgets para exibir seus produtos de forma prática.

Instalando o Tema Herringbone

A instalação do tema Herringbone no WordPress é bem simples. Primeiro, você deve acessar o painel administrativo do WordPress e navegar até Aparência > Temas. Nessa seção, há a aba “Instalar Temas” onde você deve clicar no link “Enviar”. Em seguida, clique no botão “Escolher Arquivo” para selecionar o arquivo zip do tema que você baixou. Após isso, basta clicar em “Instalar Agora”. Em poucos segundos, o tema estará instalado. Para utilizá-lo, clique em “Ativar”.

Caso você enfrente problemas durante a instalação pelo painel administrativo ou prefira realizar o procedimento manualmente, basta descompactar o arquivo zip do tema em seu computador e, em seguida, enviá-lo via FTP para a pasta de temas da sua instalação WordPress (wp-content/themes). Após esse passo, retorne ao painel do WordPress, vá até Aparência > Temas, onde o tema aparecerá na lista. Clique em “Ativar”.

Após a ativação, você será redirecionado para o painel de configurações do CSSIgniter (Aparência > CSSIgniter Configurações), onde poderá começar a personalizar seu novo tema.

Integrando com WooCommerce

Para que sua loja online funcione corretamente, é imprescindível instalar e ativar o plugin WooCommerce, desenvolvido pela WooThemes. Esse plugin pode ser baixado gratuitamente no repositório de plugins do WordPress. As instruções de instalação e uso podem ser encontradas na documentação do plugin.

Uma vez que você tenha instalado e ativado o plugin WooCommerce, será necessário instalar as páginas padrão que ele fornece. Ao clicar no botão que aparece no banner do WooCommerce, isso criará uma duplicata de algumas páginas, mas é um passo necessário. Você pode decidir excluir as páginas antigas ou utilizá-las conforme sua necessidade, acessando WooCommerce > Configurações > Páginas.

Além disso, em WooCommerce > Configurações, na aba Produtos, você pode ajustar os tamanhos das imagens que melhor se adequam à sua loja na seção Tamanhos da Imagem do Produto, caso precise de dimensões diferentes das que o tema utiliza por padrão.

Tamanhos Recomendados para Imagens

Para garantir que as imagens no tema Herringbone sejam exibidas com a qualidade adequada, siga os tamanhos recomendados:

• Miniatura do Blog: 700×700 pixels (para thumbnails na página de listagem do blog)
• Thumb Único do Blog: 850×300 pixels (utilizado para thumbnails na página de exibição única do blog)
• Imagem em Largura Total: 850×425 pixels (imagem destacada no template de página cheia)
• Miniatura da Loja: Imagens com pelo menos 110 pixels de largura (sem altura definida).
• Imagem do Catálogo da Loja: Imagens com pelo menos 360 pixels de largura (sem altura definida).
• Imagem Destacada do Produto Individual: Imagens com pelo menos 560 pixels de largura (sem altura definida).

Plugins Úteis

Existem alguns plugins que oferecem funcionalidades e características que podem ser diretamente utilizadas no tema. É recomendável instalar e ativar esses plugins antes de importar seu conteúdo de exemplo:

• CSSIgniter Shortcodes: Este plugin personalizado de shortcodes ajuda a criar uma variedade de layouts e elementos em seu site.
• Socials Ignited: Um plugin que permite criar um widget que vincula a todos os seus perfis sociais, personalizável com ícones e a adição de novas redes sociais.
• Contact Form 7: Crie um formulário de contato e, em seguida, copie o shortcode gerado para colar na página desejada.
• One Click Import: Esse plugin facilita o processo de importação de conteúdo em apenas um clique.

Importando Conteúdo de Exemplo Usando One Click Import

Para facilitar a importação, o tema Herringbone já inclui suporte nativo para o plugin One Click Import. Primeiro, você deve instalá-lo a partir do painel do WordPress:

1. Acesse ‘Plugins > Adicionar Novo’
2. Pesquise por ‘One Click Demo Import’ e instale o plugin
3. Ative o ‘One Click Demo Import’ na página de plugins

Se preferir baixá-lo diretamente do WordPress.org, você pode fazer isso e, em seguida, enviar o diretório ‘one-click-demo-import’ para sua pasta ‘/wp-content/plugins/’ através do método que preferir (FTP, SFTP, SCP, etc.). Após ativá-lo, você encontrará a página de importação em: Aparência > Importar Dados de Demonstração. Clique no botão ‘Importar dados de demonstração’ e tudo estará pronto!

Este plugin requer uma versão PHP de pelo menos 5.3.x, mas recomendamos a versão 5.6.x ou, de preferência, 7.x. Caso necessário, entre em contato com sua empresa de hospedagem para solicitar a atualização da versão PHP do seu site.

Importando Conteúdo de Exemplo Manualmente

Uma maneira eficaz de começar a usar o tema Herringbone é instalá-lo em uma nova instalação do WordPress e importar nosso conteúdo de exemplo. Para isso, acesse as configurações do CSSIgniter > Opções do Site e clique em ‘Baixar conteúdo de exemplo’. Extraia o arquivo zip e faça o upload do arquivo xml em Ferramentas > Importar > WordPress (caso o importador do WordPress não esteja presente, você será solicitado a instalá-lo). Atribua os autores a um usuário existente e marque a caixa “importar anexos”. Agora você pode importar o conteúdo de exemplo.

Importando Widgets

Antes de importar widgets, é importante garantir que o plugin WooCommerce esteja ativado; caso contrário, os widgets específicos do WooCommerce não serão inseridos.

Para importar os widgets do tema de demonstração, você precisará do plugin Widget Importer & Exporter. Para instalá-lo, vá para Plugins > Adicionar Novo, busque por ‘Widget Importer & Exporter’, instale e ative-o. Em seguida, vá para Ferramentas > Widget Importer & Exporter, selecione o arquivo herringbone_widgets.wie contido no zip do conteúdo de exemplo e clique em ‘Importar Widgets’.

É importante notar que esse processo criará postagens, páginas, tipos de post personalizados, categorias, widgets etc., alterando diversas configurações do sistema. Portanto, é altamente recomendável que essa operação seja realizada em uma instalação limpa do WordPress, sem dados anteriores. Não nos responsabilizamos por perda total ou parcial de dados.

Configurando Seu Tema

1) Criando Páginas Necessárias

Comece criando as páginas essenciais. Acesse Páginas > Adicionar Nova e crie as seguintes páginas:

• Home: essa será sua página inicial. Atribua a ela o template “Frontpage” no painel de “Atributos da Página”.
• Blog: esta página servirá para suas postagens.
• Contato (opcional): aqui você pode inserir seu formulário de contato.

Lembre-se de que os títulos das páginas são apenas sugestões; você pode nomeá-las como desejar. Depois de criar as páginas, vá para Configurações > Leitura e defina a página “Home” como sua página inicial e a página “Blog” como sua página de postagens.

2) Populando Seu Blog

Para adicionar postagens novas ao seu blog, vá até Postagens > Adicionar Nova, atribua um título à sua postagem, insira o conteúdo no editor, faça o upload de uma imagem destacada clicando em “Definir imagem destacada” e adicione uma categoria e/ou tags, se desejar. Após essas etapas, clique em “Publicar”.

3) Adicionando Produtos

O essencial em sua loja virtual são os produtos. Para adicionar produtos, consulte o guia detalhado fornecido pela WooThemes.

4) Criando seu Menu

Depois de dispor seu conteúdo, será necessário criar um menu. Vá para Aparência > Menus, selecione as páginas que deseja incluir e adicione-as. Dê um nome ao seu menu e salve-o. Em seguida, configure-o como “Menu Principal”, que pode ser feito marcando a caixa “Menu Principal” nas “Configurações de Menu”, logo abaixo dos itens do menu, ou acessando a aba “Gerenciar Locais” e selecionando o menu que você acabou de criar.

5) Configurando sua Página Inicial

Navegue até Aparência > Widgets e atribua widgets à Área de Widgets da FrontPage. Aqui estão alguns widgets sugeridos para a Área de Widgets da FrontPage que aparecerá como o conteúdo principal da sua página inicial:

• Produtos WooCommerce
• Produtos Recentemente Visualizados do WooCommerce
• Produtos Mais Bem Avaliados do WooCommerce
• CI Newsletter

6) Exibindo Layout do Tema

A homepage de demonstração do tema Herringbone exibe uma variedade de widgets, como um widget CI Offer Box na barra lateral Abaixo do Cabeçalho #1, um widget de Busca na barra lateral Abaixo do Cabeçalho #2, dois widgets de Menu Customizado exibindo categorias de produtos e um widget de Categorias de Produtos do WooCommerce. Em seguida, há um widget de Produtos WooCommerce mostrando produtos em destaque, outro CI Newsletter, e mais um widget de Produtos WooCommerce mostrando os últimos produtos na Área de Widget da FrontPage. Por fim, o widget CI Accepted Payment Methods aparece na Coluna de Widgets do Rodapé #1 e mais um Menu Customizado na Coluna de Widgets do Rodapé #2.

7) Alterando Texto do Cabeçalho e Rodapé

A seção do rodapé do tema possui um espaço dedicado para sua informação de copyright, política de privacidade, etc. Para alterar o texto, vá até CSSIgniter Configurações > Opções do Site e utilize a caixa apropriada. Acima, você pode mudar a mensagem do cabeçalho que será exibida na parte superior do seu site.

8) Opções de Comércio Eletrônico

Sob CSSIgniter Configurações > Opções de Comércio Eletrônico, você pode modificar o layout da lista de produtos e o número de colunas que suas páginas de loja terão, além da quantidade de produtos que aparecerão nas páginas de listagem de loja.

9) Widgets Personalizados

O tema Herringbone inclui oito widgets personalizados acessíveis a partir de Aparência > Widgets. Abaixo de cada widget, você encontrará uma breve descrição de sua funcionalidade.

O Painel de Configurações CSSIgniter

Por último, mas não menos importante, sob Aparência > CSSIgniter Configurações, você encontrará nosso painel de configurações personalizado. Por meio dele, é possível manipular diversos aspectos do seu tema, como mudar o logotipo, definir um background personalizado, alterar o esquema de cores e aplicar estilos customizados via aba de CSS personalizado. Todas as opções possuem uma descrição que ajuda a compreender suas funcionalidades.

Usando o Template do Page Builder

O tema vem acompanhado de um template de page builder que permite que você utilize seu plugin de page builder favorito para criar layouts únicos com facilidade. Para usar esse template, vá até Páginas > Adicionar Nova. Isso criará uma nova página. Dê um título à sua página e selecione o template de Page Builder na caixa de atributos de página.

Pronto! Agora você pode começar a construir sua página usando o construtor de sua escolha. Após concluir, publique a página e visualize-a para conferir como ficou.

Com essas instruções, basta seguir os passos necessários para aproveitar ao máximo o potencial do tema Herringbone e criar uma loja virtual que se destaque.