בניית Sidebar הם משהו שפעם היינו משתמשים בו המון בשביל להגדיר כל מני איזורי תוכן מסוגים שונים ופונקציונאליות על מנת לאפשר עריכה למשתמש המנהל את האתר. בהמשך אסביר גם על ACF custom fields הפופולארי ולמה אני מציין את זה בפוסט זה. מי שמכיר יודע שאפשר לבנות אחלה של איזורי עריכה לסוגי עמודים שונים בעזרת ACF. ובאופן כללי Sidebar מאפשרים לכם גם להוסיף סוגי תוכן שונים ופונקציונאליות ולנהלם בקלילות מאיזור הWidgets שיש בתפריט הניהול תחת לשונית עיצוב\appearance.
מה זה WordPress Widgets ?
ווידגטים הם פוקציות שמאפשרות לערוך תוכן או שימושיות (למשתמש) בדרך קצת יותר ייחודית . למשל נוכל להוסיף לסיידבר שלנו ווידגט של תמונה\ טקסט\ סרטון \ שדה חיפוש\ קטגוריות ועוד.. וכך לאפשר עד דפי האתר לשלב פונקציות ונראיות ייחודיות.
מה זה Sidebar?
אז סיידבר זה מה שאני אציג לכם פה על מנת שתוכלו לייצר סיידברים משלכם ותוכלו למקם אותם כרצונכם כמו כן באתר דוגמה שאנחנו בונים אשתמש בסיידבר לצורך הצגת סטריפ הודעות של אזור "מה חדש" . ככל הנראה נצטרך לבנות סיידבר נוסף לרשימה הזו: (תמונה להמחשה של איזור הווידגטים)
בניית Sidebar משלכם
כל מה שעליכם לעשות זה להיכנס ללשונית עיצוב\appearance ומשמה לנווט ל וידטגים \widgets
במידה ואין לכם את האפשרות הזו, יהיה עליכם להגדיר זאת בקובץ functions.php , תוסיפו את פיסת הקוד הזו היכן שנוח לכם בקובץ.
function mytheme_widgets_init() {
register_sidebar( array(
'name' => __( 'מה חדש' ),
'id' => 'sidebar-whats-news-widget',
'description' => __( 'Widgets in this area will be shown on the top header.' ),
'class' => 'whats-news-inner',
'before_widget' => '<div class="whats-news-icon"></div>',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
)
);
עכשיו כן יופיע לכם האזור בתפריט:
כיצד משתמשים ב Sidebar ?
עכשיו נוכל להוסיף לסיידבר את הווידג'טים שנרצה. למשל אני ארצה להוסיף ווידגטים מסוג רשימה. כל מה שנצטרך לעשות זה לקרוא לסיידבר שלנו באחד הקבצים שנבחר , למשל אני רוצה שזה יופיע בheader.php אז אשים את זה בקובץ זה, בשורה 21:
<!DOCTYPE html>
<html lang="he">
<head>
<?php wp_head(); ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title><?php bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<header>
<div class="container-width">
<div class="logo-container">
<?php echo the_custom_logo(); ?>
</div>
<nav></nav>
</div>
</header>
<div class="whats-news-widget-container">
<?php dynamic_sidebar('sidebar-whats-news-widget'); ?>
</div>
<main class="container-width">וכן אקבל תצוגה בסיסית עם המידע שבחרתי שהוספתי לתוכו (הוספתי ווידגט של רשימה) להלן צילום מסכים מהניהול ומהנראות באתר:
היכרות עם מאפייני הסיידבר
נוכל להגדיר כמה דברים מעניינים בסיידבר שלנו על מנת לייצר גמישות כזו או אחרת שתתאים לכם בהמשך. להלן מאפייני הסיידבר:
- name– יציג את שם הסיידבר במקרה שלנו "מה חדש"
- ID – חייב להיות ייחודי , הוא המקשר שלנו שנשתמש בו שנרצה לקרוא לסיידבר בנראות , שימוש – dynamic_sidebar(ID)
- description– לא חובה אבל אפשר למלא תיאור של ייעוד הסיידבר שיצרתם
- class– אפשר להוסיף רשימה של קלאסים שיעטפו את הסיידבר שלכם
- before_widget – אפשרות זו נותנת לנו יכולת להתערב בHTML שיתחיל לפני כל ווידגט שנוסיף לסיידבר שלנו.
- after_widget – כמו כן גם הסוגר שלנו
- after_title , before_title – סיידבר מכיל כותרת (לא תמיד) אפשר גם לשלוט בHTML העוטף את הטייטל מלמטה ומלמעלה (before and after).
- after_sidebar, before_sidebar – עוטף את הסיידבר כולו
איך בונים Widgets ?
בפרקי ההמשך של קורס בניית אתרים בוורדפרס יהיה מדריך וורדפרס של הקמת ווידגטים ופלאגינים. נכון לקורס זה , יהיה פחות רלוונטי להציג בניה של ווידגט.
Widgets קיימים , ועל תוספים שהם Widgets
ישנם וידגטים קיימים רבים וגם אפשר להוריד ווידגטים על ידי הורדת תוספים שמכילים פונקציונאליות של ווידגטים. לרוב לא תצטרכו לבנות לבד. אנשים כבר הרכיבו ווידגטים מהמון סוגים . ממליץ לבדוק לפני שתחליטו לרשום ווידגט משלכם. כמו כן הקפידו להוריד רק פלאגינים אמינים ומעודכנים לגרסת הוורדפרס שלכם.
לסיכום
בקורס בניית אתרים בוורדפרס הנוכחים אשתדל להשתמש במכוון האפשרויות אם כי ביימינו השימוש בווידגטים הוא פחות נפוץ אך עדיין חשוב להכיר את עולם הסיידברים והווידגטים כי מדובר בחלק משמעותי מאד שוורדפרס נבנה ונשען עליו עד היום וכן קיים אזור שלם של פוקציונאליות בעריכה \תצוגה במערכת של וורדפרס. שווה להכיר ואף להשתמש.
