como criar e personalizar um tema criança WordPress

Se você ama o seu tema atual, mas quer modificar suas características e olhar, a maneira correta de fazê-lo é personalizando seu tema infantil. Este tutorial irá explicar por que esta prática é necessária e guiá-lo através do processo para que você possa criar e editar um tema criança WordPress, independentemente de suas habilidades técnicas.

facilmente criar e personalizar temas com Hostinger Hospedagem WordPress!,

Get Started Here

Why You Should Use WordPress Child Themes

Uma vez que um tema infantil herda as características de um tema mestre ou pai, você pode personalizar o seu código sem quebrar a funcionalidade do original. Desta forma, se um tema recebe uma atualização, todas as mudanças que você fez não serão reescritas.

outra razão para usar um tema infantil é que ele oferece uma solução de segurança se você alguma vez estragar suas edições. Além disso, ele permite que você rastreie eficientemente as partes que você mudou desde que os arquivos de um tema infantil são separados de seus pais.,

como os temas infantis WordPress funcionam

como brevemente aludido anteriormente, um tema infantil é armazenado em um diretório separado do tema pai, cada um com seu próprio estilo.css e funções.ficheiros php. Você pode adicionar outros arquivos conforme necessário, mas esses dois são o mínimo necessário para que um tema criança funcione corretamente.

usando o relevante .css and .arquivos php, você pode modificar tudo, desde o estilo, os parâmetros de layout para codificação real e scripts usados por um tema filho, mesmo se os atributos não estão presentes em seu tema pai.pense nisto como uma sobreposição., Quando um visitante carrega o seu site, WordPress primeiro carrega o sub-tema, e, em seguida, preenche os estilos e funções em falta usando partes do tema mestre. Como resultado, você obter o melhor de seu design personalizado, sem sacrificar a funcionalidade principal do tema.

criar um tema infantil no WordPress

as seguintes instruções usam vinte e sete como base. Você pode usar outro tema, se preferir. Também vamos usar o Gerenciador de arquivos do Hostinger para adicionar e editar os arquivos, embora o FTP também funcione.,

agora, sem mais delongas, aqui está como criar um tema infantil no WordPress:

  1. acesse a sua hPanel e clique no Gestor de arquivos.
  2. navegue para public_html – > wp-content -> pasta Temas.
  3. crie uma nova pasta carregando no seu ícone no menu superior. Indique o nome do tema do seu filho e carregue em Criar. É recomendado usar o nome do tema pai seguido pelo sufixo a-child. Neste exemplo, nomeamos a pasta twentyseventeen-child.,

    importante: substitua os espaços em uma pasta ou o nome de um arquivo por hifens ( – ) para evitar erros.

  4. dentro da pasta, crie um estilo.ficheiro css. Preencher o seu conteúdo com o seguinte código:
    /* Theme Name: Twenty Seventeen Child Theme URL: http://yourdomain.comDescription: Twenty Seventeen Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: twentyseventeen Version: 1.0.0 Text Domain: twentyseventeen-child */
  5. altera todos os valores em conformidade. O campo mais importante é modelo, porque diz WordPress Qual tema pai seu tema filho é baseado em. Uma vez feito, clique em Salvar e fechar.
  6. crie outro arquivo chamado funções.,php na mesma pasta, mas não preenchê-lo com o código do arquivo do tema pai, porque ele precisa permanecer separado. Em vez disso, copie e cole o código abaixo para o arquivo em branco e salve-o:
    <?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>
  7. Visite o seu website e o acesso a Aparência> Tema. Ative o tema criança que você acabou de fazer, e você vai notar que ele parece o mesmo que o tema pai.

Como você pode ver, criar um tema criança WordPress não é mais complicado do que trabalhar com um tema mestre!,

personalizar o tema do seu filho

para personalizar o tema do seu filho, você precisa de uma compreensão básica das regras do CSS e do conhecimento sobre como inspeccionar os elementos para que possa identificar o seu código CSS e a classe A que estão atribuídos.

