COMO CRIAR UMA GALERIA DE IMAGENS NO WORDPRESS

O WordPress torna incrivelmente simples adicionar uma galeria de imagens em qualquer lugar em seu site, mas muitos proprietários do site não conseguem aproveitar esse poderoso recurso.

Neste artigo, vamos levá-lo através da adição de uma galeria de imagens, incorporando uma apresentação de slides e azulejos atraentes, e destaque alguns plugins de galeria úteis.

Galerias de imagens e WordPress

Galerias de imagens estiveram em torno do WordPress desde todo o caminho até 2008 com o WordPress 2.5 . A versão 2.5 foi uma versão histórica de muitas maneiras, e a exibição simultânea de shortcodes e galerias foi saudada com entusiasmo pelos usuários. Matt Mullenweg foi apenas um dos muitos que destacou a funcionalidade em seu blog pessoal .

Uma galeria inicial de Matt Mullenweg
Matt Mullenweg foi um entusiasta da galeria inicial.

O desenvolvimento depois disso foi relativamente baixo, com as principais mudanças ao longo dos sete anos seguintes, sendo a revisão do carregador de mídia no WordPress 3.5 e outras melhorias na versão 3.9 . Com aintrodução de imagens responsivas noWordPress 4.4 , as imagens estão muito voltadas à agenda, por isso é um bom momento para rever os conceitos básicos de criação de uma galeria de imagens.

Antes de criar nossa galeria, vale a pena apontar algumas referências padrão do Codex referentes às galerias de imagens para que você as tenha disponível para referência:

  • Inserindo mídia em posts e páginas: os conceitos básicos de upload de imagens estão bem cobertos no Codex .
  • Biblioteca de mídia: se você não está familiarizado com os conceitos básicos da Media Library , agora é tão bom quanto qualquer outro para revisá-los.
  • The WordPress Gallery: Esta página dedicada do Codex irá levá-lo através do básico das galerias no WordPress.

Com essas apresentações fora do caminho, vamos resolver com a criação de nossa própria galeria de imagens.

Como criar uma galeria de imagens básica

Neste passo a passo, passaremos pela adição de uma galeria de imagens simples a um site local, olhamos para editar as galerias existentes e, em seguida, adicione um pouco mais de visual pizazz via Jetpack . Também chamaremos sua atenção para alguns dos principais plugins de galeria que você pode usar para expandir a funcionalidade básica oferecida.

Estamos usando uma instalação local do WordPress 4.4 e aproveitando o novo tema Twenty Sixteen para uma rotação. Vamos olhar para adicionar algumas fotos atraentes de corujas para o nosso site – proveniente do recurso fantástico que é Pixabay – porque, vamos enfrentá-lo, há algo fundamentalmente impressionante sobre corujas.

Aqui está um instantâneo da página que eu gostaria de apimentar com algumas imagens de alta qualidade – como você pode ver, é muito excêntrico agora.

Postagem no blog da coruja sem fotos
Não há muito para chamar a atenção para o nosso blog atual.

Vamos arrancar as coisas movendo-se para o administrador, selecionando nossa postagem, escolhendo um ponto de inserção e clicando no botão Adicionar mídia na barra de ferramentas.

Adicionando mídia a uma galeria
Escolha o seu ponto de inserção e selecione Adicionar mídia .

Estamos adicionando uma galeria a uma publicação aqui, mas você pode adicionar galerias em postagens e páginas. Você pode selecionar qualquer lugar na sua área de conteúdo para inserir – adicionamos uma nova linha acima para tornar o ponto de inserção limpo. Clicando no botão Adicionar mídia , o chutes na interface do Media Uploader e Create Gallery é, sem surpresa, a opção de ir aqui.

Como você pode ver na captura de tela abaixo, selecionar esta opção oferece a possibilidade de carregar imagens totalmente novas ou selecionar itens que já estão na Biblioteca de mídia. Você pode alternar entre adicionar imagens e selecionar imagens existentes, e você pode adicionar imagens uma de cada vez ou arrastar várias imagens para dentro da janela.

