Guia Passo a Passo para Criar um Slider no WordPress com SlideDeck

Após o lançamento do WPBeginner Coupons ontem, estamos totalmente focados em construir o melhor design para o site principal do WPBeginner que integre tudo, mantendo uma boa aparência. Queríamos adicionar um slider ao nosso site, mas todos os scripts tinham suas limitações. Então, graças ao incrível Matt Mickiewicz da 99designs, SitePoint e Flippa (veja a entrevista dele no WPBeginner) por nos indicar o pessoal da Digital Telepathy, que são os criadores do SlideDeck (de longe o melhor script de slider da web). Brincamos com ele e ficamos impressionados. É ótimo para iniciantes porque fornece um plugin WordPress completo que permite usar a interface fácil de arrastar e soltar para criar sliders. No entanto, também é ótimo para desenvolvedores porque tem uma versão jQuery que oferece liberdade adicional aos desenvolvedores para personalizá-lo de acordo com suas necessidades. Neste artigo, mostraremos como você pode criar um slider no WordPress sem editar uma única linha de código com o Plugin SlideDeck para WordPress.

Se você quiser ver o que pode criar com este plugin, aqui está uma DEMONSTRAÇÃO AO VIVO.

Passo 1. Baixando e Instalando o Plugin

Acesse o Site da SlideDeck e baixe o plugin. Eles têm uma versão GRATUITA e uma versão PRO que oferece suporte e muitos outros recursos. Sempre que trabalhamos com um novo produto, compramos a versão com suporte. Ficamos presos algumas vezes em nosso desenvolvimento, e o suporte deles foi incrível e nos ajudou. Recomendamos fortemente que você adquira a versão PRO porque ela inclui recursos interessantes como: Slides Verticais, Suporte a Tela Sensível ao Toque, Suporte, SlideDecks Inteligentes de Feed RSS, Suporte a Imagem de Fundo e muito mais.

Depois de baixar o plugin, prossiga e instale/ative o plugin. (Siga nosso Guia Passo a Passo para Instalar um Plugin do WordPress)

Vamos Criar um Slider

Após ativar o plugin, você verá uma nova aba chamada SlideDeck. Vamos lá e clique em Adicionar Novo SlideDeck. Você será levado a uma tela que se parece com o Painel de Escrita de Posts.

Então, o que fizemos foi adicionar o conteúdo em nosso slide e dar um título a ele. Poderíamos ter uma imagem de fundo personalizada (Recurso PRO), mas, para simplificar, não fizemos isso. Queremos mostrar o que este plugin pode fazer de imediato. Esse foi nosso primeiro slide padrão. O próximo slide que adicionamos em nossa demonstração foi um slide vertical (Recurso PRO). Slides verticais são basicamente vários slides dentro de um slide. Se você olhar na imagem acima, há um botão chamado Converter para Slide Vertical. Bem, esse é o botão que clicamos para nosso próximo slide, e é isso que foi adicionado:

Agora repita o processo para quantos slides desejar. Assim que terminar de criar os slides, vamos olhar as Opções do SlideDeck para publicar os slides em seu site. Você verá isso no lado direito da sua tela de Edição de slides.

Você pode selecioná-lo para reprodução automática, permitir navegação pelo teclado, permitir navegação pela roda do mouse, definir a velocidade da animação, escolher uma de suas incríveis skins e selecionar de qual slide você quer começar. Você também pode reordenar os slides arrastando e soltando. Você vê que há um trecho de código de tema que contém o código para você incluir em seu tema. Você pode adicioná-lo em qualquer lugar que desejar em seu tema. Ah, espere, não dissemos que você não precisaria editar uma única linha de código para integrar o SlideDeck no WordPress. Sim, manteremos nossa palavra neste tutorial. Vamos mostrar como você pode integrá-lo em seu WordPress sem editar uma única linha de código.

Integrando o SlideDeck em Posts/Páginas do WordPress

Crie um Novo Post ou Página. Você verá uma nova caixa SlideDeck adicionada na barra lateral direita.

Clique no botão Inserir SlideDeck. Escolha o Slider que você deseja adicionar e Publique o post. Assim que você publicar o post, seu slider ficará assim com a Skin Clássica:

Você pode usá-lo em um post fixo, modelo de página de largura total ou qualquer outra coisa que desejar. Mas espere, não para por aí. Vamos um pouco mais longe.

Adicionar um Slider com Posts em Destaque

Sliders de posts em destaque são os favoritos dos blogueiros. Vemos esse recurso em inúmeros blogs, mas a maioria desses sliders é codificada em temas com controle limitado para os usuários. Bem, vamos dar uma olhada em como é fácil fazer isso com o SlideDeck. Você pode adicionar um slider dinâmico chamado “Smart SlideDeck” que permite exibir seus posts mais recentes, posts mais populares, posts em destaque (aqueles que você escolhe), você pode classificar por categoria, você pode até importar Feeds RSS de outro site para adicionar ao seu slider. Você pode selecionar entre suas várias skins, escolher diferentes tipos de navegação e praticamente ter um slider pronto em menos de 5 minutos. Deixe-nos mostrar como. Em nosso tutorial, exibiremos entradas em Destaque de nossos Posts.

Vá para seus posts atuais e escolha 5 posts e adicione-os ao Smart SlideDeck marcando a caixa.

Agora, vamos ao seu Painel do SlideDeck e clique em Adicionar Smart SlideDeck. Escolha Sua Skin:

Selecione quantos slides você deseja exibir, opções de reprodução, tipo de conteúdo (Veja como temos entradas em Destaque do Post). Você pode selecionar as Configurações de Conteúdo, como opções de imagem, comprimento do título, comprimento do resumo etc. Escolha seus Estilos de Navegação e clique em Publicar.

Você precisa editar o código deste. Pegue o código da Barra Lateral, Código do Trecho do Tema e cole-o em seu tema. Muito provavelmente no topo do seu index.php. Um código de exemplo seria assim:

<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>

Isso exibirá seu slider apenas na sua página inicial.

Se você quiser ver algumas demonstrações muito legais do SlideDeck, visite o site do SlideDeck e confira.

Conte-nos suas impressões sobre o plugin enquanto você o implementa.