Jak stworzyć slider z custom post type w WordPress

Tworząc strony internetowe, bardzo często potrzebujemy rozwiązań, które wykraczają poza podstawowe funkcje WordPress. Takim rozwiązaniem jest slider, który często musi przyjmować określone własności czy stylizacje. W tym poradniku pokażę jak stworzyć własny slider, który będzie wyświetlał Custom Post.

Slider będzie stworzony na dwa sposoby:

Pierwszym sposobem będzie stworzenie slider’a, który wyświetli nam posty własnego typu przy pomocy pluginu owlCarousel. Zadaniem slider’a będzie wyświetlenie post’ów w responsywnym sliderze wspierającym system drag&drop.
Drugim slider’em będzie full-width slider, który będzie posiadał prosty skrypt JS z własną nawigacją. Slider będzie przechowywał swoje slide’y w custom post type i będzie zawierał obraz oraz tytuł obrazu.

Ponadto dla każdego typu slidera, pokażemy implementację dla dwóch page builder’ów – WPBakery oraz Elementor. Implementacja sliderów będzie odbywać się na zasadzie dołączania nowych widget’ów do wcześniej stworoznych przez nas pluginów: REDO JSComposer Additional oraz REDO Elementor Additional.

Własny slider WordPress – jak stworzyć?

Co musisz wiedzieć

Przede wszystkim musisz znać page builder’a WPBakery na której opieramy budowę stron internetowych. We wcześniejszych naszych poradnikach znajdziesz całą wiedzę potrzebną do zrozumienia procesu tworzenia widget’ów do WPBakery.
Link do artykułu: REDO JSComposer Additional – plugin dodający widget do WPBakery
Link do pluginu WPBakery: https://wpbakery.com/
Jeśli nie znasz WPBakery potrzebna będzie znajomość innego page builder’a – Elementor. Jest to jedna z najbardziej znanych wtyczek do tworzenia stron internetowych w systemie WordPress. Aby dobrze zrozumieć sposób działania naszej wtyczki do tworzenia widgetów dla Elementora – zapoznaj się z artykułem: Elementor – jak stworzyć własny plugin dodający custom post
Link do pluginu Elementor: https://elementor.com/
Potrzebne będzie podstawowe zapoznanie się z dokumentacją pluginu OwlCarousel, który pozwoli na poprawne działanie slider’a.
Link do pluginu: https://owlcarousel2.github.io/OwlCarousel2/
Bazujemy na podstawowych umiejętnościach programowania języka PHP, oraz na umiejętności tworzenia kodu HTML i CSS. Jeśli przeczytałeś nasze poprzednie poradniki to stworzenie slider’a nie powinno być trudne.
Link do listy poprzednich artykułów: Artykuły.

Tworzymy responsywny slider drag&drop przy pomocy owlCarousel

Pierwszym sposobem będzie stworzenie slider’a, który umożliwi wyświetlenie naszych custom post’ów przy pomocy pluginu owlCarousel. Zaimplementujemy dwa widgety – jeden dla page builder’a WPBakery, drugi dla Elementor’a.

Zaczniemy od stworzenia własnego typu posta.

Tworzymy custom post type Opinia

W naszym przypadku będzie to custom post type „opinia”, który będzie zawierał:

Tytuł – Nazwę referenta,
Obrazek wyróżniający – Miniaturkę referenta,
Zajawka – Tytuł w firmie referenta,
Content – Treść opinii.

Jeśli nie wiesz jak stworzyć własny custom post type – odsyłam do artykułu:
Tworzymy widok (template) dla custom post w WordPress

Tworzymy widget do pluginu WPBakery

Gdy stworzyliśmy już custom post type, który chcemy wyświetlić, przechodzimy do stworzenia widgetu. Tworzymy plik slider.php w folderze render oraz załączamy go w pliku main.php. Wewnątrz pliku slider.php dodajemy podstawową konfigurację widgetu. Jeśli nie wiesz jak to zrobić przeczytaj artykuł: Własna wtyczka dodająca widget do pluginu WPBakery

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}
class WPBakeryShortCode_slider extends WPBakeryShortCode
{
 
