Como personalizar o estilo tema com temas infantis em wordpress vinte quinze

A WordPress tema

consiste de uma coleção de arquivos de modelo, folhas de estilo, imagens e arquivos javascript. O tema controla o layout e design que os visitantes ver no site. Quando tal tema está devidamente configurado como um tema pai, permite uma tema criança, ou um subconjunto de instruções, para substituir seus arquivos. Isto assegura que um tema criança pode selectivamente alterar o layout, estilo e funcionalidade do tema pai.

A maneira mais rápida para compreender temas criança é pelo exemplo. Aqui, você descobrir como criar um tema simples criança que modifica o estilo do tema pai. Atualmente, o WordPress tema padrão é Twenty Quinze.

Você provavelmente terá Vinte Quinze em seu site WordPress, e Vinte Quinze é tema-ready criança, portanto, é um grande candidato para a criação de um tema exemplo criança.

Criando um tema criança

Como temas regulares, um tema criança precisa residir em um diretório dentro do / wp-content / themes diretório. O primeiro passo para criar um tema criança é adicionar o diretório que irá prendê-lo. Para este exemplo, crie um novo twentyfifteen-criança diretório dentro do / wp-content / themes diretório.

Para registrar o twentyfifteen-criança diretório como um tema e torná-lo um filho do tema Twenty Quinze, criar um style.css arquivo e adicionar os cabeçalhos tema apropriado. Para fazer isso, digite o seguinte código em seu código favorito ou editor de texto simples, como o Notepad (Windows) ou TextMate (Mac), e salve o arquivo como style.css:

/ * Nome Tema: Vinte Quinze ChildDescription: My magnífica criança themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentyfifteen * /

Normalmente, você encontrará os seguintes cabeçalhos em um tema WordPress:

• Nome Tema: O tema usuário vê este nome no back-end do WordPress.

  Video: Garrafa decorada tema paris

• Descrição: Este cabeçalho fornece ao usuário qualquer informação adicional sobre o tema. Atualmente, este cabeçalho aparece apenas na página Manage Themes (escolher Aparência → Temas).

  Video: Decoração em Festa Infantil com o Tema Marinheiro

• Autor: Este cabeçalho lista um ou mais autores temáticos. Atualmente, este cabeçalho é mostrado apenas na página Manage Themes (escolher Aparência → Temas).

• Versão: O número de versão é muito útil para manter o controle de versões desatualizadas do tema. Atualizar o número da versão ao modificar um tema é sempre uma boa idéia.

• Modelo: Este cabeçalho muda um tema em um tema infantil. O valor deste cabeçalho diz WordPress o nome do diretório do tema pai. Porque o seu exemplo tema criança usa Vinte Quinze como o pai, o seu style.css precisa ter um cabeçalho modelo com um valor de twentyfifteen.

Ative o novo tema Vinte Quinze crianças como seu tema ativo.

Você pode ver que o novo tema não parece muito certo. O problema é que o novo tema criança substituiu o style.css arquivo do tema pai, mas o novo tema criança style.css arquivo está vazio. Você poderia simplesmente copiar e colar o conteúdo do pai o tema do style.css arquivo, mas que iria perder algum do potencial de temas infantis. Em vez disso, você quiser ajustar apenas os estilos e / ou características que você deseja modificar e deixar o resto sozinho.

Carregando o estilo de um tema pai

Uma das grandes coisas sobre Cascading Style Sheets (CSS) é a forma como as regras podem substituir um ao outro. Se você listar a mesma regra duas vezes em seu CSS, a regra que vem por último tem prioridade.

Video: Como montar uma brinquedoteca gastando pouco | Danny Carey

Por exemplo:

a {color: azul-} a {color: vermelhos}

Este exemplo é simples demais, mas ilustra o conceito muito bem. A primeira regra diz que todos os links (uma tags) deve ser azul, enquanto o segundo diz que as ligações devem ser vermelho. Como as regras CSS afirmar que a última instrução tem precedência, as ligações será vermelho.

Usando esse recurso de CSS, você pode herdar todo o estilo do tema pai e modificá-lo seletivamente, substituindo as regras do tema pai. Mas como você pode carregar a criança tema do style.css arquivo para que ele herda o estilo do tema pai?

Felizmente, CSS tem outra grande característica que ajuda você a fazer isso com facilidade. Basta adicionar uma linha para o tema do Vinte Quinze crianças style.css Arquivo:

/ * Nome do tema: Vinte Quinze ChildDescription: My magnífica criança themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentyfifteen * / @ importação url ( ‘../ twentyfifteen / style.css’) -

Uma série de coisas estão acontecendo aqui, então vamos dividi-la peça por peça:

• @importar: Isso diz ao navegador para carregar outro estilo. Usando este permite que você puxar a folha de estilo pai rapidamente e facilmente.

• url (‘...’): Isso indica que o valor é um local e não um valor normal.

• (‘../twentyfifteen/style.css’) -: Esta é a localização da folha de estilo pai. Observe a / twentyfifteen nome do diretório. Isso precisa ser alterado para corresponder ao Modelo: valor no cabeçalho do CSS para que a folha de estilo apropriado é carregado.

Depois que você atualizar seu site, você vê que o design e layout do tema filho coincidir com o tema original Vinte Quinze.

Personalizar o estilo do tema pai

Seu tema Vinte Quinze crianças está configurado para coincidir com o pai Vinte Quinze tema. Agora você pode adicionar um novo estilo ao tema do Vinte Quinze crianças style.css Arquivo. Um exemplo simples de como funciona a personalização é a adição de um estilo que converte todos os H1, H2, e os títulos h3 para maiúsculas.

/ * Nome Tema: Vinte Quinze ChildDescription: My magnífica criança themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: url twentyfifteen * / @ import (` ../ twentyfifteen / style.css`) - H1, H2, H3 {text-transform : uppercase-}

Você pode ver como o tema criança olha com os acréscimos de estilo CSS aplicada - cada vez melhor, não é?

Video: COMO DECORAR FESTAS- mesa do bolo-festa em casa (menino) Tema Pirata

Como você pode ver, com apenas algumas linhas em um style.css arquivo, você pode criar um novo tema criança que adiciona personalizações específicas para um tema já existente. Não só é rápido e fácil de fazer, mas você não tem que modificar alguma coisa no tema pai para fazê-lo funcionar.