كيفية إنشاء أنماط قوالب القوالب في WordPress 6.0

أنماط الكتلة، يشار إليها أيضًا كثيرًا باسم أقسام، تم تقديمها في وورد 5.5 للسماح للمستخدمين بإنشاء ومشاركة تخطيطات الكتلة المحددة مسبقًا في ملف دليل النمط. الدليل هو موطن لمجموعة واسعة من الأنماط المنسقة المصممة بواسطة مجتمع WordPress. تتوفر هذه الأنماط بتنسيق نسخ ولصق بسيط ، ولا تتطلب معرفة بالشفرة ، وبالتالي فهي توفر الكثير من الوقت للمستخدمين.

على الرغم من العديد من المقالات حول الأنماط ، هناك نقص في المقالات الشاملة والحديثة حول إنشاء الأنماط التي تغطي أحدث الميزات المحسّنة. تهدف هذه المقالة إلى سد الفجوة مع التركيز على الميزات المحسّنة الحديثة مثل إنشاء أنماط بدون تسجيل وتقديم دليل مُحدّث خطوة بخطوة لإنشاءها واستخدامها في سمات الكتلة للمبتدئين والمؤلفين ذوي الخبرة.

منذ إطلاق وورد 5.9 و اثنان وعشرون (TT2) السمة الافتراضية ، انتشر استخدام أنماط الكتلة في سمات الكتلة. لقد كنت من أشد المعجبين بـ أنماط الكتلة وقمنا بإنشائها واستخدامها في سمات الكتلة الخاصة بي.

الجديد وورد 6.0 عرض ثلاثة أنماط رئيسية تقدم تحسينات للمؤلفين:

• السماح بتسجيل النمط من خلال /patterns مجلد (على غرار /parts, /templatesو /styles التسجيل).
• تسجيل الأنماط من دليل الأنماط العامة باستخدام theme.json.
• إضافة الأنماط التي يمكن تقديمها للمستخدم عند إنشاء صفحة جديدة.

في مقدمة استكشاف فيديو WordPress 6.0، يسلط مسؤول الاتصال التلقائي بالمنتج ، آن مكاثي ، الضوء على بعض ميزات الأنماط المحسّنة حديثًا (بدءًا من الساعة 15:00) وتناقش خطط تحسين الأنماط المستقبلية - والتي تشمل أنماط كعناصر التقسيم، مع توفير خيارات اختر نمطًا عند إنشاء الصفحةودمج البحث في دليل الأنماط والمزيد.

المتطلبات الأساسية المسبقة

تفترض المقالة أن القراء لديهم معرفة أساسية بواجهة WordPress لتحرير الموقع الكامل (FSE) وموضوعات الكتلة. ال دليل محرر الكتلة و تحرير الموقع الكامل يوفر موقع الويب أحدث إرشادات البرنامج التعليمي لتعلم جميع ميزات FSE ، بما في ذلك سمات وأنماط الكتلة التي تمت مناقشتها في هذه المقالة.

القسم 1: تطوير الأساليب لإنشاء أنماط الكتلة

تطلبت الطريقة الأولية لإنشاء أنماط الكتلة استخدام واجهة برمجة تطبيقات نمط الكتلة إما كمكوِّن إضافي مخصص أو مسجَّلة مباشرة في ملف functions.php ملف لحزمه مع موضوع كتلة. قدم الإصدار 6.0 من WordPress الذي تم إطلاقه حديثًا العديد من الميزات الجديدة والمحسّنة التي تعمل مع الأنماط والسمات ، بما في ذلك تسجيل الأنماط عبر ملف /patterns مجلد و مشروط نمط إنشاء الصفحة.

للحصول على الخلفية ، دعنا أولاً نلقي نظرة عامة موجزة على كيفية تطور سير عمل تسجيل النمط من استخدام واجهة برمجة تطبيقات نمط التسجيل إلى التحميل المباشر بدون تسجيل.

مثال حالة الاستخدام 1: Twenty-One

