0 Flares 0 Flares ×

Introdução

Personalizador de cabeçalho é um plugin para WordPress desenvolvido por vmux que permite que você modifique seu cabeçalho ao vivo-visualizando ao mesmo tempo.
Somente depois que você está feliz com suas configurações, Você pode salvar e publicá-lo em segurança.
Esta documentação destina-se a ajudá-lo a configurar e obter o máximo do seu personalizador de cabeçalho.

Personalizador de cabeçalho é um plugin para WordPress premium que pode substituir seu cabeçalho WordPress inteiramente, é sensível e também tem uma característica pegajosa. Ele permite que você tenha até quatro camadas de navegação no seu cabeçalho.

Seu objetivo é tornar seu site mais útil, usuário-amigável e para melhorar a aparência geral, mesmo em telefones e tablets.

Você pode modificar seu cabeçalho visualmente usando Personalizador de WordPress API,
que permite que você faça as alterações para o cabeçalho enquanto olha para o seu site ao mesmo tempo.

Instalando o personalizador de cabeçalho

Este plugin requer a versão mínima do WordPress 3.4.

Você pode instalar o personalizador de cabeçalho via FTP (ou copiá-lo por quaisquer outras técnicas) da seguinte maneira:

  1. Baixe o plugin do e extraia o conteúdo
  2. Copie a pasta incrível-cabeçalho para o WP/diretório
  3. Ative o plugin através da página de Plugins no painel do WordPress
  4. Coloque o seguinte código dentro do seu conteúdo: <?php echo apply_filters('hc_print_header', ''); ?>
  • Na maioria das vezes seria no arquivo header. php, logo após a abertura <body> Tag

Próxima, usando Personalização do WordPress Você pode começar a personalizar! Simplesmente, dentro da área de administração ir a aparência-> Personalizar. Lá, escolha Personalizador de cabeçalho painel para usar os recursos do plugin. Preparei-te gif legal pra você não se sinta confuso:

intro

Insira o cabeçalho no seu tema

Basta inserir o seguinte código logo abaixo <corpo> Tag:

<?php echo apply_filters('hc_print_header', ''); ?>

E é isso. Você será capaz de ver as alterações ao modificar o cabeçalho através do personalizador de cabeçalho!

Configurações gerais

Personalizador de cabeçalho pode substituir o cabeçalho do seu tema e ele pode aparecer uma vez que um usuário desloca-se para baixo e o cabeçalho do seu tema desaparece da vista (opção pegajosa).

