عشرون وعشرون: مقدمة لموضوع وورد بريس الافتراضي الجديد

Twenty Twenty هو سمة وورد بريس الافتراضية الجديدة التي تأتي مع الإصدار الأخير من وورد بريس 5.3 . مثل سابقتها Twenty Nineteen ، تم تصميم Twenty Twenty مع التركيز بشكل خاص على Gutenberg . هناك فرق كبير بين الاثنين ، بالرغم من ذلك: Twenty Twenty ليست مبنية من الألف إلى الياء ؛ تم تصميمه بناءً على سمة موجودة من مجتمع وورد بريس بدلاً من ذلك.

نظرًا لأننا نحب كل شيء عن وورد بريس ، فقد ألقينا نظرة فاحصة على موضوع Twenty Twenty الجديد ، ونلقي نظرة خاطفة على ملف function.php وورقة الأنماط والقوالب.

حتى إذا كان Twenty Twenty بعيدًا عن الاستقرار إلى حد ما – في وقت كتابة هذا التقرير – مع وجود العديد من المشكلات التي لم يتم إصلاحها ، سنشارك معك اليوم أفكارنا الأولى حول موضوع وورد بريس الافتراضي الجديد.

دعونا نتعمق في موضوع Twenty Twenty وورد بريس!

مقدمة سريعة عن موضوع Twenty Twenty

تم بناء Twenty Twenty على أساس Chaplin ، وهو موضوع وورد بريس مجاني بواسطة Anders Norén وهو أيضًا مدير التصميم الافتراضي للموضوع في وورد بريس 5.3.

يتوفر Chaplin للتنزيل في مستودع وورد بريس.org ، ووفقًا لأندرس ، فقد تم تصميمه مع وضع محرر القوالب في الاعتبار:

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

موضوع وورد شابلن

موضوع وورد شابلن

نفس الفلسفة يجلس وراء عشرون عشرون: المرونة ، وضوح، و القراءة هي الكلمات الرئيسية التركيز على موضوع جديد.

يأتي Twenty Twenty بتخطيط عمود واحد وثلاثة قوالب نشر / صفحة ، بهدف منح مسؤولي ومصممي وورد بريس الحرية في إنشاء تخطيطاتهم المخصصة مباشرةً في Block Editor من خلال الاستفادة من المحاذاة الواسعة والكاملة لعناصر الحظر مثل الأعمدة ، الصور ، وتم تقديم كتلة المجموعة باستخدام Gutenberg 5.5.

كما يشرح أندرس:

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

بالإضافة إلى ذلك ، يأتي Twenty Twenty مع محرف جديد: Inter . إنها عائلة خطوط مجانية ومفتوحة المصدر صممها Rasmus Andersson خصيصًا لسهولة قراءة النصوص ذات الحالة المختلطة والحروف الصغيرة ، خاصةً مع أحجام الخطوط الصغيرة.

محرف انتر

عائلة محرف Inter

يمنح Inter شخصية أقوى للعناوين الكبيرة ، ولكن ستحصل على أقصى استفادة منها عند استخدامه بأحجام نصية بديلة ، كما هو موضح في معاينة السمة من منشور مدونة وورد بريس.org:

عشرون وعشرون على سطح المكتب

عشرون طباعة: التأثير وسهولة القراءة

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

مع ما يقال ، حان الوقت بالنسبة لنا لتثبيت موضوع وورد بريس هذا وتشغيله.

كيفية تثبيت Twenty Twenty

سيتبع السمة الافتراضية القادمة خطة إصدار وورد بريس 5.3 . هذا يعني ، في وقت كتابة هذا التقرير ، أن Twenty Twenty لا تزال غير متاحة للتنزيل في دليل قوالب وورد بريس.

على أي حال ، يمكنك تنزيل إصدار قيد التقدم من Twenty Twenty على GitHub وتثبيته في الإصدار الثابت الحالي من وورد بريس أو الحصول عليه باستخدام وورد بريس 5.3. سيتم إهمال مستودع Github بمجرد دمج القالب في النواة . في غضون ذلك ، قد ترغب في حفظ التواريخ التالية من جدول إصدار وورد بريس 5.3:

23 سبتمبر 2019: بيتا 1

30 سبتمبر 2019: بيتا 2

7 أكتوبر 2019: بيتا 3

15 أكتوبر 2019: الإفراج عن المرشح 1

22 أكتوبر 2019: الإفراج عن المرشح 2

29 أكتوبر 2019: الإفراج عن المرشح 3

5 تشرين الثاني (نوفمبر) 2019: الإفراج عن المرشح 4 (إذا لزم الأمر)

12 نوفمبر 2019: التاريخ المستهدف لإصدار وورد بريس 5.3.

