Olá pessoal! No artigo de hoje vamos conhecer e aprender como utilizar o Plugin “Wp Slick Slider and Image Carousel” que nos auxilia a inserir sliders profissionais e carrosséis em nossos temas.

Exiba vários sliders e carrossel de imagens usando shortcodes com categoria. Totalmente responsivo, Swipe ativado, Drag and Drop para desktop e looping infinito. Totalmente acessível com navegação via teclado, autoplay, pontos, setas etc.

Ele usa um tipo personalizado de post e taxonomia para criar um slider, com opções praticamente ilimitadas e suporte para múltiplos sliders em qualquer página. Você também usar um slider no cabeçalho do seu site.

O primeiro passo é instalar o Plugin no seu WordPress. Vá até o menu Plugins -> Adicionar novo. Pesquise pelo nome “Wp Slick Slider and Image Carousel”. O resultado deve ser similar à este:

wp-slick-slider-and-image-carousel

Com o plugin instalado, podemos prosseguir com o artigo. No final do post, adicionei os 5 designs de utilização do plugin para que você o veja em ação. É claro que neste exemplo, algumas imagens não são as melhores para o caso de texto sobreposto, mas serve para se ter uma ideia de como funciona os desings. Você pode encontrar todos os designs no menu Slider Slick -> Slider Designs. Basta copiar o código abreviado de desenho que você gosta e usar.

 

Dois shortcodes estão disponíveis para utilização:

[slick-slider] e [slick-carousel-slider]

Para o primeiro shortcode, esta é a aplicação com todos os parâmetros possíveis:

[slick-slider  design="design-1" category="8" show_content="true"
 dots="true" arrows="true" autoplay="true" sliderheight="400"
 autoplay_interval="5000" speed="1000"]

Para o segundo shortcode, esta é a aplicação com todos os parâmetros possíveis:

[slick-carousel-slider  design="design-6" category="8"
 slidestoshow="4" slidestoscroll="1" dots="true"
 arrows="true" autoplay="true"  autoplay_interval="5000"
 speed="1000" centermode="true" variablewidth="true"]

Para aplicar diretamente no seu template no código php, use a seguinte forma, aplicando os parâmetros que achar conveniente:

<?php echo do_shortcode('[slick-slider]'); ?>  e
<?php echo do_shortcode('[slick-carousel-slider]'); ?>

Para facilitar o entendimento dos parâmetros disponíveis, segue uma lista explicativa de cada um deles, levando em consideração cada shortcode em separado.

Parâmetros disponíveis para o shortcode:

[slick-slider]
  • limit : [slick-slider limit="-1"] (Limit define o número de imagens a serem exibidas por vez. Por padrão, é definido em “-1″ que faz exibir todas as imagens. Se você quiser exibir somente 5 imagens, altere o valor para limit=”5”)
  • category: [slick-slider category="category_ID"] ( exibe os slides usando o ID da categoria como filtro ).
  • show_content : [slick-slider show_content="true" ] (Exibe ou não o texto do slide. Por padrão, o valor é “true”. As opções são: “true ou false”).
  • Pagination and arrows : [slick-slider dots="false" arrows="false"] (Define a exibição ou não das setas e pontos. As opções são: “true ou false”)
  • Autoplay and Autoplay Interval: [slick-slider autoplay="true" autoplay_interval="100"] (Define se o slider desliza automaticamente e qual o tempo de espera para troca. Autoplay pode ser “true ou false” e autoplay_interval é um número inteiro em milisegundos)
  • Slide Speed: [slick-slider speed="3000"] (Define a velocidade da passagem do slider. O valor é em milisegundos)
  • fade : [slick-slider fade="true" ] (Efeito Fade do Slider. Por padrão, o efeito é slide. Se você alterar o valor de fade para “true”, o slide será trocado com o efeito fade.
  • sliderheight : [slick-slider sliderheight="400" ] (Altura do Slider. Por padrão, são 500px.)

Parâmetros disponíveis para o shortcode:

[slick-carousel-slider]
  • limit : [slick-slider limit="-1"] (Limit define o número de imagens a serem exibidas por vez. Por padrão, é definido em “-1″ que faz exibir todas as imagens. Se você quiser exibir somente 5 imagens, altere o valor para limit=”5”)
  • design : [slick-carousel-slider design="design-1"] (Você pode selecionar entre 5 designs( design-1, design-2, design-3, design-4, design-5 ) para seu slider.  Veja as opções disponíveis em Slick Slider -> Slider Designs ).
  • category: [slick-slider category="category_ID"] ( Exibe os slides usando o ID da categoria como filtro ).
  • image_size : [slick-carousel-slider image_size="large"] (Define o tamanho da imagem. O padrão é “medium”, os valores disponíveis são thumbnail, medium, large, original)
  • slidestoshow : [slick-carousel-slider slidestoshow="3" ] (Define a quantidade de imagens (entenda como colunas) a exibir em cada passagem do carrossel. O padrão é  “3”).
  • slidestoscroll : [slick-carousel-slider slidestoscroll="1" ] (Define a quantidade de imagens a passar no scroll. Por padrão é “1”).
  • Pagination and arrows : [slick-slider dots="false" arrows="false"] (Define a exibição ou não das setas e pontos. As opções são: “true ou false”)
  • Autoplay and Autoplay Interval: [slick-slider autoplay="true" autoplay_interval="100"] (Define se o slider desliza automaticamente e qual o tempo de espera para troca. Autoplay pode ser “true ou false” e autoplay_interval é um número inteiro em milisegundos)
  • Slide Speed: [slick-slider speed="3000"] (Define a velocidade da passagem do slider. O valor é em milisegundos)
  • centermode : [slick-carousel-slider centermode="true" ] ( Exibe a imagem principal no meio. O padrão é “false” ).
  • variablewidth : [slick-carousel-slider variablewidth="true" ] (Define como variável a largura das imagens. O padrão é “false”)

 

Para cadastrar um novo slide, basta ir ao menu Slick Slider -> Add slide, definir um título para o slide, inserir um texto no corpo do post caso deseje uma descrição, colocar a imagem do slide como imagem destacada, definir uma categoria caso deseje usá-la como filtro do slider e salvar.

 

[slick-slider design="design-1"]
Como dar às categorias do WordPress uma ordem personalizada
Como aprender WordPress em uma semana
[slick-slider design="design-2"]
Como dar às categorias do WordPress uma ordem personalizada

Como dar às categorias do WordPress uma ordem personalizada

Hoje vamos resolver um problema que você já deve ter enfrentado com seu site, apenas adicionando algumas linhas de código. A idéia é mostrar somente algumas categorias, e colocá-las em uma ordem personalizada. Algo como: Cat12, Cat 28, Cat5, Cat9, Cat88.

Como aprender WordPress em uma semana

Como aprender WordPress em uma semana

Graças à facilidade de implementação e uso do WordPress, qualquer pessoa com uma idéia e tempo de sobra pode desenvolver site em WordPress e começar um negócio. Na verdade, muitas pessoas já estão fazendo isso.

[slick-slider design="design-3"]
Como dar às categorias do WordPress uma ordem personalizada

Como dar às categorias do WordPress uma ordem personalizada

Hoje vamos resolver um problema que você já deve ter enfrentado com seu site, apenas adicionando algumas linhas de código. A idéia é mostrar somente algumas categorias, e colocá-las em uma ordem personalizada. Algo como: Cat12, Cat 28, Cat5, Cat9, Cat88.

Como aprender WordPress em uma semana

Como aprender WordPress em uma semana

Graças à facilidade de implementação e uso do WordPress, qualquer pessoa com uma idéia e tempo de sobra pode desenvolver site em WordPress e começar um negócio. Na verdade, muitas pessoas já estão fazendo isso.

[slick-slider design="design-4"]

Como dar às categorias do WordPress uma ordem personalizada

Hoje vamos resolver um problema que você já deve ter enfrentado com seu site, apenas adicionando algumas linhas de código. A idéia é mostrar somente algumas categorias, e colocá-las em uma ordem personalizada. Algo como: Cat12, Cat 28, Cat5, Cat9, Cat88.

Como dar às categorias do WordPress uma ordem personalizada

Como aprender WordPress em uma semana

Graças à facilidade de implementação e uso do WordPress, qualquer pessoa com uma idéia e tempo de sobra pode desenvolver site em WordPress e começar um negócio. Na verdade, muitas pessoas já estão fazendo isso.

Como aprender WordPress em uma semana
[slick-slider design="design-5"]

Como dar às categorias do WordPress uma ordem personalizada

Hoje vamos resolver um problema que você já deve ter enfrentado com seu site, apenas adicionando algumas linhas de código. A idéia é mostrar somente algumas categorias, e colocá-las em uma ordem personalizada. Algo como: Cat12, Cat 28, Cat5, Cat9, Cat88.

Como aprender WordPress em uma semana

Graças à facilidade de implementação e uso do WordPress, qualquer pessoa com uma idéia e tempo de sobra pode desenvolver site em WordPress e começar um negócio. Na verdade, muitas pessoas já estão fazendo isso.