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:
#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é.
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:
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"
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é.
#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:
Certamente isso não é tudo o que podemos fazer com o Twenty Seventeen, mais adiante ofereceremos outros tutoriais sobre o Twenty Seventeen.
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!
Olá Nico,
Às vezes, use isso em vez disso:
é
'(apóstrofo)
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
Bonsoir,
você pode compartilhar imagens?
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.