لتبدأ مع Twenty Twenty ، اتبع الخطوات التالية:

احصل على الحزمة المضغوطة من GitHub .

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

استعرض للوصول إلى المظهر ← السمات وانقر على زر تنشيط في صورة معاينة السمة.

انتقل إلى المظهر → التخصيص لتكوين Twenty Twenty.

وهذا كل شيء! يمكنك الآن البدء في إجراء اختباراتك إما على موقع الويب المرحلي الخاص بك أو في بيئتك المحلية .

الأهمية

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

عشرون: قالب كامل العرض

مشكلة مفتوحة على جيثب

الآن بعد أن أصبحت جاهزًا للانطلاق ، دعنا ننتقل ونغوص في موضوع Twenty Twenty وورد بريس.

اختبر موضوعات وورد بريس بسهولة قبل الانتقال إلى الإنتاج من خلال مواقع التدريج بنقرة واحدة. جرب Kinsta مجانًا .

ميزات موضوع Twenty Twenty

لا يعد Twenty Twenty سمة وورد بريس كاملة الميزات ، ولكنه موضوع مبسط وبسيط يهدف إلى منح المطورين ومسؤولي الموقع الحرية في إنشاء تخطيطات محتوى مخصصة لمنشوراتهم وصفحاتهم. مثل Twenty Nineteen ، تم إنشاء Twenty Twenty لـ Gutenberg ويعتمد في الغالب على دورة حياة Gutenberg (المزيد حول هذا الموضوع في هذا الفيديو لـ Matt Mullenweg في WCEU 2019).

تدعم السمة عددًا من ميزات السمات مثل عرض المحتوى ( 580) ، وروابط التغذية التلقائية ، ونشر الصور المصغرة ، وعلامة العنوان ، والعديد من عناصر HTML5 (نموذج البحث ، ونموذج التعليق ، وقائمة التعليقات ، والمعرض ، والتسمية التوضيحية).

تضيف الميزات الأخرى خيارات إلى ” مُخصص القوالب” . وتشمل هذه الخلفيات المخصصة و الشعار المخصص . تعرض مقتطفات التعليمات البرمجية أدناه هذه الميزات التي تم تمكينها في ملف وظائف السمة:

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

// Custom background color
add_theme_support(
	'custom-background',
	array(
		'default-color'	=> 'F5EFE0'
	)
);

// Custom logo
add_theme_support(
	'custom-logo',
	array(
		'height'      => 240,
		'width'       => 320,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	)
);

مخصص الموضوع في عشرين عشرين

مخصص الموضوع في عشرين عشرين

يدعم Twenty Twenty أيضًا بعض ميزات Gutenberg المحددة . أولاً ، يدعم الموضوع محاذاة عريضة وكاملة العرض :

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

ل وحة محرر اللون يتم تمكين إذا تعيين المستخدم لون لهجة في مخصص (تمكين افتراضيا):

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
	add_theme_support( 'editor-color-palette', $editor_color_palette );
}

تخصيص الألوان في Twenty Twenty

تخصيص الألوان في Twenty Twenty

يأتي موضوع Twenty Twenty بأربعة أحجام خطوط محرر متوفرة في Block Editor:

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' 		=> _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 16,
		'slug' 		=> 'small',
	),
	array(
		'name' 		=> _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 18,
		'slug' 		=> 'regular',
	),
	array(
		'name' 		=> _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 24,
		'slug' 		=> 'large',
	),
	array(
		'name' 		=> _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 32,
		'slug' 		=> 'larger',
	),
) );

أحجام الخطوط في إعدادات النص الخاصة بلوك المحرر

أحجام الخطوط في إعدادات النص الخاصة بلوك المحرر

وهذا كل شيء. المظهر ضئيل للغاية أيضًا من حيث الوظائف ، ولكنه قابل للتوسيع بسهولة باستخدام سمة فرعية ، وسنتعمق في ذلك في غضون دقيقة.

كيفية تخصيص مظهر عشرين

يأتي Twenty Twenty خاليًا من أي أجراس وصفارات ولكنه يوفر مرونة كبيرة عند استخدامه جنبًا إلى جنب مع Gutenberg (أو مع مُنشئ صفحات جيد ).

تخصيص نسق Twenty Twenty

و هوية الموقع يتعامل مع عنوان الموقع والشعار، والشعار، والرمز. يمكنك تمكين / تعطيل كل هذه العناصر في قسم Site Identity في أداة التخصيص:

هوية الموقع في إعدادات التخصيص

هوية الموقع في إعدادات التخصيص

يعالج قسم قالب الغلاف الخاص بالمخصص إعدادات التخصيص لقالب صفحة قالب الغلاف . ستجد هناك:

