Ir para o conteúdo principal

3 novo tema personalizações Vinte Seventeen

Divi: o tema WordPress mais fácil de usar

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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:

#1 Criar um menu de links sociais

Bem, esta primeira parte é mais do que apenas um hack. Mas é uma personalização só para fazer em vinte e dezessete anos.

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 esse menu. Felizmente, é realmente muito simples, uma vez que 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 Social Links Menu.

  • Vamos explorar o processo.
  • Comece abrindo o "Customizer".
  • Selecione a opção "Menus" e selecione "Social Links Menu".
  • 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:

Divi: O melhor tema WordPress de todos os tempos!

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

O último passo é clicar no botão "Salvar e publicar" no personalizador para salvar o novo menu. Seus links para redes sociais agora serão exibidos no menu na parte inferior da página.

# 2 Alterar a assinatura "Orgulhosamente powered by WordPress"

Há dois motivos pelos quais você pode querer alterar o texto no rodapé que mostra que seu site é "Orgulhosamente Powered by WordPress". "

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

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

A primeira coisa que você precisa fazer é criar e ativar um tema filho (dica: se você quiser simplificar sua vida, baixe o tema infantil preconcebido para isso).

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

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]

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

#3 menu de navegação aprimorado

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 a rolagem regular para aprimorar a experiência geral.

Primeiro, vamos começar a adicionar o seguinte código no seu tema (filho):

/ * Código nav Uma página * / jQuery (document) .ready (function () {/ * Adicione do estofamento e ID de testa para cada seção da página * / jQuery ( "h2.entry-title") .each (function () {var .. panelId = jQuery (this) .html () toLowerCase () replace (/ \ s + / g, "-"); jQuery (this) .wrapInner (function () {return "<span style =" padding-top: 96px; id = ' "+ panelId +" "> </ span>";})}) / * Remover link de navegação destacando * / jQuery (' #-menu superior li ') removeClass (' corrente-menu-item. current_page_item '); / * Adicione destacando um clique * / jQuery (' # Menu li top-a ') (.' clique ', function (event) {jQuery (this) .parent () pai () encontrar (.. 'li') removeClass ( 'corrente-menu-item.'); jQuery (this) .parent () addClass () 'atual-menu-item. ";}); / * Verifique URL atual e nav destaque para página atual * / jQuery ( '# Menu li top-a') cada (function () {var PAGEURL = jQuery (aluguer) .attr ( 'href') navUrl var = jQuery (this) .attr ( 'href.'); if (== navUrl PAGEURL) {jQuery (this) .parent () addClass ( "-menu-item atual. ');}})})

Você pode adicionar este código em um arquivo JavaScript carregado por um tema infantil (o que é recomendado) ou use um plug-in que permita 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 do 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.

Naturalmente, 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 criar um link para a seção "Sobre", você precisa criar um link personalizado e usar " #about Como a âncora do link. Para 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. [FREE]

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

Isso certamente não é tudo o que podemos fazer com o Twenty Seventeen, mais tarde ofereceremos outros tutoriais sobre o Twenty Seventeen.

Este artigo contém comentários 5
  1. estranho,

    Os caracteres acentuados não são aceitos! Acabei com pontos de interrogação em vez disso uma idéia?

    ps: obrigado por estas dicas de qualquer maneira!

  2. Bom Dia,

    Eu segui suas instruções, mas meus ícones só são exibidos na versão móvel do meu blog e não na versão do PC, se você pode me ajudar, isso será ó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
22 ações
ação16
chilrear1
Enregistrer5
Whatsapp