יצירת סליידר בוורדפרס באמצעות Vegas Slider

מכיוון ותוספי סליידרים (שבד״כ מגיעים עם תבניות קנויות) הם די איטיים ומאד מסורבלים לשימוש, נכון יהיה בהרבה מצבים לבנות סליידר בעצמכם ולמנוע את כאבי הראש שלכם ושל הלקוח.

כמובן שישנם מצבים בהם קיים צורך להשתמש בתוספים כמו Revolution Slider לטובת אנימציות מורכבות, ובאמת שאפשר להגיע לתוצאות מדהימות עם תוספים אלו, אך בהרבה מקרים אין צורך בכך וניתן להגיע לתוצאות ממש יפות עם ספריות חיצוניות (ומעט Javascript ו לCSS).

לדוגמה, אפשר לומר שהסליידר בחלקו העליון של עמוד זה הוא רספונסיבי ונראה די טוב מסכימים? לא רק שהוא נראה טוב,ניתן בקלות להוסיף לסליידר כל תוכן שתרצו וקיימות עבורכם אפשרויות רבות למשחק וקונפיגורציה של הסליידר.

מדריך זה נכנב מהמקום בו אני מנסה להעביר את הנקודה הבאה: ״ככל שיש יותר תוספים באתר, קיים פתח ליותר בעיות, למהירות טעינה איטית של האתר, ולחווית משתמש ירודה כתוצאה מכך. מעבר לכך, אני פשוט אוהב לכתוב… 🙂

הספרייה Vegas Background Slideshow

בכדי ליצור את הסליידר נשתמש בספרייה בשם Vegas Background Slideshow. ספרייה זו מאפשרת יצירת סליידרים על מסך מלא (full screen slideshow) ויצא לי להשתמש בה לא מעט פעמים באתרים שבניתי ללקוחות.

אגב, לא חייב להשתמש בה לסליידרים במסך מלא, אפשר בקלות לקבוע את רוחב וגובה הסליידר עם מעט CSS. הספרייה Vegas אף תומכת (בצורה נסיונית לטענתם) בסליידים של וידאו על מסך מלא, ומעבר לכך כוללת לא מעט אנימציות מגניבות לתחלופה של הסליידרים.

הדרך להפעיל את Vegas פשוטה. קוראים למתודה vegas() על אלמנט שאנו בוחרים. בקריאה זו מגדירים גם את האפשרויות איתן יופעל וזה נראה כך פחות או יותר במצב הבסיסי:

$("YOUR_ELEMENT").vegas({
    slides: [
        { src: "/path/image1.jpg" },
        { src: "/path/image2.jpg" },
        { src: "/path/image3.jpg" }
    ],
});

האפשרות slides הוא המקום בו אתם מגדירים את כתובות ה URL לתמונות הרקע של הסליידים, וכמות  הסליידים שיווצרו יהיו בהתאם לכמות התמונות שתוסיפו.

לספרייה מלא אפשרויות מעניינות, הנה חלק מהן:

• timer – קובע האם יופיע פס טיימר בין סלייד לסלייד בתחתית הסליידר.
• delay – קובע את הזמן בין סלייד לסלייד.
• animationDuration – משך זמן האנימציה בסלייד.
• shuffle – להציג את הסליידים בסדר רנדומלי.
• transition – סוג המעבר בין סלייד לסלייד.

נראה כעת את השלבים ליצירת סליידר בוורדפרס באמצעות Vegas Background Slideshow. אם פספסתם מעלה, אנחנו הולכים לייצר משהו בסגנון הזה רק על כל המסך:

טעינת הספרייה Vegas

הורידו את הספרייה vegas והעתיקו את הקבצים הבאים מקובץ ה ZIP לתבנית הבת שלכם:

• את הסקריפט vegas.min.js
• את קובץ העיצוב vegas.min.css
• ואת ספריית התמונות הנקראית overlays