الافتراضي واحد وعشرون موضوع (TT1) و TT1 كتل الموضوع (شقيق TT1) يعرض كيف يمكن تسجيل أنماط الكتلة في السمة functions.php. في موضوع TT1 Blocks التجريبي ، هذا واحد كتلة-pattern.php ملف يحتوي على ثمانية يتم إضافة أنماط الكتلة إلى functions.php باعتبارها include كما هو موضح هنا.

نمط كتلة مخصص يحتاج إلى أن يكون مسجلا يستخدم ال register_block_pattern وظيفة ، والتي تتلقى وسيطتين - title (اسم الأنماط) و properties (مصفوفة تصف خصائص النمط).

فيما يلي مثال على تسجيل نمط فقرة بسيط "Hello World" من هذا موضوع المشكل المادة:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

بعد التسجيل ، register_block_pattern() يجب استدعاء الوظيفة من معالج متصل بامتداد init ربط كما هو موصوف هنا.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

بمجرد تسجيل أنماط الكتلة ، فإنها تظهر في محرر الكتلة. تم العثور على وثائق أكثر تفصيلا في هذا تسجيل نمط الكتلة.

خصائص نمط الكتلة

بالإضافة إلى المطلوب title و content خصائص كتيب محرر الكتلة يسرد الاختيارية التالية خصائص النمط:

• title (مطلوب): عنوان للنمط يمكن للبشر قراءته.
• content (مطلوب): حظر ترميز HTML للنمط.
• description (اختياري): نص مخفي مرئيًا يستخدم لوصف النمط في أداة الإدخال. الوصف اختياري ولكن يتم تشجيعه بشدة عندما لا يصف العنوان ما يفعله النمط بشكل كامل. سيساعد الوصف المستخدمين على اكتشاف النمط أثناء البحث.
• categories (اختياري): مصفوفة من فئات الأنماط المسجلة المستخدمة لتجميع أنماط الكتلة. يمكن عرض أنماط الكتلة في فئات متعددة. يجب تسجيل فئة بشكل منفصل لاستخدامها هنا.
• keywords (اختياري): مصفوفة من الأسماء المستعارة أو الكلمات الرئيسية التي تساعد المستخدمين على اكتشاف النمط أثناء البحث.
• viewportWidth (اختياري): عدد صحيح يحدد العرض المقصود للنمط للسماح بمعاينة مقاسة للنمط في أداة الإدخال.
• blockTypes (اختياري): مصفوفة من أنواع الكتل التي يُقصد استخدام النمط معها. يجب أن تكون كل قيمة هي الكتلة المعلنة name.
• inserter (اختياري): بشكل افتراضي ، ستظهر جميع الأنماط في أداة الإدخال. لإخفاء نمط بحيث يمكن إدراجه برمجيًا فقط ، عيِّن ملف inserter إلى false.

فيما يلي مثال على مقتطفات كود البرنامج المساعد لنمط الاقتباس مأخوذة من ملف وورد بلوق.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

استخدام الأنماط في ملف القالب

بمجرد إنشاء الأنماط ، يمكن استخدامها في ملف قالب سمة باستخدام ترميز الكتلة التالي:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

مثال من هذا مستودع جيثب يوضح استخدام "footer-with-background"سبيكة نمط مع"tt2gopher"البادئة في سمة TT2 Gopher block.

استفاد المستخدمون الأوائل للقوالب الجماعية ومكوِّن Gutenberg الإضافي من الأنماط الموجودة في السمات الكلاسيكية أيضًا. الافتراضي عشرون وعشرون وموضوعات Eksell المفضلة (أ موقع تجريبي هنا) أمثلة جيدة تعرض كيفية إضافة ميزات الأنماط إلى السمات الكلاسيكية.

مثال حالة الاستخدام 2: اثنان وعشرون

إذا كان الموضوع يتضمن أنماطًا قليلة فقط ، فسيكون التطوير والصيانة قابلين للإدارة إلى حد ما. ومع ذلك ، إذا كانت سمة الكتلة تتضمن العديد من الأنماط ، كما هو الحال في سمة TT2 ، فإن ملف pattern.php يصبح الملف كبيرًا جدًا ويصعب قراءته. سمة TT2 الافتراضية ، والتي يتم تجميعها في حزم أكثر من 60 أنماط، يعرض سير عمل تسجيل النمط المعاد بناؤه بناء من الأسهل قراءتها وصيانتها.