خيار لتمكين تأثير اختلاف المنظر على صورة الخلفية (صورة خلفية ثابتة).

منتقي الألوان لتعيين لون الخلفية المخصص ولون النص لتراكب الصور المميز.

شريط تمرير للتحكم في تعتيم التراكب.

قسم قالب الغلاف في أداة التخصيص

قسم قالب الغلاف في أداة التخصيص

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

مواقع القائمة في Twenty Twenty

مواقع القائمة في Twenty Twenty

يتعامل التذييل مع قائمة التذييل ومواقع القائمة الاجتماعية جنبًا إلى جنب مع منطقتين لعناصر واجهة المستخدم. تُظهر الصورة التالية تذييل القالب مع كل عناصره في مكانها:

قالب تذييل في كتاب Twenty Twenty

قالب تذييل في كتاب Twenty Twenty

أخيرًا ، يسمح لك قسم CSS الإضافي بتضمين أنماطك المخصصة.

مشاركة واحدة / قوالب الصفحة

عندما يتعلق الأمر بتخطيطات النشر والصفحة ، يمكنك الاختيار من بين ثلاثة قوالب مختلفة. وعلاوة على ذلك القالب الافتراضي، يوفر عشرون عشرون في قالب غطاء و قالب العرض كاملة يمكنك ان تلعب مع لتخصيص مظهر والمحتوى الخاص بك.

منشور واحد / قوالب صفحة في Twenty Twenty

منشور واحد / قوالب صفحة في Twenty Twenty

محرر القوالب في عشرين عشرين

نظرًا لنهجها البسيط ، يعتمد مظهر Twenty Twenty في الغالب على Block Editor. نجري اختباراتنا على Twenty Twenty مع إصدار Gutenberg 6.4.0. يوفر هذا الإصدار عددًا جيدًا من الميزات والتحسينات وإصلاحات الأخطاء الجديدة التي حسنت تجربة التحرير بشكل كبير.

اختبر موضوعات وورد بريس بسهولة قبل الانتقال إلى الإنتاج من خلال مواقع التدريج بنقرة واحدة. جرب Kinsta مجانًا .

تكون بعض الكتل مفيدة ، خاصة عند إنشاء مواقع ويب ذات صفحة واحدة. كتل مثل وسائل الإعلام والنصوص و الغلاف قد تحسنت، والآن تبدو كبيرة عندما يتعلق الأمر تقديم المنتجات و / أو المهنية المحافظ :

وسائل الإعلام والنص

كتلة الوسائط والنص (محاذاة كاملة)

ومع ذلك ، نظرًا لأن Gutenberg هو مشروع قيد التقدم ، فقد ترغب في إلقاء نظرة على بعض المكونات الإضافية الأكثر شيوعًا التي تسمح بإضافة المزيد من الكتل إلى المحرر.

فيما يلي قائمة سريعة بالمكونات الإضافية التي قد تستحق التجربة:

كتل جوتنبرج

CoBlocks

سهل التخزين

الكتل الذرية .

متقدم جوتنبرج

يقوم Theme Customizer و Block Editor بعمل رائع عندما يتعلق الأمر بتخصيص المظهر والتخطيط ، ولكن يمكن أن يمنحك المظهر الفرعي تحكمًا أكبر في شكل صفحاتك وأسلوبها.

كيف تصنع موضوع طفل لموضوع العشرين

يمكن أن يكون بناء سمات الطفل لـ وورد بريس أمرًا ممتعًا وأيضًا طريقة جيدة لبدء حياتك المهنية كمطور قوالب وورد بريس ويمكن أن يكون Twenty Twenty موضوعًا رئيسيًا للوالدين عند إنشاء سمات الطفل في وورد بريس. لذا ، لماذا لا تجربها؟ 😉

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

الآن ، دعونا نبني موضوعنا الأول للأطفال في Twenty Twenty!

قم بإنشاء دليل جديد تحته wp-content/themesوقم بتسميته شيئًا مثل twentytwenty-childأو أي شيء تريده.

استعرض للوصول إلى ملف wp-content/themes/twentytwenty-childجديد وقم بإنشائه بالعنوان style.cssالتالي:

/*
Theme Name: My Twenty Twenty Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty.
Author: Your Name
Author URI: https://example.com/
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

بعد ذلك ، يتعين علينا تضمين ورقة أنماط القالب الأصلي. في نفس الدليل ، قم بإنشاء functions.phpالملف التالي :

<strong><?php</strong>
/* enqueue scripts and style from parent theme */        
function twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');

انتقل الآن إلى المظهر → الموضوعات وقم بتنشيط المظهر الخاص بك. يمكنك الآن البدء بتخصيصاتك.

تفعيل موضوع الطفل

تفعيل موضوع الطفل

