Guia passo a passo para criar um controle deslizante no WordPress com o SlideDeck

Após o lançamento dos cupons do WPBeginner ontem, estamos totalmente concentrados em criar o melhor design para o site principal do WPBeginner que integre tudo e ainda tenha uma boa aparência. Queríamos adicionar um controle deslizante em nosso site, mas cada script tinha sua limitação. Então, graças ao incrível Matt Mickiewicz, da 99designs, SitePoint e Flippa(veja a entrevista dele no WPBeginner), que nos indicou o pessoal da Digital Telepathy, que são os criadores do SlideDeck (de longe o melhor script de controle deslizante da Web). Nós brincamos com ele e ficamos impressionados. Ele é ótimo para iniciantes porque oferece um plug-in completo para WordPress que permite usar a interface fácil de arrastar e soltar para criar controles deslizantes. No entanto, ele também é excelente para desenvolvedores, pois 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 controle deslizante no WordPress sem editar uma única linha de código com o plug-in SlideDeck para WordPress.

Se você quiser ver o que pode criar com esse plug-in, aqui está uma demonstração AO VIVO.

Etapa 1. Download e instalação do plug-in

Vá até o site do SlideDeck e faça o download do plug-in. Eles têm uma versão GRATUITA e uma versão PRO que oferece suporte e muito mais recursos. Sempre que estamos trabalhando com um novo produto, sempre obtemos a versão de suporte. Ficamos presos algumas vezes em nosso desenvolvimento, e o suporte deles foi incrível e nos ajudou. É altamente recomendável que você adquira a versão PRO, pois ela inclui recursos interessantes como: Slides verticais, suporte para tela sensível ao toque, suporte, SlideDecks inteligentes com feed RSS, suporte para imagem de fundo e muito mais.

Depois de fazer o download do plug-in, vá em frente e instale/ative o plug-in. (Siga nosso Guia passo a passo para instalar um plug-in do WordPress)

Vamos criar um controle deslizante

Depois de ativar o plug-in, você verá uma nova guia adicionada chamada SlideDeck. Vamos lá e clique em Add New SlideDeck. Será exibida uma tela parecida com o painel Post Write.

Então, o que fizemos foi adicionar o conteúdo em nosso slide e dar a ele um título. Poderíamos ter uma imagem de fundo personalizada (recurso PRO), mas, por uma questão de simplicidade, não fizemos isso. Queremos mostrar o que esse plug-in pode fazer imediatamente. Esse foi o nosso primeiro slide padrão. O próximo slide que adicionamos em nossa demonstração foi um slide vertical (recurso PRO). Os slides verticais são basicamente vários slides dentro de um slide. Se você observar a imagem acima, há um botão chamado Convert to Vertical Slide (Converter em slide vertical). Bem, esse foi o botão que clicamos para o nosso próximo slide, e foi isso que adicionamos:

Agora repita o processo para quantos slides quiser. Quando terminar de criar os slides, vamos dar uma olhada nas opções do SlideDeck para publicar os slides no seu site. Você verá isso no lado direito da tela Editar slides.

Você pode selecionar a reprodução automática, permitir a navegação pelo teclado, permitir a navegação com a roda de rolagem do mouse, definir a velocidade da animação, escolher uma de suas incríveis skins e selecionar de qual slide deseja começar. Você também pode reordenar os slides arrastando e soltando. Você vê que há um snippet de código de tema que contém o código para você incluir em seu tema. Você pode adicioná-lo onde quiser em seu tema. Ah, espere, não dissemos que você não precisará editar uma única linha de código para integrar o SlideDeck ao WordPress. Sim, cumpriremos nossas palavras neste tutorial. Vamos mostrar como você pode integrá-lo ao seu WordPress sem editar uma única linha de código.

Integração do SlideDeck em posts/páginas do WordPress

Crie uma nova postagem ou página. Você verá uma nova caixa do SlideDeck adicionada à barra lateral direita.

Clique no botão Inserir SlideDeck. Escolha o controle deslizante que deseja adicionar e publique a postagem. Depois de publicar a postagem, seu controle deslizante terá a seguinte aparência com a aparência clássica:

Você pode usá-lo em uma postagem fixa, em um modelo de página de largura total ou em qualquer outra coisa que desejar. Mas espere, isso não termina aqui. Vamos nos aprofundar um pouco mais.

Adicionar um controle deslizante com postagens em destaque

Os controles deslizantes de postagens em destaque são os favoritos dos blogueiros. Vemos esse recurso em vários blogs, mas a maioria desses controles deslizantes é 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 controle deslizante dinâmico chamado “Smart SlideDeck”, que permite mostrar as postagens mais recentes, as postagens mais populares, as postagens em destaque (as que você escolher), classificar por categoria e até mesmo importar RSS Feeds de outro site para adicionar ao seu controle deslizante. Você pode selecionar uma de suas várias skins, escolher os diferentes tipos de navegação e ter um controle deslizante pronto em menos de 5 minutos. Vamos lhe mostrar como. Em nosso tutorial, exibiremos entradas em destaque de nossos posts.

Vá para suas postagens atuais, escolha 5 postagens e adicione-as ao Smart SlideDecks marcando a caixa.

Agora, vamos ao painel do SlideDeck e clique em Add Smart SlideDeck. Escolha sua skin:

Selecione quantos slides você deseja exibir, as opções de reprodução, o tipo de conteúdo (veja como o temos como entradas em destaque da postagem). Você pode selecionar as configurações de conteúdo, como opções de imagem, tamanho do título, tamanho do trecho etc. Escolha seus estilos de navegação e clique em Publish (Publicar).

Você precisa editar o código neste caso. Pegue o código da barra lateral, Theme Snippet Code, e cole-o em seu tema. Provavelmente na parte superior de seu index.php. Um exemplo de código seria parecido com este:

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

Isso exibiria o controle deslizante somente na página inicial.

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

Informe-nos sobre sua opinião a respeito do plug-in à medida que o implementar.