יצירת כפתור קרא עוד שמרחיב את הטקסט
נתחיל בבעיה, לפעמים יש מצבים שאנו רוצים לכתוב פסקה עם הרבה טקסט באתר, אך חוששים שיהיו גולשים שזה יהיה להם מעט יותר מידי טקסט.
הפתרון יכול לבוא בכל מיני אפשרויות, אני אסביר פתרון אחד-
התוכן יוצג בחלקו, ולאחר פסקה או שניים, נציג כפתור "קרא עוד" ובלחיצה עליו יפתח המשך הטקסט.
אז איך מבצעים?
אנו נעשה שימוש במינימום "קוד" ובמקסימום אלמנטור.
גוררים את הווידגטים ההבאים:
- תוכן – התוכן שנרצה שיופיע לפני הכפתור.
- כפתור – כפתור "קרא עוד" (יופיע רק כאשר התוכן יהיה סגור)
- כפתור – כפתור "צמצם טקסט" (יופיע רק כאשר התוכן יהיה פתוח)
- תוכן – התוכן שיופיע לאחר פתיחת הכפתור.
עכשיו, לעבודה
- לאיזור שבו יופיע הווידגטים, ניתן קלאס – textabout.
- לכפתור הראשון ניתן שני קלאסים – extend-trigger more (מוסיפים קלאסים תחת לשונית "מתקדם").
- לכפתור השני גם ניתן שני קלאסים – extend-trigger less.
- לתוכן (זה שצריך להופיע אחרי הכפתורים) ניתן קלאס – 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/
הצלחתם?
מצאתם טעות?
נתקלתם בבעיה?
מוזמנים לשתף אותנו בתגובות >>
האם הקוד מותאם גם לבנייה עם קונטיינרים?
אמנם הפוסט קצת ישן…אבל אני נתקלתי בו עכשיו אשמח לעזרה.
ניסיתי הכל לפי השלבים ולא עובד לי…
היי לא הצלחתי להבין איך עושים את הכפתור הזה, כי יש לי טקסט ארוך שאני רוצה לצמצם ממש..
אשמח להסבר שוב
היי!
בעזרת יוני האלוף הקוד המתאים ל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');
});
});
הטמעתי את הקוד js קיימת שגיאה
תוכל לצרף את השגיאה שאנסה לעזור?
היי, תודה על המדריךף כשעשיצי את זה במקום אחד זה עבד יפה אבל אם אני רוצהלעשות זאת בכמה פוסטיםשל טקסט בעמוד הבית הוא פותח את כולם בו זמניתף איך אפשר שכל אחד יהיה עצמאי ?
תודה אורנה
הי, אני מצטערת שאני לוחצת אבל מה הדרך לעשות כמה כפתורים באותו הדף שכל כפתור יפתח לבד, מה צריך לשנות בקוד
תודה
בשביל זה צריך קצת לערוך את הקוד JS שישפיע רק על הווידג׳ט הנוכחי ולאעל כל השאר ע״י שימוש ב this$
היי!
יש אפשרות שתוכל לעזור עם השינוי של הJS שישפיע רק על הווידגט הנוכחי? לא מצליחה להוסיף את הthis במקום המתאים
תודה רבה!!!
הצלחתי לעשות את מה שכתבת אבל משום מה אני עושה את זה בכמה מקומות באותו הדף כל פעם שאני פותחת כפור זה פותח לי את כל הכפתורים. מה אני עושה לא נכון.
תודה
היי תודה רבה הצלחתי הכל
יש רק בעיה אחת שלא נעלם לי הכפתור read more כשפתוח והפוך תמיד יש את שני כפתורים
כתבתי את הקוד הנ״ל שבלחיצה על התמונה תפתח גלריה ובלחיצה נוספת היא תסגר כמו בקישור :
https://hazan.9988.co.il/אביזרים/
תלחצו על עין חתול, הבעיה היא שאני רוצה שתפתח רק הגלריה שלו ז״א שכל מוצר יפתח את הגלריה שלו סוג של parent
רק שניסיתי לכתוב parent וזה לא הגיב
היי אפשר שוב הסבר איפה ביודוק מכניסים את הקוד JS ?
תודה
הי יוני.
רוצה להוסיף את האפשרות של קרא עוד, אבל לא הצלחתי להבין בדיוק מה עושים, אשמח אם תוכל להסביר שלב אחרי שלב
רק התחלתי לעבוד עם Wordpres לא הבנתי מה זה 'ניתן קלאס – textabout'.
אם תוכל לפרט את הצעדים למתחילים אודה מאוד. שחר
היי, תודה על המדריך. פעלתי לפי ההדרכה, הכנסתי את ה js לתוסף insert header and footer והקוד מופיע כטקסט בראש העמוד: https://fisys.land-p.co.il/
אודה מאוד לעזרה. תודה מראש!
היי יוני, קודם כל תודה על המדריך!!
אין לי הכנסת JS במותאם אישית ולא ככ הבנתי לאיפה אני צריכה להכניס את זה ואיך…?
בשמחה, תענוג =)
חפש תוסף insert headers and footers אולי תוכל להוסיף את ה JS שם
הצלחתי! תודה!!!
רק כל פעם שאני לוחצת על הכפתור הוא גם מחזיר אותי לראש העמוד יש לך מושג למה?
איזה כיף!!
תסירי את ה # מכתובת הקישור בכפתור
אהלן יוני,
אני צריך כזה פתרון לארכיון מוצרים, שאני רוצה שיהיה כפתור הצג עוד כשיש הרבה מוצרים בקטגוריה, יש לך פתרון לכזה דבר? תודה רבה
לא… אין לי משהו כזה שם.
אם אני אכניס את הקוד דרך התוסף insert headers and footers זה יהיה אולי פתרון יותר טוב?
היי יוני,
ניסיתי לעשות את זה ולא הצלחתי.
הכל עובד עד הJS
הוספתי אותו בקובץ functions.php למטה ואני מקבל שגיאה:
syntax error, unexpected '$', expecting variable (T_VARIABLE)
יודע מה הבעיה אולי?
תודה מראש 🙂
תוכל לצרף פה דוגמה לקוד שהוספת ב functions.php?
וגם קישור לאתר…
היי, תודה כל התגובה 🙂
העתקתי פשוט את הקוד כפי שהוא מופיע פה, הייתי אמור להוסיף עוד משהו?
וקישור לאתר זה יותר בעייתי, כי הוא נמצא בפיתוח וסגור…
הכנסת בתוך הוק wp_footer?
אם אתה מכניס ככה JS ל functions.php, הייתה מקבל שגיאה…
היי יוני,
מה אם אני רוצה לשים שני אלמנטים עם כפתוח "קרא עוד" וקרא פחות" ? במצב כזה זה פותח את שני הטקסטים יחד….. אני רוצה שלכל טקסט יהיה כפתורים שיפעלו רק עליו (באותו העמוד), האם יש דרך לעשות את זה ?
ראה:
http://www.assaf-adv.co.il/סיפורי-הצלחה
תודה
ענו פה תשובה לגבי זה? נתקלתי באותו שאלה.
תודה
יהיה צריך לשנות טיפה את הקוד
איך אפשר לעשות שזה יעבוד רק במובייל ובדסקטופ ישאר כרגיל (ללא הכפתורים וההסתרה)?
תודה,
היי, בשביל לגשת לcss מותאם אישית באלמנטור צריך את גרסת הפרו לא?
אפשר גם להכניס ב CSS בתבנית תחת ההתאמה אישית
אהלן יוני, תודה על המדריך, עשיתי לפי מה שכתבת אך זה לא בדיוק עובד כמו שרציתי, כשאני עושה הצגת עמוד רואים את התוכן הראשון והכפתור הרחבה , הוא אינו מקושר ולא נפתח התוכן הנוסף, ובמקום מראה לי חלל ריק על העמוד:
http://www.hdev.co.il/קידום-אתרים-אורגני-בגוגל. בנוסף לא הבנתי איפה אני מטמיע את הJS, לא זוכר שיש תיקיה כזאת בתבנית אסטרה
היי הדס, סליחה על הדיליי התגובה =)
ה JS חלק בילטי נפרד מהתהליך, כך שאם לא הטמעת אותו הפיתוח לא יעבוד כמובן.
לגבי איפה מטמעים JS בתבנית אסטרה, אני באמת לא יודע איפה, אולי יש איזור ל JS מותאם אישית בהגדרות התבנית.
היי,תודה רבה, אני מנסה לעשות משהו דומה: איך ניתן ליצור "תיבה" שנפתחת אוטומטית כשהסמן(עכבר) עובר מעל מילה\אייקון\תמונה מסוימת. הכוונה שיפתח אוטומטית חלון (לא טאב בנפרד) שבחלון הזה ניתן לרשום טקסט נוסף, ואותו חלון יסגר אם אזיז את העכבר משם.
תודה!
הצלחתי להיכנס לאתר מפרוקסי ואני לא רואה שה JS נמצא בשום מקום, פני אלי בפרטי ואנסה לעזור.
https://www.facebook.com/yonifre
חסום?! 🙁
הטמעתי את הקובץ JS בתיקיית הJS של התבנית בCPANEL
קישור לאתר? בוודאי http://www.imaareshona.co.il
האתר ככל הנראה חסום לגלישה מתאילנד אז קצת קשה לי לבדוק ככה, בכל מקרה, איפה הטמעת את ה JS סביר להניח ששם הבעיה?
היי, עשיתי את כל השלבים וזה לא עובד 🙁
תוכלי לצרף קישור? שנבדוק איפה הבעיה.
את ה css הבנתי איפה להטמיע. אבל את הקוד ל Js לא הבנתי איפה זה נמצא…
תודה על המדריכים!
היי יולי, לפעמים יש בהגדרות של התבנית מקום להכנסת JS מותאם אישית.
במידה ואין לך כזה, יש להכניס את הקוד בקובץ המתאים בקבצי התבנית
ואפשרי גם מקובץ ה functions.php בדרך של הזרקה לפוטר