בלוג

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

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

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

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

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

  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/

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

יוני פריימן

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

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

  1. תמר הגב 11 אוק 2023

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

  2. אור הגב 11 ינו 2022

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

  3. עמית פרץ הגב 23 אוק 2021

    היי!
    בעזרת יוני האלוף הקוד המתאים לjs כדי ליצור כמה כפתורים באותו עמוד הוא:
    jQuery(document).ready(function($) {
    $('.extend-trigger a').click(function() {
    var section = this.closest('.textabout');
    var target = $(section).find('.extend-target');
    var trigger = this;
    $(target).toggleClass('open');
    $(section).toggleClass('active');
    $(trigger).toggleClass('active');
    });

    });

  4. ארז הגב 12 ינו 2021

    הטמעתי את הקוד js קיימת שגיאה

  5. שפרלינג אורנה הגב 20 ספט 2020

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

  6. מירי הגב 14 ספט 2020

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

    1. יוני פריימן הגב 14 ספט 2020

      בשביל זה צריך קצת לערוך את הקוד JS שישפיע רק על הווידג׳ט הנוכחי ולאעל כל השאר ע״י שימוש ב this$

      1. עמית הגב 8 אוק 2021

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

  7. מירי הגב 9 ספט 2020

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

  8. קארו הגב 31 אוג 2020

    היי תודה רבה הצלחתי הכל
    יש רק בעיה אחת שלא נעלם לי הכפתור read more כשפתוח והפוך תמיד יש את שני כפתורים

  9. יעל הגב 13 מאי 2020

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

    https://hazan.9988.co.il/אביזרים/

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

    רק שניסיתי לכתוב parent וזה לא הגיב

  10. ירדן הגב 7 אפר 2020

    היי אפשר שוב הסבר איפה ביודוק מכניסים את הקוד JS ?
    תודה

  11. שחר גל הגב 3 אפר 2020

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

  12. נאוה הגב 19 פבר 2020

    היי, תודה על המדריך. פעלתי לפי ההדרכה, הכנסתי את ה js לתוסף insert header and footer והקוד מופיע כטקסט בראש העמוד: https://fisys.land-p.co.il/
    אודה מאוד לעזרה. תודה מראש!

  13. eti הגב 19 ספט 2019

    היי יוני, קודם כל תודה על המדריך!!
    אין לי הכנסת JS במותאם אישית ולא ככ הבנתי לאיפה אני צריכה להכניס את זה ואיך…?

    1. יוני פריימן הגב 19 ספט 2019

      בשמחה, תענוג =)
      חפש תוסף insert headers and footers אולי תוכל להוסיף את ה JS שם

      1. eti הגב 19 ספט 2019

        הצלחתי! תודה!!!
        רק כל פעם שאני לוחצת על הכפתור הוא גם מחזיר אותי לראש העמוד יש לך מושג למה?

        1. יוני פריימן 19 ספט 2019

          איזה כיף!!
          תסירי את ה # מכתובת הקישור בכפתור

  14. מני וינפלד הגב 25 יונ 2019

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

  15. טוני הגב 10 מרץ 2019

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

  16. טוני הגב 10 מרץ 2019

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

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

    תודה מראש 🙂

    1. יוני פריימן הגב 10 מרץ 2019

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

      1. טוני הגב 10 מרץ 2019

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

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

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

});

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

        1. יוני פריימן 10 מרץ 2019

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

  17. ניר אסף הגב 4 פבר 2019

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

    תודה

    1. simcha הגב 22 יול 2019

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

  18. רוני הגב 22 דצמ 2018

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

  19. נטע הגב 13 נוב 2018

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

  20. הדס הגב 18 אוג 2018

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

    1. יוני פריימן הגב 8 נוב 2018

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

  21. אלי הגב 22 יול 2018

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

    תודה!

  23. אדוה טמיר הגב 19 יונ 2018

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

    1. יוני פריימן הגב 19 יונ 2018

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

  26. יולי הגב 10 אפר 2018

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

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

    1. יוני פריימן הגב 15 אפר 2018

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

כתיבת תגובה