يمكنك تغيير أي شيء تقريبًا في Twenty Twenty ، بدءًا من إضافة قوالب مخصصة إلى إضافة أنماط مخصصة أو تغيير الأنماط الافتراضية للموضوع.

سأوضح لك هنا كيفية إنشاء قالب مخصص جديد لمنشورات وصفحات فردية.

إضافة منشور / قالب صفحة مخصص في Twenty Twenty

حتى الآن ، قمنا بإنشاء قالب فرعي لـ Twenty Twenty وأرفقنا الأنماط الأصلية بورقة أنماط القالب الفرعي. في المثال أدناه ، سنتخلص من الرأس والتذييل ، مما يوفر مساحة لمحتوى الصفحة في ملف قالب الصفحة / المنشور.

الخطوة 1

انسخ والصق الملفات التالية من السمة الرئيسية إلى دليل القالب الفرعي:

القوالب / template-full-width.php

header.php

تذييل. php

الخطوة 2

إعادة تسمية template-full-width.phpل template-canvas.php(أو ما تريد). افتح الملف واحذف المحتوى الحالي والصق ما يلي:

<strong><?php</strong>
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );

يعيّن اسم القالب اسم ملف القالب كما تراه في محرر القوالب ، بينما يحدد نوع منشور القالب أنواع المنشورات التي تدعم ملف القالب هذا. تقوم get_template_partالوظيفة بتحميل singular.phpالملف من السمة الأصلية (لا نحتاج إلى نسخة من هذا الملف في السمة الفرعية الخاصة بنا).

انتقل إلى لوحة تحكم وورد بريس وأنشئ منشورًا جديدًا. الآن يجب أن تجد قالب صفحة إضافي في قسم سمات المنشور.

يتوفر قالب جديد في سمات المنشور

يتوفر قالب جديد في سمات المنشور

الخطوه 3

والآن يأتي الجزء الممتع. افتح header.phpفي محرر النصوص المفضل لديك وقم بلف headerالعنصر داخل ifالعبارة التالية :

<strong><?php</strong>
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
<strong>?></strong>
	<header id="site-header" class="header-footer-group" role="banner">
		...
	</header><!-- #site-header -->

	<strong><?php</strong> 
	// Output the menu modal
	get_template_part( 'template-parts/modal-menu' );
}

يتحقق هذا الرمز مما إذا كان قالب الصفحة ليس كذلك templates/template-canvas.php. إذا كان قالب الصفحة هو templates/template-canvas.php ، فإنه لن تشمل رأس الموقع والقائمة مشروط.

وبالمثل ، يمكننا إزالة التذييل من صفحة المنشور عندما يكون قالب الصفحة النشط هو قماشنا. ما عليك سوى إضافة نفس الحالة footer.phpكما هو موضح أدناه:

<strong><?php</strong>
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
<strong>?></strong>
	<footer id="site-footer" role="contentinfo" class="header-footer-group">
	...
	</footer><!-- #site-footer -->
<strong><?php</strong> } <strong>?></strong>
	<strong><?php</strong> wp_footer(); <strong>?></strong>

    </body>
</html>

يمكنك تنزيل رمز هذا المثال هنا .

الآن قم بإنشاء منشور أو صفحة جديدة ، حدد قالب Canvas في سمات Post / Page وتحقق من الصفحة على الموقع الأمامي.

لقد ألقينا نظرة فاحصة على موضوع وورد بريس الافتراضي الجديد Twenty Twenty. تحقق من جميع الميزات الرئيسية التي تحتاج إلى معرفتها! 🆕②⓪②⓪

انقر للتغريد

ملخص

Twenty Twenty هو قالب وورد بريس مبسط ، مع تخطيط عمود واحد. تعتمد الطريقة التي سنستخدمها في الغالب على تطور Block Editor. كما يقول أندرس صراحة:

“وعد Block Editor هو منح المستخدمين حرية تصميم مواقعهم وهيكلتها بالشكل الذي يرونه مناسبًا”.

بعد Twenty Nineteen ، يعد القالب الافتراضي الجديد Twenty Twenty هو الثاني في جيل جديد من السمات التي تهدف إلى “السماح بإنشاء مواقع الويب بدون تحرير التعليمات البرمجية يدويًا”. تأتي مواقع وورد بريس المدعومة من Twenty Twenty بجميع الأشكال والأحجام. لمعرفة ما إذا كان الموضوع يستخدم Twenty Twenty ، تحقق من أداة الكشف عن سمات وورد بريس سهلة الاستخدام  .

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

متروك لك الآن: قم بتثبيت سمة وورد بريس الافتراضية الجديدة ، والتلاعب بها ، وأخبرنا بأفكارك هنا في التعليقات!

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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