Boa parte das pessoas que trabalham com desenvolvimento de sistemas ou de sites já se deparou com o desafio de fazer um carrossel e, além disso, dele ser responsivo, das fotos terem qualidade boa e não aparecerem distorcidas. Nesse caso, há maneiras de fazer um carrossel responsivo utilizando o framework Bootstrap, que é um dos mais usados para trabalhos com CSS.
Porém, para pessoas que trabalham com a plataforma WordPress, há um jeito simples de colocar um carrossel em um site e customizá-lo da forma desejada até mesmo pelo cliente, pois, como o WordPress é um sistema de gerenciamento de conteúdos ou um CMS (Content Management System), o cliente pode customizar ele e testá-lo, para ver se está nos conformes desejados.
Para a realização dessas tarefas, o carrossel utiliza o plugin Meta Slider, que possui uma interface muito intuitiva e, que auxilia o usuário na inserção das fotos em seu site ou sistema.
COMO INSTALAR O PLUGIN?
Para quem já possui uma familiarização com a plataforma do WordPress, instalar plugin é um processo muito fácil. Contudo, para usuários iniciantes, pode parecer difícil. O primeiro passo é realizar o login no seu painel administrativo do WordPress, que será uma tela parecida com essa:
No menu ao seu lado esquerdo, na opção PLUGINS, basta somente passar o mouse nela e, aparecerão algumas opções, que seriam:
— PLUGINS INSTALADOS: Clicando nela, você será redirecionado para uma página, que terá uma lista de todos os plugins instalados em sua aplicação;
— ADICIONAR NOVO: Caso deseje adicionar um novo plugin, como será o caso, basta clicar nessa opção, que será redirecionado para uma tela de pesquisa de plugins para serem instalados;
— EDITOR DE PLUGINS: Se eu não gostar de algum plugin em específico, posso melhorá-lo? Sim! Pois, grande parte dos plugins gratuitos da plataforma são open source, ou seja, possuem código aberto para possíveis atualizações e melhorias futuras.
Nesse caso, nas opções acima, no presente artigo, trabalharemos somente com a opção “ADICIONAR NOVO”. Para isso, é necessário clicar nesta opção.
Após isso, irá abrir uma tela similar com a tela abaixo e, para pesquisar um plugin, no caso o Meta Slider, basta digitar ele na barra de pesquisa, que será carregado automaticamente.
Logo, como já tenho ele instalado, não será preciso reinstalá-lo. Porém, caso deseja instalar o Meta Slider, basta clicar em “INSTALAR AGORA”, por conseguinte, em “ATIVAR”, logo após a instalação.
Quando o plugin for ativado, ele irá aparecer no menu da plataforma, à esquerda e, passando o mouse nele, irão aparecer algumas opções. A opção “META SLIDER” deverá ser clicada.
Assim, você estará navegando na interface principal do plugin. As opções, na tela superior são:
– Para pesquisar carrosséis já criados, basta realizar a pesquisa na área de pesquisa especificada, ao lado do logo do plugin;
— ADICIONAR SLIDE: Redireciona você para uma área de seleção de arquivos e, você escolherá a foto que deverá ser colocada;
— PREVIEW: Como o próprio nome diz, fará uma previsão do carrossel, antes de publicar ele;
— DOCS: Será aberta uma nova janela, com a documentação do plugin;
— NEW: Clicando nele, será gerado um novo carrossel, com as fotos desejadas;
— DUPLICATE: Duplicar o carrossel já feito e;
— SALVAR: Clicando nele, as alterações feitas serão salvas, para serem exibidas no site.
Mais abaixo, ao lado direito, haverão as opções de customização do carrossel, como largura e altura das fotos, o título do carrossel, o efeito que o mesmo terá e o posicionamento das setas e pontos (particularmente, nunca utilizei uma opção além da FlexSlider, que está selecionada):
Observe que há várias opções de efeitos para serem colocados em seu carrossel. As fotos irão aparecer ao lado dessa seção, conforme exemplo prático, que será demonstrado.
COMO INSERIR O CARROSSEL NO SITE?
Mais abaixo da seção, será exibido um código em PHP que deverá ser copiado e colado no arquivo em que o carrossel deverá aparecer, seja ele:
— index.php;
— footer.php;
— header.php;
— sidebar.php.
Exemplo de arquivo index.php com o código do carrossel, caso deseje que seja carregado na página principal:
Abaixo dessa seção, terão opções avançadas, como a porcentagem de largura, o tempo entre uma foto e outra, o alinhamento, as opções de corte de imagem, adição de classes adicionais de CSS, proximidade entre os textos (se houverem), etc.
Dessa forma, caso queira deletar um carrossel criado, basta clicar em “DELETE SLIDESHOW”, tendo total certeza da ação, pois ela é irreversível. A opção se encontra abaixo dessa sessão de opções avançadas:
EXEMPLO PRÁTICO
Vamos criar um carrossel com o Meta Slider, na prática:
Primeiramente, clicar em “NEW”, conforme barra superior do plugin:
Feito isso, escolher o nome para seu carrossel, bem como as fotos que serão publicadas nele. A quantidade de fotos pode ser quantas desejar. Contudo, para que o site não fique com problemas de velocidade, no máximo cinco fotos serão o suficiente.
As dimensões serão utilizadas serão de 800 x 300 e, as fotos, de preferência, devem ser próximas disso. No exemplo, as fotos serão de dimensões de 800 x 390.
Feito isso, é necessário clicar em “ADICIONAR SLIDE”, de acordo com a barra superior:
Clicar na opção de “ENVIAR ARQUIVOS” e, os mesmos podem ser arrastados para esse local ou, caso queira, clicar em “SELECIONAR ARQUIVOS”, para navegar em seu computador, no local em que as fotos foram salvas.
As imagens utilizadas serão essas e, após adição das mesmas, clicar em “ADD TO SLIDESHOW”:
Observação: Podem ser adicionados, conforme campos acima do botão, atributos para fotos, como título, legenda, texto alternativo e descrição, mas são opcionais.
As imagens aparecerão no miolo da tela, podendo ser atualizadas, excluídas ou até movidas de lugar, clicando no bloco da imagem correspondente. Para salvar o carrossel, após alguma alteração feita, basta clicar no botão “SALVAR”, conforme demonstrado na figura 6. Os botões de atualização e exclusão das fotos, no canto superior direito do bloco:
Por fim, copiar todo o código do carrossel e colar em alguma página de seu site. Nesse caso, colei o código no arquivo index.php.
Resultado, na página inicial do site:
Viu só como é fácil fazer o uso de uma poderosa ferramenta, que é o WordPress, para criar um carrossel, com um simples plugin?
Observação: Esse plugin pode sofrer alterações com as suas respectivas atualizações e, mudar sua interface. Porém, o mesmo possui uma interface muito fácil de utilizar, mesmo sofrendo mudanças.