Este painel contém as configurações a seguir:

  1. Largura do cabeçalho – largura do cabeçalho Conteúdo
  2. Esticar a largura do cabeçalho? – deve o invólucro de cabeçalho esticar toda a largura de um navegador?
  3. Posição esquerda do cabeçalho – Se o cabeçalho é pegajoso, Você deve usar esta opção se você não quer cabeçalho ser horizontalmente no centro
  4. Parte superior da margem
  5. Fundo de margem
  6. Margem esquerda
  7. Margem direita
  8. Fonte Google – escolha a fonte para o cabeçalho; Há opções mais específicas para fontes (ex.. somente para a área do logotipo) Mas isto é para o cabeçalho inteiro de uma vez
  9. Custom CSS – Você pode digitar qualquer CSS aqui; Certifique-se de começar suas definições CSS com ”.HC-envoltório {” Então não se meta com definições do outros Web site CSS

Aqui você pode ver algumas brincadeiras dentro de configurações gerais (Clique nesta imagem para vê-lo totalmente ampliado):

general settings

Cabeçalho médio

Cabeçalho médio é a seção do personalizador de cabeçalho que contém a área do logotipo (logotipo & Descrição) e o menu principal (com submenus). Você pode personalizar seguir:

  1. Tipo de cabeçalho – como o seu logotipo e menus são colocadas; Por padrão o logotipo vai no lado esquerdo, enquanto o menu principal vai para o lado direito do cabeçalho; Você pode definir os dois alinhados centralmente, ou menu de mover para a esquerda ao lado do logotipo
  2. Cor de fundo – cor de fundo do cabeçalho médio, cor sólida com transparência, opcionalmente, definir através do seletor de cores
  3. Imagem de fundo – imagem de fundo do cabeçalho médio (Substitui a cor de fundo)
  4. Repetição da imagem de fundo – imagem de fundo do cabeçalho médio (Substitui a cor de fundo)
  5. Acessório de imagem de fundoa propriedade background-attachment define se uma imagem de fundo é fixo ou rola com o resto da página; é ótimo definir o efeito paralaxe, por exemplo se definido como “fixo”
  6. Posição da imagem de fundoa propriedade background-position define a posição inicial de uma imagem de fundo
  7. Tamanho da imagem de fundoa propriedade background-size especifica o tamanho das imagens de fundo
  8. Estofamento (superior/inferior) – preenchimento do cabeçalho médio assim que você pode encaixar verticalmente seu menu ou logotipo muito bem
  9. Estofamento (esquerda/direita) – preenchimento do cabeçalho médio assim que você pode definir a distância do conteúdo interno do lado esquerdo ou direito da tela
  10. Top de fronteira (e na parte inferior, esquerda, direito) Cor – Não é visível até a largura da borda é definida como pelo menos 1 (um) pixel (PX)
  11. Top de fronteira (e na parte inferior, esquerda, direito) Largura – largura da borda
  12. Superior esquerdo (e no canto inferior esquerdo, superior direito, canto inferior direito) raio – raio da borda do cabeçalho médio

Aqui você pode ver alguns brincando com origens dentro cabeçalho médio (Clique nas imagens para vê-los totalmente ampliado):

middle background color

middle background image

Aqui você pode ver algumas brincadeiras raio da borda do cabeçalho médio Parece arredondada>

border radius of middle header

Cabeçalho superior

Cabeçalho superior é outra importante seção do cabeçalho personalizador. Ele contém (mesmo que o cabeçalho de fundo) esquerda e direita, que vai centralmente alinhada quando o modo responsivo é activado (Quando o tamanho da tela é pequeno, i.. tamanho definido no painel de cabeçalho responsivo). Você pode escolher para ambos os lados para algum: algumas outra menu, farinha de rosca, caixa de título ou Pesquisar página atual. A seguir estão as configurações que você pode modificar:

  1. Habilitado? – o cabeçalho de topo é habilitado em tudo? (caixa de seleção)
  2. Menu esquerda lado tipo – escolher entre o menu de, farinha de rosca, página título ou pesquisa caixa atual para o lado esquerdo do cabeçalho superior
  3. Tipo de menu direita lado – escolher entre o menu de, farinha de rosca, página título ou pesquisa caixa atual para o lado direito do cabeçalho superior
  4. Cor de fundo – aqui mesmo, quanto ao cabeçalho médio
  5. Imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  6. Repetição da imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  7. Acessório de imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  8. Posição da imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  9. Tamanho da imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  10. Família de fontes do Google – escolher a família de fontes apenas para isso (Início) cabeçalho; Você pode contatar-me se você precisa de mais fontes adicionadas
  11. Tamanho da fonte – Escolha o tamanho da fonte apenas para isso (Início) cabeçalho
  12. Top de fronteira (e na parte inferior, esquerda, direito) Cor – aqui mesmo, quanto ao cabeçalho médio
  13. Top de fronteira (e na parte inferior, esquerda, direito) Largura – aqui mesmo, quanto ao cabeçalho médio
  14. Estofamento (superior/inferior) – aqui mesmo, quanto ao cabeçalho médio
  15. Estofamento (esquerda/direita) – aqui mesmo, quanto ao cabeçalho médio
  16. Margem de ligação (esquerda/direita) – margens entre os links (por exemplo os itens de menu)
  17. Preenchimento de ligação – estofamentos (Início, fundo, esquerda, direito) de todos os links
  18. Preenchimento de item de menu (esquerda/direita) – esquerda e direito estofamentos de itens de menu apenas (Se o menu é definido como um de esquerda ou direita); aplicável para LI (lista) Etiquetas de menu
  19. Preenchimento de item de menu (superior/inferior) – guarnição superior e inferior de itens de menu apenas (mesmo se aplica aqui)
  20. Cor do link (e cor de focalizar, cor de fundo, cor de fundo do pairo) – cores dos links
  21. Cor do texto – cor dos textos (“Não-ligações”, i.. último título de peça ou página do breadcrumb)
  22. Cor de borda do link – todos os quatro (Início, fundo, esquerda, direito) Faz fronteira com cor; Não é visível até a largura da borda é definida como pelo menos 1 (um) PX (pixel)
  23. Largura de borda do link – todos os quatro (Início, fundo, esquerda, direito) largura de bordas para links
  24. Raio da borda de ligação – todos os quatro (Início, fundo, esquerda, direito) raio de fronteiras para links
  25. Superior esquerdo (e no canto inferior esquerdo, superior direito, canto inferior direito) raio – aqui mesmo, quanto ao cabeçalho médio

Cabeçalho de fundo

Cabeçalho de fundo é outra importante seção do cabeçalho personalizador. Ele contém (mesmo que o cabeçalho de fundo) esquerda e direita, que vai centralmente alinhada quando o modo responsivo é activado (Quando o tamanho da tela é pequeno, i.. tamanho definido no painel de cabeçalho responsivo). Você pode escolher para ambos os lados para algum: algumas outra menu, farinha de rosca, caixa de título ou Pesquisar página atual. A seguir estão as configurações que você pode modificar:

  1. Habilitado? – o cabeçalho de fundo está habilitado em tudo? (caixa de seleção)
  2. Menu esquerda lado tipo – aqui mesmo, quanto ao cabeçalho de topo
  3. Tipo de menu direita lado – aqui mesmo, quanto ao fundo cabeçalho
  4. Cor de fundo – aqui mesmo, quanto ao cabeçalho médio
  5. Imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  6. Repetição da imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  7. Acessório de imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  8. Posição da imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  9. Tamanho da imagem de fundo – aqui mesmo, quanto ao cabeçalho médio
  10. Família de fontes do Google – aqui mesmo, quanto ao cabeçalho de topo
  11. Tamanho da fonte – aqui mesmo, quanto ao cabeçalho de topo
  12. Top de fronteira (e na parte inferior, esquerda, direito) Cor – aqui mesmo, quanto ao cabeçalho médio
  13. Top de fronteira (e na parte inferior, esquerda, direito) Largura – aqui mesmo, quanto ao cabeçalho médio
  14. Estofamento (superior/inferior) – aqui mesmo, quanto ao cabeçalho médio (existe somente se você atualmente não está na primeira página)
  15. Estofamento (superior/inferior) na primeira página – Isto é mesmo que acima, exceto que é somente quando você está na página inicial! Quando você está na página que não seja em casa ou em frente (depende de suas configurações de WordPress) Então esta opção não existir
  16. Estofamento (esquerda/direita) – aqui mesmo, quanto ao cabeçalho médio
  17. Cor do texto – aqui mesmo, quanto ao cabeçalho de topo
  18. Cor do link (e cor de focalizar) – aqui mesmo, quanto ao cabeçalho de topo
  19. Margens para itens de menu (esquerda/direita) – Se o menu é selecionado para estar no lado esquerdo ou direito, Esta será suas margens esquerda e direita
  20. Superior esquerdo (e no canto inferior esquerdo, superior direito, canto inferior direito) raio – aqui mesmo, quanto ao cabeçalho médio

Área do logotipo

Área do logotipo é parte do seu cabeçalho que contém o logotipo (como link de texto ou imagem) e descrição do site. A seguir estão as configurações que você pode modificar:

  1. Imagem do logotipo – imagem como seu logotipo
  2. Tipo de logotipo – tipo de conjunto de seu logotipo: imagem do link ou o texto do link
  3. Texto do logotipo – título do site por padrão
  4. Largura máxima – é útil para não esticar quando cabeçalho vai responsivo
  5. Estofamento (superior/inferior) – guarnição superior e inferior; brincar de configurá-lo verticalmente muito bem contra o menu principal
  6. Família de fontes do Google – para logotipo textual apenas
  7. Família de fontes Google para descrição – para descrição apenas
  8. Mostrar área de logotipo? – Sim ou não (caixa de seleção); Se você precisa remover o logotipo área completamente
  9. Mostrar logotipo? – Sim ou não (caixa de seleção); Se você precisa remover o logotipo apenas
  10. Mostrar descrição do logotipo? – Sim ou não (caixa de seleção); Se você precisa remover a descrição (slogan) Só
  11. Cor do título de site (e cor de focalizar) – Se seu logotipo é textual, definir a cor aqui
  12. Cor de descrição do local – cor da descrição do logotipo (slogan)
  13. Tamanho da fonte título local – tamanho da fonte para logotipo textual
  14. Tamanho da fonte local descrição – tamanho da fonte para a descrição (slogan)

Menu principal

Menu principal faz parte do cabeçalho, que é colocado dentro do cabeçalho médio ao lado com área de logotipo. A submenus são colocados dentro de seção principal Submenus. A seguir estão as configurações que você pode modificar:

  1. Cor do link (e cor de focalizar, cor ativa) – Estas opções são apenas para link (<um> Tags) cores; cor ativa é a cor do link quando na página atual
  2. Tamanho da fonte – tamanho da fonte dos itens de menu
  3. Família de fontes do Google – família de fontes de itens de menu
  4. Setas de submenu Visualizar? – caixa de seleção; mostrar a seta apontando para baixo para itens de menu com submenus
  5. Margem do menu à esquerda (e direito) – margem esquerda e direita do menu inteiro (itens de menu não!)
  6. Cor de fundo do link (e pairo e cores de fundo ativo) – Só para links
  7. Raio da borda de ligação – Só para links, para que possam ser “arredondado”
  8. Cores de fundo do item de menu (e passe o mouse, cores de fundo ativo) – para itens de lista (<Li> Tags!)
  9. Itens de menu de preenchimento (superior/inferior) – preenchimentos de marca de lista, Então você pode alinhar com área de logotipo bem
  10. Itens de menu de preenchimento (esquerda/direita)
  11. Margem de itens de menu (superior/inferior)
  12. Margem de itens de menu (esquerda/direita)
  13. Preenchimento de ligações do menu (superior/inferior) – para links (<um> Tags)
  14. Preenchimento de ligações do menu (esquerda/direita) – mesmo
  15. Top de fronteira de item de menu (e na parte inferior, esquerda, direito) Cor – cores de fronteira para itens de lista
  16. Top de fronteira de item de menu (e na parte inferior, esquerda, direito) Largura – largura da borda
  17. Item de menu superior esquerdo (e o canto superior direito, inferior esquerdo, inferior-direito) raio – cada uma destas opções têm a possibilidade de excluir todos os outros itens exceto primeiro ou último item, Então o menu inteiro parece “arredondado” (Dê uma olhada no exemplo de gif abaixo!)

Ao menu principal de instalação, Primeiro você precisa definir qualquer menu para que você salvou antes de ser colocado “Menu principal do HC” localização. Veja o exemplo a seguir:

main menu setup

Aqui está como você pode modificar cores link por exemplo:

menu item colors

Submenus principais

Submenus aparecem no Tucows ou clicam nos itens do menu principal. Existem até quatro níveis de submenus para escolher submenus como profundos vai. Muitas mais opções estão aqui, Então, Vamos listá-las abaixo:

  1. Profundidade de sub-menus – Como dito anteriormente, Você pode escolher quantos níveis de submenus que tens
  2. Mostrar o submenu no foco do mouse? – Se clicar ou itens de menu principal focalizar ou itens de submenu para mostrar submenus; responsivo cabeçalho sempre reagirá na torneira (clique em)
  3. Cor de fundo – cor de fundo de todos os submenus
  4. Min. Largura – largura mínima que levam seus submenus; Por padrão está programado para auto
  5. Tamanho da fonte – tamanho da fonte de todos os itens de submenu
  6. Cor da borda – cor da borda de todos os quatro lados da coluna de um submenu: Início, fundo, esquerda, direito
  7. Top de fronteira (e na parte inferior, esquerda, direito) Largura – quatro opções separadas por fronteiras’ Largura
  8. Itens de menu top de fronteira (e na parte inferior) Cor – cor da borda dos links de submenu (exceto primeiro, ou se a cor de fundo é o ultimo)
  9. Itens de menu top de fronteira (e na parte inferior) Largura – largura da borda de links de submenu (exceto primeiro, ou a última se é largura inferior)
  10. Sombra – sombra definida usando a propriedade CSS caixa-sombra; passa-se no campo de texto usando a definição completa, ex.. 2PX 2px 2px 2px rgba(85, 85, 85, 0.8) e quando você fizer alterações em qualquer um dos valores de vê-los ao vivo enquanto você digita

Farinha de rosca

Migalhas de pão são ótimos para melhorar a visibilidade do seu site nos motores de busca e SEO. Header Customizer’s breadcrumbs implement data-vocabulary.org definition.

  1. Tamanho da fonte – tamanho da fonte de pão só
  2. Família de fontes do Google – família de fontes para apenas migalhas de pão
  3. Mostrar o link de página inicial? – Se o pão ralado mostra link para home page; Por padrão, que ele faz
  4. Texto do separador – caractere separador(s) que sentar-se no meio da página de links
  5. Cor do separador – cor do texto do separador
  6. Margens do separador (esquerda/direita) – margens do separador

Nota: Migalhas de pão são colocadas na parte superior ou inferior do cabeçalho, Mas primeiro você precisa ativar qualquer um deles e coloque o pão ralado como menu do lado esquerdo ou direito, Como assim:

Breadcrumbs

Título da página

Título da página é muito apropriado ser colocado na parte inferior do cabeçalho. Ele mostra o nome da página da página atual. Você pode modificar as seguintes:

  1. Cor – cor do título da página
  2. Mostrar na página inicial? – Se deseja mostrar o título para a página inicial
  3. Margem superior/inferior
  4. Tamanho da fonte – tamanho da fonte do título da página só
  5. Família de fontes – família da fonte do título da página só

Nota: Para que o título da página você deve selecioná-lo como menu lado esquerdo ou direito, na parte superior ou inferior de cabeçalhos.

Caixa de pesquisa deve ser parte integrante do seu cabeçalho, se você gostaria de tê-lo lá em vez de, por exemplo, na barra lateral. Você pode alterar muitas configurações aqui:

  1. Cor – apenas a cor do texto; cor do texto digitado (Não tem espaço reservado)
  2. Largura – largura básica da caixa
  3. Tamanho da fonte – tamanho da fonte do texto de pesquisa
  4. Família de fontes – família de fontes de texto de pesquisa
  5. Cor de fundo – cor de fundo da caixa
  6. Espaço reservado – espaço reservado de campo de entrada
  7. Cor da borda – cor da borda da caixa
  8. Largura da borda – largura da borda da caixa
  9. Estofamento superior/inferior (e esquerda/direita) – preenchimentos de campo de entrada
  10. Parte superior da margem (e na parte inferior, esquerda, direito – margens da caixa
  11. Raio de borda superior esquerdo (e o canto superior direito, inferior esquerdo, inferior-direito) – raio da borda da caixa de pesquisa

Nota: Para ter a caixa de pesquisa você deve selecioná-lo como menu lado esquerdo ou direito, na parte superior ou inferior de cabeçalhos.

Cabeçalho de resposta

Responsivo cabeçalho aparece quando o tamanho da tela (que também pode ser definida) é pequeno o suficiente para seu cabeçalho assim se transforma, tornando-se atraente para o seu telefone ou tablet. Você pode definir opções na sequência:

  1. Largura responsiva – largura que define o ponto de ruptura entre o desktop e responsivo cabeçalho; Quando você carregar seu site em tamanhos de tela abaixo deste ponto olhará seu cabeçalho “minified”
  2. Cor de hambúrguer – “hambúrguer” ícone é exibido em vez de seu menu principal, que você pode clicar em mostrar o menu em telas pequenas, mas desta vez os itens de menu são ordenados abaixo uns aos outros

Cabeçalho pegajoso

E, finalmente,, o cabeçalho pegajoso. Como a maioria de nós já está familiarizada com este termo, Isso significa que seu cabeçalho “varas” no topo de seu site, mesmo quando você iniciar a rolagem para baixo o conteúdo. Cabeçalho pegajoso grandemente
melhora a taxa de rejeição de seus visitantes. Você pode transformá-lo e desligar por simplesmente marcar/desmarcar a caixa de seleção. Por agora, você é apresentado com as seguintes configurações:

  1. Pegajoso cabeçalho está habilitado? – Como mencionado acima, você facilmente pode ativar/desativar cabeçalho pegajoso com essa caixa de seleção
  2. Deslocamento – em pixels, Esta é a distância há quanto tempo você rolar até o cabeçalho adere ao topo; Ela também pode ser definida como zero para que seu cabeçalho imediatamente se torna pegajoso
  3. Estofamento superior/inferior para parte superior cabeçalho – guarnição somente para cabeçalho de topo; Isto é muito útil para que você pode por exemplo fazer cabeçalho menor em altura quando torna-se pegajosa (com efeito de transição agradável)
  4. Estofamento superior/inferior para um cabeçalho médio – mesmo como ponto acima, mas por meio do cabeçalho
  5. Estofamento superior/inferior para cabeçalho inferior – mesmo que o ponto acima mas para cabeçalho inferior
  6. Mostrar cabeçalho superior? – Você pode se esconder (ou não) Cabeçalho superior completamente quando o cabeçalho torna-se pegajosa
  7. Mostrar cabeçalho médio? – mesmo como ponto acima, mas por meio do cabeçalho
  8. Mostrar cabeçalho inferior? – mesmo que o ponto acima mas para cabeçalho inferior

sticky header

A desinstalação

Você pode encontrar desinstalar (excluir) opção depois que você desativa o plugin a partir da página de Plugins.

Tenha em mente que quando você excluir o cabeçalho personalizador você também irá apagar tudo de sua cor, menu e outras configurações. Se você apenas desativar o plugin, suas configurações permanecerão e não precisará ser inserido novamente se plugin é re-ativado.

Para suporte a solicitações, por favor, utilize minha página de suporte. Se você gosta do plugin, por favor, tome o tempo para avaliá-lo. Significa muito para mim.

0 Flares Twitter 0 Facebook 0 Google 0 PIN-compartilhar 0 LinkedIn 0 Email -- 0 Flares ×

Deixar uma resposta

Seu endereço de e-mail não será publicado. Campos obrigatórios são marcados *