יצירת סיידבר בוורדפרס – (dynamic sidebars)

יצירת dynamic sidebars / סרגלים צידיים בוורדפרס

סיידבר, או בעברית ״סרגל צידי״ הוא מונח בוורדפרס שיכול לבלבל. זאת בעיקר מהסיבה שבהקשר של בניית אתרים או תבניות, הסיידבר הוא קומפוננטה של מתווה האתר (layout). בוורדפרס לעומת זאת, המונח סיידבר מתייחס גם ל dynamic sidebars, או איזור הווידג׳טים. כפי שאתם יודעים, זהו איזור במערכת הניהול של וורדפרס אליו ניתן לגרור ווידג׳טים, ולאחר מכן להציג ווידג׳טים אלו בכל מקום שתרצו בתבנית שלכם. להוסיף לבלבול, dynamic sidebars אינם חייבים להיות מוצגים בתבנית הסיידבר (sidebar template) של האתר, אלא ניתן להוסיפם היכן שתבחרו בתבנית הוורדפרס שלכם.

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

מהו סיידבר בוורדפרס?

בוורדפרס, המונח סיידבר כפי שהזכרנו, מתייחס לשני דברים:

  • סיידבר דינמי – dynamic sidebar: סוג של ״כלי קיבול״ למספר ווידג׳טים, כאשר למשתמש יכולת לקבוע אלו באיזור הווידג׳טים במערכת הניהול.
  • תבנית סיידבר – sidebar template: תבנית סיידבר המציגה תוכן כלשהו (לאו דווקא את ה dynamic sidebar).

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

יצירת dynamic sidebar

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

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

בדוגמא ספציפית זו, אנו ניצור סיידבר (dynamic sidebar) הנקרא primary והוא ישמש אותנו במשך שאר המאמר.

ארגומנטים ל dynamic_sidebar

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

id – זהו הפרמטר החשוב ביותר. וורדפרס תשתמש ב id זה בכדי לשייך ווידג׳טים לסיידבר ספציפי ואתם תשתמשו ב id זה בכדי להציג את הסיידבר. ה- id צריך להיות ייחודי לאותו סיידבר. כברירת מחדל, וורדפרס קובעות פרמטר זה ל sidebar-$i (כאשר $i הוא מספר הסיידבר שקיימים).

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

פרמטר זה יכול אף להיות מתורגם, אז וודאו כי קובעים textdomain כראוי במידה ואתם מפתחים את התבנית בעצמכם. כברירת מחדל, וורדפרס קובעות פרמטר זה ל sidebar-$i (כאשר $i הוא מספר הסיידבר שקיימים).

description – הפרמטר description הוצג לראשונה בגירסת וורדפרס 2.9. הוא מאפשר לכם לקבוע תיאור / הסבר לכיצד הסיידבר נמצא בשימוש בתבנית שלכם. ברירת המחדל של פרמטר זה היא string ריק. פרמטר זה גם כן יכול להיות מתורגם.

before_widget – פרמטר זה הוא בעצם ה״עטיפה״ של הווידג׳טים המשוייכים ל sidebar זה. במילים אחרות, אלמנט html העוטף כל אחד מהווידג׳טים. לפרמטר זה ישנם מספר דברים שאתם נדרשים לקבוע על מנת שתוספים למיניהם יוכלו להשתמש בהם כראוי ואלו התכונות id (%1$s) ו class (%2$s).

כברירת מחדל, וורדפרס קובעת אלו כרשימה (list items) בצורה הבאה <li id="%1$s" class="widget %2$s">. אישית, אני בדרך כלל מעדיף לקבוע אותם כ <div>.

after_widget – פרמטר זה כפי שאתם מנחשים הוא הסוגר של אותו אלמנט html אותו פתחנו ב before_widget. כברירת מחדל וורדפרס קובעת זה כ </li>.

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

כברירת מחדל, וורדפרס קובעת זו כ <h2 class="widgettitle"></h2>. העדפתי האישית היא לשנות תגית זו ל <h3> או <h4>. זה נכון יותר לדעתי מבחינה סמנטית. מה גם שלתת class ללא קו מפריד זה אינו קריא.

