Como alterar o rodapé na vitrine - 3 métodos fáceis

Você quer saber como alterar o rodapé no tema StoreFront? Esta postagem é para você. Neste guia, mostraremos duas maneiras diferentes de fazer isso.

Uma introdução ao Storefront

Storefront é um dos melhores temas do WooCommerce e é amplamente utilizado em lojas de comércio eletrônico. Este tema foi desenvolvido pela Automattic e está disponível tanto no repositório WordPress.org quanto no site oficial do WooCommerce.

É também um tema muito flexível que permite personalizar facilmente qualquer parte do seu site. Já vimos como editar o cabeçalho e como personalizar o rodapé no WordPress, então hoje veremos como alterar o rodapé do seu site usando o Storefront. Mas antes de vermos como fazer isso, vamos ver por que você pode querer personalizar o rodapé da sua loja.

Por que alterar o rodapé do seu site WordPress?

Embora os administradores do site se concentrem principalmente no cabeçalho, o rodapé também é uma área essencial de qualquer site. Você pode adicionar detalhes importantes sobre seu site e seus serviços, remover ou adicionar itens como links para políticas, informações de contato, mídia social e muito mais. Você também pode adicionar links para outros produtos, serviços e sites de sua propriedade ou relacionados.

Além disso, a maioria dos temas inclui vários widgets de rodapé que você pode usar para aproveitar ao máximo o rodapé. Por exemplo, o tema Storefront vem com 4 colunas de widgets diferentes que você pode usar para adicionar widgets, como uma barra de pesquisa, ícones de mídia social ou apenas parágrafos ou textos gerais.

Além disso, se você quiser fazer a verificação do Google Search Console ou Google AdSense, ou integração com o Google Analytics, mas não quiser fazer isso pelo cabeçalho, você pode incluir os códigos no rodapé.

Em resumo, todas as informações no rodapé podem ajudar seus visitantes a conhecer mais sobre você e seus serviços, e aumentar o engajamento. Para torná-lo o mais eficaz possível, você deve personalizá-lo em termos de conteúdo e design. Vamos ver como fazer isso.

Como alterar o rodapé na vitrine

Existem 3 maneiras diferentes de alterar facilmente o rodapé no tema Storefront:

1. Do painel do WordPress
2. Com um plug-in
3. Programaticamente

Vamos dar uma olhada nesses métodos.

1. Altere o rodapé na vitrine do painel do WordPress

Depois de instalar o tema Storefront, seu rodapé padrão será parecido com a imagem abaixo.

Mas o painel do WordPress permite adicionar ou editar a maioria dos elementos do rodapé do seu site. Você pode até editar o rodapé de vários menus do painel, como widgets, personalizador de temas e editor de temas e alterar a cor, os widgets ou qualquer outra informação.

Vamos ver como fazer cada uma dessas coisas passo a passo.

1.1. Alterar as cores do rodapé na vitrine

Para alterar o rodapé no Storefront usando um personalizador ativo, vá para Aparência > Personalizar . Você será redirecionado para o personalizador ao vivo do WordPress.

Aqui, você pode personalizar quase tudo sobre a aparência do seu site. Por exemplo, você pode editar a identidade do site, cabeçalho, rodapé, plano de fundo e widgets. Quaisquer alterações que você fizer serão mostradas em tempo real com a visualização ao vivo no lado direito da tela.

Como iremos personalizar o rodapé, selecione a opção Rodapé . Você verá várias opções de cores que podem ser alteradas para o rodapé e incluem cores para o plano de fundo, título, texto e link.

A partir daqui, você pode testar diferentes cores de fundo, cabeçalho e texto para encontrar a melhor combinação para o seu rodapé. Além disso, se você tiver links no rodapé, poderá brincar com as cores dos links.

Em suma, certifique-se de que seu rodapé seja perceptível e corresponda ao estilo geral do design do seu site usando a visualização ao vivo. Quando estiver satisfeito com as alterações, clique em Publicar para ativar as alterações.

1.2. Alterar os widgets de rodapé na vitrine

Além de alterar a cor, você pode personalizar os widgets de rodapé. No Storefront, você pode fazer isso em 2 submenus diferentes. Você pode abrir a guia Widgets em Aparência > Personalizar ou ir para Aparência > Widgets .

Ambas as interfaces permitirão que você edite os widgets de rodapé, mas recomendamos que você use o personalizador de temas, pois ele fornece uma visualização ao vivo das alterações. Dessa forma, você pode ver as alterações em tempo real e economizar muito tempo ao editar seu rodapé.