Fazendo upload de fotos para uma galeria
Nós carregamos seis fotos corujas para nossa galeria. A coruja superior esquerda parece super feliz (ou cansada … Não tenho certeza qual delas).

No nosso caso acima, temos seis imagens de corujas bastante excelentes carregadas. Como você pode ver, uma marca de seleção simples indica quais são incluídos e um tiquetaque azul indica se você está editando os detalhes do anexo dessa imagem.

Clicando no botão Criar um novo botão da galeria , entra na caixa de diálogo Editar Galeria onde podemos rever as opções básicas sobre como nossas imagens serão exibidas. Todos podem ser anulados em uma data posterior, mas é útil poder ajustar as coisas nesta fase.

Editar opções da galeria
A caixa de diálogo Editar Galeria nos fornece algumas opções básicas de exibição para escolher.

Existem dois itens principais que você pode ajustar nesta etapa: o pedido de imagens e as configurações gerais da galeria. O pedido é facilmente alcançado, arrastando e soltando o conteúdo do seu coração, ou simplesmente clicando no botão Reverter se isso é tudo o que você precisa.

Quando se trata de Configurações da Galeria, você tem quatro opções para jogar:

  1. Link para: Escolha entre as opções padrão de Nenhum, Arquivo de mídia e Página de anexos .
  2. Colunas: três colunas são as configurações padrão aqui.
  3. Ordem aleatória: você pode optar por exibir imagens em uma ordem aleatória.
  4. Tamanho: escolha entre as opções padrão de Miniatura, Médio, Grande e Tamanho Completo .

Uma vez que fizemos nossas seleções iniciais, clicar em Inserir galeria nos mostra de volta para o editor, onde podemos ver nossas coleções de corujas em toda a sua glória pluma.

Vista da galeria depois de inserida no editor
Boom – nossa galeria foi inserida com sucesso na página.

Um clique rápido do botão de pré -visualização mostra-nos que tudo está aparecendo muito bem no front-end também.

Galeria da coruja exibida na frente.
Nossa galeria de corujas exibidas no front-end.

Em termos básicos sobre a adição de uma galeria, é praticamente tão simples quanto as etapas descritas acima. Você deve poder adicionar uma galeria básica a qualquer página ou publicação em seu site literalmente em poucos minutos.

Você também pode adicionar uma ou mais galerias de imagens diretamente às suas postagens e páginas por meio de um shortcode. Consulte a página Código correto da Galeria Codex para detalhes completos de sintaxe e opções.

As coisas estão bem e dandy como estão no nosso exemplo, mas e se quisermos fazer algumas mudanças? Por exemplo, no momento, clicar em nossos amigos emplumados não fará nada à medida que a opção Link paraestiver configurada para nenhum – seria bom ter um efeito de slideshow aqui de alguma forma, se possível.

As imagens também podem provavelmente fazer com algumas legendas enquanto nós estivermos nisso e um layout de duas colunas pode dar-lhes mais espaço para respirar na página. Parece que é hora de cobrir opções para editar nossa galeria.

Como editar sua galeria de imagens

As coisas não podem ser mais fáceis aqui – basta clicar em sua galeria no editor de postagens e você verá dois botões que permitem excluir a galeria ou voltar à tela de edição na qual estávamos anteriormente.

Botão Editar as galerias
Basta clicar em sua galeria para acessar as opções de edição.

No nosso caso, mudamos para um layout de duas colunas, atingimos o tamanho da imagem até o Médio e adicionamos algumas legendas apropriadas para identificar nossas corujas individuais.

Layout da galeria de duas colunas
Mudando para um layout de galeria de duas colunas.

Há, no entanto, um problema imediato aqui. Nossa ótima grade de miniatura simétrica foi para iniciantes. Além disso, ainda não conseguimos ver nossas corujas em toda a sua glória através de uma apresentação de slides de algum tipo. Vejamos uma maneira simples de corrigir esses dois problemas.

