יצירת אקורדיון בעזרת Shortcode

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

מבוא

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

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

בתכנון לקבל משהו כזה

 <div class="accordion-wrapper wrapper">
    <div class="accordion-item">
        <div class="accordion-title">
            Accordion Item Title 
        </div>
        <div class="accordion-content">
            Description for accordion Item
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-title">
            Accordion Item Title 
        </div>
        <div class="accordion-content">
            Description for accordion Item
        </div>
    </div>
</div> 

יצירת שורט קוד מסגרת

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

 function wrapper_shortcode($atts, $content = null) {
    
    $atts = shortcode_atts(array(
        'class' => '', // default value
    ), $atts, 'wrapper');

    $classes =  $atts['class'] != '' ? 'wrapper ' . $atts['class'] : 'wrapper';

    return '<div class="'. $classes .'">' . do_shortcode($content) . '</div>';
}

function register_wrapper_shortcode() {
    add_shortcode('wrapper', 'wrapper_shortcode');
}
add_action('init', 'register_wrapper_shortcode'); 

הסבר: wrapper_shortcode פונקציה שמחזירה HTML פשוט שמכיל div עם קלאס ברירת מחדל וקלאס נוסף במידה וקיים. פונקציה משמשת כמעטפת לכל התוכן שיהיה בין תחילת שורטקוד לסופו. שורטוקוד נקרה בשתי צורות.

 [wrapper] 
    Inner Content
[/wrapper]

[wrapper class="accordion-wrapper"] 
    Inner Content
[/wrapper] 

יצירת שורטקוד פנימי – פריט בודד

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

 function accordion_item_shortcode($atts, $content = null) {
    // קבלת המאפיינים שהוזנו בשורטקוד
    $atts = shortcode_atts(array(
        'title' => 'Default Title'
    ), $atts, 'accordion_item');

    // פלט פריט האקורדיון
    $output = '<div class="accordion-item">';
    $output .= '<div class="accordion-title">' . esc_html($atts['title']) . '</div>';
    $output .= '<div class="accordion-content">' . wpautop($content) . '</div>';
    $output .= '</div>';

    return $output;
}

function register_accordion_item_shortcode() {
    add_shortcode('accordion_item', 'accordion_item_shortcode');
}
add_action('init', 'register_accordion_item_shortcode'); 

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

השימוש מתבצע בצורה פשוטה

 [accordion_item title="First item"] 
    Inner Content
[/accordion_item]

[accordion_item title="Second item"] 
    Inner Content
[/accordion_item] 

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

איחוד של שני רכיבים ביחד

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

 [wrapper class="accordion-wrapper"]
    [accordion_item title="First item"] 
        Inner Content
    [/accordion_item]
    
    [accordion_item title="Second item"] 
        Inner Content
    [/accordion_item]
[/wrapper] 

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

סיכום

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

מחפשים פתרונות תכנות מקצועיים?

אם יש לך צורך בעזרה של מפתח מקצועי ומנוסה, אשמח לשמוע ממך