Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Adicionar NivoSlider com tipo de postagem personalizado ao tema WordPress

Você está em:

Adicionar NivoSlider com tipo de postagem personalizado ao tema WordPress

Hoje vou ensiná-lo a incluir corretamente um jQuery NivoSlider no seu tema WordPress em algumas etapas fáceis de copiar/colar. Para o propósito deste tutorial, mostrarei como criar um tipo de postagem personalizado “slides” que usaremos para obter todos os “posts” para o controle deslizante, no entanto, você pode alterar facilmente o loop para obter postagens de um determinado categoria, etiqueta… etc.

Etapa 1: obter o código do Dev7Studios

Antes de fazer qualquer coisa, obviamente, você terá que baixar o Javascript e CSS mais recente para NivoSlider. Você pode obter isso no autor (dev7studios) clicando na imagem abaixo:

Etapa 2: adicione o CSS ao seu arquivo Style.css

Em seguida, você deve copiar todo o CSS que acabou de baixar para o Nivoslider e colá-lo em seu arquivo style.css principal localizado na pasta do seu tema onde você está adicionando o controle deslizante de imagem. Apenas copie e cole na parte inferior da sua folha de estilo – você vai querer voltar depois para reestilizá-la da maneira que você quer que ela fique.

Etapa 3: adicione o Javascript para o controle deslizante

Em seguida, você deve adicionar o Javascript necessário para que o controle deslizante funcione. Você terá que chamar seu nivoslider js que você baixou anteriormente de seu functions.php e então iniciar o script em seu arquivo header.php.

uma. Adicionar JS ao Functions.php

Adicione o seguinte ao seu functions.php, que primeiro obterá o arquivo JS principal da API do Google e, em seguida, chamará o arquivo nivoslider JS que você baixou na etapa 1 e deve adicionar à pasta do seu tema em uma subpasta chamada “js”

// include jQuery wp_enqueue_script(‘jquery’);

// inclui nivoslider JS

wp_enqueue_script(‘nivoSlider’, get_stylesheet_directory_uri() . ‘/js/jquery.nivo.slider.pack.js’); }

b. Iniciar script

Em seguida, você vai querer iniciar o script adicionando o seguinte javascript no arquivo logo antes de onde seu slider estará (dê uma olhada em todas as opções incríveis para o Slider em dev7studios e edite de acordo).

Alternativamente (e a melhor maneira de fazer isso) seria adicionar isso no topo do seu arquivo nivo js ou em um novo arquivo js e enfileirar corretamente.

<script type=”text/javascript”> jQuery(function($){ $(window).load(function() { $(‘#slider’).nivoSlider(); }); }); </script>

Etapa 4: adicionar suporte a miniaturas e tipos de postagem personalizados do Slides

Para adicionar um novo tipo de postagem personalizado chamado “slides”, basta inserir o seguinte código em seu arquivo functions.php:

//Register post type for slider

add_action( ‘init’, ‘create_post_types’ ); function create_post_types() { register_post_type( ‘slides’, array( miniatura’,’editor’), ) ); }

Se o seu tema ainda não o tiver, você desejará adicionar suporte para miniaturas WP, faça isso inserindo o seguinte em seu arquivo functions.php.

// activate post-image function

add_theme_support( ‘post-thumbnails’ );

Passo 5: Crie e adicione o loop para seu controle deslizante

Agora que você tem todos os js/css no lugar e criou seu tipo de postagem personalizado para slides, você precisa chamar suas postagens onde quiser mostrar seu controle deslizante. Eu já criei todo o código para você, então simplesmente copie e cole o seguinte loop get_posts onde você quiser que seu slider apareça.

<?php 

// get custom post type ==> slides

global $post; $args = array( ‘post_type’ =>’slides’, ‘numberposts’ => -1, ‘orderby’ => ‘ASC’ ); $slider_posts = get_posts($args); ?> <?php // show slider only if slides exist if($slider_posts) { ?> <div id=”slider-wrap”> <div id=”slider”> <?php // start the loop foreach($slider_posts as $post) : setup_postdata($post); // get image $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), ‘home-slide’); ?> <a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><img src=”<?php echo $thumbnail[0]; ?>” width=”” height=”” title=”<?php the_title(); ?>” /></a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </div><!–/slider nivoSlider–> </div><!–/slider-wrap –><?php } ?>

Etapa 6: adicione um arquivo single-slides.php ao seu tema

Como você vê no loop, adicionei um link aos slides para que você possa ir para uma página com o conteúdo adicionado no editor para esse slide. Por padrão, o WordPress usará seu arquivo single.php para mostrar o conteúdo dos slides. Se você quiser que suas páginas de slides tenham uma aparência diferente, você pode fazer isso criando um novo arquivo chamado single-slides.php e projetando-o da maneira que você deseja que as páginas de slides sejam. Você também pode remover os links completamente e ter apenas um controle deslizante de imagem

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.