Como personalizar um modelo de NexGen Gallery

Escrito por vail joy | Traduzido por tiago tostes
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como personalizar um modelo de NexGen Gallery
Com um modelo personalizado, você pode alterar a aparência geral da sua galeria (Comstock/Comstock/Getty Images)

O NextGEN Gallery é um poderoso complemento WordPress para criar, gerenciar e exibir álbuns e imagens. Ele oferece vantagens sobre o padrão Media Manager WordPress, dando-lhe controle extendido sobre o tipo de envio, categorização, ordem de exibição e exposição de fotos. O autor vai mais longe, fornecendo uma função que permite criar modelos de página personalizados para uso com os códigos curtos de NextGen. Nenhuma instrução é fornecida para usar esse recurso, o que pode deixar os usuários do NextGEN em dúvida.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Cópia baixada do complemento WordPress para NextGEN Gallery.

Lista completaMinimizar

Instruções

  1. 1

    Abra a pasta de complementos do NextGen Gallery e clique duas vezes em "View". Abra o arquivo "gallery.php" em um editor de HTML. Este arquivo é o fundamento para a página da galeria e exibe imagens de seu álbum como miniaturas com base nas configurações definidas no seu painel de administração NextGen. Para personalizar o modelo, você terá que editar as tags HTML, modificar classes de modelos ou adicionar tags de modelo.

  2. 2

    Comece por localizar a linha 47, que contém a "div" de fechamento do recipiente de miniaturas da galeria. Para uma descrição ou legenda aparecer abaixo de cada imagem, insira o seguinte código:

    <div class="tcaption"> <? php echo $ imagem-> descrição?> </ div>

    Agora, você terá de editar os modelos para personalizar a aparência de sua página da galeria, bem como adicionar um novo modelo "tcaption" para lidar com a aparência da descrição miniatura.

  3. 3

    Volte para a pasta de complementos e abra a pasta "css". Abra o arquivo "nggallery.css" no seu editor de HTML. Personalize os modelos como desejado. Para alterar a aparência de miniaturas de sua galeria, edite a classe ".ngg-gallery-thumbnail img". Por exemplo, para adicionar cantos arredondados e uma queda de sombra, mude o modelo para algo como isto:

    . NGG-galeria de miniaturas-img { background-color: # FFFFFF; border: 1px solid # 666; display: block; margin: 0px 4px 4px 5px; padding: 5px; position: relative; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 1px 2px 6px # 333; -moz-box-shadow: 1px 2px 6px # 333; -webkit-box-shadow: 1px 2px 6px # 333;

    }

  4. 4

    Crie o seu modelo personalizado para a sua descrição de miniatura. Por exemplo:

    . tcaption { padding: 4px; font-size: 9px; font-style: italic; }

  5. 5

    Salve em um novo local, sem modificar o nome do arquivo. Como alternativa, copie os modelos alterados em seu documento WordPress "style.css". Salve o arquivo "gallery.php" como "gallery-mygallery.php" em um novo local.

  6. 6

    Ligue para o seu servidor Web e crie uma nova pasta dentro da sua pasta tema WordPress. Renomeie-o como "nggallery" para ser reconhecido pelo complemento. Envie seu arquivo modelo para essa nova pasta.

  7. 7

    Envie seu "nggallery.css" modificado para sua raiz de temas ou pasta principal onde seus arquivos de temas "page.php" estão. Se você copiou seus modelos em sua folha de temas de modelos, você pode pular esta etapa.

  8. 8

    Crie uma página no seu painel de administração do WordPress e use o botão editor do NextGen para adicionar o código curto da galeria desejada . Insira o seguinte valor para usar o novo modelo personalizado:

    template = mygallery

    Seu código curta final deve ser algo como isto:

    [nggallery id = modelo 2 = mygallery]

    Visualize a página para ver as alterações e fazer ajustes em seus modelos conforme necessário.

Dicas & Advertências

  • Use o navegador Opera ou o complemento Firebug para o Firefox para ver a versão ao vivo da página da galeria e inspecionar cada trecho do código fonte para compreender visualmente quais as classes fazem o que.
  • Evite definir o tamanho em seu CSS já que isso é feito pelo NextGEN nas configurações de administração. Como miniaturas e imagens são redimensionadas e exibidas de forma dinâmica, estabelecer um tamanho em sua folha de modelo vai ter resultados imprevisíveis ou será ignorado completamente.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível