Como criar uma galeria de álbuns de fotos no WordPress sem plug-in
Publicados: 2021-11-12
Neste artigo, mostraremos como criar uma galeria de álbuns de fotos no WordPress sem um plugin.
Todos nós sabemos que com plugins no WordPress, nada é impossível de alcançar.
Mas quanto mais plugins você usa, mais o desempenho do seu site diminui.
Para qualquer site, a galeria desempenha um papel muito importante.
Se sua galeria envolve trabalhos e filtros complicados, o desempenho geral do site pode ser prejudicado.
Uma galeria de álbuns de fotos deve ter várias fotos dentro dela.
Aqui estamos criando um álbum mensal para que cada álbum tenha uma imagem de capa e quando a imagem de capa for clicada, você leva para dentro do álbum para conferir cada foto individualmente.
Você também precisa saber como criar uma galeria de álbuns de fotos no WordPress sem um plugin para fazer tarefas complicadas para as quais você precisava comprar um plugin premium se quisesse usar um plugin.
Além disso, você pode usar um desses softwares de edição de fotos para editar fotos que serão anexadas à sua galeria de álbuns de fotos.
Etapas para criar uma galeria de álbuns de fotos no WordPress sem um plug-in
Todos os recursos necessários para atingir o objetivo podem ser feitos usando as funcionalidades internas do WordPress. Considere cada álbum mensal como um post com sua própria página única. Considere cada imagem dentro dos álbuns como um anexo com página única.
Os álbuns precisarão de uma miniatura e o recurso está embutido no WordPress. Se o seu site for o site de um fotógrafo, você poderá transformar suas postagens padrão em um álbum. Caso contrário, você precisa criar um tipo de postagem personalizado.
Criar plug-in específico do site (não pronto) e tipo de postagem personalizado
Você precisa criar um plugin específico do site que não dependa do seu tema. Eles são úteis para criar tipos de postagem personalizados, adicionar códigos de acesso, mostrar miniaturas e similares. Para criar um plugin específico do site, você precisa ir ao diretório de plugins usando FTP.
Em wp-content/plugins/ crie uma nova pasta e nomeie a pasta com o mesmo nome do plugin que você deseja criar. Entre na pasta e crie um arquivo php com o mesmo nome da pasta. Cole o seguinte código dentro do arquivo.
/* Nome do plug-in: Plug-in do site para website.com Descrição: alterações de código específicas do site para website.com */ /* Começa a adicionar funções abaixo desta linha */ /* Parar de adicionar funções abaixo desta linha */
Salve o arquivo e saia. O código mencionado acima não tem nenhum significado e será substituído quando o tipo de postagem personalizado for criado.
Gere o código para o tipo de postagem personalizado do WordPress Custom Post Type Code Generator.
Exibindo tamanhos de imagem adicionais e campos adicionais–
No Painel de administração, vá para Aparência e depois para Editor. Localize o arquivo functions.php e adicione o seguinte código para registrar o tamanho de imagem adicional para a exibição da grade.
add_image_size('album-grid', 225, 150, true);
Se você deseja adicionar campos personalizados adicionais ao Media Uploader, como o nome do fotógrafo, suas páginas e outras informações ao fazer upload de uma imagem, você precisa adicionar o seguinte código no functions.php.
/**
* Adicione os campos Nome do fotógrafo e URL ao carregador de mídia
* @param $form_fields array, campos a serem incluídos no formulário de anexo
* @param $post objeto, registro de anexo no banco de dados
* @return $form_fields, campos de formulário modificados
*/
function be_attachment_field_credit( $form_fields, $post ) {
$form_fields['be-photographer-name'] = array(
'label' = 'Nome do fotógrafo',
'entrada' = 'texto',
'value' = get_post_meta( $post-ID, 'be_photographer_name', true ),
'helps' ='Se fornecido, o crédito da foto será exibido',
);
$form_fields['ser-fotógrafo-url'] = array(
'label' ='URL do fotógrafo',
'entrada' = 'texto',
'value' = get_post_meta( $post-ID, 'be_photographer_url', true ),
'helps' = 'Adicionar URL do fotógrafo',
);
return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );
/**
* Salve os valores do nome do fotógrafo e URL no carregador de mídia
* @param $post array, os dados de postagem para banco de dados
* @param $attachment array, campos de anexo do formulário $_POST
* @return $post array, dados de postagem modificados
*/
function be_attachment_field_credit_save( $ postagem, $ anexo ) {
if( isset( $attachment['be-photographer-name'] ) )
update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name']);
if( isset( $attachment['ser-fotógrafo-url'] ) )
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url'] ) );
retornar $ postagem;
}
add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );
Como você pode ver, ele adicionará dois campos de texto no Media Uploader, a saber, Nome do fotógrafo e URL do fotógrafo.
Criando páginas para exibir todos os álbuns
Agora, é hora de criar alguns álbuns (tipos de postagem personalizados) e adicionar fotos a eles. A imagem em destaque será a imagem da capa do álbum. O conteúdo que você adicionar à área de conteúdo da postagem se tornará a descrição do álbum.
Página de modelo para álbuns
Crie um arquivo e nomeie-o como archive-albums.php. Copie o código do cabeçalho, rodapé, barra lateral e outros elementos da interface do usuário e cole nele. Cole o seguinte código nele para mostrar todos os álbuns em uma página.
<li class="album-grid">a href=" title=""</a></li>
post_type == 'álbuns' $post-post_status == 'publicar' ) {
$ anexos = get_posts( array(
'post_type' ='anexo',
'posts_per_page' =-1,
'post_parent' =$post-ID,
'excluir' =get_post_thumbnail_id()
));
if ( $ anexos ) {
foreach ( $ anexos como $ anexo ) {
$class = "pós-anexo mime-" . Sanitize_title( $attachment-post_mime_type );
$title = wp_get_attachment_link( $attachment-ID, 'album-grid', true);
echo '<li class="' . $class . ' album-grid">' . $título. '</li>';
}
}
}
Coloque o seguinte código no arquivo CSS principal do seu tema para que as imagens da capa sejam mostradas em uma grade.
.album-grid{largura: 225px; altura: 150px; flutuar: esquerda; estilo de lista: nenhum; tipo de estilo de lista: nenhum; margem: 0 18px 30px 0px;}
Página de modelo para cada imagem
Crie um arquivo e nomeie-o como single-attachments.php. Copie todo o código do single.php pré-construído do tema. Você pode encontrá-lo em Editor no menu Aparência. Em seguida, encontre o código do loop em seu single-attachments.php e substitua essa seção pela seguinte.
if ( have_posts() ): while ( have_posts() ) : the_post();
$photographer = get_post_meta($post-ID, 'be_photographer_name', true);
$photographerurl = get_post_meta($post-ID, 'be_photographer_url', true);
<h1>the_title();</h1>
<div class="photometa"><span class="photographername"> echo $photographer; </span> // <a href=" echo $photographerurl " target="_blank" class="photographerurl" rel="noopener noreferrer"> echo $photographerurl </a></div>
<div class="entry-attachment">
if ( wp_attachment_is_image( $post-id ) ): $att_image = wp_get_attachment_image_src( $post-id, "full");
<p class="anexo"><a>id); " title=" the_title(); " rel="attachment"<img src=" echo $att_image[0];" width=" echo $att_image[1];" height="echo $att_image[2];" class="attachment-medium">post_excerpt ;" /</a>
</p>
senão :
<a>ID) " title=" echo wp_specialchars( get_the_title($post-ID), 1 )" rel="attachment"echo basename($post-guid) </a>
fim se;
</div>
fim;
fim se;