יצירת קרוסלה באמצעות Slick ו Advanced Custom Fields

במדריך זה אסביר כיצד ליצור קרוסלות באמצעות ACF ו Slick Slider.

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

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

ישנן מספר דוגמאות בסוף המדריך אך לפני שנתחיל הנה קרוסלה לדוגמא הבנויה בדיוק באותה דרך בה המדריך מתאר:


הצעדים הראשונים לבניית הקרוסלה

אני מניח כמובן שאתם משתמשים בוורדפרס כמערכת לניהול התוכן, אז לפני שאנו מתחילים, הנה שני דברים שדרושים לנו:

התוסף advanced custom fields מאפשר דרך פשוטה ונוחה ליצירת שדות מותאמים אישית בוורדפרס ויכול להרחיב את הפונקציונליות של אתרי וורדפרס. במקרה שלנו נשתמש ב repeater field על מנת לאפשר ללקוח הוספה והסרה של תמונות לקרוסלה בצורה נוחה. עוד על התוסף במאמר הזה.

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

יצירת השדה המותאם ב Advanced Custom Fields

לאחר התקנת התוסף ACF Pro תמצאו את התפריט ״שדות מיוחדים״ בלוח הבקרה של וורדפרס. הוסיפו קבוצת שדות חדשה ותנו לה שם, ״קרוסלה״ לצורך העניין.

הוספת שדה חדש-ACF

לחצו על הוספת שדה ותנו שם תחת תווית השדה (ניתן בעברית) ובחרו שם לשדה (רצוי באנגלית). בחרו ב repeater field או בשמו העברי שדה חזרה כסוג השדה.

הצטרפו לרשימת התפוצה!

תחת שדות משנה הוסיפו שדה עם תווית שדה תמונה ובחרו שם שדה image לצורך המדריך. סוג השדה כמובן צריך להיות תמונה ובחרו כי הערך החוזר יהיה מערך תמונות.

בסוף התהליך אתם אמורים לראות משהו כבתמונה הבאה:

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

תנאי להצגת השדות ב ACF

בדרך כלל אני משתמש אני בוחר כי התנאי יהיה תבנית עמוד (page template) מכיוון ולכל עמוד בתבניות שאני יוצר ישנו תבנית עמוד משלו.

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

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

הוספת הספרייה Slick Slider

על מנת ש slick יעבוד כראוי, ישנם שלושה קבצים שעליכם לטעון, שני קבצי css וקובץ js אחד. ניתן לטעון את הנכסים מ cdn או בדרך יותר מקובלת ונכונה – להגיש את הקבצים מהשרת שלכם. הנה הקוד בכדי לבצע זאת, יש להוסיפו לקובץ functions.php בתבנית הבת שלכם:

function slick_assets() {

    wp_register_script( 'slick', get_stylesheet_directory_uri() . '/slick.min.js', array( 'jquery' ), '1.0.0', true );
    
    wp_enqueue_script( 'slick' );

    wp_register_style( 'slick', get_stylesheet_directory_uri() . '/slick.css' );
    wp_register_style( 'slick-theme', get_stylesheet_directory_uri() . '/slick-theme.css' );
    
    wp_enqueue_style( 'slick' );
    wp_enqueue_style( 'slick-theme' );

}
add_action( 'wp_enqueue_scripts', 'slick_assets' );

כמובן שעליכם להוריד את הספרייה של slick מכאן ולהוסיף את שלושת הקבצים לספרייה הראשית בתבנית הבת שלכם.

שימו לב שהוספנו תלות ל jquery בשורה 5 על מנת שקובץ ה js יטען רק לאחר ש jquery נטען. עוד על כך במאמר הוספת נכסים (קבצי Javascript ו- CSS) בוורדפרס. בנוסף, יש להעתיק את התיקייה fonts המגיעה עם slick ולהעתיק אותה לתיקייה של תבנית הבת, כמו כן כנראה ותאלצו לשנות את ה path בקובץ slick-theme.css שיפנה למיקום הנכון של הפונטים.

הצגת הקרוסלה בתבנית העמוד

אנו צריכים דרך להראות את התוכן שהכנסנו קודם לכן בתבנית העמוד שלכם (התמונות הכותרות והטקסט) במבנה ש slick דורש. למזלינו, התוסף acf מאפשר לנו לעשות זאת בצורה פשוטה. הוסיפו את הקוד הבא היכן שאתם רוצים להציג את הקרוסלה שלכם, ניתן להוסיף זאת כמובן בתבניות עמוד אך במקרה שלנו נוסיף זאת לקובץ page.php. אם קובץ זה אינו קיים בספרייה הראשית של תבנית הבת שלכם, העתיקו אותו מתבנית האם.

