לורם איפסום דולור סיט אמט
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית ליבם סולגק. בראיט ולחת צורק מונחף, בגורמי מגמש. תרבנך וסתעד לכנו סתשם השמה
אםשר ליצור סליידרים מגניבים עם Vegas Background Slideshow
לא תמיד חייב להשתמש ב Revolution Slider וחבריו...
לורם איפסום דולור סיט אמט
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית ליבם סולגק. בראיט ולחת צורק מונחף, בגורמי מגמש. תרבנך וסתעד לכנו סתשם השמה

יצירת סליידר בוורדפרס באמצעות 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 הוא המקום בו אתם מגדירים את הכתובות (urls) לתמונות הרקע של הסליידים ולפי כמות התמונות ייווצרו הסליידים בהתאם. לספרייה מלא אפשרויות מעניינות, הנה חלק מהן:

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

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

A
B
C

טעינת הספרייה 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'); ?>

נוסיף כעת פונקציה המכילה את ה markup של האלמנט עליו נפעיל את 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 אבל ראו כי השתמשנו ב flex-box בכדי שנוכל בקלות למרכז את התוכן בסליידר, השימוש ב flex חוסך לא מעט כאבי ראש בכל מה שקשור ל layout ועימוד. עיצבנו גם את הכפתורים להחלפת הסליידים והשתמשנו ב psuedo elements בכדי לעשות משולשים…

נכניס את ה style כ 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 שנטען בתבנית שלכם, נכון יהיה לשים אותו בקובץ javascript גנרי כלשהו שנטען אחרי 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 אחראיות על החלפת הסליידים באמצעות החיצים וזאת על ידי המטודות של vegas previous & next.

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

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

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

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

לסיכום

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

 

רועי יוסף

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

תגובות פייסבוק

{ 5 תגובות… הוסף אחת }

השאירו תגובה

שיתופים
קראו גם את:
בניית פופאם יציאה וורדפרס
בניית פופאפ יציאה בוורדפרס (exit intent)

במדריך זה נסביר איך לבנות פופאפ יציאה בוורדפרס ללא תוסף. המונח פופאפ יציאה (exit intent...