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

גוטנברג, עורך הבלוקים של וורדפרס, מפשט את תהליך יצירת וניהול התוכן באופן ויזואלי ופשוט. בעזרת התוסף Advanced Custom Fields (ACF), תוכלו בקלות ליצור בלוקים מותאמים אישית לגוטנברג, ללא צורך בידע מעמיק ב-JavaScript.

במדריך זה תלמדו כיצד ליצור בלוק ״קריאה לפעולה (CTA)״ באמצעות התוסף ACF. בואו נתחיל!

שלב 1: רישום הבלוק בקובץ functions.php

בקובץ functions.php של התבנית שלכם, רשמו (register) את הבלוק החדש באמצעות הפונקציה acf_register_block_type().

function register_custom_cta_block() {
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'custom_cta',
            'title'             => __('Custom CTA Block'),
            'description'       => __('A custom call to action block with an image, title, description, and button.'),
            'render_template'   => 'template-parts/blocks/custom-cta.php',
            'category'          => 'common',
            'icon'              => 'megaphone',
            'keywords'          => array('cta', 'call to action', 'button'),
            'enqueue_style'     => get_template_directory_uri() . '/template-parts/blocks/custom-cta.css',
        ));
    }
}
add_action('acf/init', 'register_custom_cta_block');

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

הגדרות הבלוק:

• 'name' => 'custom_cta': מזהה ייחודי לבלוק. חייב להיות באותיות קטנות וללא רווחים.
• 'title' => __('Custom CTA Block'): השם של הבלוק כפי שמוצג בעורך גוטנברג.
• 'description' => __('A custom call to action block with an image, title, description, and button.'): תיאור קצר של הבלוק.
• 'render_template' => 'template-parts/blocks/custom-cta.php': הנתיב לקובץ ה-PHP שמכיל את תבנית הרינדור של הבלוק.
• 'category' => 'common': הקטגוריה שבה הבלוק יופיע בעורך.
• 'icon' => 'megaphone': האייקון שמוצג עבור הבלוק בעורך גוטנברג.
• 'keywords' => array('cta', 'call to action', 'button'): מילות מפתח שיעזרו למצוא את הבלוק בחיפוש.
• 'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/custom-cta.css': ה-URL לקובץ ה-CSS שמשמש לעיצוב הבלוק.

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

שלב 2: יצירת קבוצת השדות ב-ACF

בממשק הניהול של וורדפרס, גשו אל ACF > Field Groups.

1. לחצו על Add New כדי ליצור קבוצת שדות חדשה.
2. תנו לקבוצה את השם Custom CTA Block Fields.

הוסיפו את השדות הבאים:

• Title: שדה מסוג Text עבור כותרת ה-CTA.
• Description: שדה מסוג Text Area עבור תיאור ה-CTA.
• Image: שדה מסוג Image עבור תמונה.
• Button Text: שדה מסוג Text עבור טקסט הכפתור.
• Button URL: שדה מסוג URL עבור קישור הכפתור.
• Background Color: שדה מסוג Color Picker עבור צבע הרקע.

לאחר שסיימתם להוסיף את השדות, עברו להגדרות Location Rules ובחרו את האפשרות: Block is equal to Custom CTA Block.

שלב 3: יצירת תבנית הבלוק

בתיקיית התבנית שלכם, צרו את הקובץ template-parts/blocks/custom-cta.php עם הקוד הבא:

<?php
$title = get_field('title');
$description = get_field('description');
$image = get_field('image');
$button_text = get_field('button_text');
$button_url = get_field('button_url');
$background_color = get_field('background_color');
?>

<div class="custom-cta-block" style="background-color: <?php echo esc_attr($background_color); ?>">
    <?php if ($image): ?>
        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="cta-image" />
    <?php endif; ?>

    <div class="cta-content">
        <?php if ($title): ?>
            <h3 class="cta-title"><?php echo esc_html($title); ?></h3>
        <?php endif; ?>

        <?php if ($description): ?>
            <p class="cta-description"><?php echo esc_html($description); ?></p>
        <?php endif; ?>

        <?php if ($button_text && $button_url): ?>
            <a href="<?php echo esc_url($button_url); ?>" class="cta-button"><?php echo esc_html($button_text); ?></a>
        <?php endif; ?>
    </div>
</div>

שלב 4: יצירת קובץ ה-CSS

צרו את הקובץ template-parts/blocks/custom-cta.css עם הקוד הבא:

.custom-cta-block {
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    color: #fff;
    max-width: 700px;
    margin: 30px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.custom-cta-block:hover {
    transform: translateY(-5px);
}

.cta-image {
    max-width: 120px;
    margin-bottom: 20px;
    border-radius: 50%;
    border: 4px solid #fff;
}

.cta-title {
    font-size: 28px;
    margin: 15px 0;
    font-weight: 700;
}

.cta-description {
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cta-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #ff6b6b;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #e05656;
}

שלב 5: הוספת הבלוק בעורך גוטנברג

1. פתחו פוסט או עמוד בעורך הבלוקים של וורדפרס.
2. לחצו על הכפתור + כדי להוסיף בלוק חדש.
3. חפשו את Custom CTA Block והוסיפו אותו לתוכן.
4. מלאו את השדות עבור הכותרת, התיאור, התמונה, טקסט הכפתור, כתובת ה-URL של הכפתור, וצבע הרקע.
5. פרסמו או תצוגה מקדימה של הפוסט כדי לראות את הבלוק בפעולה.

לסיכום

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

נתקלתם בבעיות או יש לכם שאלות? מוזמנים לכתוב לנו בתגובות!