<?php

<div class="slick-carousel">
    <?php
    $size = 'full';
    // check if the repeater field has rows of data
    if( have_rows('slick-carousel') ):
        // loop through the rows use_cases_fields data
        while ( have_rows('slick-carousel') ) : the_row();

            $image = get_sub_field('image');

            if( !empty($image) ):
                // vars
                $alt = $image['alt'];
                // thumbnail
                $thumb = $image['sizes'][ $size ];
                $width = $image['sizes'][ $size . '-width' ];
                $height = $image['sizes'][ $size . '-height' ];
                ?>
                <div class="slick-content">
                        <img src="<?php echo $thumb ?>" alt="<?php echo $alt ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
                </div>
            <?php endif; ?>
            <?php
        endwhile;
    endif;
    ?>
</div>

?>

שימו לב למספר דברים:

  • המשתנה size בשורה מספר 7 מכיל את גודל התמונה שברצונכם לטעון. אתם יכולים לקבוע את גדלי התמונות באמצעות הפונקציה add_image_size, כאשר וורדפרס מגיעה עם שלושה גדלים כברירת מחדל – full, meduim & thumbnail. עוד על כך במאמר הבא.
  • בשורה 7 ו 9 השם בתוך have_rows צריך להיות זהה שם השדה של ה repeater field.
  • שימו לב ל class בשורה מספר 3. אנו הולכים להשתמש ב class זה על מנת להפעיל את הקרוסלה.

הפעלת Slick Carousel

הדבר היחידי שנשאר לכם לעשות הוא לקרוא לפנוקציה שמפעילה את slick. ההפעלה נורא פשוטה ומתבצעת על ידי הקוד הבא:

$('.slick-carousel').slick();

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

אם עדיין אינכם מבינים כיצד לבצע זאת, הוסיפו קובץ בשם custom.js לספרייה הראשית בתבנית הבת שלכם ושנו את הקוד שכתבנו מעלה לקוד הבא:

function slick_assets() {

    wp_register_script( 'slick', get_stylesheet_directory_uri() . '/slick.min.js', array( 'jquery' ), '1.0.0', true );
    wp_register_script( 'custom', get_stylesheet_directory_uri() . '/custom.js', array( 'slick' ) );
    
    wp_enqueue_script( 'slick' );

	wp_register_style( 'slick', get_stylesheet_directory_uri() . '/slick.css' );
	wp_register_style( 'slick-theme', get_stylesheet_directory_uri() . '/slick-theme.css' );
    
    wp_enqueue_style( 'slick' );
    wp_enqueue_style( 'slick-theme' );

}
add_action( 'wp_enqueue_scripts', 'slick_assets' );

הוסיפו את הקוד הבא לקובץ custom.js שיצרתם:

jQuery(document).ready(function($) {

    $('.slick-carousel').slick();

});

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

jQuery(document).ready(function($) {

    $('.slick-carousel').slick({
        rtl: true
    });

});

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

 

אולי בעצם נוסיף מספר פרמטרים על מנת שתראו את הקרוסלה בצורה הזו:

jQuery(document).ready(function($) {

    $('.slick-carousel').slick({
        dots: true,
        infinite: true,
        speed: 300,
        autoplay: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        rtl: true
    });

});

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




לסיכום

במדריך זה ראיתם כיצד ליצור קרוסלה דינמית באמצעות התוסף acf והספרייה slick. כפי שאתם רואים, האפשרויות רבות, הקרוסלה ריספונסיבית (בדקו באתר של slick כיצד לבצע זאת), אינה שוקלת הרבה ומאד שימושית. ניתן לבצע דברים מאד יפים בעזרת ספרייה זו וישנן אפשרויות של סינכרון, lazy loading ועוד. שימוש ספרייה זו ביחד עם acf מאפשרת קרוסלה מגניבה שניתנת לעריכה ממש בקלות.

אם אהבתם את המדריך אנא שתפו ואולי גם תאהבו את המדריך על יצירת סליידר בוורדפרס באמצעות הספרייה Vegas.

שאלות ורעיונות יבורכו… 🙂

רועי יוסף

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

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

