כפתור "קרא עוד" באלמנטור

יצירת כפתור קרא עוד שמרחיב את הטקסט

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

אז איך מבצעים?

אנו נעשה שימוש במינימום "קוד" ובמקסימום אלמנטור.
גוררים את הווידגטים ההבאים:

  1. תוכן – התוכן שנרצה שיופיע לפני הכפתור.
  2. כפתור – כפתור "קרא עוד" (יופיע רק כאשר התוכן יהיה סגור)
  3. כפתור – כפתור "צמצם טקסט" (יופיע רק כאשר התוכן יהיה פתוח)
  4. תוכן – התוכן שיופיע לאחר פתיחת הכפתור.
דוגמה לכפתור שמרחיב טקסט

עכשיו, לעבודה

  1. לאיזור שבו יופיע הווידגטים, ניתן קלאס – textabout.
  2. לכפתור הראשון ניתן שני קלאסים – extend-trigger more (מוסיפים קלאסים תחת לשונית "מתקדם").
  3. לכפתור השני גם ניתן שני קלאסים – extend-trigger less.
  4. לתוכן (זה שצריך להופיע אחרי הכפתורים) ניתן קלאס – extend-target.
הכנסת קלאסים לכפתורים

ועכשיו ל CSS.
בקובץ ה CSS שלנו נדביק את ה CSS שנמצא פה.

במידה ואם לא יודעים מה זה קובץ CSS או אין לכם גישה אליו, תוכלו להדביק קוד זה תחת לוח הבקרה=>> עיצוב=>> התאמה אישית=>> CSS מותאם אישית.

/*
extend button
*/
.extend-trigger a {
  cursor: pointer;
}

.extend-target {
  height: 0px;
  opacity: 0;
  transition: all 0.2s ease;
}

.extend-target.open {
  height: auto;
  opacity: 1;
}

.textabout .extend-trigger.more {
  display: block;
}
.textabout .extend-trigger.less {
  display: none;
}
.textabout.open .extend-trigger.more {
  display: none;
}
.textabout.open .extend-trigger.less {
  display: block;
}

ויש לנו גם פיסת JS קטנה להכניס:

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

     $('.extend-trigger a').click(function() {
        $('.extend-target, .extend-trigger a,.textabout').toggleClass('open');
     });

});

את ה- JS גם עדיף להכניס בקובץ JS שלכם, אך לפעמים לחלק מהתבניות (לדוגמה, oceanwp) יש איזור להכניס JS מותאם אישית תחת איזור באפשרויות שלהם כך שאפשר להכניס גם שם.

תוכלו לראות את דוגמה חיה באתר https://yaelfreiman.com/secret-bread/

הצלחתם?
מצאתם טעות?
נתקלתם בבעיה?
מוזמנים לשתף אותנו בתגובות >>

יוני פריימן

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

לפוסט הזה יש 22 תגובות

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

  2. לא… אין לי משהו כזה שם.
    אם אני אכניס את הקוד דרך התוסף insert headers and footers זה יהיה אולי פתרון יותר טוב?

  3. היי יוני,
    ניסיתי לעשות את זה ולא הצלחתי.
    הכל עובד עד הJS
    הוספתי אותו בקובץ functions.php למטה ואני מקבל שגיאה:
    syntax error, unexpected '$', expecting variable (T_VARIABLE)

    יודע מה הבעיה אולי?

    תודה מראש 🙂

    1. תוכל לצרף פה דוגמה לקוד שהוספת ב functions.php?
      וגם קישור לאתר…

      1. היי, תודה כל התגובה 🙂
        העתקתי פשוט את הקוד כפי שהוא מופיע פה, הייתי אמור להוסיף עוד משהו?

        jQuery(document).ready(function($) {
        
             $('.extend-trigger a').click(function() {
                $('.extend-target, .extend-trigger a,.textabout').toggleClass('open');
             });
        
        });
        

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

        1. הכנסת בתוך הוק wp_footer?
          אם אתה מכניס ככה JS ל functions.php, הייתה מקבל שגיאה…

  4. היי יוני,
    מה אם אני רוצה לשים שני אלמנטים עם כפתוח "קרא עוד" וקרא פחות" ? במצב כזה זה פותח את שני הטקסטים יחד….. אני רוצה שלכל טקסט יהיה כפתורים שיפעלו רק עליו (באותו העמוד), האם יש דרך לעשות את זה ?
    ראה:
    http://www.assaf-adv.co.il/סיפורי-הצלחה

    תודה

    1. ענו פה תשובה לגבי זה? נתקלתי באותו שאלה.
      תודה

  5. איך אפשר לעשות שזה יעבוד רק במובייל ובדסקטופ ישאר כרגיל (ללא הכפתורים וההסתרה)?
    תודה,

  6. היי, בשביל לגשת לcss מותאם אישית באלמנטור צריך את גרסת הפרו לא?

  7. אהלן יוני, תודה על המדריך, עשיתי לפי מה שכתבת אך זה לא בדיוק עובד כמו שרציתי, כשאני עושה הצגת עמוד רואים את התוכן הראשון והכפתור הרחבה , הוא אינו מקושר ולא נפתח התוכן הנוסף, ובמקום מראה לי חלל ריק על העמוד:
    http://www.hdev.co.il/קידום-אתרים-אורגני-בגוגל. בנוסף לא הבנתי איפה אני מטמיע את הJS, לא זוכר שיש תיקיה כזאת בתבנית אסטרה

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

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

    תודה!

  9. חסום?! 🙁
    הטמעתי את הקובץ JS בתיקיית הJS של התבנית בCPANEL

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

  10. את ה css הבנתי איפה להטמיע. אבל את הקוד ל Js לא הבנתי איפה זה נמצא…

    תודה על המדריכים!

    1. היי יולי, לפעמים יש בהגדרות של התבנית מקום להכנסת JS מותאם אישית.
      במידה ואין לך כזה, יש להכניס את הקוד בקובץ המתאים בקבצי התבנית
      ואפשרי גם מקובץ ה functions.php בדרך של הזרקה לפוטר

כתיבת תגובה

סגירת תפריט

השארו מעודכנים!

הרשמו עכשיו וקבלו כל מאמר חדש ישר למייל!