Adicionando uma Galeria em mosaico e uma apresentação simples com Jetpack.

Uma breve nota antes de irmos mais longe: usaremos o plugin Jetpack para descobrir nossa galeria aqui, mas há muitas outras maneiras de fazer isso.Algumas pessoas podem ter preocupações relacionadas a inchaço sobre o Jetpack, então tenha em mente que está longe de ser a única opção. Qualquer um dos plugins da galeria que listaremos mais tarde deve ser capaz de ajudá-lo a atingir os mesmos objetivos (e muito mais além).

Estamos usando o Jetpack em um ambiente local, então precisamos executá-lo no Modo de Desenvolvimento, adicionando uma configuração simples ao wp-config.php conforme explicado na documentação do Jetpack.

Jetpack rodando no modo de desenvolvimento
Uma pequena alteração no wp-config.php nos permite executar o Jetpack localmente no modo de desenvolvimento.

Depois de instalar o Jetpack e editado o wp-config.php , clique em Jetpackno menu do lado do administrador e você deve ver uma mensagem confirmando que você está executando no Modo de Desenvolvimento conforme ilustrado acima.

A partir daqui, deslize a página e clique no botão que diz Veja os outros 27 recursos do Jetpack . Agora você deve olhar para uma lista de potenciais módulos Jetpack que você pode usar. Desça um pouco a página e você deve ver a opção de Galerias de azulejos disponível. Passe o mouse sobre isso e você verá uma opção para ativar a funcionalidade aparecer.

Ativar galerias em mosaico
Passe o mouse sobre as Galerias de azulejospara revelar o botão Ativar .

Depois de clicar em Ativar , passe o mouse sobre as Galerias de azulejos novamente e você deve ver uma opção para configurar a nova funcionalidade.

Configurar galerias de azulejos
Clique em Configure para ativar a decoração elegante.

Isso leva você diretamente para Configurações > Mídia em que você verá uma nova opção de caixa de seleção chamada Galerias de azulejos .

Escolha galerias em mosaico
Selecione as Galerias em mosaico como uma opção.

Depois de ativar, se retornarmos a uma prévia de nossos amigos emplumados, as coisas devem estar muito mais arrumadas agora – as versões maiores das imagens ainda estão sendo usadas, mas tudo agora está ordenadamente organizado em uma grade de azulejos.

Galeria de azulejos de fotos corujas.

As coisas estão muito mais boas. Se você voltar a entrar para editar sua galeria nesta fase, você verá que agora também tem a opção de selecionar de vários tipos de galerias diferentes .

Opções do tipo de galeria
Selecione entre diferentes tipos de galeria.

Cobrimos um monte de terreno e tudo o que resta agora é realmente definir nossas corujas de forma gratuita ao ativar a opção Carousel no Jetpack – uma experiência de navegação de fotos em tela cheia e cheia. Estamos a olhar para a mesma série de passos de ativação que antes com as Galerias de azulejos. Retorne à sua lista de módulos Jetpack, ative

Estamos a olhar para a mesma série de passos de ativação que antes com as Galerias de azulejos. Retorne à sua lista de módulos Jetpack, ative o Carousel e toque Configure .

Ativar e configurar o Carrossel
Ative o Carousel como fez com as Galerias de azulejos.

Mais uma vez, foram encaminhados de volta para Configurações> Mídia e desta vez, você notará uma nova opção chamada Image Gallery Carousel . As opções aqui são bastante diretas – você pode ativar ou desativar a funcionalidade, escolher se mostrar dados Exif e selecionar entre preto ou branco como seu plano de apresentação de slides.

Ativar Carrossel de Imagem

Desta vez, quando visualizamos nossa publicação, clicar em qualquer uma das imagens da galeria exibe uma slideshow de slick-looking, totalmente funcional que mostra nossas imagens na melhor luz possível e permite uma fácil navegação entre elas.

Detalhes da apresentação de slides da galeria
O módulo Carousel nos permite visualizar imagens em detalhes e navegar facilmente entre elas.

Como mencionamos anteriormente, o uso do Jetpack é apenas uma forma de construir a funcionalidade de galeria nativa do WordPress dessa maneira. Se você está procurando por outra maneira simples de executar algo semelhante sem o Jetpack, confira o guia rápido do BobWP para usar o Gallery Carousel sem o plugin Jetpack .

Plugins da Galeria de Imagens de Qualidade

Cobrimos os plugins da galeria de imagens com alguma profundidade antes do último no blog, então não iremos sobre muito terreno antigo aqui. Se você estiver procurando por funcionalidades que as opções padrão da galeria ou o Jetpack não conseguem lidar com isso, comece sua busca com qualquer um desses dois plugins de galerias de peso pesado.

  • 1. Galeria NextGEN

    Quando se trata de plugins de galeria de WordPress totalmente atualizados, é difícil procurar a Galeria do NextGEN . Com mais de um milhão de instalações ativas e um longo histórico atrás dele, tem sido o plugin de galeria líder por algum tempo agora.A versão gratuita do plugin oferece um design muito receptivo, uma seleção de caixas de luz incorporadas e opções de apresentação de slides, a capacidade de adicionar álbuns inteiros de galerias ao seu site e uma série de outros recursos.Retroceda as versões premium NextGEN Plus ouNextGEN Pro e você começa a entrar em opções muito sofisticadas mais adequadas para fotógrafos profissionais, como comércio eletrônico integrado ,proteção de imagens, proteção de imagem e a capacidade de vender downloads digitais. Os detalhes de preços completos para os dois pacotes premium estão disponíveis no site NextGEN.

    Interessado em 1. NextGEN Gallery?

    DETALHES DEMO DOWNLOAD
  • 2. FooGallery

    A FooGallery anuncia-se como simples para os usuários e altamente flexível para desenvolvedores e entrega em ambos os aspectos. A versão gratuita do plugin oferece opções lisas para pedir suas imagens, suporte para lightbox, modelos de galeria e a capacidade de importar de galerias do NextGEN.As galerias de vídeos também podem ser integradas através do plugin FooVideo premium que permite adicionar conteúdo Vimeo e YouTube com facilidade .

    A FooGallery distingue-se com uma série de extensões interessantes que você pode usar para expandir sua funcionalidade básica e suas referências para desenvolvedores abrem a capacidade de codificar suas próprias com relativa facilidade .

    Confira a página FooGallery 101 para obter uma explicação detalhada das configurações comuns e suas extensas páginas de demonstração para obter exemplos do plugin em ação.

    Interessado em 2. FooGallery?

    DETALHES DEMO DOWNLOAD

Empacotando

Adicionar galerias às suas postagens e páginas é uma ótima maneira de aumentar o engajamento e o tempo do usuário no local e uma coisa obviamente sensata em um mundo cada vez mais obcecado com o conteúdo do Instagram e Pinterest.

O WordPress coloca uma interface de upload incrivelmente fácil ao seu alcance e, em seguida, deixa o caminho claro para você levar as coisas o quanto quiser em termos de personalização e extras extravagantes.

Comece por familiarizar-se com os conceitos básicos como descrevemos acima e, em seguida, procure aproveitar ao máximo seus recursos de imagem com opções como Jetpack, NextGEN Gallery e FooGallery, e seu site em breve estará procurando um corte acima do resto.

Como você está atualmente gerenciando suas próprias galerias de imagens?Existe uma opção que você acha que devemos destacar? Deixe-nos saber nos comentários abaixo.

AVALIE GORA MESMO!
More from William Freitas

COMO VENDER PELA INTERNET [11 DICAS]

Saber que somos mais de 100 milhões de brasileiros com acesso a...
Read More

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *