Imagens em projetos temáticos criança wordpress

Video: ProShow Producer 5 - Projeto Timão e Pumba

Muitos temas usar imagens para adicionar toques agradáveis ​​para um design WordPress. Normalmente, você adicionar estas imagens para o imagens diretório dentro do tema. Assim como um tema pai pode referir-se a imagens em sua style.css arquivo, o seu filho temas podem ter seu próprio diretório de imagens. Os seguintes são exemplos de como essas imagens podem ser usadas.

Como usar a imagem de um tema filho em uma folha de estilo tema criança

Incluindo uma imagem Tema criança em uma folha de estilo tema criança é comum. Para isso, basta adicionar a nova imagem para a criança o tema do imagens diretório e se referem a ele na criança o tema do style.css Arquivo. Para começar uma sensação para a mecânica desse processo, siga estes passos:

1. Criar um imagens diretório dentro do diretório do tema criança / wp-content / themes / twentythirteen-filho / imagens.

2. Adicione uma imagem para o diretório.

3. Adicione o estilo necessário para a criança o tema do style.css arquivo, como segue:

/ * Nome Tema: TwentyThirteen ChildDescription: meu fabuloso criança themeAuthor: Lisa Sabin-WilsonVersion: url twentythirteen * / @ import (` ../ twentythirteen / style.css `) - body {background:: 1.0Template url (` images / corpo -bg.jpg `) repetir-x-}

Com uma atualização rápida do site, que agora tem um novo fundo. Você pode ver como o fundo mudou de branco liso para uma imagem listrado branco-e-tan.

Como usar uma imagem de tema pai em uma folha de estilo tema criança

imagens de tema criança são aceitáveis ​​para a maioria dos propósitos. Às vezes, porém, você é melhor fora de usar imagens fornecidas pelo tema pai. Você poderia simplesmente copiar a pasta imagem Tema pai, com todas as suas imagens, com o tema criança, mas que iria impedir o tema criança de combinando o tema pai se a imagem tema pai nunca muda, como depois de uma atualização.

Felizmente, você pode se referir a uma imagem no tema pai com o @importar governar da mesma maneira que você pode fazer referência ao pai o tema do style.css Arquivo.

Na área do menu de navegação do projeto Vinte Treze, um ícone de lupa aparece no lado direito que designa a área de pesquisa - os usuários clicam nele para exibir o formulário de busca. Esta é uma imagem de um tema pai.

Neste exemplo, você adicionar o ícone de lupa na frente do título do post. Porque a imagem do ícone já existe dentro do tema pai, você pode simplesmente adicionar uma personalização para a criança o tema do style.css arquivo para fazer essa alteração, como segue:

/ * Nome Tema: TwentyThirteen ChildDescription: meu fabuloso criança themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentythirteen * / @ importação url (` ../ twentythirteen / style.css `) - entry-título {background:. Url (` ../twentythirteen/images/search-icon.jpg `) centro-esquerda no-repeat-padding-left: 30px;}

Salve o arquivo e atualizar o seu site para mostrar a lupa antes do título da entrada.

Como usar a imagem de um tema filho em uma folha de estilo tema pai

Nos exemplos anteriores, você pode se perguntar se substituir uma imagem usada na folha de estilo do pai com aquele encontrado no diretório do tema criança é possível. Isso exigiria uma mudança para stylesheet- do tema pai a própria idéia por trás de um tema filho é para evitar alterações ao pai, por isso não, isso não é possível.

Video: Simone & Simaria - Loka ft. Anitta

No entanto, você pode substituir o domínio do tema pai para se referir a nova imagem do tema criança, basta criar uma regra imperiosa de folha de estilo do tema criança que aponta para a nova imagem.

Acima, você coloca o ícone da lupa à esquerda do título da entrada. Dar um passo Ademais o ícone da lupa ao lado do título da entrada é pequeno. Você pode fazer melhor com um ícone maior. Para este exemplo, usar um ícone da lupa diferente que você pode baixar. direito; clique na imagem em seu navegador para salvá-lo para o seu computador local.

Depois de adicionar a imagem desejada para o diretório de imagens do seu tema criança como lupa-glass.jpg, Os seguintes style.css arquivo substitui o ícone da lupa do tema pai com o novo que você acabou de baixar:

/ * Nome Tema: TwentyThirteen ChildDescription: meu fabuloso criança themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentythirteen * / @ importação url (` ../ twentythirteen / style.css`) - entry-título {background:. Url (imagens /magnifying-glass.jpg) centro-esquerda no-repeat-padding-left: 50px;}

Observe como algumas regras para além apenas o fundo são modificados para substituir styling tema pai que não funcionam bem com o novo ícone, como a adição do padding-left: 50px - que é colocado no local para fornecer o espaçamento correto para a lupa. Agora seu tema criança mostra a nova lupa à esquerda do título da entrada. O novo visual é bastante bom se você me perguntar.

Você não pode substituir diretamente imagens do tema pai. Em vez disso, você deve fornecer uma nova imagem no tema criança e substituir o estilo do pai para se referir a esta nova imagem.