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