بأخذ أمثلة من موضوع TT2 ، دعنا نناقش بإيجاز كيفية عمل سير العمل المبسط.

2.1: تسجيل فئات الأنماط

لأغراض العرض التوضيحي ، قمت بإنشاء سمة فرعية TT2 وقمت بإعدادها على موقع الاختبار المحلي الخاص بي مع بعض المحتوى الوهمي. بعد TT2 ، قمت بالتسجيل footer-with-background وتمت إضافته إلى قائمة مصفوفة فئات النمط التالية في ملف block-patterns.php ملف.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

في مثال الكود هذا ، كل نمط مدرج في ملف $block_patterns = array() تم استدعاؤه بواسطة foreach() الوظيفة التي requireالسبت patterns ملف الدليل مع اسم النمط المدرج في المصفوفة والذي سنضيفه في الخطوة التالية.

2.2: إضافة ملف نمط إلى /inc/patterns مجلد

بعد ذلك ، يجب أن يكون لدينا جميع ملفات الأنماط المدرجة في ملف $block_patterns = array(). فيما يلي مثال على أحد ملفات الأنماط ، footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

دعنا نشير إلى النمط الموجود في ملف footer.html جزء القالب:

<!-- wp:template-part {"slug":"footer"} /-->

يشبه هذا إضافة أجزاء رأس أو تذييل في ملف قالب.

