دليلك البسيط إلى WordPress Global Styles وتغيرات النمط العالمي

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

باستخدام WordPress Global Styles ، يمكنك تعيين الطباعة والألوان والتخطيطات العالمية من واجهة واحدة بدلاً من تعديل الأنماط للكتل الفردية أو الصفحات. استبدلت واجهة Global Styles Customizer وهي الآن الطريقة الأساسية لتخصيص الأساليب في سمات WordPress Block.

تطور تخصيص WordPress: رحلة من المخصص إلى الأنماط العالمية

إذا كنت مبتدئًا في WordPress ، فقد يكون من المثير للاهتمام أن ترى جدولًا زمنيًا للمعالم الرئيسية لـ WordPress نحو تخصيصات أكثر قوة:

1. WordPress 3.4 ، 2011: التخصيص المبكر مع Customizer
   قدم WordPress Customizer في الإصدار 3.4 ، الذي تم إصداره في عام 2011. أعطت هذه الأداة للمستخدمين معاينة حية لتغييرات التصميم ، مما يتيح لهم ضبط العناصر الأساسية مثل الألوان والخطوط وخيارات التخطيط. على الرغم من أنها كانت أداة قوية للتخصيص في ذلك الوقت ، إلا أن Customizer كان لا يزال محدودًا في قدراته.
2. WordPress 5.0 ، 2018: التحول إلى تحرير الموقع الكامل لـ WordPress (FSE)
   تم إطلاق محرر Gutenberg Block في عام 2018 مع إصدار WordPress 5.0. سمح هذا التحديث الرئيسي للمستخدمين بتحرير موقعهم بالكامل باستخدام الكتل ، من الرؤوس إلى تذييلات. فتح هذا التحول إمكانيات تصميم الموقع الجديدة ولكنها أبرز الحاجة إلى أداة تخصيص أكثر تقدماً. النظر في هذه الفترة باعتبارها بداية التحول نحو التحرير في الموقع الكامل.
3. WordPress 5.9 ، 2022: مقدمة من WordPress Global Styles
   أخيرًا ، قدم WordPress 5.9 أنماطًا عالمية كجزء من ميزات التحرير الكاملة. باستخدام هذه الواجهة الجديدة ، يمكن للمستخدمين إدارة الطباعة والألوان والتخطيطات والأنماط على مستوى العالم. استبدلت Global Styles Customizer لموضوعات الحظر ، وهدفها الرئيسي هو مركزية جميع عناصر التحكم حتى يتمكن المستخدمون من الحفاظ بسهولة على نظرة متماسكة عبر مواقعهم.
4. WordPress 6.0+ ، 2023 وما بعده: أنماط عالمية كمعيار جديد
   بواسطة WordPress 6.0 ، تم طرحه في عام 2023 ، أصبحت الأنماط العالمية المعيار لتخصيص موضوعات الحظر. توفر جميع التحسينات على عناصر التحكم في الطباعة وخيارات التدرج وإعدادات التخطيط المتقدمة المزيد من الدعم للتخصيص على مستوى الموقع.

أصبحت Global Styles الآن حجر الزاوية الحقيقي لتجربة تصميم WordPress ، حيث إنها توفر للمستخدمين طريقة موثوقة لتعديل مظهر موقعهم بأقل جهد. قبل الغوص في الأنماط العالمية بمزيد من التفصيل ، دعنا نتجاوز بعض المتطلبات الأساسية.

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

ثانياً ، يجب عليك استخدام موضوع كتلة. في هذا البرنامج التعليمي ، سأستخدم Prime ، وهو موضوع Motopress WordPress مجانًا يدعم تمامًا التحرير الكامل. يمكنك تنزيل Prime من موقعنا الرسمي أو على wp.org.

30 أكتوبر 2024

20 أفضل موضوعات FSE للبدء مع WordPress الحديثة

4 يونيو 2024

Raft vs Ollie vs Prime: ما هو أفضل موضوع كتلة لـ WordPress FSE؟

العثور على الأساليب العالمية

انتقل إلى المظهر> محرر في قائمة المشرف لتحديد موقع إعدادات الأنماط العالمية. انتظر حتى يتم تحميل الشاشة الرئيسية ، ثم حدد الصفحة التي تظهر. انقر فوق أيقونة الأنماط في الزاوية اليمنى العليا ، والتي تشبه دائرة نصف مملوءة.

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

تشمل بعض الموضوعات ، مثل Prime أو 25 وعشرون ، اختلافات مختلفة في الأناقة. فكر في اختلافات الأناقة كملعب.

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

الطباعة

الآن ، دعونا نلقي نظرة فاحصة على الطباعة. انقر على قائمة الطباعة للوصول إلى إعدادات الخط. أنت تستطيع:

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

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

بالنسبة للروابط ، ستجد نفس الإعدادات كما هو الحال بالنسبة للنص ولكن مع خيار زخرفة إضافي ، والذي يتضمن Strikethrough و Owderline.

بعض العناصر لديها إعدادات إضافية. على سبيل المثال ، تتيح لك العناوين تحديد مستوى العنوان. يتيح لك تباعد الحروف التحكم في المسافة بين الأحرف. بالإضافة إلى ذلك ، يمكنك اختيار التحولات النصية مثل جميع CAPS (AB) ، والرسالة الأولى (AB) ، وجميع الأحرف الصغيرة (AB).

بعد ذلك ، يمكنك ضبط الطباعة للتسميات التوضيحية ، والتي يتم استخدامها في كتل الصورة والغطاء.

أخيرًا وليس آخرًا ، الأزرار. نظرًا لأن الأزرار تتضمن نصًا ، يمكنك بسهولة ضبط إعدادات الطباعة الخاصة بهم تمامًا مثل أي عنصر آخر يعتمد على النص.

الألوان

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

يمكنك أيضًا إضافة ألوان مخصصة إلى لوحة موقعك ، وجعلها متوفرة عبر إعدادات الألوان الخاصة بك. لإضافة واحدة ، انقر فوق الزر + ضمن Custom ، ثم اختر ظلًا باستخدام منتقي الألوان أو أدخل قيمة Hex أو RGB أو HSL. بشكل افتراضي ، يتم تصنيف اللون الجديد على اللون 1 ، ولكن يمكنك إعادة تسميته بالنقر فوقه. انقر على القيام به للحفظ.

إذا لم تكن راضيًا عن لونك المخصص ، فقم بإزالته وابدأ من جديد.

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

خيار آخر هو مرشح Duotone ، ويمكن للمستخدمين لتأثير اللون ثنائية اللون تطبيقه على الصور في كتل الصور وكتل الغلاف.

بمجرد الانتهاء من إعداد لوحاتك ، يمكننا العودة إلى لوحة الألوان. أسفل قسم اللوحة ، ستجد خيارات لتحرير الألوان لـ:

• نص
• خلفية
• الروابط
• التسميات التوضيحية
• أزرار
• العناوين

الخلفية والظلال

هل تعلم أن إضافة صورة خلفية إلى موقع الويب الخاص بك هو خيار آخر؟ ما عليك سوى النقر فوق الزر "إضافة صورة الخلفية" وتحميل الصورة أو اختر واحدة من مكتبة الوسائط. بالطبع ، يمكنك النقر فوق إعادة التعيين للتخلص منه مرة واحدة.

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

تَخطِيط

تتيح لك لوحة التصميم التحكم في عرض منطقة محتوى موقعك.

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

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

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

17 فبراير 2025

كيفية تصدير موضوع كتلة WordPress: دليل خطوة بخطوة

27 يناير 2025

كيفية إنشاء سمة كتلة WordPress (بدون رمز)

تغيير نمط الكتل المحددة

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

كيفية مراجعة التغييرات الخاصة بك

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

تخصيصات إضافية

إذا كان لديك مهارات CSS وترغب في القيام بالقرص الإضافية ، افتح نافذة CSS:

1. انقر فوق القائمة ثلاث نقاط في الزاوية العلوية اليمنى.
2. حدد CSS إضافية.
3. أدخل CSS المخصصة في المربع المقدم.

تتيح هذه الميزة تحكمًا أكثر دقة في أنماطك.

إعادة ضبط أنماط الافتراضية

إذا كنت ترغب في العودة إلى المظهر الافتراضي ، فاستخدم ميزة المراجعات:

1. في إعدادات الأنماط ، انقر فوق القائمة ثلاث درجات في الزاوية اليمنى العلوي.
2. حدد إعادة تعيين أنماط.

بمجرد حفظ التغييرات ، يتيح لك خيار المراجعات استعادة الإصدارات السابقة من إعدادات الأنماط الخاصة بك.

ما الجديد في WordPress 6.7

الآن ، كمكافأة ، دعنا نستكشف بسرعة بعض التحسينات للأساليب العالمية المتوفرة مع WordPress 6.7 أو أكثر.

لمس أدوات التصميم ، نظرًا لأن الإصدار 6.7 ، فإن المزيد من الكتل تدعم الآن الحدود والخلفيات والظلال وعناصر التحكم في التباعد. على سبيل المثال ، مع وجود مجموعة المجموعة ، يمكنك الآن الوصول إلى تأثيرات الظل ، ويدعم كتلة المحتوى صور الخلفية.

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

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

مع هذه التحديثات ، يجعل WordPress 6.7 من السهل إنشاء مواقع ويب مصممة جيدًا دون الحاجة إلى كتابة أي رمز.

الخلاصة على WordPress Global Styles

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

الأسئلة الشائعة