בכדי להוסיף נכסים אלו לוורדפרס נשתמש בפונקציה wp_enqueue_scripts, הפונקציה wp_register_scripts והמקבילות שלהן ב css כבדוגמא הבאה. אם אתם מעוניינים בהסבר רחב יותר תנו מבט בפוסט הוספת נכסים בוורדפרס.

<?php 
//** BEGIN HERE **/
function vegas_assets() {
		wp_register_script( 'vegas', get_template_directory_uri() . '/js/vegas.min.js', array( 'jquery' ) );
		wp_enqueue_script( 'vegas' );

		wp_register_style( 'vegas', get_template_directory_uri() . '/css/vegas.min.css' );
		wp_enqueue_style( 'vegas' );
}
add_action( 'wp_enqueue_scripts', 'vegas_assets' );

אם ברצונכם להציג את הסליידר רק בעמוד הבית, השתמשו בתנאי is_home() או is_front_page() או כל תנאי אחר בהתאם לעמוד או לתבנית העמוד שבחרתם.

 בנייה של הסליידר

במקרה שלנו, והמקרה ההגיוני של סליידר במסך מלא, נרצה להוסיף את ה html של הסליידר לאחר תגית ה body. ניתן כמובן לערוך את header.php ולהוסיף את הקוד ישירות לשם, אך נכון יותר להוסיף הוק ב header.php הקורא לפונקציה ב functions.php.

בכדי ליצור הוק לאחר תגית ה body, נוסיף את הקוד הבא ישר לאחר תגית ה body בקובץ header.php של תבנית הבת שלכם:

<?php do_action('after_body_open_tag'); ?>

נוסיף כעת פונקציה המכילה את ה HTML של האלמנט עליו נפעיל את Vegas, בתוכו נמצאים הסליידים האינדיבידואלים והתוכן של כל אחד מהם.

הוסיפו את הקוד הבא לקובץ functions.php:

<?php 
//** BEGIN HERE **//
function custom_content_after_body_open_tag() { ?>
    
    <div id="vegasSlideshowOne">
    
        <div class="vegasWrapperOne">
            
            <div class="vegasContentOne" data-index="0">
                <div class="vegasTitle animated fadeInDown">Title 0</div>
                <div class="vegasSubtitle animated fadeIn">Subtitle 0</div>
            </div>
            
            <div class="vegasContentOne" data-index="1">
                <div class="vegasTitle animated fadeInDown">Title 1</div>
                <div class="vegasSubtitle animated fadeIn">Subtitle 1</div>
            </div>
            
            <div class="vegasContentOne" data-index="2">
                <div class="vegasTitle animated fadeInDown">Title 2</div>
                <div class="vegasSubtitle animated fadeIn">Subtitle 2</div>
            </div>
            
        </div>
    
        <div class="vegasArrows">
            <div class="arrowLeft  myArrow"><a href="#"></a></div>
            <div class="arrowRight myArrow"><a href="#"></a></div>
        </div>
    
    </div>

<?php  
}
add_action('after_body_open_tag', 'custom_content_after_body_open_tag');

האלמנט עליו נפעיל את הסליידר הוא #vegasSlideshowOne. התוכן שיופיע בכל אחד מהסליידרים נמצא בקלאס vegasWrapperOne את החיצים איתם נשלוט על הסליידר תמצאו בקלאס vegasArrows.

שימו לב שהוספנו את התכונה data-index עם מספר הסליידר לכל אחד מהסליידים האינדיבידואלים. אנו נשתמש בתכונה זו כשנגרום לחיצים להשפיע על הסליידר.

תמצאו גם שהוספנו קלאס animated fadeInDown לתוכן של הסליידים, נשתמש בו אחר כך בכדי לגרום לתוכן להתחלף בצורה קצת יותר נעימה לעין.

כברירת מחדל, Vegas Slider אינו מגיע עם דרך להחליף את השקופיות בעצמכם ונאלץ להשתמש בקצת javascript בשביל לגרום לזה לקרות.

נעצב מעט את הסליידר

