Já tem um tempo que venho tentando escrever sobre isso e mostrar como funciona para criar um slide dinâmico no WordPress do zero usando custom post types, Advanced Custom Fields e o Slick slider lib .
Bom como mencionei acima, vamos criar custom posts types e utilizar o plugin Advanced Custom Fields “pode fica tranquilo não é necessário da conta Premium do mesmo “, para poder deixar o slide dinâmico e o seu cliente ter uma autonomia e maior flexibilidade de mexer nos banners. Aliás isso não só serve para banners como também para blocos dinâmicos, basta você usar a sua imaginação. 😀
Segue abaixo o código de criação do custom post type no functions.php do seu tema.
add_action( 'init', 'create_posttype_slide' ); // inicia a chamada da função
function create_posttype_slide() { // função de criação do custom post type
register_post_type( 'slide_home', // registra o nome do CPT
array(
'labels' => array(
'name' => __( 'Slide Home' ), // Nome que vai aparecer no seu menu WordPress
'singular_name' => __( 'Slide Home' ) // Nome do mesmo no singular
),
'public' => true, // Se é publico ou privado do menu
'has_archive' => true, // Permite que o slug abaixo seja criado
'menu_position' => 20, // Posição no menu do WordPress
'menu_icon' => 'dashicons-format-gallery', // Seta o icone que vai aparecer no menu do seu WordPress
'rewrite' => array('slug' => 'slidehome'), // Slug ou URL
'supports' => array( 'title', 'thumbnail', 'revisions', 'post-formats' ) // Setando o que vai utilizar na criação
)
);
}
Irá aparecer como a imagem abaixo.
Caso queira ver a lista de ícones que o WordPress disponibiliza para estilizar seus CPT é só clicar aqui.
Agora vamos para os custom fields “campos personalizado”, clique neste link para poder baixar o plugin, caso não o conheça ainda.
Após baixado, instalado e ativado o plugin vamos para a criação dos fields.
Segue prints abaixo:
Feito isso é só clicar em salvar.
Vamos adicionar o nosso primeiro banner.
Segue print abaixo:
Código de carregamento do banner.
<div class="side-home">
<?php
$args = array( 'post_type' => 'slidehome');
$loop = new WP_Query( $args );
while ( $loop->have_posts()) : $loop->the_post();
?>
<div>
<a href="<?php the_field('link_banner'); ?>" class="banner-home" style="background:url(<?php the_post_thumbnail_url( 'full' )); ?>">
</a>
</div>
<?php endwhile; ?>
</div>
Para integrar o slick ao seu banner basta você baixar os CSS’s e Js direto do site, para fazer clique aqui.
Agora é só inserir esse código abaixo logo após o JS do slick e assim estará quase tudo pronto, só vai precisar estilizar o CSS do mesmo como no modelo abaixo.
jQuery(document).ready(function(){
// Assim que a página carregar ele vai iniciar o que tiver dentro dessa função
jQuery('.side-home').slick({ // Chamada para iniciar o Slick na class .slide-home
dots: true, // Dots são os controles do banner abaixo dele
infinite: true, // Dizendo para o slick que o banner nunca vai parar de passar para frente
slidesToShow: 1, // quantos banners ou itens irão aparecer
slidesToScroll: 1 // quantos banners ou itens vão passar ao clicar nos dosts ou nos botões de próximo
});
});
.side-home a{
height: 300px; /* Setando altura do elemento a para que possa aparecer o background */
background-size: cover; /* Tmanho adaptavel com a área disponivel */
background-position: top center; /* Alinhando ao topo da imagem e deixando centralizada na área disponivel */
}
@media(max-width:450px){ /* Responsivo para se adaptar quando a tela for menor que 450px*/
.side-home a{
height: 150px; /* Diminuindo área para que a imagem seja mostrada por inteiro quando for mobile */
}
}
Segue o exemplo abaixo:
