إدارة الخطوط في قوالب قوالب ووردبريس

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

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

ما نعرفه بالفعل

كما قلت ، هناك القليل بالنسبة لنا للمضي قدمًا بقدر ما نبدأ. قالب Twenty-Two هو أول قالب WordPress افتراضي قائم على الكتل ، وهو يوضح كيف يمكننا استخدام ملفات الخطوط التي تم تنزيلها كأصول في السمة. لكنه غير عملي إلى حد ما لأنه يتضمن خطوتين: (1) تسجيل الملفات في functions.php ملف و (2) تحديد الخطوط المجمعة في ال theme.json ملف.

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

ما هو الجديد

إذا لم تكن تعرف بالفعل ، فإن مشروع جوتنبرج هو مكون إضافي تجريبي حيث تتوفر الميزات التي يتم تطويرها لـ WordPress Block و Site Editor للاستخدام والاختبار المبكر. في الآونة الأخيرة موضوع المشكل المادة، المهندس الرئيسي لمشروع جوتنبرج ماتياس فينتورا يناقش كيفية إضافة خطوط Google - أو أي خطوط أخرى تم تنزيلها ، في هذا الصدد - لحظر السمات باستخدام ملف إنشاء قالب بلوك البرنامج المساعد.

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

لقد جربته! ومنذ إنشاء قالب بلوك هو من تأليف وصيانة WordPress.org فريق ، أود أن أقول إنه أفضل اتجاه لدينا لدمج Google Fonts في سمة ما. ومع ذلك ، تجدر الإشارة بالتأكيد إلى أن المكون الإضافي قيد التطوير النشط. هذا يعني أن الأشياء يمكن أن تتغير بسرعة كبيرة.

قبل أن أتطرق إلى كيفية عمل كل شيء ، دعنا أولاً نجدد أنفسنا بإيجاز مع العملية "التقليدية" لإضافة خطوط Google إلى سمات WordPress الكلاسيكية.

كيف كان يتم ذلك

هذه المقالة ThemeShaper من 2014 يقدم مثالاً ممتازًا عن كيفية قيامنا بذلك في سمات PHP الكلاسيكية ، كما هي هذا المقال الأحدث في Cloudways بقلم عباد الرحمن.

لتحديث ذاكرتنا ، هذا مثال من الافتراضي عشرون وسبعة عشر موضوع يوضح كيفية وضع خطوط Google في قائمة الانتظار في ملف functions.php ملف.

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' ); if ( 'off' !== $libre_franklin ) { $font_families = array(); $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i'; $query_args = array( 'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin,latin-ext' ), ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); } return esc_url_raw( $fonts_url );
}

ثم يتم توصيل خطوط Google مسبقًا بالموضوع مثل هذا:

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

ما الخطأ في الطريقة التقليدية

عظيم ، أليس كذلك؟ ومع ذلك ، هناك عقبة. في يناير 2022 ، أ فرضت المحكمة الإقليمية الألمانية غرامة على صاحب موقع على شبكة الإنترنت لانتهاكه موقع أوروبا متطلبات اللائحة العامة لحماية البيانات. المشكلة؟ أدى تحديد خطوط Google على الموقع إلى الكشف عن عنوان IP للزائر ، مما يعرض خصوصية المستخدم للخطر. غطت CSS-Tricks هذا منذ فترة.

• إنشاء قالب بلوك يفي المكون الإضافي بمتطلبات خصوصية GDPR ، حيث إنه يستفيد من Google Fonts API للعمل فقط كوكيل للبائع المحلي. يتم تقديم الخطوط للمستخدم على نفس موقع الويب بدلاً من خوادم Google ، مما يحمي الخصوصية. الفسفور الابيض الحانة يناقش حكم المحكمة الألمانية ويتضمن روابط لأدلة الاستضافة الذاتية لخطوط Google.

كيفية استخدام Google Fonts مع سمات الحظر

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

هل قمت بتثبيت وتفعيل هذه المكونات الإضافية؟ إذا كان الأمر كذلك ، انتقل إلى مظهر → إدارة خطوط النسق من قائمة مسؤول WordPress.

تعرض شاشة "إدارة خطوط النسق" قائمة بأي خطوط محددة بالفعل في السمات theme.json ملف. يوجد أيضًا خياران في الجزء العلوي من الشاشة:

• أضف خطوط جوجل. يضيف هذا الخيار خطوط Google مباشرة إلى السمة من واجهة برمجة تطبيقات خطوط Google.
• أضف الخطوط المحلية. يضيف هذا الخيار ملفات الخط التي تم تنزيلها إلى السمة.

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

اعتقدت أنني سأشارك لقطة شاشة لهيكل ملف موضوعي و theme.json لإظهار أنه لا توجد أنماط أو تكوينات تحدث فعليًا.

دعنا نضغط على زر "إضافة خطوط Google". يأخذنا إلى صفحة جديدة بها خيارات لاختيار أي خط متاح من الحالي شراء مراجعات جوجل Fواجهة برمجة تطبيقات أونتس.

لهذا العرض ، اخترت في جملة من قائمة الخيارات وحدد الأوزان 300 و Regular و 900 من شاشة المعاينة:

بمجرد حفظ اختياراتي ، يتم تنزيل أنماط الخطوط Inter التي حددتها تلقائيًا وتخزينها في السمات assets/fonts المجلد:

لاحظ أيضًا كيف تمت كتابة هذه التحديدات تلقائيًا إلى ملف theme.json ملف في لقطة الشاشة هذه. يضيف المكون الإضافي Create Block Theme المسار إلى ملفات الخط.

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

إذا انتقلنا إلى الشاشة الرئيسية لإنشاء قالب قالب وانقر فوق إدارة خطوط النسق مرة أخرى ، سنرى متغيرات الوزن 300 و 400 (العادية) و 900 معروضة في لوحة المعاينة.

A مربع معاينة النص التجريبي في الجزء العلوي يسمح لك حتى بمعاينة الخطوط المحددة داخل الجملة والرأس والفقرة باستخدام شريط تمرير تحديد حجم الخط. يمكنك التحقق من هذه الميزة الجديدة في العمل في هذا الفيديو على GitHub.

الخط (الخطوط) المحدد متاح أيضًا في محرر الموقع الأنماط العالمية (مظهر → محرر) ، تحديدًا في لوحة التصميم.

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

نفس الشيء ، ولكن مع الخطوط المحلية

قد ننظر أيضًا إلى إضافة الخطوط المحلية إلى سمة نظرًا لأن المكون الإضافي Create Block Theme يوفر هذا الخيار. والفائدة هي أنه يمكنك استخدام أي ملف خط تريده من أي خدمة خطوط تفضلها.

بدون المكوِّن الإضافي ، سيتعين علينا الحصول على ملفات الخطوط الخاصة بنا ، وإفلاتها في مكان ما في مجلد السمات ، ثم اللجوء إلى مسار PHP التقليدي لإدراجها في قائمة الانتظار functions.php ملف. لكن يمكننا السماح لـ WordPress بتحمل هذا العبء عن طريق تحميل ملف الخط على أضف الخطوط المحلية الشاشة باستخدام واجهة Create Block Theme. بمجرد تحديد ملف للتحميل ، يتم ملء مربعات تعريفات وجه الخط تلقائيًا.

على الرغم من أنه يمكننا استخدام أي ملفات .ttf, .woffالطرق أو .woff2 ملف ، لقد قمت بتنزيله ببساطة افتح ملفات خطوط Sans من Google Fonts لهذا التمرين. لقد خطفت نوعين مختلفين من الوزن ، منتظم و 800.

نفس إدارة الملفات السحرية التلقائية وملفات theme.json التحديث الذي رأيناه مع خيار Google Fonts يحدث مرة أخرى عندما نقوم بتحميل ملفات الخطوط (والتي يتم إجراؤها واحدة تلو الأخرى). تحقق من مكان وصول الخطوط في مجلد السمات الخاص بي وكيف تمت إضافتها إليه theme.json:

إزالة الخطوط

يسمح لنا المكون الإضافي أيضًا بإزالة ملفات الخط من قالب الحظر من مسؤول WordPress. دعنا نحذف أحد متغيرات Open Sans التي قمنا بتثبيتها في القسم الأخير لمعرفة كيفية عمل ذلك.

النقر على حذف الروابط تطلق تحذيرًا لك لتأكيد الحذف. سنضغط OK للمتابعة.

لنفتح مجلد السمات الخاص بنا ونتحقق من ملف theme.json ملف. من المؤكد أن ملف Open Sans 800 الذي قمنا بحذفه على شاشة البرنامج المساعد أزال ملف الخط من مجلد السمة ، وذهب المرجع إليه منذ فترة طويلة theme.json.

هناك عمل مستمر يحدث

هناك حديث عن إضافة ميزة "Font Manager" إلى WordPress Core بدلاً من الحاجة إلى مكون إضافي منفصل.

تكرار مبدئي للميزة متاح في الريبو، ويستخدم نفس الأسلوب الذي استخدمناه بالضبط في هذه المقالة. يجب أن يكون متوافق مع اللائحة العامة لحماية البيانات، أيضاً. الميزة هي من المقرر أن تهبط مع WordPress 6.3 الافراج في وقت لاحق من هذا العام.

اختتام

يعمل المكون الإضافي Create Block Theme بشكل كبير على تحسين تجربة المستخدم عندما يتعلق الأمر بمعالجة الخطوط في قوالب قوالب WordPress. يسمح لنا المكون الإضافي بإضافة أو حذف أي خطوط مع احترام متطلبات القانون العام لحماية البيانات (GDPR).

لقد رأينا كيف يؤدي تحديد أحد خطوط Google أو تحميل ملف خط محلي إلى وضع الخط تلقائيًا في مجلد السمة وتسجيله في theme.json ملف. لقد رأينا أيضًا كيف أصبح الخط خيارًا متاحًا في إعدادات الأنماط العامة في محرر الموقع. وإذا كنا بحاجة إلى إزالة الخط؟ يعتني المكون الإضافي بذلك أيضًا - دون لمس ملفات السمات أو التعليمات البرمجية.

شكرا للقراءة! إذا كان لديك أي تعليقات أو اقتراحات ، شاركها في التعليقات. أود أن أعرف ما هو رأيك في هذا الاتجاه المحتمل لإدارة الخطوط في WordPress.

موارد إضافية

لقد اعتمدت على الكثير من الأبحاث لكتابة هذا المقال واعتقدت أنني سأشارك المقالات والموارد التي استخدمتها لتزويدك بسياق إضافي.

إدارة خطوط WordPress

قضايا جيثب

متطلبات اللائحة العامة لحماية البيانات الأوروبية

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/managing-fonts-in-wordpress-block-themes/