סינון פוסטים לפי טקסונומיה באמצעות Isotope
לחצו על כפתורי הפילטר בכדי לסנן את הפוסטים לפי הטקסונומיה ובכדי לקבל מושג על התוצאה אליה נגיע בפוסט זה...
כיצד להפוך סרטון Youtube לרספונסיבי בוורדפרס?
כיצד להפוך סרטון Youtube לריספונסיבי בוורדפרס? אלו הכותבים בלוג - יודעים לוודאי כי בכדי לגרום לפוסטים…
קידום בגוגל – אופטימיזציה לתוכן (On-Page SEO) – חלק ב'
קידום בגוגל - אופטימיזציה לתוכן (On-Page SEO) - חלק ב' אם ברשותכם אתר שאתם מעוניינים לקדם בגוגל ובמנועי חיפוש אחרים,…
האופן בו גוגל ומנועי חיפוש מתייחסים לכתובות URL
האופן בו גוגל ומנועי חיפוש מתייחסים לכתובות אתרים מנועי חיפוש זקוקים לכתובת אתר ייחודית לכל עמוד בכדי לאפשר…
שילוב תגובות פייסבוק באתר וורדפרס
שילוב תגובות פייסבוק באתרי וורדפרס פייסבוק היא הרשת החברתית הגדולה ביותר שקיימת. זו הסיבה שהרבה…
הוספת אפשרויות עיצוב לעורך הויזואלי בוורדפרס
הוספת אפשרויות עיצוב לעורך הויזואלי בוורדפרס וורדפרס מגיעה עם אפשרויות די בסיסיות בעורך הויזואלי (visual editor),…
Disavow Tool – דחייה והתנערות מקישורים באיכות נמוכה
Disavow - דחייה והתנערות מקישורים באיכות נמוכה בשנים האחרונות מתרוצצת שמועה בין מקדמי האתרים הטוענת כי אין…
יצירת פורטפוליו (Masonry) בוורדפרס עם אנימציית טעינה
יצירת פורטפוליו תמונות (Masonry) עם אנימציית טעינה בפוסט זה, אשר לא מעט מהקוד המופיע בו נלקח מהפוסט…
איך להעביר אתר וורדפרס (מיגרציה) בין שרתים / דומיינים?
איך להעביר אתר וורדפרס (מיגרציה) בין שרתים / דומיינים? יוצא לי לראות לא מעט אנשים, בין אם מתחילים או…
טיפול וניהול הזמנות (Orders) באתרי ווקומרס
טיפול וניהול הזמנות (Orders) באתרי ווקומרס הזמנות נוצרות כאשר לקוח מסיים את תהליך התשלום (Checkout Process).…
משחקים עם עמוד ״החשבון שלי״ בווקומרס
עמוד החשבון שלי - ווקומרס מסתבר שעמוד ״החשבון שלי״ בווקומרס אינו כזה פשוט לשינוי ועריכה,…
מדריך שימוש בסיסי ב Advanced Custom Fields
מדריך שימוש בסיסי ב Advanced Custom Fields קשה לתאר את ההתרגשות שהייתה בי ברגע שגיליתי את נפלאות…
שנמוך גרסת וורדפרס – Downgrade WordPress
שנמוך גירסה של וורדפרס - Downgrade WordPress האם יצא לכם מתישהו לעדכן את וורדפרס לגרסה חדשה ולאחר…
יצירת שורטקודים (shortcodes) בוורדפרס
wordpress-shortcodes סביר להניח כי לכולנו יצא להשתמש בשורטקודים בקונסטלציה כזו או…
הוספת כפתור Scroll to Top באתרי וורדפרס
הוספת כפתור Scroll to Top באתרי וורדפרס ניתן לומר כי בשנים האחרונות הפופולריות של כפתורי back to…
טעינת כפתורי שיתוף בצורה אסינכרונית בוורדפרס
וורדפרס טעינת כפתורי שיתוף אסינכרונית שיתוף התוכן שלכם ברשתות חברתיות חשוב מהסיבות הברורות. אך המהירות…
גודל התמונות בוורדפרס (Image Sizes)
גדלים של תמונות בוורדפרס במדריך קצר זה אסביר על גדלי התמונות בוורדפרס והשימוש בהן…
שינוי מיקום תיקיית התמונות באתר וורדפרס לסאב דומיין
מיקום תיקיית התמונות וורדפרס כיצד לשנות את מיקום תיקיית התמונות באתר וורדפרס לסאב דומיין…
אופטימיזציה של Contact Form 7 לביצועים טובים יותר
אופטימיזציה Contact Form 7 עבור ביצועים טובים יותר כברירת מחדל התוסף Contact Form 7 טוען את קבצי ה…
על הפניות וביטויים רגולריים (Regex) בוורדפרס
על הפניות 301 וביטויים רגולריים (Regex) ההבנה כיצד ליישם הפניות 301 עם ביטויים רגולריים (Regular Expressions)…
כיצד לקשר את Google Search Console לגוגל אנליטיקס
כיצד לקשר את Google Search Console לגוגל אנליטיקס באפשרותכם לחבר את החשבון בגוגל אנליטיקס עם Google Search Console…
הקדמה על Variable Fonts – העתיד של פונטים ברשת
הקדמה - Variable Fonts - העתיד של פונטים ברשת לפני כשלוש שנים הוצגה אבולוציה של פונטים מסוג OpenType (הפורמט…
טעינת פונטים באמצעות font-face
טעינת פונטים באמצעות font-face@ font-face@ הוא חוק ב CSS המאפשר שימוש בפונטים מותאמים (Custom…
איך לגבות ולשחזר גיבוי של אתר וורדפרס? (עם וללא תוסף)
איך לגבות אתר וורדפרס באמצעות UpdraftPlus נראה דרך לבצע גיבוי לאתר וורדפרס ללא תוסף ודרך נוספת…
הקשר בין מהירות טעינת האתר לזמן בייט ראשון (TTFB)
הקשר בין מהירות טעינת האתר לזמן בייט ראשון (TTFB) כאשר אתם בודקים מהירות וזמן טעינה של אתרי וורדפרס (ובכלל),…

יצירת פילטר וסינון אלמנטים באמצעות הספרייה Isotope

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

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

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

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

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

1. צרו תבנית עמוד חדשה (Page Template)

בכדי ליצור תבנית עמוד משלכם (Page Tempate), צרו קובץ PHP חדש בתיקייה הראשית של התבנית, נאמר blog-template.php. כעת הוסיפו את הקוד הבא בחלקו העליון (המנעו מרווחים או שורות ריקות לפני קוד זה):

<?php /* Template Name: Blog Template */ ?>

צרו עמוד חדש בוורדפרס ובחרו Page template זה עבור העמוד שיצרתם בממשק הניהול של וורדפרס תחת Page Attributes. חזרו קובץ ה PHP והוסיפו את הקוד הבא מיד לאחר השורה המופיעה מעלה:

<section class="isotope-filter">
    <div class="filters">
        <div class="tag-filters__desktop">
            <ul class="filter-btns">
                <li>
                    <button data-filter="*">הכל</button>
                </li>
                <?php

                $terms = get_terms(array(
                    'taxonomy' => 'my_taxonomy',
                    'parent' => 0,
                    'childless' => 'true',
                    'hide_empty' => 'true'
                ));

                foreach ($terms as $term) { ?>
                    <li>
                        <button data-filter=".<?php echo $term->slug; ?>"><?php echo $term->name; ?></button>
                    </li>
                    <?php
                }

                ?>
            </ul>
        </div>
    </div>
    <div class="grid">
        <?php

        global $post;

        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 24,
            'post__not_in'   => array($post->ID),
            'ignore_sticky_posts' => true,
            'orderby'   => 'rand'
        );

        $custom_query = new WP_Query($args);

        while ($custom_query->have_posts()) : $custom_query->the_post();

            $terms = get_the_terms($post->ID, 'taxonomy');
            // get the first term
            $term = array_shift($terms);
            ?>

            <div class="grid-item <?php echo $term->slug; ?>">
                <div class="grid-item-inner">
                    <div class="my-title"><?php the_title(); ?></div>
                    <?php the_post_thumbnail(); ?>
                    <?php echo wp_trim_words( get_the_excerpt(), 18 ) ?>
                </div>
            </div>

        <?php endwhile; ?>

        <?php wp_reset_postdata(); // reset the query ?>

    </div>
</section>

נסביר בכמה מילים את הקוד המצורף מעלה:

א. בשורות 10-22 אנו משתמשים בפונקציה get_terms על מנת לקבל את המונחים (terms) הקיימים בטקסונומיה בשם my_taxonomy ולהציגם,. מונחים אלו יהיוו את כל אחד מאפשרויות הפילטר שלנו ולפי אלו יתבצע הסינון.

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

שימו לב כי בשורה 19 אנו מדפיסים כל אחד מהכפתורים, וזאת כאשר לכל אחד מאלו קיימת תכונה (attribute) בשם data-filter אשר תחילתה היא נקודה (' . ') והיישר אחריה מזהה (slug) המונח.

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

על הכפתור בשם ״הכל״ המציג את כל הפוסטים להכיל ב data-filter  את הסימן כוכבית*.

ב. בשורות 28-62 אנו מדפיסים אלמנט בעל הקלאס grid, כאשר אנו משתמשים בלולאה פשוטה משלנו בכדי להציג את כל הפוסטים מסוג התוכן הנקרא post (הפוסטים הדיפולטיבים של וורדפרס).

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

לכל אחד מאותם פוסטים הקלאס grid-item (שורה 50) המלווה בקלאס נוסף אשר בדיוק כמזהה של המונחים המוצגים באפשרויות הפילטר שלנו, כלומר מזהה הטקסונומיה (או מזהה הקטגוריה) של אותו פוסט.

כלומר אם כפתור הסינון של המונח woocommerce נראה כך:

<button data-filter=".woocommerce">ווקומרס וחנויות אונליין</button>

ה Markup של פוסט המשוייך לטקסונומיה/קטגוריה זו נראה כך:

<div class="grid-item woocommerce">
    <div class="grid-item-inner">
        ...
    </div>
</div>

יש לשים לב כי במקרה זה אנו מניחים כי לכל אחד מהפוסטים משוייכת טקסונומיה/קטגוריה אחת בלבד!!!

ג. בשורה 50 אנו מאפסים את הלולאה של וורדפרס. הסבר על נושא זה בפוסט שכתבתי על מספר דרכים לאיפוס הלולאה של וורדפרס.

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

2. טעינת הקבצים הנחוצים ל Isotope

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

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

שימו לב כי קיימת תלות (dependency) בין הקבצים מכיוון וסדר טעינתם חשוב:

function isotope_assets() {
    if ( is_page_template('page-templates/blog-template.php') ) {

        wp_enqueue_script(
            'isotope',
            get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js',
            array('jquery'),
            '1.0.1',
            true
        );

        wp_enqueue_script(
            'images-loaded',
            get_stylesheet_directory_uri() . '/js/imagesloaded.pkgd.min.js.js',
            array('isotope'),
            '1.0.1',
            true
        );

        wp_enqueue_script(
            'isotope-init',
            get_stylesheet_directory_uri() . '/js/isotope-init.js',
            array('images-loaded'),
            '1.0.1',
            true
        );

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

התנאי הראשוני מוודא כי אנו טוענים קבצים אלו רק בתבנית העמוד הרלוונטית – במקרה שלנו בתבנית המשתמשת בקובץ blog-template.php. עליכם לדבוק בדרך זה ולטעון ספריות ונכסים כלשהן אך ורק כשהם דרושים וזאת לטובת ביצועים וזמן טעינה של האתר.

ניתן מבט על הקובץ המממש את Isotope

בוא ניתן מבט בקובץ isotope-init.js איתו אנו מפעילים את Isotope על הגריד ומפעילים את אפשרות הסינון בלחיצה על הכפתורים בפילטר:

(function ($) {

    var $grid = $('.grid').imagesLoaded( function() {
        // init Isotope after all images have loaded
        $grid.isotope({
            // options...
            itemSelector: '.grid-item',
            layoutMode: 'fitRows'
            originLeft: false
        });
    });
    
    $('.filter-btns').on( 'click', 'button', function() {
        var filterValue = $( this ).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });

}(jQuery));

בשורה 3 אנו מוודאים כי התמונות של האלמנטים נטענו על יד הספרייה imagesLoaded ורק לאחר מכן מריצים את הפונקציה המממשת את Isotope על אלמנט בעל הקלאס grid.

Isotope מגיעה עם לא מעט פרמטרים, Events ו Methods עליהן לא נרחיב (תנו מבט בדוקומנטציה הרשמית). במקרה שלנו – אנו קובעים ל Isotope כי האלמנטים בתוך הקונטיינר הינם אלו בעלי הקלאס grid-item.

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

בשורות 12-15  פונקציה פשוטה הקובעת כי בלחיצה על אחד מכפתורי הסינון – התכונה של הכפתור אותה קבענו ב Markup באמצעות data-filter תועבר ל Isotope – והסינון יתבצע לפי תכונה זו.

3. עיצוב הפילטר, האלמנטים ויצירת הגריד

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

.isotope-filter {
    padding-top: 130px;
}

.filter-btns {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 20px 40px;
    justify-content: space-evenly;
    border-width: 1px 0;
}

.filter-btns li {
    list-style-type: none;
    display: flex;
    margin: 0 0 10px;
    border: 1px solid #ccc;
    align-items: center;
    transition: all .2s;
    background: white;
    border-radius: 50px;
}

.filter-btns li:hover {
    background: #616161;
    color: white;
}

.filter-btns li:last-child {
    margin-left: 0;
}

.filter-btns button {
    background: #0000;
    border: none;
    font-size: 12px;
    width: 100%;
    padding: 0 15px;
    color: inherit;
    height: 50px;
}

.my-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 14px;
    min-height: 42px;
    line-height: 20px;
}

.grid-item-inner img {
    margin-bottom: 10px;
}

.grid-item-inner {
    padding: 20px 20px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eee;
}

.grid-item {
    width: 47%;
    margin: 1.5%;
}

@media (min-width: 1200px) {
    .grid-item {
        width: 22%;
        margin: 1.5%;
    }

    .filter-btns button {
        font-size: 13px;
        padding: 0 20px;
    }
}

ניתן לראות כי באמצעות Media Queries אנו קובע כי רוחב האלמנטים מעל ל 1200px יהיה 22% (כלומר ארבעה בשורה) ומתחת לכך שניים בשורה, זאת כמובן כאשר אני מגדיר גם ריווחים בינהם על ידי margins תואמים. לבטח ניתן לעשות זאת בדרכים שונות אך זה רק לצורך הדוגמה.

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

רועי יוסף
רועי יוסף

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

2תגובות...
  • שמעון 18 ביוני 2020, 12:57

    תודה רבה על המאמר, באיזה קובץ צריך להכניס את שלב 2 ושלב 3?

    • רועי יוסף 18 ביוני 2020, 13:00

      שלב 2 בקובץ functions.php. שלב שלוש בקובץ העיצוב של התבנית (CSS).

השאירו תגובה

 

פעימות
Up!
לבלוג