{ 13 תגובות… הוסף אחת }
  • דן שטרמר 12 באוקטובר 2017, 22:55

    תודה רבה!
    יצרתי בזמנו גלריה כזו עם Flexslider ו-ACF.
    אתה מכיר ספריית jQuery לגלריה טובה שתעבוד יפה עם שדה ה'גלריה' של ACF? תוספי הגלריות של וורדפרס הם כ"כ עמוסים ולא אינטואיטיביים לעומת הגלריה הפשוטה של וורדפרס (וגם של ACF). אם היה אפשר להגדיר כמה אפשרויות להצגת הגלריה דרך שדות ACF, לדוגמא: massonary, carousel, slider והפלט בצד הקדמי היה בהתאם לתמונות שהעלה עורך האתר.
    דן

  • אורי צציק 17 באוקטובר 2017, 16:24

    אחלה מאמר. כמה ניטפוקים ברשותך:
    1. כדאי לציין שמדובר ב ACF PRO ולא בפלאגין החינמי (אלא אם שדה חזרה עבר גם לחינמי לאחרונה. לא בדקתי).
    2. כתבת "שימו לב ל class בשורה מספר 5". הקלאס מופיע בשורה מספר 3.
    3. בנוגע ל RTL, מנסיון עם slick להוסיף rtl: true לא תמיד מספיק. בדוקומנטציה שלהם הם מדגישים שמומלץ להוסיף לאלמנט האב של הקרוסלה את התכונה dir="rtl". ואכן, בחלק מהמקרים, זה הדבר היחיד שפתר לי את זה גם כשכל האתר היה מוגדר כ rtl. (עד היום לא הצלחתי לזהות מתי זה נחוץ ומתי זה לא נחוץ).

    • רועי יוסף 17 באוקטובר 2017, 16:34

      היי אורי 🙂
      שמח שאהבת….לגבי הערותייך:

      1. ציינתי שהתוסף שדרוש הוא ACF Pro ..
      2. אתה צודק! זה קרה כי החלפתי את המערכת שמציגה קוד באתר.. תוקן.
      3. אני לא מכיר הערה כזו בדוקומנטציה, בכל מקרה, אם האתר בעברית כנראה dir=rtl קיים ל HTML ומכאן שאלמנט האב יירש זאת. אישית לא נתקלתי בסיטואציה שזה לא עבד אך תודה שעדכנת, אולי אחרים ייתקלו בתופעה..

  • יעל לוי 4 בדצמבר 2017, 22:27

    היי, מדריך מצוין, תודה רבה.
    אני מחפשת דרך להציג title לתמונה שתיכנס תחת subfield נוסף ליד ה image subfield כשהתמונה "נבחרת" בקרוסלה. (כמו בדוגמה של הקרוסלה עם התמונה שגדלה באמצע).
    אם למשל העלתי באותה שורה image ו title כשאותו image יוצג בקרוסלה יוצג גם ה title שנמצא באותה השורה. כתבתי את הקוד ב JS אבל אני לא מצליחה לחשוב על דרך להכניס את זה ל ACF עם repeater
    אשמח לעזרה, תודה.

    • רועי יוסף 5 בדצמבר 2017, 1:33

      היי יעל, תודה 🙂

      איני בטוח שאני מבין איפה את נתקלת בבעיה… הוסיפי subfield שיהיה הכותרת לאותו repeater והציגי אותו ב css רק כאשר התמונה נמצאית במרכז. כאשר את משתמשת בפרמטר center mode בכדי לקבל את האפקט של התמונה הממורכזת, אותה תמונה מקבלת אוטומטית קלאס בשם slick-center. אני לא רואה צורך ב javascript בשביל זה.

      • יעל לוי 5 בדצמבר 2017, 9:30

        אני צריכה שלכל תמונה יהיה title ושהוא יוצג רק כשהתמונה ממורכזת, לא הבנתי איך לעשות את זה עם CSS, תוכל להראות לי דוגמה?

        • רועי יוסף 6 בדצמבר 2017, 19:42

          קשה לי לחשוב על דוגמא כרגע, אך הכוונה היא כי רק לתמונה הממורכזת ישנו קלאס בשם slick-center. השתמשי בקלאס זה בכדי לקבוע האם הכותרת תוצג או לא על התמונה באמצעות css. מקמי את הכותרת על התמונה באמצעות שימוש ב absolute positioning.

          בהצלחה! 🙂

השאירו תגובה

שיתופים
קראו גם את:
אופטימיזציה Contact Form 7
אופטימיזציה של Contact Form 7 לביצועים טובים יותר

בטלו את טעינת cf7 מדפים שאינם משתמשים בו על מנת לשפר את מהירות האתר. התוסף Contact...