وبالمثل يمكن إضافة الأنماط إلى ملف parts/footer.html من خلال تعديله للإشارة إليه slug من ملف نمط السمة (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

الآن ، إذا قمنا بزيارة أداة إدراج الأنماط لمحرر الكتلة ، فإن ملف Footer with background يجب أن تكون متاحة لاستخدامنا:

تُظهر لقطة الشاشة التالية التذييل الذي تم إنشاؤه حديثًا مع نمط الخلفية في الواجهة الأمامية.

الآن بعد أن أصبحت الأنماط جزءًا لا يتجزأ من سمة الكتلة ، يتم تجميع العديد من الأنماط في سمات الكتلة - مثل مربع, نبتة, مايلاند, عالم حيوان, جيولوجي - اتباع سير العمل الذي تمت مناقشته أعلاه. فيما يلي مثال على سمة Quadrat /inc/patterns مجلد بامتداد تسجيل نمط الكتلة ملف و قائمة الملفات مع مصدر المحتوى ورأس النمط المطلوب في غضون return array() وظيفة.

القسم 2: إنشاء وتحميل الأنماط بدون تسجيل

يرجى ملاحظة أن هذه الميزة تتطلب تثبيت WordPress 6.0 أو Gutenberg plugin 13.0 أو أعلى في موقعك.

هذه ميزة WordPress 6.0 الجديدة يسمح بتسجيل النمط عبر الملفات والمجلدات القياسية - /patterns، جلب اتفاقيات مماثلة مثل /parts, /templatesو /styles.

العملية ، كما هو موضح أيضًا في هذا WP Tavern مقال ، يتضمن الخطوات الثلاث التالية:

• إنشاء مجلد أنماط في جذر السمة
• إضافة رأس نمط نمط البرنامج المساعد
• محتوى مصدر النمط

يتم عرض ترميز رأس النمط النموذجي المأخوذ من المقالة أدناه:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

كما هو موضح في القسم السابق ، فقط Title و Slug الحقول مطلوبة والحقول الأخرى اختيارية.

بالإشارة إلى أمثلة من السمات التي تم إصدارها مؤخرًا ، قمت بإعادة تشكيل تسجيل النمط بتنسيق هذا TT2 كتل غوفر موضوع تجريبي ، معدة ل مقال سابق عن CSS-Tricks.

في الخطوات التالية ، دعنا نستكشف كيف أ footer-with-background.php النمط مسجل مع PHP وتستخدم في أ footer.html تم إعادة بناء النموذج.

2.1: قم بإنشاء ملف /patterns مجلد في جذر الموضوع

الخطوة الأولى هي إنشاء ملف /patterns المجلد في جذر موضوع TT2 Gopher وانقل ملف footer-with-background.php ملف النمط إلى /patterns مجلد و refactor.

2.2: إضافة بيانات النمط إلى عنوان الملف

بعد ذلك ، قم بإنشاء حقول تسجيل رأس النمط التالية.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

يحتوي ملف النمط على حقل عنوان علوي مكتوب كتعليقات PHP. تليها كتلة المحتوى مكتوب بتنسيق HTML.

2.3: إضافة محتوى النمط إلى الملف

بالنسبة لقسم المحتوى ، دعنا ننسخ مقتطفات التعليمات البرمجية بداخله ونقلت واحدة (على سبيل المثال، '...') من قسم المحتوى في footer-with-background واستبدال <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

المقتطفات البرمجية الكاملة لملف patterns/footer-with-background.php يمكن عرض الملف هنا على GitHub.

يرجى ملاحظة أن /inc/patterns و block-patterns.php . إضافات، غير مطلوب في WordPress 6.0 ، ويتم تضمينه للأغراض التجريبية فقط.

2.4: الرجوع إلى الأنماط المتدرجة في القالب

مضيفا المعاد بناء أعلاه footer-with-background.php نمط ل footer.html النموذج هو نفسه تمامًا كما هو موضح في القسم السابق (القسم 1 ، 2.2).

الآن ، إذا عرضنا جزء التذييل الخاص بالموقع في محرر كتلة أو الواجهة الأمامية لموقعنا في مستعرض ، فسيتم عرض قسم التذييل.

فئات الأنماط وأنواع التسجيل (اختياري)

لتصنيف أنماط الكتلة ، يجب تسجيل فئات الأنماط وأنواعها في السمات functions.php ملف.

لنفكر في مثال على تسجيل فئات نمط الكتلة من موضوع TT2 Gopher.

بعد التسجيل ، يتم عرض الأنماط في أداة إدراج النمط جنبًا إلى جنب مع الأنماط الأساسية الافتراضية. لإضافة تسميات فئة معينة للموضوع في أداة إدراج الأنماط ، يجب علينا تعديل المقتطفات السابقة عن طريق إضافة مساحة اسم السمة:

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

• footer-with-background يكون النمط مرئيًا في الأنماط المدرجة مع معاينته (إذا تم تحديده):

تبسط هذه العملية بشكل كبير إنشاء وعرض أنماط الكتلة في سمات الكتلة. وهي متوفرة في WordPress 6.0 بدون استخدام ملحق Gutenberg.

أمثلة على السمات بدون تسجيل الأنماط

بدأ المستخدمون الأوائل بالفعل في استخدام هذه الميزة في سمات الكتلة الخاصة بهم. بعض الأمثلة على السمات المتوفرة من دليل الموضوع، يتم سرد أنماط التحميل بدون تسجيل أدناه:

• أركايو - 12 أنماط
• قلادة - 13 أنماط
• عن بعد - 11 أنماط
• skatepark - 10 أنماط
• ستيوارت - 17 أنماط
• كتاب - 16 أنماط
• أفانت جارد - 14 أنماط

القسم 3: إنشاء واستخدام أنماط ذات رمز منخفض

• دليل الأنماط الرسمية يحتوي على تصميمات إبداعية يساهم بها المجتمع ، والتي يمكن نسخها وتخصيصها حسب الرغبة لإنشاء المحتوى. لم يكن استخدام الأنماط مع محرر الكتل بهذه السهولة من قبل!

يمكن أيضًا إضافة أي أنماط من الدليل المتزايد باستمرار لحظر السمات بمجرد "نسخ ولصق" أو تضمينها في ملف theme.json ملف بالإشارة إلى دليلهم سبيكة نمط. بعد ذلك ، سأستعرض بإيجاز مدى سهولة تحقيق ذلك باستخدام ترميز محدود للغاية.

إضافة وتخصيص الأنماط من دليل الأنماط

3.1: نسخ النمط من الدليل إلى الصفحة

هنا ، أنا أستخدم هذا نمط قسم التذييل بواسطة FirstWebGeek من دليل الأنماط. نسخ النمط عن طريق تحديد زر "نسخ النمط" ولصقه مباشرة في صفحة جديدة.

3.2: إجراء التخصيص المطلوبs

لقد أجريت بعض التغييرات فقط على لون الخطوط وخلفية الزر. ثم نسخ الرمز بالكامل من ملف محرر الكود إلى الحافظة.

إذا لم تكن معتادًا على استخدام محرر الكود ، فانتقل إلى الخيارات (مع ثلاث نقاط ، أعلى اليمين) ، وانقر على زر محرر الكود ، وانسخ الكود بالكامل من هنا.

3.3: أنشئ ملفًا جديدًا في مجلد / Patterns

أولاً ، لنقم بإنشاء ملف /patterns/footer-pattern-test.php ملف وإضافة قسم رأس النمط المطلوب. ثم الصق الكود بالكامل (الخطوة 3 أعلاه). يتم تصنيف النمط في منطقة التذييل (الأسطر: 5) ، يمكننا عرض ما تمت إضافته حديثًا في أداة إدراج النمط.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: عرض النمط الجديد في الواضع

لعرض الملف المضافة حديثًا Footer pattern from patterns library نمط ، انتقل إلى أي منشور أو صفحة وحدد رمز الواضع (رمز زائد أزرق ، أعلى اليسار) ، ثم حدد فئات "TT2 Gopher - Footer". يظهر النمط المضاف حديثًا على اللوحة اليمنى ، جنبًا إلى جنب مع أنماط التذييل الأخرى ومعاينته على اليمين (إذا تم تحديده):

تسجيل الأنماط مباشرة في theme.json ملف

في WordPress 6.0 ، من الممكن تسجيل أي أنماط مرغوبة من دليل الأنماط باستخدام theme.json ملف بالصيغة التالية. ال 6.0 حالات ملاحظة ديف، "حقل الأنماط عبارة عن مجموعة من [الرخويات نمط] من دليل الأنماط. يمكن استخراج الارتباطات الثابتة للنمط بواسطة [URL] في طريقة عرض نمط واحد في دليل الأنماط. "

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

هذه فيديو قصير يحتوي على WordPress 6.0 يوضح كيفية تسجيل الأنماط في /patterns المجلد (الساعة 3:53) وتسجيل الأنماط المرغوبة من مدير النمط في ملف theme.json ملف (الساعة 3:13).

بعد ذلك ، يتوفر النمط المسجل في مربع بحث أداة إدراج الأنماط ، والذي يتوفر بعد ذلك للاستخدام مثل مكتبة الأنماط المجمعة للقوالب.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

في هذا المثال ، نمط slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter من مثال سابق تم تسجيله عبر theme.json.

نموذج نمط إنشاء الصفحة

كجزء من "البناء بالأنماط"مبادرات WordPress 6.0 يقدم خيار نمط مشروط لمؤلفي السمات لإضافة أنماط تخطيط الصفحة إلى سمة الحظر ، مما يسمح لمستخدمي الموقع بتحديد أنماط تخطيط الصفحة (على سبيل المثال ، صفحة حول ، وصفحة اتصال ، وصفحة فريق ، وما إلى ذلك) أثناء إنشاء صفحة. التالي مثال مأخوذ من ملاحظة ديف:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

هذه الميزة حاليا يقتصر على نوع مشاركة الصفحة فقط وليس "لنوع المنشورات" ، حتى الآن.

• مشروط نمط إنشاء الصفحة يمكن أيضًا تعطيله تمامًا عن طريق إزالة نوع كتلة ما بعد المحتوى لجميع الأنماط. مثال على كود عينة متوفر هنا.

يمكنك متابعة مناقشة GitHub والمشاركة فيها من الروابط المدرجة تحت قسم الموارد أدناه.

استخدام دليل الأنماط لبناء الصفحة

يمكن أيضًا استخدام الأنماط من الدليل لإنشاء المنشور المطلوب أو تخطيط الصفحة ، على غرار أدوات إنشاء الصفحات. ال جوتنبرج خلقت الفريق تطبيق تجريبي منشئ صفحات على الإنترنت باستخدام الأنماط مباشرة من الدليل (الفيديو تمهيدية). ثم يمكن نسخ الرموز من التطبيق ولصقها في موقع ما ، مما يبسط إلى حد كبير عملية تخطيط الصفحة المعقدة بدون تشفير.

In هذا الفيديو القصير، يوضح Jamie Marsland (في الساعة 1:30) كيف يمكن استخدام التطبيق لإنشاء تخطيط صفحة كامل مشابه لمنشئ الصفحات باستخدام أقسام الصفحة المطلوبة في الدليل.

اختتام

تسمح الأنماط للمستخدمين بإعادة إنشاء تخطيط المحتوى الشائع الاستخدام (على سبيل المثال ، الصفحة الرئيسية ، والنداء ، وما إلى ذلك) في أي صفحة وتقليل الحواجز التي تحول دون تقديم المحتوى في الأنماط ، والتي لم تكن ممكنة في السابق بدون مهارات الترميز. مثل الإضافات و المواضيع الدلائل الجديدة أنماط يقدم الدليل للمستخدمين خيارات لاستخدام مجموعة واسعة من أنماط اختياراتهم من دليل النمط ، وكتابة وعرض المحتوى بأسلوب.

في الواقع، ستغير أنماط الكتلة كل شيء وبالتأكيد هذا ملف لعبة تغيير ميزة في منظر قالب WordPress. عندما تكون الإمكانات الكاملة البناء بالأنماط يصبح الجهد متاحًا ، وهذا سيغير الطريقة التي نصمم بها سمات الكتلة وننشئ محتوى جميلًا حتى مع المعرفة منخفضة التعليمات البرمجية. بالنسبة للعديد من المصممين المبدعين ، قد يوفر دليل الأنماط أيضًا وسيلة مناسبة لعرض ملفات الإبداع.

---

الموارد

وورد 6.0

• الدليل الميداني لـ WordPress 6.0 (ووردبريس الأساسية)
• استكشاف WordPress 6.0: اختلافات الأنماط، واجهة مستخدم قفل الكتلة، تحسينات الكتابة – فيديو مدته 22 دقيقة (آن مكارثي)
• ميزات WordPress 6.0 في 4 دقائق (ديف سميث)
• الجديد في WordPress 6.0: الكتل الجديدة وتبديل الأنماط وتعديل النماذج وواجهة برمجة تطبيقات Webfonts وغير ذلك الكثير (كينستا)

خلق الأنماط

• مقدمة لأنماط الكتلة (تحرير الموقع بالكامل)
• مقدمة لفيديو أنماط الكتل، 14 دقيقة (تعلم ووردبريس)
• أنماط الكتلة (كتيب محرر الكتلة)
• هل تريد إنشاء أنماط الكتل؟ (مدونة ووردبريس)
• كيفية إنشاء ومشاركة أنماط الكتل ذات التعليمات البرمجية المنخفضة في WordPress (جودادي)

تحسين الأنماط (جيثب)

• البناء بالأنماط #38529
• الأنماط كعناصر التقسيم #39281
• إضافة: خيار لاختيار نمط عند إنشاء الصفحة. #40034
• أنماط الكتلة لإنشاء الصفحة. #38787
• إضافة: خيارات بداية الصفحة (القوالب والأنماط) #39147

مقالات المدونة

• أنماط جوتنبرج: مستقبل بناء الصفحة في ووردبريس (ريتش تابور)
• استخدام Block Patterns لتسريع إنشاء موقع WordPress (جودادي)
• أنماط الكتلة سوف تغير كل شيء (WP تافرن)

---

كيفية إنشاء أنماط قوالب القوالب في WordPress 6.0 نشرت أصلا في حيل CSS. يجب احصل على النشرة الإخبارية.

• كوينسمارت. أفضل بورصة للبيتكوين والعملات المشفرة في أوروبا.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. دخول مجاني.
• كريبتوهوك. الرادار. تجربة مجانية.
• المصدر: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/