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

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

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

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

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

  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/

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

יוני פריימן

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

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

  1. ארז

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

  2. מירי

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

    1. יוני פריימן

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

  3. מירי

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

  4. קארו

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

  5. יעל

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

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

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

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

  6. ירדן

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

  7. שחר גל

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

  8. נאוה

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

  9. eti

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

    1. יוני פריימן

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

      1. eti

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

        1. יוני פריימן

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

  10. מני וינפלד

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

  11. טוני

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

  12. טוני

    היי יוני,
    ניסיתי לעשות את זה ולא הצלחתי.
    הכל עובד עד ה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, הייתה מקבל שגיאה…

  13. ניר אסף

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

    תודה

    1. simcha

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

  14. רוני

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

  15. נטע

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

  16. הדס

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

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

  17. אלי

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

    תודה!

  18. אדוה טמיר

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

    1. יוני פריימן

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

  19. יולי

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

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

    1. יוני פריימן

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

כתיבת תגובה