Agora, vamos dar uma olhada no básico de personalizar um. Para executar isto, carregue em Personalizar – > CSS adicional do seu tema filho activo.,

mudar a cor de fundo

inserir a seguinte regra CSS se desejar mudar a cor de fundo do seu tema filho WordPress:

.site-content-contain { background-color: #DEF0F5; position: relative;}

o valor ao lado da cor de fundo: corresponde ao código hexadecimal da cor que escolher., Neste exemplo, já estamos mudando ele de branco para azul claro, o resultado se parece com isso:

uma Mudança Lateral de Cor

Você pode criar uma forma de exibição de seus widgets adicionando um pouco de cor para a barra lateral com o seguinte código CSS:

.widget {background: #B9EBFA;padding: 25px;}

mais uma vez, não se esqueça de editar o código de cor de acordo. Você deve obter um resultado como este:

Alterar Tipos de Letra, Tamanhos, e Cores

Para alterar o tipo de fonte, tamanho e cor do seu WordPress tema criança, insira o código abaixo:

p {color: teal;}p {font-family: Georgia;font-size: 18px;}

A tag p representa parágrafo., Como você pode ver abaixo, a regra acima mudou a aparência dos tipos de letra do parágrafo com base nos valores especificados.

para alterar o tipo de letra de outras partes do texto, como o título ou o cabeçalho, inspeccione os elementos para ver os seus parâmetros CSS primeiro. Para o bem da ilustração, vamos tentar mudar a cor da fonte do título.

  1. primeiro, carregue com o botão direito no texto e seleccione inspeccionar. Localiza o link de estilo CSS e abre-o numa nova página.
  2. Encontre a parte exata que você está procurando usando CTRL+F e copie o código para a página CSS adicional. Alterar os valores em conformidade.,

Você pode fazer o mesmo com quaisquer outros elementos que você deseja mudar.

alterando a disposição das mensagens e páginas

tal como o css personalizado de um tema criança WordPress substitui o estilo do seu tema pai, os ficheiros de modelos permitem-lhe criar as suas próprias disposições, revogando as predefinidas.

o seu novo modelo deve ter o mesmo nome de ficheiro e estar nas pastas que correspondem ao original. É uma boa idéia para copiar o arquivo modelo mestre para o seu diretório tema WordPress criança e trabalhar a partir disso.

os ficheiros de modelos principais estão na pasta principal do tema., Por exemplo, o modelo para ver um único post é único.php, e o modelo para páginas É página.pai.

Vinte E Sete também divide seus modelos em partes-modelo que são referenciadas no modelo primário usando a função WordPress get_template_part(). Por exemplo, se você deseja editar Página.php, você pode começar por localizar as partes do modelo para ver se esses são os bits que você precisa editar. No nosso ficheiro de exemplo, a linha 28 diz:

get_template_part( 'template-parts/page/content', 'page' );

como é que lemos isto? template-parts/page / é a localização da pasta., Enquanto isso,” conteúdo “refere-se ao personagem no nome do arquivo antes do hífen e” página ” é depois do hífen.

juntos formam a localização completa de wp-content / themes / twentyseventeen/template-parts/page / content-page.pai.

seguindo a estrutura, se você quiser mudar a disposição da página de conteúdo.php, você precisa copiá-lo para a sua pasta de temas filhos e colocá-lo nesta localização: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.pai.e é isso, edição feliz!,

adicionar e remover recursos

outra vantagem significativa da criação de um tema criança WordPress é a capacidade de ter uma função separada.php file, que, assim como plugins, é usado para adicionar (ou remover) certas características usando o código PHP.

Por exemplo, as seguintes linhas irão desactivar a funcionalidade do botão direito no seu tema:

conclusão

Temas Infantis WordPress oferecem uma forma poderosa de criar um projecto inteiramente novo baseado nas características do tema principal existente sem quebrar a sua função principal., Com um pouco de codificação simples e gerenciamento de diretórios, você pode modificar o tema-criança como pouco ou tanto quanto você quiser, proporcionando uma ampla gama de possibilidades para o seu projeto.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *