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 métodos para personalizar este tema para combinar 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.

Tudo o que você precisa fazer é criar um menu com links para suas redes sociais e atribuí-lo ao local do Menu de 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 expandi-lo, 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, podemos tornar o movimento para cada seção muito mais suave instalando e ativando um plugin livre: 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 ".

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.