Criando Slide para o WordPress sem plugin

Existem diversos plugins para slide em padrão WordPress para usarmos, porém, as vezes precisamos de algo novo e diferente do habitual para adaptar ao projeto desejado. Seguindo essa linha, também considero que quanto menos plugin usarmos em nosso WordPress, mais leve e compacto deixaremos ele. Sempre que possível, crie seus próprios recursos/plugins.

Neste post irei mostrar como criar um slide diretamente no tema, sem precisar de qualquer plugin.

Usaremos o post_type padrão para isso, criando um link no menu administrativo do WordPress para que possa inserir a imagem e o texto. E também com formato carousel do bootstrap, mas você pode usar a galeria que desejar para isso.

Vá ao seu arquivo function.php e insira o seguinte dados:

//Banner
function banner_post_type() {

$labels = array(
'name' => _x( 'Banner', 'Post Type General Name', 'roots' ), // nome
'singular_name' => _x( 'Banner', 'Post Type Singular Name', 'roots' ), // nome único
'menu_name' => __( 'Banners', 'roots' ),
'parent_item_colon' => __( 'Parent Banner:', 'roots' ),
'all_items' => __( 'All Banners', 'roots' ),
'view_item' => __( 'View Banner', 'roots' ),
'add_new_item' => __( 'Add New Banner', 'roots' ),
'add_new' => __( 'Add Banner', 'roots' ),
'edit_item' => __( 'Edit Banner', 'roots' ),
'update_item' => __( 'Update Banner', 'roots' ),
'search_items' => __( 'Search Banner', 'roots' ),
'not_found' => __( 'Not found', 'roots' ),
'not_found_in_trash' => __( 'Not found in Trash', 'roots' ),

);
$args = array(
'label' => __( 'banner', 'roots' ),
'description' => __( 'Products Description', 'roots' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'thumbnail',), // define o que teremos no post type, no caso teremos: título, descricão e uma imagem
'menu_icon' => get_stylesheet_directory_uri() . '/assets/img/banners.png', // define o ícone no Menu
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => false,
'show_in_admin_bar' => true,
'menu_position' => 5, // onde ele irá aparecer no menu
'can_export' => true,
'has_archive' => false, // aparecer ou não nos arquivos
'exclude_from_search' => true, // excluir ou não das buscas no site
'publicly_queryable' => true,
'rewrite' => false,
'capability_type' => 'post',
);
register_post_type( 'banner', $args );

}
// inicia o post type no menu
add_action( 'init', 'banner_post_type', 0 );

Feito isso poderá ver no painel administrativo:

captura-de-tela-2016-10-03-as-15-50-23

Agora crie 1 ou mais posts para que possamos fazer um loop no nosso tema com as imagens, inserindo imagem via “imagem destacada/thumbnail”.

Então você vai implantar o código onde quer que o slide apareça no site. Geralmente eu crio um arquivo separado em php para não misturar ao código do site com o código do nosso banner, e chamo através de um include, mas não tem problema algum inserir diretamente na home do site ou na página que desejar.

Insira o código:

'banner', 'posts_per_page' => 8 );
$loop = new WP_Query( $args );
if($loop->have_posts()):
?>

About Rubens Junior 18 Articles
Programador Sênior na empresa Hositec, Front-end e Backend; Conhecimento em: Java, PHP, Android, Mysql, HTML, CSS, SASS, LESS, Type Script, Jquery, Webservice, JavaScript... e eterno estudante de outras linguagens também.