إنشاء أنماط Block Patterns مخصصة في WordPress لإعادة استخدام التخطيطات والمرونة

إنشاء أنماط Block Patterns خاصة بك في WordPress له فوائد كبيرة من حيث إعادة الاستخدام والمرونة، لكنني أفهم قلقك بشأن إدارة CSS. في حين أن WordPress يقوم بالكثير من العمل الثقيل مع block editor، قد يبدو الأمر مقيدًا عندما يتعلق الأمر بالتنسيق. إليك سبب كون أنماط block patterns مفيدة وكيف يمكنك بسهولة إدارة والتحكم في CSS الخاص بها:

لماذا تنشئ أنماط Block Patterns خاصة بك؟

• إعادة استخدام التخطيطات: تتيح لك block patterns تحديد أقسام أو تخطيطات قابلة لإعادة الاستخدام يمكنك إدراجها بسرعة في الصفحات أو المنشورات دون إعادة إنشائها من البداية. على سبيل المثال، أقسام hero، أو الشهادات، أو أقسام call-to-action.
• مرونة المحتوى: بينما يتم تحديد الهيكل والتخطيط مسبقًا، يمكن للمحررين تخصيص المحتوى داخل الأنماط بسهولة. يساعد هذا في الحفاظ على تناسق التصميم مع السماح بمرونة المحتوى.
• توفير الوقت: بالنسبة لمنشئي المحتوى الذين قد لا يكونون بارعين تقنيًا، تسهل الأنماط عملية إضافة تخطيطات أو مكونات معقدة. ما عليهم سوى إدراج النمط وتعديل المحتوى حسب الحاجة.

كيفية التحكم بسهولة في CSS لأنماط Block Patterns

للتحكم في CSS الخاص بأنماط block patterns المخصصة، هناك استراتيجيات لدمج التنسيق الخاص بك وضمان السيطرة الكاملة على المظهر.

1. ربط CSS مخصص:

يمكنك إنشاء ملف CSS مخصص لأنماط block patterns الخاصة بك والتأكد من ربطه في كل من الواجهة الأمامية وفي المحرر.

قم بإنشاء ملف custom-block-patterns.css الذي سيحتوي على جميع الأنماط الخاصة بأنماط block patterns.

/* custom-block-patterns.css */
.hero {
    background-color: #f4f4f4;
    padding: 80px 20px;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    color: #333;
}

.hero p {
    font-size: 1.2rem;
    color: #777;
    margin-bottom: 30px;
}

.hero .btn {
    background-color: #0073aa;
    color: #fff;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
}

.hero .btn:hover {
    background-color: #005f87;
}

.flex {
    display: flex;
    justify-content: center;
}

ثم قم بربط هذا الملف في functions.php:

function my_custom_block_pattern_styles() {
    // ربطه للواجهة الأمامية
    wp_enqueue_style( 
        'custom-block-patterns', 
        get_template_directory_uri() . '/assets/css/custom-block-patterns.css', 
        array(), 
        '1.0' 
    );
}
add_action( 'wp_enqueue_scripts', 'my_custom_block_pattern_styles' );

// ربطه للمحرر
function my_custom_block_pattern_editor_styles() {
    wp_enqueue_style( 
        'custom-block-patterns-editor', 
        get_template_directory_uri() . '/assets/css/custom-block-patterns.css', 
        array(), 
        '1.0' 
    );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_pattern_editor_styles' );

2. إضافة أنماط Inline (اختيارية)

لتحكم أكثر بساطة في CSS، يمكنك إضافة الأنماط مباشرة ضمن محتوى block pattern نفسه.

function my_custom_home_hero_block_pattern() {
    register_block_pattern(
        'themeslug/hero',
        array(
            'title'       => __( 'Hero', 'themeslug' ),
            'description' => _x( 'A full-width hero section with custom inline styles.', 'Block pattern description', 'themeslug' ),
            'content'     => '<!-- wp:cover {"overlayColor":"contrast","align":"full","style":{"color":{"background":"#f4f4f4"},"spacing":{"padding":{"top":"80px","bottom":"80px"}}}} -->
                                <section id="home" class="wp-block-group hero" style="background-color: #f4f4f4; padding: 80px 20px; text-align: center;">
                                    <div class="overlay"></div>
                                    <div class="hero-content">
                                        <h1 style="color: #333;">Your premier gateway to Algerian raw materials</h1>
                                        <p style="color: #777; font-size: 1.2rem;">Global import-export solutions, business intermediation, and consulting services</p>
                                        <div class="flex">
                                            <a href="#contact" class="btn" style="background-color: #0073aa; color: #fff; padding: 12px 24px; text-decoration: none; border-radius: 5px;">Get in Touch</a>
                                        </div>
                                    </div>
                                </section>
                              <!-- /wp:cover -->',
            'categories'  => array( 'featured' ),
        )
    );
}
add_action( 'init', 'my_custom_home_hero_block_pattern' );

3. الأنماط العالمية و Theme.json (WordPress 5.8+)

إذا كنت تستخدم theme block أو ترغب في إدارة الأنماط بشكل شامل، يمكنك تعريف الأنماط باستخدام ملف theme.json الذي يتيح التحكم بسهولة في أنماط block.

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/cover": {
        "spacing": {
          "padding": {
            "top": "80px",
            "bottom": "80px"
          }
        },
        "color": {
          "background": "#f4f4f4"
        }
      },
      "core/button": {
        "elements": {
          "button": {
            "color": {
              "background": "#0073aa",
              "text": "#fff"
            }
          }
        }
      }
    }
  }
}

المزايا الرئيسية لاستخدام Block Patterns مع CSS مخصص:

• فصل المهام: block patterns تتعامل مع الهيكل، بينما CSS المخصص أو theme.json يتعامل مع التنسيق.
• إعادة الاستخدام: بمجرد إنشاء وتنسيق block pattern، يمكن استخدامه في صفحات متعددة.
• مرونة المحتوى: يمكن للمحررين تعديل المحتوى دون التأثير على التصميم.

الخلاصة:

block patterns هي أدوات قوية لإدارة الأقسام القابلة لإعادة الاستخدام في WordPress.