A publicação de imagens dentro dos artigos de um blog acrescenta valor ao conteúdo transmitindo muitas informações e descritivos de forma prática. Através de imagens é possível aprimorar a explicação de um texto ou apenas ilustrá-lo de modo a compor mais agradavelmente o design do site e estimular a leitura desse artigo. O WordPress possui um ótimo recurso de Galeria, onde os arquivos de imagem enviados para determinado post ou página ficam armazenados e podem ser exibidos em tela, todos de uma única vez.

A galeria também possui suas próprias formatações e opções, no entanto, alguns tópicos podem ser otimizados em sua aplicação como o modo que as imagens são linkadas, código fonte de estilos misturado com HTML e modelo de exibição que serão tratados nesse artigo. Veja abaixo algumas boas aplicações do uso das galerias de imagens no WordPress:

USANDO A GALERIA

Ao editar um artigo através do WordPress, logo acima da caixa de edição na guia Upload/Inserir clique sobre o ícone de imagens e faça o upload dos arquivos que deverão compor sua galeria. Enviado os arquivos, edite suas opções clicando sobre o link ‘Mostrar’ ao lado de cada miniatura e ao final das alterações, confirme-as clicando sobre ‘Salvar todas as mudanças’.

Note que na aba Galeria, logo abaixo da lista dos arquivos inseridos surgiu uma nova guia com as opções para configuração da galeria. Formate sua galeria e clique sobre o botão inserir Galeria. Caso visualize seus artigos através do editor HTML poderá conferir o shortcode [ gallery ] – seguido ou não de parâmetros, dependendo de sua formatação – inserido dentro do conteúdo; ele será responsável por exibir no referido espaço as imagens da galeria.

Caso realize sua edição no modo Visual aparecerá uma área demarcada simbolizando o espaço que a galeria irá assumir. Clique sobre ela para abrir os botões para editar e/ou excluir a galeria.

CÓDIGO-FONTE E ESTILIZAÇÃO

Visualize o resultado da implementação da galeria em seu blog e perceba que algumas formatações são impostas pelo WordPress. Dependendo da versão do WordPress em uso, consultando o código fonte, você poderá conferir o seguinte trecho de formatações de estilo inseridos a sua página:

<style type='text/css'>
	#gallery-1 {
		margin: auto;
	}
	#gallery-1 .gallery-item {
		float: left;
		margin-top: 10px;
		text-align: center;
		width: 20%;
	}
	#gallery-1 img {
		border: 2px solid #cfcfcf;
	}
	#gallery-1 .gallery-caption {
		margin-left: 0;
	}
</style>

Nas versões mais recentes essa prática foi abolida por padrão. Porém caso encontre esse código (ou algum outro semelhante) inserido pelo sistema com o objetivo de formatar a galeria você possui duas alternativas: Atualizar o WordPress ou (de modo temporário até conseguir atualizar o sistema sem causar problemas devidos aos plugins e/ou temas ativos) utilizar o plugin Gallery Shortcode Style to Head.

O plugin possibilita a edição do estilo ao acessar a página Configurações > Mídia do painel e envia as marcações de dentro do corpo do html ‘body’ para seção de cabeçalho ‘head’. Através da mesma página é possível optar por não exibir o css, permitindo adotá-lo dentro do style.css ou outro arquivo CSS do tema.

DESTINO DOS LINKS

Ao editar as opções da galeria você definiu o link das miniaturas para a página de anexos ou às próprias imagens. É possível que seu tema não possua uma página de anexos responsáveis por exibir as imagens como deveria, nesse caso ao optar pela utilização do link direto para as imagens o visitante acaba deixando de visualizar seu site e a experiência dele pode não ser das melhores.

Para solucionar esse problema uma prática muito utilizada é a exibição de box com as imagens ampliadas. Instale o plugin jQuery Lightbox For Native Galleries Settings e veja o resultado diretamente em sua galeria publicada, sem realizar nenhuma alteração em código ou formatação da galeria.

Indepentemente de ter escolhido os links para anexos ou imagens o plugin funcionará corretamente exibindo as imagens em tamanho completo juntamente com seus respectivos títulos e as opções de avançar e voltar entre os itens da galeria. Com o uso do plugin é possível atribuir a imagens soltas (fora de galerias) a exibição do ColorBox definido para o link que conterá a imagem a classe ‘lightbox’:

<a href="..." class="lightbox"><img src="..." alt="..." /></a>

Através da página de opção do plugin inserida no menu ‘Configurações’ você pode optar por um estilo que melhor se adeque ao design do seu blog.

GALERIA EM FORMATO DE SLIDES

Por padrão a exibição das imagens de uma galeria é feita lado a lado, dividida pelo número de colunas informado nas opções da mesma. Com a utilização do Photo Galleria as galerias serão transformadas de modo automático em um slideshow. A página de opções do plugin, disponível no menu Configurações do painel, possui formatação de design, dimensões, efeitos e também um guia rápido de consulta para eventuais dúvidas de sua utilização.

Essas são algumas sugestões de como aprimorar seu tema com as galerias. Você utiliza algum outro plugin para realização dessas tarefas? Deixe sua opinião e colaboração nos comentários desse post.

Abraços

Autor: Mazetto

Blog do Autor | Artigos do Autor:

Desenvolvedor web especializado em WordPress. Trabalha como freelancer de diversas agências do Brasil na criação de plugins, templates e consultoria à ferramenta.

Templates Wordpress que Recomendamos:

  • U-Design WordPress Theme
  • Tersus - Responsive WordPress Theme
  • Modernize - Flexibility of Wordpress
  • Good Space - Responsive Minimal WP Theme
  • Sterling - Responsive Wordpress Theme
  • Karma - Clean and Modern Wordpress Theme
  • Doover Premium WordPress Theme
  • MayaShop - A Flexible Responsive e-Commerce Theme
  • SmartStart WP - Responsive HTML5 Theme
  • Striking Premium Corporate & Portfolio WP Theme
  • Core Minimalist Photography Portfolio
  • King Size - fullscreen background WordPress theme

Gostou deste artigo? Então torne-se fã do Blog no Facebook!


JobRoller - Premium Job Board Theme

Comentários dos Alunos


  1. Alessander Raker
    16.05.2011

    Estava mesmo procurando para o site de uma cliente este pluguin que me informou. Não sabia que era tão simples assim instalar um lightbox
    Obrigado

    Responder


  2. jean
    24.05.2011

    Tenho um blog sobre sucesso no multinível, estou tendo algumas dificuldades para profissionaliza-lo. Uso a plataforma world press e estou trabalhando com o tema flash news.Gostaria de saber se tem como colocar um plugim de slides em cada post ou um na página de inicio( o que seria melhor )acho que aqueles flashs seria legal, mas não sei por onde começar.
    meu blog é pago mas não estpu conseguindo mexer e deixá-lo legal, vcs tem como me ajudar a deixa-lo profissional?

    Responder


  3. Evelin
    22.01.2012

    Olá ,os seus tutorias é pro wordpress.com ?
    eu não sei onde muda o tema com codigos.
    gostaria de saber se tem que baixar o wordpress, você pode me ajudar ?
    por favor

    Responder

Comente o Artigo!

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
11485

Subscrever Newsletter
Subscreva a Newsletter:


Elegant Themes

Wix

Theme Forest

Mojo Themes



Assine a Escola Wordpress Assine a Newsletter da Escola Wordpress Escola Wordpress no Twitter Escola Wordpress no Facebook Escola Wordpress no Youtube Escola Wordpress no Google Buzz