after_title – פרמטר זה הוא הסוגר של אותה תגית שקבעתם ב before_title. כברירת מחדל וורדפרס קובעת כי תגית זו תהיה <h2></h2>. אתם פשוט נדרשים לוודא כי הסוגר יהיה תואם למה שבחרתם בפרמטר before_title.

הצגת dynamic sidebar

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

הפונקציה dynamic_sidebar() מקבלת פרמט יחיד $index, אשר יכול להיות אחד משני הפרמטרים, ה id או ה name של אותו סיידבר (אותם קבעתם כשיצרתם את הסיידבר). למרות שטכנית ניתן להשתמש בשניהם, השימוש ב id נפוץ ובטוח יותר.

על הדרך, הצטרפו לרשימת התפוצה !

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

באופן כללי, קוד זה נכניס בקובץ הנקרא sidebar-primary.php, אשר תקראו עליו בחלק המדבר על תבניות סיידבר בהמשך המאמר. עם זאת, ניתן לקרוא לפונקציה dynamic_sidebar() בכל מקום שתרצו בתבנית הוורדפרס שלכם.

ישנם מפתחי תבניות אשר בוחרים להציג תוכן מסויים כברירת מחדל במידה והמשתמש לא שייך אף ווידג׳ט לסיידבר ספציפי. בכדי לבדוק האם ל dynamic sidebar מסויים משוייכים ווידג׳טים, יש להשתמש בפונקציה is_active_sidebar().

כפי שאנו משתמשים בפונקציה dynamic_sidebar() בכדי להציג את הסיידבר, הפונקציה is_active_sidebar() מקבלת פרמטר יחיד בשם $index, אשר יהיה המזהה (id) של אותו סיידבר עליו תרצו לבצע את הבדיקה.

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

תבניות סיידבר

תבניות סיידבר או sidebar templates הן בעצם הבית של הקוד להצגת ה dynamic sidebar. לתבנית וורדפרס בסיסית יש בד״כ תבנית סיידבר אחת והיא sidebar.php. אם לתבנית שלכם קיים סיידבר יחיד, זהו הקובץ היחיד שאתם צריכים.

תבניות סיידבר מוצגות בתבניות וורדפרס על ידי הפונקציה get_sidebar(). הקוד מטה הוא מה שנדרש בכדי לטעיון את sidebar.php:

הפונקציה get_sidebar() יכולה לקבל פרמטר יחיד $name המאפשר לכם להציג תבנית סיידבר ספציפית יותר. לדוגמא, הקוד מטה ייקרא לתבנית sidebar-primary.php:

בכדי לשמור על סדר בקוד וארגון נכון בתבנית הוורדפרס שלכם, אתם צריכים ליצור תבנית סיידבר לכל אחד מה dynamic sidebars שיצרתם. נניח ויצרתם שני dynamic sidebars כשה- id שלהם הוא primary ו secondary, אתם צריכים ליצור שני קבצים (תבניות סיידבר) בשמות sidebar-primary.php ו sidebar-secondary.php.

השתמשו בקוד מטה בכדי להציג את תבניות הסיידבר האלו:

זכרו כי תבנית הסיידבר אינה בהכרח מציגה את ה dynamic sidebars, היא יכולה להציג כל תוכן שתבחרו…

לסיכום

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

רועי יוסף

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

תגובות פייסבוק

{ 1 תגובה… הוסף אחת }

השאירו תגובה

כבר הולכים ? הרשמו לרשימת התפוצה !

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

לעולם לא נשתף את הפרטים שלכם...

קראו גם את:
אופטימיזציה לתמונות באתרי וורדפרס – קידום אתרים
אופטימיזציה לתמונות באתרי וורדפרס – קידום אתרים | SEO

בין אם אתם בלוגרים, כותבי תוכן למגזין אינטרנטי, או מנהלי חנות אינטרנטית לבטח נתקלתם בשאלה...