    protected function content( $atts, $content = null ) {

        extract( shortcode_atts( array(
            ''		=>		''
        ), $atts ) );

        $some_id = rand(5, 500);


        $opinie = get_posts(array(
                "post_type" => 'opinia',
                'numberposts'   => -1,
                'order'            => 'ASC'
            ));

        ob_start(); ?>
 
                <!-- HTML DESIGN HERE -->
                
            <div class="opinia-container">
                <h2 class="opinia-container-tytul">Opinie</h2>
                <?php foreach($opinie as $op) : ?>
									<div class="item">
                                            <div class="opinia-header">
                                                <div class="opinia-image-container">
                                                    <img src="<?php echo get_the_post_thumbnail_url($op->ID) ?>"/>
                                                </div>
                                                <div class="opinia-nazwa-container">
                                                <h4><?php echo get_the_title($op->ID); ?></h4>
                                                <p><?php echo get_the_excerpt($op->ID); ?></p>
                                                </div>
                                            </div>
                                            <div class="opinia-content-container">
                                                <?php echo $op->post_content; ?>
                                            </div>
									</div>
								<?php endforeach ?>
            </div>
                <!-- HTML END DESIGN HERE -->
            <?php
            return ob_get_clean();
    }
}
 
 
vc_map( array(
    "name" 			=> __( 'Slider', 'redo_slider' ),
    "base" 			=> "slider",
    "category" 		=> __('REDO Addons'),
    "description" 	=> __('Display references slider', ''),
    "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',
    'params' => array(

    ),
) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_slider extends WPBakeryShortCode

{

protected function content( $atts, $content = null ) {

extract( shortcode_atts( array(

'' => ''

), $atts ) );

$some_id = rand(5, 500);

$opinie = get_posts(array(

"post_type" => 'opinia',

'numberposts' => -1,

'order' => 'ASC'

));

ob_start(); ?>

<h2 class="opinia-container-tytul">Opinie</h2>

<?php foreach($opinie as $op) : ?>

</div>

</div>

<?php echo $op->post_content; ?>

</div>

<?php endforeach ?>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Slider', 'redo_slider' ),

"base" => "slider",

"category" => __('REDO Addons'),

"description" => __('Display references slider', ''),

"icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',

'params' => array(

) );

W ten sposób otrzymujemy działający widget wyświetlający wszystkie posty typu 'opinia’. Dodaliśmy dwie testowe opinie i wyświetliliśmy je za pomocą naszego widgetu.

Wtyczki REDO Additional dla WPBakery oraz Elementor pobierzesz tutaj – REDO Additional (1388 pobrań )

Tworzymy widget do pluginu Elementor

Jeśli używamy Elementor’a to musimy stworzyć widget przy pomocy naszego pluginu REDO Elementor Additional – jeśli nie wiesz jak działa nasza wtyczka ponownie odsyłam do artykułu: Elementor – jak stworzyć własny plugin dodający custom post.
Tworzymy plik slider.php w folderze render oraz załączamy go w pliku main.php. Wewnątrz pliku slider.php dodajemy podstawową konfigurację widgetu.

<?php
namespace REDO\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit;

class Slider extends Widget_Base {

   public function get_name() {
      return 'slider';
   }

   public function get_title() {
      return __( 'Slider' );
   }

   public function get_icon() {
      return 'fa fa-eye';
   }

   public function get_categories(){
      return ['general'];
   }
   protected function _register_controls() {
      $this->start_controls_section(
         'section_content',
         [
           'label' => 'Settings',
         ]
       );
       $this->add_control(
         'slider',
         [
           'label' => 'Slider',
           'type' => \Elementor\Controls_Manager::HEADING,
           'default' => 'Display references'
         ]
       );

   
       $this->end_controls_section();
     }
     
   
     protected function render(){
      
      $args = array(
         'post_type' => 'opinia',
         'posts_per_page' => -1,
         'orderby' => 'date'
     );
     $query = new \WP_Query($args);
     $opinie = ($query->posts);
?>

         <!-- HTML DESIGN HERE -->
         <div class="opinia-container">
                <h2 class="opinia-container-tytul">Opinie</h2>
                <?php foreach($opinie as $op) : ?>
									<div class="item">
                                            <div class="opinia-header">
                                                <div class="opinia-image-container">
                                                    <img src="<?php echo get_the_post_thumbnail_url($op->ID) ?>"/>
                                                </div>
                                                <div class="opinia-nazwa-container">
                                                <h4><?php echo get_the_title($op->ID); ?></h4>
                                                <p><?php echo get_the_excerpt($op->ID); ?></p>
                                                </div>
                                            </div>
                                            <div class="opinia-content-container">
                                                <?php echo $op->post_content; ?>
                                            </div>
									</div>
								<?php endforeach ?>
            </div>
         <!-- HTML END DESIGN HERE -->
       <?php
     }
   
   }

<?php

namespace REDO\Widgets;

use Elementor\Widget_Base;

use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit;

class Slider extends Widget_Base {

public function get_name() {

return 'slider';

}

public function get_title() {

return __( 'Slider' );

}

public function get_icon() {

return 'fa fa-eye';

}

public function get_categories(){

return ['general'];

}

protected function _register_controls() {

$this->start_controls_section(

'section_content',

[

'label' => 'Settings',

]

);

$this->add_control(

'slider',

[

'label' => 'Slider',

'type' => \Elementor\Controls_Manager::HEADING,

'default' => 'Display references'

]

);

$this->end_controls_section();

}

protected function render(){

$args = array(

'post_type' => 'opinia',

'posts_per_page' => -1,

'orderby' => 'date'

);

$query = new \WP_Query($args);

$opinie = ($query->posts);

<h2 class="opinia-container-tytul">Opinie</h2>

<?php foreach($opinie as $op) : ?>

</div>

</div>

<?php echo $op->post_content; ?>

</div>

<?php endforeach ?>

</div>

<?php

}

Otrzymujemy poprawnie działający widget Elementor – Slider.

Wtyczki REDO Additional dla WPBakery oraz Elementor pobierzesz tutaj – REDO Additional (1388 pobrań )

Tworzymy slider przy pomocy owlCarousel

Załączamy plugin do projektu

Część z tworzeniem widgetu jest już nam dobrze znana z poprzednich artykułów i nie sprawiła nam żadnego problemu. Teraz przejdziemy do aplikacji pluginu owlCarousel. Aby, korzystać z pluginu należy odpowiednio załączyć plugin – można to zrobić na dwa sposoby. Pierwszym sposobem jest załączenie plików wtyczki z zewnętrznego źródła CDN lub fizyczne umieszczenie plików na serwerze. W tym przypadku skorzystamy z opcji załączenia plików poprzez linki CDN.

Linki należy odpowiednio załączyć do głównego pliku CSS oraz głównego pliku JS.

CSS:

<link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css” rel=”stylesheet”>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css” rel=”stylesheet”>

JS:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js”></script>

Podstawowa konfiguracja slider’a

Teraz musimy się cofnąć do kodu naszego widget’u slider.php i nasze opinie musimy zamknąć w jednym kontenerze, który będzie działał jako owlCarousel. Aby to zrobić należy przed pętlą foreach dodać div, który nazwiemy .owl-carousel i dodamy klasę .owl-theme, aby korzystał z podstawowych własności pluginu owlCarousel.

Nasz kod będzie wyglądał następująco:

<!-- HTML DESIGN HERE -->
                
            <div class="opinia-container">
                <h2 class="opinia-container-tytul">Opinie</h2>
                <div class="owl-carousel owl-theme">
                <?php foreach($opinie as $op) : ?>
									<div class="item">
                                            <div class="opinia-header">
                                                <div class="opinia-image-container">
                                                    <img src="<?php echo get_the_post_thumbnail_url($op->ID) ?>"/>
                                                </div>
                                                <div class="opinia-nazwa-container">
                                                <h4><?php echo get_the_title($op->ID); ?></h4>
                                                <p><?php echo get_the_excerpt($op->ID); ?></p>
                                                </div>
                                            </div>
                                            <div class="opinia-content-container">
                                                <?php echo $op->post_content; ?>
                                            </div>
									</div>
								<?php endforeach ?>
                </div>
            </div>
                <!-- HTML END DESIGN HERE -->

<h2 class="opinia-container-tytul">Opinie</h2>

<?php foreach($opinie as $op) : ?>

</div>

</div>

<?php echo $op->post_content; ?>

</div>

<?php endforeach ?>

</div>

Teraz przechodzimy do inicjacji owlCarousel(). W głównym pliku js, dodajemy podstawową konfigurację pluginu:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
})

$('.owl-carousel').owlCarousel({

loop:true,

margin:10,

nav:true,

items: 1

})

Gotowe! Stworzyliśmy slider przy pomocy owlCarousel.

Nasz kod javascript prawidłowo zainicjował skrypt owlCarousel() dla wcześniej stworzonego div’a .owl-carousel. Posiada podstawowe właściwości slidera. Jeśli chcielibyśmy bardziej szczegółowo ustawić nasz slider – nic nie stoi na przeszkodzie. Zapoznaj się z dokumentacją pluginu i ustaw odpowiednie wartości.

Prosty slider WordPress z własną nawigacją

Przechodzimy do stworzenia slider’a, który będzie posiadał podstawową animację przy zmienianiu slide’ów i nawigację. Taki typ slider’a jest zazwyczaj wykorzystywany jako pierwsza sekcja na stronie głównej – możemy znaleźć jego wykorzystanie w naszym projekcie Pierson-Export.

Tworzymy custom post type „slider”

Nasze slide’y będziemy przechowywać w custom post type : „slider”. Chcemy aby slide zawierał obraz od wyświetlenia oraz tytuł slide’a. Czyli potrzebne będą nam dwa pola:

Obrazek wyróżniający,
Tytuł.

Jeśli nie wiesz jak tworzyć custom post type – ponownie odsyłam do artykułu: Tworzymy widok (template) dla custom post w WordPress.

Widget zawierający slider – WPBakery, Elementor

Jeśli stworzyliśmy już custom post type, należy stworzyć podobnie jak w przypadku pierwszego typu slider’a pliki do naszych pluginów – w zależności od wykorzystywanego page builder’a korzystamy z odpowiedniej wtyczki:

WPBakery – REDO JSComposer Additional
Elementor – REDO Elementor Additional

Proces tworzenia widgetu znajdziecie w tych artykułach:

Przechodzimy do tworzenia widgetu. W tym przypadku zrobię to dla page builder’a WPBakery. Konfiguracja slider’a dla Elementora będzie bardzo podobna jak w przypadku slider’a wykorzystującego owlCarousel, więc możesz sprawdzić jak to zrobić klikając tutaj.

Tworzymy plik customslider.php w folderze render i przypisujemy go w main.php. Następnie dodajemy podstawową konfigurację widgetu w pliku customslider.php.

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

class WPBakeryShortCode_customslider extends WPBakeryShortCode {

    protected function content( $atts, $content = null ) {

        extract( shortcode_atts( array(
            ''		=>		''
        ), $atts ) );

        $slider = get_posts(array(
                "post_type" => 'slider',
                'orderby'          => 'date',
                'numberposts'   => -1,
                'order'            => 'ASC'
            ));
        ob_start(); ?>
        <!-- HTML DESIGN HERE -->
            <div class="slider-container">
            </div>
        <!-- HTML END DESIGN HERE -->
        <?php
        return ob_get_clean();
    }
}
vc_map( array(
    "name" 			=> __( 'Custom Slider', 'redo_customslider' ),
    "base" 			=> "customslider",
    "category" 		=> __('REDO Addons'),
    "description" 	=> __('Display custom slider', ''),
    "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',
    'params' => array(

    ),
) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_customslider extends WPBakeryShortCode {

protected function content( $atts, $content = null ) {

extract( shortcode_atts( array(

'' => ''

), $atts ) );

$slider = get_posts(array(

"post_type" => 'slider',

'orderby' => 'date',

'numberposts' => -1,

'order' => 'ASC'

));

ob_start(); ?>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Custom Slider', 'redo_customslider' ),

"base" => "customslider",

"category" => __('REDO Addons'),

"description" => __('Display custom slider', ''),

"icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',

'params' => array(

) );

Struktura własnego slider’a WordPress

Teraz możemy przejść do stworzenia struktury slider’a. W wcześniej stworzonym div’ie – .slider-container – tworzymy nawigację naszego slider’a, która będzie wyświetlana w div’ie – .slider-change. Przed wyświetleniem nawigacji należy sprawdzić czy nasz slider zawiera na tyle dużo slide’ów do wyświetlenia, aby stworzyć nawigację. Slider musi mieć więcej slide’ów niż 1, więc dodajemy warunek:

<?php if(count($slider) !=0 && count($slider) != 1) : ?>

1	<?php if(count($slider) !=0 && count($slider) != 1) : ?>

Następnie wewnątrz diva .slider-change – tworzymy iteracje za pomocą pętli foreach, wyświetlającą nawigację, która będzie zawierać linki do naszych slide’ów. Każdy link musi zawierać odpowiednie ID odwołujące do odpowiadającego slide’a. Musimy więc stworzyć licznik $i=0 – będzie on odpowiadał za nadanie odpowiedniego ID elementom nawigacji. Będziemy go powiększać po każdym dodaniu ID elementu nawigacji. Dodatkowo ID będziemy wyświetlać jako element nawigacji – powiększone o 1. Kod nawigacji:

<?php if(count($slider) !=0 && count($slider) != 1) : ?>
                    <div class="slider-change">
                            <?php foreach($slider as $slide) : ?>
                                <?php if($i==0) : ?>
                                    <a id="<?php echo $i; $i++;?>" class="slider-num slider-active"><?php echo $i; ?></a>
                                <?php else  : ?>
                                    <a id="<?php echo $i; $i++;?>" class="slider-num"><?php echo $i; ?></a>
                                <?php endif; ?>
                            <?php endforeach ?>
                    </div>
            <?php endif; ?>

<?php if(count($slider) !=0 && count($slider) != 1) : ?>

<?php foreach($slider as $slide) : ?>

<?php if($i==0) : ?>

<a id="<?php echo $i; $i++;?>" class="slider-num slider-active"><?php echo $i; ?></a>

<?php else : ?>

<a id="<?php echo $i; $i++;?>" class="slider-num"><?php echo $i; ?></a>

<?php endif; ?>

<?php endforeach ?>

</div>

<?php endif; ?>

Teraz przechodzimy do wyświetlenia slide’ów. Tworzymy pętlę foreach, wyświetlającą zawartość zmiennej $slider. Wcześniej należy stworzyć licznik $x = 0 ,który sprawdzi by pierwszy element w tablicy dostał klasę aktywacyjną slide – .slide-active. Klasa ta będzie sprawiać by slide był widoczny, natomiast slide’y nie posiadające tej klasy, nie będą widoczne na ekranie. Obrazy wyświetlimy jako background slide’u. Tytuł slide’u będzie zawarty w nagłówku h2 z klasą .slider-header. Kod slider’a:

<?php foreach($slider as $slide) : ?>
                        <?php if($x==0) : ?>
                        <div class="slider slide-active " style="background: url(<?php echo get_the_post_thumbnail_url($slide->ID, 'full'); ?>);">
                            <div class="slider-content">
                                <h2 class="slider-header"><?php echo $slide->post_title; $x++; ?></h2>
                            </div>
                        </div>
                        <?php else : ?>
                        <div class="slider" style="background: url(<?php echo get_the_post_thumbnail_url($slide->ID, 'full'); ?>);">
                            <div class="slider-content">
                                <h2 class="slider-header"><?php echo $slide->post_title; ?></h2>
                            </div>
                        </div>
                        <?php endif; ?>
                    <?php endforeach ?>

<?php foreach($slider as $slide) : ?>

<?php if($x==0) : ?>

<h2 class="slider-header"><?php echo $slide->post_title; $x++; ?></h2>

</div>

<?php else : ?>

<h2 class="slider-header"><?php echo $slide->post_title; ?></h2>

</div>

<?php endif; ?>

<?php endforeach ?>

Całość kodu PHP wraz z licznikami:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

class WPBakeryShortCode_customslider extends WPBakeryShortCode {

    protected function content( $atts, $content = null ) {

        extract( shortcode_atts( array(
            ''		=>		''
        ), $atts ) );

        $slider = get_posts(array(
                "post_type" => 'slider',
                'orderby'          => 'date',
                'numberposts'   => -1,
                'order'            => 'ASC'
            ));
            $i = 0;
            $x = 0;
        ob_start(); ?>
       
        <!-- HTML DESIGN HERE -->
            <div class="slider-container">
            <?php if(count($slider) !=0 && count($slider) != 1) : ?>
                    <div class="slider-change">
                            <?php foreach($slider as $slide) : ?>
                                <?php if($i==0) : ?>
                                    <a id="<?php echo $i; $i++;?>" class="slider-num slider-active"><?php echo $i; ?></a>
                                <?php else  : ?>
                                    <a id="<?php echo $i; $i++;?>" class="slider-num"><?php echo $i; ?></a>
                                <?php endif; ?>
                            <?php endforeach ?>
                    </div>
            <?php endif; ?>
                    <?php foreach($slider as $slide) : ?>
                        <?php if($x==0) : ?>
                        <div class="slider slide-active " style="background: url(<?php echo get_the_post_thumbnail_url($slide->ID, 'full'); ?>);">
                            <div class="slider-content">
                                <h2 class="slider-header"><?php echo $slide->post_title; $x++; ?></h2>
                            </div>
                        </div>
                        <?php else : ?>
                        <div class="slider" style="background: url(<?php echo get_the_post_thumbnail_url($slide->ID, 'full'); ?>);">
                            <div class="slider-content">
                                <h2 class="slider-header"><?php echo $slide->post_title; ?></h2>
                            </div>
                        </div>
                        <?php endif; ?>
                    <?php endforeach ?>
                    
            </div>
        <!-- HTML END DESIGN HERE -->
        <?php
        return ob_get_clean();
    }
}


vc_map( array(
    "name" 			=> __( 'Custom Slider', 'redo_customslider' ),
    "base" 			=> "customslider",
    "category" 		=> __('REDO Addons'),
    "description" 	=> __('Display custom slider', ''),
    "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',
    'params' => array(

    ),
) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_customslider extends WPBakeryShortCode {

protected function content( $atts, $content = null ) {

extract( shortcode_atts( array(

'' => ''

), $atts ) );

$slider = get_posts(array(

"post_type" => 'slider',

'orderby' => 'date',

'numberposts' => -1,

'order' => 'ASC'

));

$i = 0;

$x = 0;

ob_start(); ?>

<?php if(count($slider) !=0 && count($slider) != 1) : ?>

<?php foreach($slider as $slide) : ?>

<?php if($i==0) : ?>

<a id="<?php echo $i; $i++;?>" class="slider-num slider-active"><?php echo $i; ?></a>

<?php else : ?>

<a id="<?php echo $i; $i++;?>" class="slider-num"><?php echo $i; ?></a>

<?php endif; ?>

<?php endforeach ?>

</div>

<?php endif; ?>

<?php foreach($slider as $slide) : ?>

<?php if($x==0) : ?>

<h2 class="slider-header"><?php echo $slide->post_title; $x++; ?></h2>

</div>

<?php else : ?>

<h2 class="slider-header"><?php echo $slide->post_title; ?></h2>

</div>

<?php endif; ?>

<?php endforeach ?>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Custom Slider', 'redo_customslider' ),

"base" => "customslider",

"category" => __('REDO Addons'),

"description" => __('Display custom slider', ''),

"icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',

'params' => array(

) );

Skrypt Javascript obsługujący nawigację slider’a

Przechodzimy do stworzenia skryptu slider’a, który obsłuży nam nawigację między slide’ami. Wcześniej należy stworzyć kilka przykładowych slide’ów z tytułami i obrazami – w naszym przypadku będą to trzy slide’y.

Do stworzenia skryptu wykorzystamy czysty javascript, ponieważ są to bardzo proste instrukcje nie wymagające angażowania jQuery.

Tworzymy dwie tablice:

Tablica zawierająca linki nawgiacji slider’a – myBtns[]
Tablica zawierająca slide’y – sliders[]

Za pomocą querySelectorAll pobieramy nasze elementy:

let myBtns = document.querySelectorAll('.slider-num');
let sliders = document.querySelectorAll('.slider');

1 2	let myBtns = document.querySelectorAll('.slider-num'); let sliders = document.querySelectorAll('.slider');

Teraz w pętli for dla każdego elementu myBtns[] dodajemy EventListener „click”, sprawdzający czy klikneliśmy dany link do slide’u. Jeśli klikneliśmy sprawdzamy za pomocą getElementsByClassName aktywny link nawigacji oraz aktywny slide.

 for (var i = 0; i < myBtns.length; i++) {
      myBtns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("slider-active");
        var currentSlide = document.getElementsByClassName("slide-active");
      });
    }

for (var i = 0; i < myBtns.length; i++) {

myBtns[i].addEventListener("click", function() {

var current = document.getElementsByClassName("slider-active");

var currentSlide = document.getElementsByClassName("slide-active");

});

}

Teraz należy usunąć aktywne klasy i przypisać je do odpowiedniego linku w nawigacji oraz odpowiedniego slide’u. W ten sposób otrzymujemy całość skryptu JS:

<script>

    let myBtns = document.querySelectorAll('.slider-num');
    let sliders = document.querySelectorAll('.slider');
    for (var i = 0; i < myBtns.length; i++) {
      myBtns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("slider-active");
        var currentSlide = document.getElementsByClassName("slide-active");
        current[0].className = current[0].className.replace("slider-active", "");
        currentSlide[0].className = currentSlide[0].className.replace("slide-active", "");
        this.className += " slider-active";
        sliders[this.id].className += " slide-active";
      });
    }

</script>

let myBtns = document.querySelectorAll('.slider-num');

let sliders = document.querySelectorAll('.slider');

for (var i = 0; i < myBtns.length; i++) {

myBtns[i].addEventListener("click", function() {

var current = document.getElementsByClassName("slider-active");

var currentSlide = document.getElementsByClassName("slide-active");

current[0].className = current[0].className.replace("slider-active", "");

currentSlide[0].className = currentSlide[0].className.replace("slide-active", "");

this.className += " slider-active";

sliders[this.id].className += " slide-active";

});

}

</script>

Kod CSS naszego slider’a

Gotowe. Mamy nasz slider z działającą obsługą nawigacji. Teraz należy przejść do stylizacji i dodania odpowiednich wartości naszym klasom.

Pierwszą czynnością jest stylizacja naszego kontenera – musi posiadać position: relative, aby poprawnie przechowywał nasze slide’y, które będą miały position: absolute oraz będą wyświetlane na full-width. Odpowiednio dla slide’u trzeba ustawić background:cover aby obraz pokrył całą powierzchnię diva. Domyślnie .slider będzie posiadał visibility: hidden, dopiero po otrzymaniu klasy .slide-active wraz z animacją fadeIn visibility zmieni się na visible.

Nawigację możemy stylizować w dowolny sposób, tak samo jak możemy zmienić sposób jej wyświetlania w kodzie PHP. Poniżej dodaje naszą stylizację CSS slider’a, zawierającą również animację slide’ów.

/* Slider */
.slider-container {
    position: relative;
    margin-top: -30px;
    top: 0 !important;
    height: 900px;
    display: flex;
    overflow-y: hidden;
    background-color: #000;
}
.slider {
    position: absolute;
    visibility: hidden;
    height: 900px;
    width: 100%;
    background-position: center !important;
    background-repeat: no-repeat !important; 
    background-size: cover !important;
    display: flex;
    align-items: center;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
.slide-active {
    animation: 2s fadeIn;
    animation-fill-mode: forwards;
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.slider-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 255px;
    max-width: 950px;
    margin-top: 180px;
}
.slider-header {
    margin: 0px;
    color: #fff;
}
.slider-change {
    height: 180px;
    width: 60px;
    position: absolute;
    right: 255px !important;
    top: 400px;
    display: flex;
    flex-direction: column;
    text-align: right;
}
.slider-num {
    position: absolute;
    color: #ffffff;
    margin: 0 0 33px 0;
    cursor: pointer;
    display: block !important;
    z-index: 3;
    margin-left:30px;
    font-family: Lato;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
  color: rgba(255, 255, 255, 0.3);
}
.slider-num:nth-child(2){
    margin-top: 60px;
}
.slider-num:nth-child(3){
    margin-top: 120px;
}
.slider-num:after {
    content: '';
    position: absolute;
    width: 20px;
  height: 20px;
  opacity: 0.3;
  background-color: #ffffff;
  margin-left: 12px;
  margin-top: 5px;
}
.slider-active:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    margin-left: 17px;
    opacity: 1;
     margin-top: 15px;
}
.slider-active {
    font-family: Lato;
  font-size: 38px;
  font-weight: bold;
  color: #ffffff !important;
  margin-left: 15px;
}
.slider-active a {
    color: #ffffff !important;
}
/* End Slider */

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

/* Slider */

.slider-container {

position: relative;

margin-top: -30px;

top: 0 !important;

height: 900px;

display: flex;

overflow-y: hidden;

background-color: #000;

}

.slider {

position: absolute;

visibility: hidden;

height: 900px;

width: 100%;

background-position: center !important;

background-repeat: no-repeat !important;

background-size: cover !important;

display: flex;

align-items: center;

}

@keyframes fadeIn {

0% {

opacity: 0;

}

100% {

visibility: visible;

opacity: 1;

}

.slide-active {

animation: 2s fadeIn;

animation-fill-mode: forwards;

}

@-webkit-keyframes slide-in-top {

0% {

-webkit-transform: translateY(-1000px);

transform: translateY(-1000px);

opacity: 0;

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

opacity: 1;

}

@keyframes slide-in-top {

0% {

-webkit-transform: translateY(-1000px);

transform: translateY(-1000px);

opacity: 0;

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

opacity: 1;

}

.slider-content {

display: flex;

flex-direction: column;

justify-content: center;

margin-left: 255px;

max-width: 950px;

margin-top: 180px;

}

.slider-header {

margin: 0px;

color: #fff;

}

.slider-change {

height: 180px;

width: 60px;

position: absolute;

right: 255px !important;

top: 400px;

display: flex;

flex-direction: column;

text-align: right;

}

.slider-num {

position: absolute;

color: #ffffff;

margin: 0 0 33px 0;

cursor: pointer;

display: block !important;

z-index: 3;

margin-left:30px;

font-family: Lato;

font-size: 24px;

font-weight: bold;

font-stretch: normal;

font-style: normal;

line-height: normal;

letter-spacing: normal;

text-align: right;

color: rgba(255, 255, 255, 0.3);

}

.slider-num:nth-child(2){

margin-top: 60px;

}

.slider-num:nth-child(3){

margin-top: 120px;

}

.slider-num:after {

content: '';

position: absolute;

width: 20px;

height: 20px;

opacity: 0.3;

background-color: #ffffff;

margin-left: 12px;

margin-top: 5px;

}

.slider-active:after {

content: '';

position: absolute;

width: 20px;

height: 20px;

background-color: #ffffff;

margin-left: 17px;

opacity: 1;

margin-top: 15px;

}

.slider-active {

font-family: Lato;

font-size: 38px;

font-weight: bold;

color: #ffffff !important;

margin-left: 15px;

}

.slider-active a {

color: #ffffff !important;

}

/* End Slider */

Otrzymaliśmy działający slider WordPress

W ten sposób otrzymaliśmy slider z prostym kodem JS i CSS, który możemy w dowolny sposób zmieniać zarówno pod kątem struktury jak i wyglądu.

1 2 3

Slide 1

Slide 2

Slider 3

Podsumowanie

W tym artykule przedstawiliśmy jak stworzyć slider w WordPress wyświetlający custom post type na dwa sposoby. Nauczyliśmy się podstawowej konfiguracji pluginu owlCarousel, który jest bardzo uniwersalnym narzędziem do tworzenia różnego typu sliderów. Plugin jest lekki, responsywny i co ważne – nie obciąża naszej strony. Drugim sposobem jest rozwiązanie, które pozwala na stworzenie prostego slider’a z podstawową nawigacją, własnym skryptem JS oraz prostym kodem CSS.

Oba sposoby wymagają pewnych udoskonaleń, natomiast stosując je mamy możliwość pełnego dostosowania slider’a w sposób jaki potrzebujemy. Korzystając z gotowych rozwiązań, często jesteśmy zmuszeni do pewnych ustępstw i nie możemy zaaplikować niektórych właściwości.

Jeśli chcesz dowiedzieć się więcej na temat tworzenia widgetów do Elementor lub WPBakery i nie tylko – zapoznaj się z innymi naszymi artykułami – https://redo-interactive.com/przydatne-artykuly/