Como inserir uma galeria de fotos em uma página wordpress ou post

Você pode usar a página WordPress Insert mídia para inserir uma galeria de fotos completa em suas páginas (ou mensagens). Siga estes passos para inserir uma galeria de fotos em uma página (ou post):

  1. Na página (ou post) em que deseja inserir uma galeria, upload de suas imagens.

    Video: Como Criar Uma Galeria de Fotos para WordPress

  2. Em Adicionar nova página (ou Add New Post) página, clique no botão Adicionar mídia.

    A caixa de diálogo Inserir mídia é exibida.

  3. Clique no link Galeria no lado esquerdo da caixa de diálogo Inserir Media Create.

    Video: Como Inserir Galerias Nativas em seu Post Wordpress

    A guia Gallery aparece apenas para mensagens ou páginas que têm uma ou mais imagens carregadas.

    Essa guia exibe miniaturas de todas as imagens que carregou para a sua página (ou post).

  4. Clique no botão Criar uma nova galeria.

    Video: Adicionando Galeria de Fotos no Site usando Wordpress

    Esta etapa abre a página Editar Gallery, onde você pode arrastar e soltar as imagens para determinar a ordem em que devem aparecer no seu site.

  5. Na seção Configurações Galeria, definir as opções de exibição para a sua galeria:

  6. Link para: Selecione arquivo de mídia (o arquivo de imagem física) ou Anexo página (uma página que exibe apenas a própria imagem).

  7. Ordem aleatória: Selecione esta opção para tornar as imagens aparecem em ordem aleatória.

  8. colunas: Selecione quantas colunas de imagens que você deseja exibir em sua galeria.

  9. Clique no botão Inserir Galeria na parte inferior da caixa de diálogo.

    retornos WordPress para o Adicionar nova página (ou Add New Post) página. Você pode ver que o WordPress tem inserido em sua página (ou post) um pedaço de curto código (Um trecho de código que o WordPress usa para executar certas funções, tais como a exibição galeria) que se parece com isso:

    Nota: Você tem que mudar para a vista HTML (clique na guia HTML) para ver este código.

  10. (Opcional) Na página (ou Post) caixa de edição na vista de HTML, você pode alterar a ordem de apresentação das imagens na galeria, assim como a marcação (tags HTML ou seletores CSS), digitando o seguinte código curto:

    captiontag: Muda a marcação que rodeia a legenda da imagem, alterando o código curto galeria. Por exemplo,

    coloca as tags em torno da legenda da imagem. (A marca, que é considerado um elemento de nível de bloqueio, cria um recipiente separado para o conteúdo.)

    Para ter a galeria aparecer em uma linha própria, use o seguinte código:



    Este código coloca etiquetas em torno da legenda da imagem. A marcação padrão para o captiontag opção é dd.

    icontag: Define a marcação HTML ao redor de cada imagem em miniatura individual em sua galeria. Alterar a marcação ao redor do icontag (Ícone de miniatura) da imagem, alterando o código curto galeria para algo parecido com isto:

    Este código coloca etiquetas em torno de cada ícone de miniatura. A marcação padrão para icontag é dt.

    itemtag: Define a marcação HTML em torno de cada item em sua galeria. Alterar a marcação ao redor do itemtag (Cada item) na galeria, alterando o código curto galeria para algo parecido com isto:

    Este código coloca etiquetas em torno de cada item da galeria. A marcação padrão para o itemtag é dl.

    ordenar por: Define a ordem em que as imagens mostrar dentro de sua galeria. Alterar a ordem usada para exibir as miniaturas na galeria alterando o código curto galeria para algo parecido com isto:

    Este código exibe as miniaturas em ordem crescente menu. Outro parâmetro que você pode usar é ID_order ASC, que exibe as miniaturas em ordem crescente de acordo com suas identificações.

  11. Quando terminar, clique no botão Preview para visualizar seu Alterações de quando você estiver satisfeito, clique no botão Publicar para publicar sua página.

    Galeria de código curtoSaída
    A galeria de quatro colunas contendo imagens médias
    A galeria de dez coluna contendo imagens em miniatura puxado
    o post com o ID 215
    Uma galeria de três colunas (padrão) em que cada imagem é
    cercado por
    tags e a legenda da imagem é cercada por tags

Siga estes passos para editar a folha de estilo para seu tema para incluir os estilos de galeria no CSS:

  1. A partir do painel de controle, escolher Aparência → Temas → Editor e, em seguida, abrir sua folha de estilo CSS.

  2. Defina o estilo do marcas em sua folha de estilo.

    o Tags Criar um elemento inline. Um elemento contido dentro de um tag permanece na mesma linha que o elemento antes ele- não há nenhuma quebra de linha. Você precisa de um pouco de conhecimento de CSS para alterar a Tag. Aqui está um exemplo do que você pode adicionar à folha de estilo (style.css) Para o seu tema atual para definir o estilo do Tag:

    span.gallery-icon img {padding: 3px; background: white-border: 1px solid black-margin: 0 5px;}

    Colocar este pouco de CSS na folha de estilo (style.css) Do seu tema ativo automaticamente coloca uma borda preta de 1 pixel em torno de cada miniatura, com 3 pixels de preenchimento e um fundo branco. As margens esquerda e direita estão 5 pixels de largura, criando bom espaçamento entre as imagens na galeria.

  3. Clique no botão Atualizar arquivo para guardar as alterações ao seu estilo (style.css) Molde.

Aqui está uma galeria de fotos usando as etapas anteriores e o exemplo CSS no padrão Vinte Treze tema. Aqui está o código curto galeria:

Matt Mullenweg, co-fundador da plataforma WordPress, criou uma extensa galeria de fotos usando as opções galeria built-in no WordPress.

Alguns plugins WordPress úteis trabalhar em conjunto com o recurso Galeria de WordPress.


Publicações relacionadas