Como utilizar imagens em projetos temáticos criança wordpress

Muitos temas WordPress usar imagens para adicionar toques agradáveis ​​ao design. Normalmente, essas imagens são adicionadas a um diretório chamado imagens

dentro do tema. Assim como um tema pai pode referir-se a imagens em sua style.css arquivo, o seu filho temas têm seu diretório próprias imagens.

O padrão Vinte Quatorze tema realmente não usar imagens em tudo, então para este exemplo, você vai ver um outro tema WordPress chamado vinte onze (que vem embalado em cada instalação WordPress). Você segue os mesmos passos para criar um tema infantil para o tema vinte onze.

Usando uma imagem de tema criança 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 da criança: / wp-content / themes / TwentyEleven-filho / imagens.

  2. Adicionar uma imagem para usar no diretório.

    Video: Curso Wordpress - Aula 13 - Criação de plugin e conhecendo o shortcode (Plugins de Slides)

    Para este exemplo, adicione uma imagem chamada corpo-bg.jpg.

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

    Video: Джейн Гудалл о том, что отделяет нас от приматов

/ * Nome Tema: TwentyEleven ChildDescription: Meu fabuloso criança themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: TwentyEleven * / @ importação url (` ../ TwentyEleven / style.css `) - body {background: url #ffffff (` imagens /body-bg.jpg `) repetir-x-}

Com uma atualização rápida do site, você vê que o site tem agora um novo fundo. Você pode ver como o fundo mudou de branco liso para uma imagem de fundo gradiente vertical black-to-gray agradável, com a cor de fundo alterado para combinar com a cor cinza na imagem (indicado pelo #bfbfbf código).

Usando 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 impeça o tema criança de combinando o tema pai se a imagem tema pai nunca muda, como depois de uma atualização.

Video: Ричард Баранюк об open-source образовании

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.



No rodapé do desenho vinte onze, uma linha de texto aparece dizendo “Orgulhosamente criado com WordPress.” Neste exemplo, você deseja adicionar a imagem do logotipo na frente do texto de crédito no rodapé. Porque a imagem do logotipo 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 do tema: vinte onze ChildDescription: Meu fabuloso criança themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: TwentyEleven * / @ importação url (` ../ TwentyEleven / style.css`) - rodapé # local-gerador a {background: url ( `../ TwentyEleven / imagens / wordpress.jpg`) no-repeatpadding: 2px 25px;}

Salve o arquivo e atualizar o seu site.

Video: Como adicionar páginas no WordPress.com

Usando uma imagem de tema criança em uma folha de estilo tema pai

Olhando para os 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 de estilo do tema pai, ea idéia por trás de um tema filho é para evitar alterações ao pai, por isso não, isso não é possível.

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.

Você pode dar um passo mais longe. Por exemplo, o logotipo WordPress no rodapé é muito pequeno. Um logotipo maior seria melhor. Use o Médio PNG: 100 x 100 (gray-m.jpg) Botão WordPress que aparece na WordPress.org Logos e página Gráficos.

Depois de carregar o logotipo desejado para o diretório de imagens do seu tema criança (indo até / wp-content / themes / TwentyEleven-filho / imagens) Como gray-m.jpg, Os seguintes style.css arquivo substitui o logotipo WordPress no rodapé do tema pai com o novo botão WordPress:

/ * Nome Tema: TwentyEleven ChildDescription: Meu fabuloso criança themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: TwentyEleven * / @ importação url (` ../ TwentyEleven / style.css`) - rodapé # local-gerador a {background: url (images / wp-logo.jpg) centro-esquerda no-repeat-padding: 2px 110px;}

Agora seu tema criança mostra o seu WordPress orgulho alto e claro com o novo e maior de logotipo do site oficial do WordPress.org.

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.


Publicações relacionadas