WordPress SelfVersão 6.5Desde então, não precisa de recorrer a plug-ins de terceiros para criar efeitos de lightbox. Esta funcionalidade foi integrada no núcleo do WordPress, especialmente para quem utiliza o editor de blocos do WordPress (Gutenberg). Como resultado, adicionar imagens e ativar efeitos de lightbox para elas é agora mais fácil e mais eficiente.

Neste tutorial, vamos ver como criar uma lightbox do WordPress para o seu site sem um plugin.

O que é uma lightbox do WordPress?

Uma caixa de luz é umMétodo de visualização de imagens pop-upQuando o utilizador clica numa imagem na página, a imagem é apresentada num tamanho maior no ecrã, enquanto o fundo da página é escurecido para realçar a imagem. Este efeito é frequentemente utilizado para a apresentação de imagens ou de produtos, proporcionando uma melhor experiência ao utilizador.

Âmbito de aplicação

Este tutorial destina-se apenas a quem utiliza o editor de blocos do WordPress. Se estiver a utilizar o editor clássico, recomenda-se que mude primeiro para o editor de blocos para experimentar as funcionalidades mais recentes do WordPress.

Passo 1: Crie ou edite um post/página

Após um início de sessão bem sucedido no WordPress, aceda ao painel de controlo do WordPress. Em seguida, pode optar por criar um novoescritosou edite um artigo existente. Dependendo das suas necessidades, pode escolher um dos seguintes caminhos:

• Para criar um novo artigo, navegue atéescritos > Adicionar novo artigo.

• Para editar um post ou uma página existente, navegue para oescritos > Todos os artigosLocalize o artigo que pretende editar e clique no botão "Editar".
• Se pretender criar ou editarpágina webSelecionepágina webque funciona de forma semelhante à criação ou edição de um artigo.

Porquê adicionar uma lightbox a um post ou página?

O efeito lightbox é particularmente adequado para a apresentação de fotografias, imagens de produtos ou galerias. Com as lightboxes, os utilizadores podem clicar numa miniatura para ver uma imagem maior sem ter de saltar para outra página, melhorando assim a experiência de navegação do utilizador.

Passo 3: Adicione imagens utilizando o editor de blocos

De seguida, adicione imagens à página. O editor de blocos oferece-lhe uma solução muito simples para este efeito.

1. Selecione a localização no editor onde pretende inserir a imagem.
2. chave em/imagemO bloco "Imagem" aparecerá imediatamente.

3. Selecionar "imagens", o sistema pedir-lhe-á que selecione uma imagem.

As imagens existentes podem ser selecionadas a partir da biblioteca multimédia ou podem ser carregadas novas imagens.

Escolher a imagem certa

Certifique-se de que escolhe o tamanho da imagemAdequado para caixas de luzVisualização. As imagens demasiado grandes podem afetar a velocidade de carregamento da página, enquanto as imagens demasiado pequenas podem perder nitidez quando ampliadas na lightbox.

Passo 4: Adicione um efeito de caixa de luz à imagem

Este passo é o núcleo da criação de uma lightbox do WordPress e pode ser feito sem um plugin.

1. clicar (utilizando um rato ou outro dispositivo apontador)Acabou de ser adicionadopara o artigo ou página nofotografia.
2. Na barra de ferramentas acima da imagem, verá um ícone de ligação.

3. Se clicar nesse ícone de ligação, aparece um menu pendente.
4. Selecionar "Expanda quando clicado"Opções.

Neste ponto, a sua imagem será configurada para se expandir quando clicada através do efeito de lightbox. A lightbox fornecerá automaticamente uma vista ampliada da imagem no front-end, permitindo que os utilizadores vejam uma imagem maior sem terem de saltar para outra página quando clicam na imagem.

Sugestão: Se não conseguir encontrar a opção "Expandir ao clicar

Certifique-se de que está a utilizar o WordPress 6.5 ou superior. Se estiver a utilizarversão inferiorPode ser necessário passar oplug-in (componente de software)para implementar a funcionalidade lightbox, ou actualize a sua versão do WordPress para tirar partido desta nova funcionalidade.

Passo 5: Pré-visualize e publique a página

Depois de configurar o efeito de lightbox para a imagem, pré-visualize a página para se certificar de que tudo é apresentado corretamente.

1. Clique no botão "Pré-visualizar" no canto superior direito da página e selecione "Pré-visualizar novo separador".

2. Na página de pré-visualização, clique na imagem que adicionou para verificar se o efeito de caixa de luz está a funcionar corretamente.

Se tudo estiver bem, tem a possibilidade depostopágina ou artigo. Se for necessário editar mais, pode selecionarGuardar rascunhosContinue a editar mais tarde.

Otimização e advertências

1. Otimização de imagens

Embora a funcionalidade lightbox seja útil, certifique-se de que as imagens que carrega estão optimizadas para não afectarem o desempenho do seu sítio Web. Ficheiros de imagem excessivamente grandes podem levar a páginas de carregamento lento, o que pode afetar a experiência do utilizador e o desempenho de SEO. Isto pode ser feito utilizando ferramentas comoEsfregarpara comprimir e otimizar o tamanho da imagem.

2. conceção reactiva

A funcionalidade de lightbox é igualmente importante em dispositivos móveis e as definições de lightbox predefinidas do WordPress são responsivas para garantir que as imagens são bem apresentadas em diferentes tamanhos de ecrã. Recomenda-se que teste em dispositivos móveis antes de publicar para garantir que o efeito da lightbox é igualmente suave em dispositivos móveis.

3. testes de compatibilidade

Embora a funcionalidade de caixa de luz incorporada do WordPress seja poderosa, pode entrar em conflito com algumas funcionalidades personalizadas se for utilizado um tema ou plug-in personalizado. Antes de publicar, recomenda-se que verifique a compatibilidade entre dispositivos e browsers.

resumos

Utilizando o WordPress 6.5 e superior, porConstrutor de sítios Web autodidata WPO efeito lightbox pode ser facilmente criado sem plug-ins, proporcionando uma melhor experiência de utilizador para as imagens. Isto não só simplifica o processo de funcionamento, como também reduz a dependência de plug-ins de terceiros e reduz a complexidade da manutenção do sítio Web.