Independentemente da opção escolhida, você poderá ver todas as áreas de widget disponíveis em Widgets . O Storefront tem 4 colunas de rodapé para o seu site e permite adicionar uma variedade de widgets.

Basta selecionar a coluna que deseja editar e clicar em Adicionar um widget . Existem muitos widgets para selecionar, como arquivos, áudio, imagem, texto, pesquisa e assim por diante.

Depois de escolher um widget, você terá que editar mais alguns detalhes dependendo do que você selecionar. Depois de fazer isso, clique em Concluído e depois em Publicar para aplicar as alterações ao widget de rodapé.

Depois disso, você pode adicionar outro widget à mesma coluna de rodapé ou a uma diferente. Vale a pena notar que você pode incluir vários widgets em uma coluna de rodapé, bem como em várias colunas de rodapé. Por exemplo, para este tutorial, adicionamos uma breve descrição, um menu de navegação e uma caixa de pesquisa no rodapé.

1.3. Altere o rodapé no Storefront usando o editor de temas

Mesmo que você possa editar quase tudo, desde o personalizador de temas e widgets, talvez seja necessário usar o editor de temas se quiser personalizar o texto de direitos autorais em seu rodapé. Para isso, você terá que adicionar um snippet de código simples de uma função personalizada.

Antes de fazer qualquer alteração, certifique-se de criar um tema filho e fazer backup do seu site WordPress para editar esses arquivos. Esses arquivos armazenam informações críticas sobre seu site, portanto, se você cometer um erro, poderá quebrar seu site.

Feito isso, vá para Appearance > Theme Editor , abra a aba do arquivo functions.php e cole o seguinte trecho.

 add_action( 'init', 'custom_remove_footer_credit', 10 );
function custom_remove_footer_credit() {
    remove_action( 'storefront_footer', 'storefront_credit', 20 );
    add_action( 'storefront_footer', 'custom_storefront_credit', 20 );
}

function custom_storefront_credit() {
?>
<div class="site-info">
Quadlayers<?php echo get_bloginfo( 'name' ) . ' ' . get_the_date('Y'); ?>
</div><!– .site-info –>
<?php
}

Isso removerá o texto de rodapé padrão “ Construído com Storefront ” e adicionará os detalhes do seu próprio site. Você pode usar esse código como base e ajustá-lo para exibir os detalhes do seu site.

2. Altere o rodapé no Storefront usando um plug-in

Se você quiser economizar tempo e trabalho adicional de editar o rodapé no Storefront, basta usar um plug-in dedicado.

Você provavelmente sabe que o Storefront é compatível com uma ampla variedade de plugins do WordPress. Mas isso não é tudo. Existem plugins projetados especificamente para personalizar várias áreas do tema Storefront. Um dos melhores plugins é o Change Storefront Footer Copyright Text. Como o próprio nome sugere, esta ferramenta permite editar o texto de direitos autorais no rodapé do Storefront.

Para usar este plugin, você precisa instalá-lo e ativá-lo, então primeiro vá em Plugins > Adicionar Novo e procure por ele. Em seguida, clique em Instalar agora e depois em Ativar . Se você tiver algum problema, dê uma olhada no nosso guia que explica como instalar plugins do WordPress manualmente.

Em seguida, vá para Configurações > Rodapé da vitrine e você terá a opção de adicionar qualquer texto ou links ao rodapé de direitos autorais com a ajuda do editor de texto. Além disso, você pode alterar as opções de fonte ou alinhamentos usando o editor de texto visual ou escrever um pouco de código na visualização de texto pré-formatado.

Depois de adicionar todas as informações desejadas, salve as alterações . Em seguida, verifique seu site a partir do frontend para ver as alterações.

3. Altere o rodapé na vitrine programaticamente

Se você sabe codificar, há muitas coisas que você pode fazer para alterar e personalizar o rodapé no Storefront. Nesta seção, mostraremos alguns exemplos de algumas coisas que você pode experimentar em seu site.

NOTA: Como vamos editar um arquivo core, antes de começar recomendamos que você faça um backup completo do seu site e use um tema filho. Se você não sabe como, pode aprender a criar um ou usar qualquer um desses plugins.

3.1. Remover créditos da vitrine

Para remover completamente os créditos do Storefront do rodapé, basta adicionar o seguinte trecho no final do arquivo functions.php do seu tema filho.

 add_action( 'wp', 'ql_remove_credits_storefront' );
função ql_remove_credits_storefront () {
remove_action( 'storefront_footer', 'storefront_credit', 20 );
}

3.2. Personalizar texto de direitos autorais

Agora, digamos que você queira editar o texto de direitos autorais do rodapé. Para isso, criaremos uma nova string de texto que diz Copyright + ano + por QuadLayers da seguinte forma:

 add_filter( 'storefront_copyright_text', 'ql_customize_storefront_footer_copyright_text' );
função ql_customize_storefront_footer_copyright_text () {
$text = 'Copyright' date( 'Y' ). 'por QuadLayers';
retorna $texto;
}

Há muitas outras coisas que você pode fazer para personalizar o texto de direitos autorais. Tome este script como base e personalize-o de acordo com suas necessidades.

Bônus: adicione o feed do Instagram no rodapé

Já mencionamos que o Storefront é um dos melhores temas do WooCommerce, por isso é altamente possível que você tenha uma loja de comércio eletrônico se estiver passando por este tutorial. Se for esse o seu caso, pode ser útil adicionar algumas opções de mídia social ao seu rodapé.

Existem muitos plugins de mídia social que você pode usar para aproveitar ao máximo essas plataformas. Nesta seção, mostraremos como alterar o rodapé no Storefront adicionando um feed do Instagram. Dessa forma, você pode tornar seu feed do Instagram mais visível para que os visitantes possam visualizá-lo e visitar seu Instagram diretamente do seu site.

Como adicionar feed do Instagram no rodapé

A maneira mais simples de adicionar um feed do Instagram ao rodapé é usando um plugin. Para esta demonstração, usaremos o Social Gallery Feed (anteriormente conhecido como Instagram Gallery Feed ). Este é um plugin freemium que possui uma versão gratuita com recursos básicos e 3 planos premium que começam em 19 USD (pagamento único).

Primeiro, você precisa instalar e ativar o plugin em seu site WordPress. Em seguida, vá para o menu Galeria de feeds sociais no painel do WordPress e abra a guia Contas .

Aqui, você precisa adicionar sua conta do Instagram. Você pode adicionar uma conta pessoal ou uma conta comercial.

Depois disso, vá para a guia Feeds e clique em +Feed para criar um feed do Instagram.

Aqui, você pode selecionar e editar qualquer elemento do feed: os layouts, o número de imagens a serem exibidas e assim por diante. Depois de fazer todas as alterações necessárias, clique em Salvar .

Para adicionar o feed do Instagram ao rodapé, acesse o menu Widgets do seu painel ou navegue até Aparência > Personalizar . Em seguida, selecione a coluna de rodapé onde deseja incluir o feed do Instagram e adicione o widget Galeria de feeds sociais. Depois de adicionar o título e o ID da galeria ao feed, clique em Concluído .

Como alternativa, você pode usar os códigos de acesso fornecidos na guia Feed para adicionar o feed do Instagram ao seu site.

Por fim, se você verificar seu site a partir do frontend, poderá ver o feed do Instagram no rodapé.

Para mais alternativas e uma explicação mais detalhada, dê uma olhada em nosso guia sobre como integrar o WordPress ao Instagram.

Conclusão

Em suma, personalizar o rodapé do seu site pode ser realmente benéfico para a experiência do usuário de seus visitantes e ajudá-lo a aumentar o envolvimento do usuário. Neste guia, descrevemos duas maneiras pelas quais você pode alterar o rodapé no Storefront:

• Do painel de administração do WordPress
• Usando um plug-in dedicado
• Programaticamente

Todos esses métodos são amigáveis ​​para iniciantes e fazem o trabalho. No painel do WordPress, você pode alterar as cores do texto, do plano de fundo e do título, bem como as cores dos links. Se você quiser editar o texto do rodapé de direitos autorais, por outro lado, terá que usar um plugin. Por fim, se você tiver habilidades de codificação, poderá personalizar o rodapé programaticamente.

Além disso, você pode adicionar mais informações ao rodapé. Por exemplo, você pode incluir um feed e links do Instagram para melhorar sua presença nas mídias sociais. Para obter mais detalhes sobre como alterar o rodapé em qualquer tema, consulte nosso guia sobre como editar rodapés no WordPress.

Você editou o rodapé no Storefront? Qual método você usou? Existe alguma outra opção que devemos adicionar? Deixe-nos saber nos comentários abaixo.

Se você achou este guia útil, estes artigos também podem lhe interessar:

• Como editar o cabeçalho no WordPress
• Melhores plugins de feed do Instagram para WordPress
• Melhores plugins para WooCommerce (gratuito + pago)