Ir para o conteúdo principal

3 novo tema personalizações Vinte Seventeen

Divi: o tema WordPress mais fácil de usar

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

vinte Seventeen é o tema padrão mais versátil do WordPress já visto. No entanto, as opções incorporadas ao tema deixam algo a desejar.

Neste tutorial, mostrarei cinco maneiras de personalizar esse tema para se adequar ao seu blog. Começaremos com o básico e passaremos para personalizações mais difíceis e impactantes.

Quando terminarmos, você poderá transformar o Twenty Seventeen em um site bonito e moderno para negócios ou blogs. Você não acredita em mim? Olha, aqui está o que você pode criar:

Personalização vinte e dezessete

#1 Crie um menu de links sociais

Bem, esta primeira parte é mais do que apenas um hack. Mas é uma personalização para fazer apenas no Twenty Seventeen.

O Twenty Seventeen tem um menu atraente para links sociais no rodapé.

Links sociais vinte e dezessete

O problema é que alguns usuários relataram que têm dificuldade em descobrir como adicionar seus links de redes sociais a este menu. Felizmente, é realmente muito simples quando você sabe como fazê-lo.

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Tudo o que você precisa fazer é criar um menu com links para suas redes sociais e atribuí-lo à localização do Menu Links Sociais.

  • Vamos explorar o processo.
  • Comece abrindo o "Customizer" (Appearance> Customize).
  • Selecione a opção “Menus” e depois selecione “Menu Links Sociais”.
  • Renomear o seu novo menu.
  • Adicione um link para cada uma das redes sociais disponíveis.
  • Marque a caixa ao lado de " Ligações sociais menu ".

Quando terminar, seu menu deve ficar assim:

Página de personalização vinte e dezessete

A última etapa é clicar no botão “Salvar e publicar” no Customizador para salvar o novo menu. Seus links para redes sociais agora serão exibidos no menu na parte inferior da página.

# 2 Altere a assinatura "Proudly powered by WordPress"

Situação Wordpress

Há dois motivos pelos quais você pode querer editar o texto no rodapé que diz que seu site é "Orgulhosamente desenvolvido com WordPress". "

Talvez você queira estender o último, adicionando texto adicional: “Orgulhosamente desenvolvido com WordPress, projetado por WebPress Designs e hospedado por LAMPress Hosting. "

Talvez você queira alterar completamente sua assinatura para algo mais pessoal.

A primeira coisa que você precisa fazer é criar e ativar um tema filho (dica: se você deseja simplificar sua vida, faça o download do tema criança preconcebido para isso).

Depois de criar e ativar seu tema filho, copie o arquivo "footer.php". Então, abra este arquivo "footer.php" e encontre este pedaço de código: get_template_part ('template-parts / footer / site', 'info');.

Agora você tem duas opções. Você pode simplesmente comentar esta linha adicionando "//" logo antes do código ou pode considerar substituí-lo por seu próprio texto de rodapé personalizado. Aqui está o código a ser adicionado para criar o texto do rodapé.

Rodapé personalizado

#3 Menu de navegação aprimorada

Além de criar um menu de navegação funcional em uma página de navegação, também corrigiremos o efeito de foco do menu de navegação e adicionaremos rolagem suave para melhorar a experiência geral.

Primeiro, começaremos a adicionar o seguinte código em seu tema (filho):

/ * Código de navegação de uma página * / jQuery (document) .ready (function () {/ * Adicionar preenchimento e ids a cada seção da página inicial * / jQuery ("h2.entry-title") .each (function () {var panelId = jQuery (this) .html (). toLowerCase (). replace (/ s + / g, "-"); jQuery (this) .wrapInner (function () {return " ";})}) / * Remover destaque do link de navegação * / jQuery ('# top-menu li'). RemoveClass ('current-menu-item current_page_item'); / * Adicionar destaque ao clicar * / jQuery ('# top -menu li a '). on (' click ', function (event) {jQuery (this) .parent (). parent (). find (' li '). removeClass (' current-menu-item '); jQuery (this) .parent (). addClass ('current-menu-item');}); / * Verifique o URL atual e realce o nav para a página atual * / jQuery ('# menu superior li a'). each (função () {var pageUrl = jQuery (localização) .attr ('href'); var navUrl = jQuery (isto) .attr ('href'); if (navUrl == pageUrl) {jQuery (isto) .parent (). addClass ('current-menu-item');}})})

Você pode adicionar este código em um arquivo JavaScript carregado por um tema filho (o que é recomendado) ou use um plug-in que permite adicionar JavaScript ao seu site. Certifique-se de carregar o código após o jQuery já ter sido carregado.

Dê uma olhada nos comentários no código para ter uma visão completa do que está acontecendo.

Além disso, nós podemos fazer o movimento mais suave cada seção por instalar e ativar um plug-in gratuito: Scroll Suave jQuery.

Obviamente, você ainda precisará criar seu menu de navegação adicionando um link personalizado a cada seção usando o nome da página exibida nesta seção.

Por exemplo, para vincular à seção "Sobre", você deve criar um link personalizado e usar " #about Como âncora do link. Para obter mais detalhes, consulte Como personalizar o tema " Vinte Seventeen WordPress ".

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Com um pouco de esforço, você chegará a um resultado convincente:

Resultado de navegação vinte e dezessete

Certamente isso não é tudo o que podemos fazer com o Twenty Seventeen, mais adiante ofereceremos outros tutoriais sobre o Twenty Seventeen.

Este artigo contém comentários 5

  1. estranho,

    caracteres acentuados não são aceitos! Acabo com pontos de interrogação, em vez de alguma ideia?

    ps: obrigado por estas dicas de qualquer maneira!

  2. Bom Dia,

    Segui suas instruções mas meus ícones só aparecem na versão mobile do meu blog e não na versão pc, se vocês puderem me ajudar seria ótimo!
    obrigado,
    Julie

    1. Bom Dia,
      você deve verificar se o estilo de menu é realmente carregado. Você também pode inspecionar o código de menu para se certificar de que as marcas que carregam os ícones estão presentes.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
15 ações
ação8
chilrear1
Enregistrer6