Criando um site do zero com WordPress - #28 Slideshow Responsivo

Na vídeo-aula de hoje aprenderemos como fazer um slideshow responsivo. Para tanto, utilizaremos dois plugins, o plugin MetaSlider e o plugin WP Mobile Detect.

Identificando um dispositivo mobile

Para identificar se o usuário que está acessando o site é um dispositivo mobile, utilizaremos o plugin WP Mobile Detect. Para tanto, entraremos no site do plugin e o baixaremos. Posteriormente, salvaremos o plugin na pasta wp-content/plugins e o ativaremos no painel de controle.

Implementando o slideshow responsivo

Para implementarmos o slideshow responsivo, vamos ter que criar primeiramente dois slides no painel do MetaSlider. Em seguida, devemos utilizar o WP Mobile Detect combinado com o MetaSlider, conforme código abaixo:

<?php echo do_shortcode('[device][metaslider id=1612][/device] [notdevice][metaslider id=1607][/notdevice]'); ?>

No código acima, entre as tags device devemos colocar o ID do slide feito para dispositivos mobile e entre as tags notdevice vamos colocar o slideshow criado para computadores e telas maiores. Devemos nos atentar para os tamanhos dos arquivos, lembrando que as imagens para dispositivos mobile devem ser menores.