webmaster

WordPress Themes – Instalação E Administração Parte9

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

WordPress Themes – Instalação E Administração Parte9

Olá leitor que está se profissionalizando em WordPress! Mais um artigo para aplacar a sede de conhecimento nesse maravilhoso CMS. Nesse continuaremos a tratar do tema WP Coda, que simplesmente promove muitas mudanças no seu blog, transformando-o num completo Web Site. E estamos estudando todas essas mudanças.

Continuando a ler as instruções, o quarto ponto informa que a galeria nativa do WordPress foi mudada para esse tema. Essa mudança se deu devido à instalação do plug-in que veio junto e que segundo o autor é baseado no plug-in Cleaner Gallery do autor Justin Tadlock.

Para quem não sabe o que é galeria do WordPress, leia o artigo WordPress – Adicionar Posts 5 Galeria, onde todas as dúvidas serão sanadas.

A mudança promovida pelo autor realmente deixa um efeito bem legal na galeria, dando uma espécie de Zoom na imagem, deixando-a totalmente visível na tela com o blog ao fundo. Para deixar um exemplo neste artigo, utilizei as fotos do meu casamento e montei uma galeria, que você pode conferir nas figuras 1 e 2:

galeria fotos casamento

galeria fotos casamento

Na figura 1 é possível visualizar o site com a página ‘Casamento’, exibindo a galeria inserida e a miniatura das imagens. Clicando-se numa delas, é aplicado um zoom na imagem e assim ela exibida cobrindo toda a tela, conforme mostra a figura 2. Nesse caso temos alguns controles destacados:

  1. Fechar: a imagem “diminui” e a galeria volta a ser exibida. Outra maneira de “fechar” a imagem é clicar nela quando os controles ‘anterior’ e ‘próximo’ não estiverem na figura, ou seja, basta clicar com o mouse no centro da imagem;
  2. Anterior: esse botão aparece quando o mouse é “levado” para a esquerda da imagem. Serve para exibir a imagem anterior à atual da galeria;
  3. Próximo: esse botão só aparece quando o mouse é “levado” para a direita da imagem. Quando clicado exibe a próxima imagem da galeria;
  4. Título: exibe o título da imagem, editado das opções da imagem;

Outra particularidade é que não é possível exibir a ‘Página de anexo’ e sim somente o ‘Arquivo de imagem’. Mais detalhes sobre esses dois recursos você encontra no artigo já citado, WordPress, leia o artigo WordPress – Adicionar Posts 5 Galeria e o artigo WordPress – Adicionar Posts 7 Mídias – Página De Anexo.

O ponto 4 do arquivo de instruções (ReadMe – Instructions.txt) dá mais detalhes sobre a galeria, informando inclusive que a opção galeria só funciona com imagens e não com arquivos multimídia. Para quem já leu os artigos citados, sabe que isso é natural do WordPress.

Ainda nesse ponto 4 existe outro detalhe interessante: informa que apenas é preciso inserir a frase



no editor de páginas que a galeria é automaticamente inserida. Realmente funciona, mas isso já é nativo do WordPress e não exclusivo do tema, conforme informa o site do Codex do WordPress .

A última informação do arquivo de instruções diz que:

To get the fancy image zooming effect, put your image(s) in a paragraph with a class name of “gallery”. If you want your image to have a title, put it as the title attribute of the link to the image.

Traduzindo:

Para adicionar o efeito fancy image zooming, coloque uma imagem num parágrafo com uma class chamada gallery. Se você gostaria que sua imagem tivesse um título, adicione-o ao atributo title do link.

Esse efeito a qual ele se refere é o mesmo efeito de zoom da imagem na galeria. É dito que existe a possibilidade de adicionar esse efeito a qualquer imagem da página, mesmo não estendo numa galeria, assim como mostram as figuras 3 e 4:

efeito de zoom

efeito de zoom

Na figura 3 repare que é uma página comum com duas imagens. Foram feitos os ajustes necessário para que, quando a imagem for clicada, utilizar o efeito de zoom da galeria, conforme mostra a figura 4. Repare que os controles ‘Anterior’ e ‘Próximo’ não existem.

As mudanças necessárias devem ser feitas no código xHTML da página [figura 5]:

código xHTML da página

Repare que assim como diz a instruções, a imagem está num parágrafo com uma class chamada gallery (em amarelo) e que para aparecer o título é necessário editar o title do link
(em verde). Veja que a imagem ‘17.jpg’ (da figura 4) também tem o atributo title=”Casal Feliz!” na imagem, porém o que prevalece é o title=”Casal Feliz e Apaixonado!” do link.

Esse efeito zoom realmente é bem interessante. Faça os testes necessários e aprenda o máximo que puder. Estamos aí para tirar qualquer dúvida. No próximo artigo vamos abordar o cabeçalho desse tema. Não deixe de ler! Até lá!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Deixe o seu comentário, participe!

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.