לא נרחיב על ה – CSS אבל ראו כי השתמשנו ב Flexbox בכדי שנוכל בקלות למרכז את התוכן בסליידר, השימוש ב Flexbox חוסך לא מעט כאבי ראש בכל מה שקשור ל layout ועימוד חד מימדי (בעוד ש CSS Grid מיועד עבור דו מימד).

עיצבנו גם את הכפתורים להחלפת הסליידים והשתמשנו ב psuedo elements בכדי לעשות משולשים.

נכניס את ה CSS כ inline-css ב head של התבנית מכיוון ומבחינתנו הסליידר יהיה תמיד בחלקו העליון הקריטי של הדף (אם מדברים על full screen slider סטנדרטי).

ברמת ביצועים, אפילו מומלץ לבצע inlining לאלמנטים הנמצאים בחלקו הקריטי של העמוד. הנה הקוד (ורצוי לבצע minify ל CSS בתוך הפונקציה):

<?php
/*  BEGIN HERE */
function vegas_css_head() { ?>
        <style>
            #vegasSlideshowOne {
                height: 100vh !important;
                width: 100%;
            }
            .vegas-overlay {
                opacity: .6;
            }
            .vegas-wrapper {
                display: flex;
                height: 100vh !important;
                width: 100vw !important;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                font-size: 90px;
                color: white;
                line-height: 98px;
                text-align: center;
                max-width: 90%;
                margin: 0 auto;

            }
            .vegasContentOne {
                align-self: center;
                display: none;

            }
            .vegasContentOne.active {
                display: block;
            }
            .vegasTitle {
                font-size: 38px;
                line-height: 46px;
                text-transform: uppercase;
                font-weight: 900;
                width: auto;
                animation-duration: .8s;
                text-shadow: 4px 3px 0px rgba(39, 40, 35, 0.5), 9px 8px 0px rgba(0,0,0,0.15);
            }
            .vegasSubtitle {
                animation-duration: 0.7s;
                animation-delay: 0.5s;
                font-size: 18px;
                line-height: 26px;
                padding-top: 18px;
            }
            .vegasArrows {
                width: 100%;
                font-size: 24px;
                line-height: 1;
                display: none;
                z-index: 999;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .arrowLeft {
                left: 30px;
                position: absolute;
            }
            .arrowRight {
                right: 30px;
                position: absolute;
            }
            .arrowLeft a:before {
                border-width: 8px 12px 8px 0;
                border-color: transparent #fefefe transparent transparent;
                left: -2px;
            }
            .arrowRight a:before {
                border-width: 8px 0 8px 12px;
                border-color: transparent transparent transparent #fefefe;
                right: -2px;
            }
            .myArrow a:before {
                content: "";
                display: inline-block;
                width: 0;
                height: 0;
                border-style: solid;
                opacity: .9;
                position: relative;

            }
            .vegasArrows a {
                color: white;
                font-weight: 300;
                background: rgba(47, 47, 47, 0.57);
                width: 40px;
                height: 40px;
                display: inline-block;
                line-height: 40px;
                border-radius: 50%;
                -webkit-transition: all .3s;
                -moz-transition: all .3s;
                -ms-transition: all .3s;
                -o-transition: all .3s;
                transition: all .3s;
                cursor: pointer;
            }
            .vegasArrows a:hover {
                background: rgba(37, 37, 37, 0.97);
            }

            @media screen and (min-width: 768px) {
                .vegasTitle {
                    font-size: 60px;
                    line-height: 80px;
                }
                .vegasSubtitle {
                    font-size: 24px;
                    line-height: 36px;
            }
        </style>

<?php
}
add_action( 'wp_head', 'vegas_css_head' );

באותה מידה ניתן לטעון קובץ css חדש בשביל הסליידר בצורה הרגילה שאנו מכירים וכמו שהראינו בתחילת המאמר.

נפעיל את Vegas סליידר באמצעות jQuery

את הקוד הבא תוכלו להוסיף בכל קובץ JavaScript שנטען בתבנית שלכם. נכון יהיה לשים אותו בקובץ JS גנרי כלשהו שנטען אחרי jQuery, או לבצע enqueue לקובץ חדש ולהוסיף קוד זה.

שימו לב כי על קוד זה לרוץ לאחר jQuery ולאחר קובץ ה Javascript של Vegas שטענו בהתחלה.

jQuery(function($){
    /** Vegas Init **/
    $("#vegasSlideshowOne").vegas({
        timer: false,
        delay: 8000,
        animationDuration: 10000,

        slides: [
            { src: "/wp-content/themes/YOUR_THEME/images/image1.jpg" },
            { src: "/wp-content/themes/YOUR_THEME/images/image2.jpg" },
            { src: "/wp-content/themes/YOUR_THEME/images/image3.jpg" }
        ],
        animation: 'kenburns',
        overlay: '/wp-content/themes/thesis/images/overlays/03.png',

        walk: function (index, slideSettings) {
            $('.vegasContentOne').removeClass('active');
            $('.vegasContentOne[data-index="'+ index +'"]').toggleClass('active');
        }
    });

    /** Controling the Arrows **/
    $('.arrowLeft').on('click', function (e) {
        e.preventDefault();
        $("#vegasSlideshowOne").vegas('previous');
    });

    $('.arrowRight').on('click', function (e) {
        e.preventDefault();
        $("#vegasSlideshowOne").vegas('next');
    });
    
});

בהתאם למיקום של התמונות בתבנית הבת תאלצו לשנות את הכתובות לתמונות בקריאה ל Vegas.

את האפשרויות של Vegas כבר הזכרנו לפני כן, מה שנוסף זו מטודה בשם walk בשורה מספר 16. מטודה זו תקבע איזה קוד לבצע בכל פעם שמתחלף סלייד.

במקרה שלנו אנו רוצים לגרום לתוכן של הסלייד הנוכחי להעלם ולתוכן החדש להופיע בכל פעם ש Vegas מחליפה סלייד. נעשה זאת על ידי הוספה והסרה של קלאס בשם active לקונטיינר של התוכן vegasContentOne.

אנו מזהים את הקונטיינר הנוכחי לפי התכונה data-index שהוספנו ב html ומשתמשים בפרמטר index של התוסף בכדי לטרגט data-index זה.

מקווה שהייתי ברור וכנראה שיש גם דרך חכמה יותר לבצע זאת. בכל אופן, ב CSS קבענו כבר קודם לכן כי הקלאס active יהיה display: block כאשר ללא קלאס זה, האלמנט יהיה display: none כברירת מחדל.

שורות 23-31 אחראיות על החלפת הסליידים באמצעות החיצים וזאת על ידי המטודות של  previous & next של הספרייה.

אתם מוזמנים לתת מבט בדוקומנטציה של Vegas Background Slideshow בשביל עוד מידע על האפשרויות של vegas.

 נשתמש ב animate.css לאנימציות

בשלב זה אתם כבר אמורים לראות הסליידר כראוי באתר שלכם. אך כרגע התוכן מתחלף בצורה חדה ולא חלקה. זוכרים שהוספנו את הקלאס animated fadeInDown לאלמנטים של התוכן בתחילת המדריך? אם תוסיפו את animate.css, התוכן של הסליידים יתחלף באנימציה נחמדה.

באפשרותכם כמובן לשנות את הקלאס fadeInDown לכל קלאס אחר מ animate.css בכדי לשנות אנימציה. תוכלו להשתמש גם בanimation-duration ו animation-delay בשביל לשחק עם התזמון ומשך האנימציה של אלמנטים אלו.

לסיכום

לא תמיד יש את הזמן ולא תמיד צריך, אך כשניתן, בנו את הסליידר בעצמכם ותנו ללקוח אפשרות להכניס בקלות את התוכן באמצעות Advanced Custom Fields והוא יהיה מרוצה אני מבטיח.

אם אהבתם את הפוסט כנראה שתתחברו גם למדריך ליצירת קרוסלה באמצעות Slick ו Advanced Custom Fields. שתפו ותנו לייק אם אהבתם 🙂 אם  יש לכם תגובות הרגישו חופשי לשתף במחשבות…