יצירת עמוד שאלות ותשובות בוורדפרס (FAQ Page) בעזרת ACF

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

במדריך זה נשתמש בשדה ה-Repeater כדי ליצור עמוד שאלות ותשובות (FAQ) בוורדפרס – סקשן שהלקוח יכול לנהל ישירות מממשק הניהול. הנה כיצד נראית התוצאה הסופית:

הגדרת שדה ה-Repeater ב-ACF

התקינו והפעילו את ACF Pro (שדה ה-Repeater דורש את גרסת ה-Pro). לאחר מכן צרו עמוד בשם שאלות ותשובות בוורדפרס.

גשו ל-ACF וצרו קבוצת שדות חדשה בשם FAQs. הוסיפו שדה Repeater בשם faqs עם שני שדות משנה (sub-fields): faq_question ו-faq_answer.

יצירת שדה חזרה עבור עמוד שאלות ותשובות ב ACF

בחלק ה-Location, שייכו קבוצת שדות זו לעמוד השאלות והתשובות שיצרתם.

שיוך שדה החזרה לעמוד שאלות ותשובות

יצירת תבנית העמוד

צרו תבנית עמוד חדשה עבור עמוד ה-FAQ. הוסיפו קובץ בשם faq.php בתיקייה הראשית של התבנית שלכם עם הקוד הבא:

<?php /* Template Name: שאלות ותשובות */ ?>

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

כעת הוסיפו את הלולאה שעוברת על כל רשומות ה-FAQ ומציגה אותן. הקובץ faq.php המלא נראה כך:

<?php /* Template Name: שאלות ותשובות */ ?>

<?php get_header(); ?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
			<?php
			//My ACF Fields for reference
			//faqs - field group
			//faq_question - sub-field
			//faq_answer - sub-field


			// check if the repeater field has rows of data
			if ( have_rows( 'faq' ) ):
				?>
                <div id="faq_container">

					<?php
					// loop through the rows of data
					while ( have_rows( 'faq' ) ) : the_row();
						?>
                        <div class="faq">
                            <div class="faq_question">
                                <span class="question"><?php echo get_sub_field( 'faq_question' ); ?></span>
                                <span class="accordion-button-icon fa fa-plus"></span>
                            </div>
                            <div class="faq_answer_container">
                                <div class="faq_answer"><?php echo get_sub_field( 'faq_answer' ); ?></div>
                            </div>
                        </div>
					<?php
					endwhile;
					?>
                </div>

			<?php
			endif;
			?>
        </main><!-- .site-main -->
    </div><!-- .content-area -->
<?php get_footer(); ?>

כל רשומת FAQ עטופה ב-div קונטיינר, מה שמאפשר את התנהגות האקורדיון ב-jQuery שנוסיף בהמשך.

שיוך תבנית העמוד

בעורך של וורדפרס, פתחו את עמוד ה-FAQ ושייכו לו את התבנית החדשה מפאנל תכונות העמוד.

שיוך עמוד שאלות ותשובות לתבנית העמוד החדשה

הוספת אקורדיון jQuery ו-CSS

התנהגות האקורדיון משתמשת ב-jQuery כדי להחליף את מצב הקונטיינר בלחיצה. צרו קובץ בשם faq.js בתיקיית js של התבנית שלכם:

jQuery(document).ready(function($)  {
    $('.faq_question').click(function() {
        if ($(this).parent().is('.open')){
            $(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},300);
            $(this).closest('.faq').removeClass('open');
            $(this).parent().find('.accordion-button-icon').removeClass('fa-minus').addClass('fa-plus');
        }
        else{
            var newHeight =$(this).closest('.faq').find('.faq_answer').height() + 30 +'px';
            $(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},300);
            $(this).closest('.faq').addClass('open');
            $(this).parent().find('.accordion-button-icon').removeClass('fa-plus').addClass('fa-minus');
        }
    });
});

כעת צרו קובץ faq.css בתיקיית ה-css של התבנית שלכם:

#faq_container {
    border: 1px solid #e5e5e5;
    margin-bottom: 10px;
    padding: 0;
}

.faq {
    border-bottom: 1px solid #eee;
}

.faq:last-child {
    border: 0;
}

.faq_answer {
    padding: 15px;
}

.faq_question {
    margin: 0;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    padding: 15px;
    align-items: center;
    transition: background .3s;
}

.faq_question:hover {
    background: #e4e4fd;
}

.question {
    margin-bottom: 5px;
    display: table-cell;
    width: 100%;
}

.faq_answer_container {
    height: 0;
    overflow: hidden;
}

.accordion-button-icon {
    display: table-cell;
    line-height: inherit;
    opacity: .5;
    filter: alpha(opacity=50);
    vertical-align: middle;
}

טענו נכסים אלו באמצעות enqueuing של וורדפרס. הוסיפו את הקוד הבא לקובץ functions.php (אל תעתיקו את תגית ה-PHP הפותחת):

<?php // DO NOT COPY THE OPENING PHP TAG


function faq_page()
{
    if (is_page_template('faq.php')) {
        wp_register_style('my-css', get_template_directory_uri() . '/css/faq.css', array(''), 1.01);
        wp_enqueue_style('my-css');
        wp_register_script('my-js', get_template_directory_uri() . '/js/faq.js', array('jquery'));
        wp_enqueue_script('my-js');
        wp_enqueue_style( 'fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css', array(), '6.5.0', 'all' );

    }
}
add_action('wp_enqueue_scripts', 'faq_page');

אם אתם משתמשים בתבנית בת, שנו את get_template_directory_uri() ל-get_stylesheet_directory_uri(). ספריית Font Awesome משמשת לאייקוני הפלוס/מינוס, אך ניתן להחליף אותם ב-SVG או באייקוני CSS אם אתם מעדיפים.

הוסיפו מספר שאלות ותשובות באמצעות שדה ה-Repeater של ACF בעמוד. כשתצפו בו, אתם אמורים לראות אקורדיון כמו זה:

הוספת סכמת FAQPage

ברגע שעמוד ה-FAQ עובד, שקלו להוסיף לו נתונים מובנים של Schema.org. גוגל תומכת בסוג הסכמה FAQPage, שיכול להציג את השאלות והתשובות שלכם ישירות בתוצאות החיפוש כ-Rich Snippets.

כך נראה ה-markup של קונטיינר ה-FAQ עם תכונות Schema.org:

<div id="faq_container" itemscope itemtype="https://schema.org/FAQPage">
    <div class="faq" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
        <div class="faq_question">
            <span class="question" itemprop="name">טקסט השאלה</span>
        </div>
        <div class="faq_answer_container" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <div class="faq_answer">
                <span itemprop="text">טקסט התשובה</span>
            </div>
        </div>
    </div>
</div>

ניתן להוסיף תכונות אלו ישירות בלולאת תבנית העמוד, כך שכל רשומת FAQ מקבלת אוטומטית את סימון הסכמה הנכון ללא מאמץ ידני מצד עורך התוכן.

שאלות נפוצות

שאלות נפוצות על בניית עמודי FAQ עם ACF:

סיכום

בניית עמוד FAQ עם שדה ה-Repeater של ACF נותנת ללקוח שליטה מלאה על השאלות והתשובות ללא צורך לגעת בקוד. שלבו אותו עם תבנית עמוד מותאמת, אקורדיון jQuery פשוט וסימון סכמת FAQPage לפתרון שהוא גם ידידותי למשתמש וגם מותאם ל-SEO.