Ir para o conteúdo principal

3 novo tema personalizações Vinte Seventeen

Divi: o tema WordPress mais fácil de usar

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]

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 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 Links sociais.

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

Comece a promover seu blog

Faça o download de dezenas de logotipos, banners, modelos de sites e muitas outras ferramentas de marketing para comercializar seu blog WordPress. [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 desenvolvido com WordPress"

Há duas razões pelas quais você pode alterar o texto no rodapé que mostra que o site é "Orgulhosamente desenvolvido com WordPress". "

Talvez você queira expandir o último, adicionando texto adicional: "Orgulhosamente desenvolvido com WordPress, desenvolvido 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 o tema filho, copie o arquivo "footer.php". Em seguida, abra este arquivo "footer.php" e localize este 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 esta linha adicionando "//" logo antes do código, ou considere 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 flutuante do menu de navegação e adicionaremos 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 filho (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 no código para obter uma imagem 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 criar um link para a seção "Sobre", você precisa criar um link personalizado e usar " #about Como âncora do link. Para mais detalhes, consulte Como personalizar o tema " Vinte Seventeen WordPress ".

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]

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.

Este artigo contém comentários 5
  1. 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