יצירת סרגל צדדי (איזור ווידג׳טים) באתרי וורדפרס

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

במאמר זה אראה כיצד ליצור סרגל צדדי (איזור ווידג׳טים) בתבניות וורדפרס כשהמטרה היא להסביר למפתחי תבניות ואוהבי וורדפרס כיצד ליצור סרגל צדדי בצורה הנכונה ואולי אף ללמד דבר אחד או שניים.

מהו סרגל צדדי בוורדפרס?

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

ניתן להציג את איזורי הווידג׳טים היכן שתרצו ולאו דווקא ב sidebar.php.

יצירת סרגל צדדי

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

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

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

<?php

add_action( 'widgets_init', 'my_register_sidebars' );

function my_register_sidebars() {

    /* Register the 'primary' dynamic sidebar. */
    register_sidebar(
        array(
            'id' => 'primary',
            'name' => __( 'Primary' ),
            'description' => __( 'A short description of the sidebar.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );

    /* Repeat register_sidebar() code for additional sidebars. */
}

?>

ארגומנטים ואפשרויות ביצירת הסרגל הצידי

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

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

'id' => 'primary',

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

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

'name' => __( 'Primary' ),

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

'description' => __( 'A short description of the sidebar.' ),

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

כברירת מחדל, וורדפרס קובעת אלו כרשימה (li). אישית, אני בדרך כלל מעדיף לקבוע אותם כ div.

'before_widget' => '<div id="%1$s" class="widget %2$s">',

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

'after_widget' => '</div>',

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

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

'before_title' => '<h3 class="widget-title">',

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

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

'after_title' => '</h3>'

הצגת הסרגל הצידי

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

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

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

<div id="sidebar-primary" class="sidebar">

    <?php dynamic_sidebar( 'primary' ); ?>

</div>

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

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

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

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

<div id="sidebar-primary" class="sidebar">

    <?php if ( is_active_sidebar( 'primary' ) ) : ?>

        <?php dynamic_sidebar( 'primary' ); ?>

    <?php else : ?>

        <!-- Create some custom HTML or call the_widget().  It's up to you. -->

    <?php endif; ?>

</div>

תבניות עמוד לסרגל הצידי

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

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

<?php get_sidebar(); ?>
    

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

<?php get_sidebar( 'primary' ); ?>

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

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

<?php get_sidebar( 'primary' ); ?>

<?php get_sidebar( 'secondary' ); ?>

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

לסיכום

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