شارك المقال

كيفية تغيير حجم الخط بسهولة في ووردبريس

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

هل تريد تغيير حجم الخط في منشوراتك أو صفحاتك على ووردبريس؟

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

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

تغيير حجم الخط في ووردبريس

فيديو تعليمي

اشترك في WPBeginner

إذا كنت تفضل التعليمات المكتوبة ، فاستمر في القراءة.

الطريقة الأولى: استخدام عناوين الفقرة

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

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

تسمح لك بتقسيم مشاركاتك وصفحاتك إلى أقسام باستخدام عناوين مختلفة (تسمى غالبًا “العناوين الفرعية”).

تعتبر العناوين رائعة أيضًا لتحسين محركات البحث. تعطي محركات البحث العناوين المناسبة وزناً أكبر من نص الفقرة العادي.

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

يمكنك إضافة عنوان إلى مشاركاتك أو صفحاتك ببساطة عن طريق إضافة كتلة “العنوان”. يمكنك البحث عنه أو العثور عليه في قسم “الكتل المشتركة” في محرر قوالب ووردبريس .

إضافة كتلة عنوان في جوتنبرج

ستتحول الكتلة افتراضيًا إلى العنوان 2. عادةً ، من المنطقي الالتزام بالعنوان 2 للعناوين الفرعية. إذا كنت تريد تغيير هذا ، فيمكنك ببساطة النقر فوق القائمة المنسدلة “H2” لتحديد حجم مختلف.

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

بدلاً من ذلك ، يمكنك تغيير هذا في إعدادات الحظر على الجانب الأيمن من الشاشة. يمكنك أيضًا تغيير لون العنوان هناك أيضًا.

كيفية إضافة عنوان في المحرر الكلاسيكي القديم

إذا كنت لا تزال تستخدم المحرر الكلاسيكي الأقدم في ووردبريس ، فيمكنك إضافة عناوين باستخدام القائمة المنسدلة “الفقرة”.

فقط قم بتمييز النص الذي تريد تحويله إلى عنوان ، وانقر فوق القائمة المنسدلة “فقرة” ، وحدد حجم العنوان.

إنشاء عنوان بالنقر فوق القائمة المنسدلة “فقرة” في المحرر الكلاسيكي

يتم التحكم في أحجام وألوان أنماط العناوين المختلفة بواسطة ورقة أنماط المظهر الخاص بك (style.css).

إذا كنت تستخدم سمة ووردبريس مميزة ، فقد يكون لديك خيار تغيير هذه الإعدادات ضمن المظهر »تخصيص .

يسهل استخدام العناوين الفرعية في مقالاتك على القراء متابعة ما تخبرهم به. في الوقت نفسه ، يجعل أيضًا منشورات ووردبريس الخاصة بك صديقة لكبار المسئولين الاقتصاديين .

الطريقة الثانية: تغيير حجم النص في محرر الكتل

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

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

تغيير حجم نص فقرة

يمكنك الاختيار من القائمة المنسدلة التي تغطي صغير ، عادي ، متوسط ​​، كبير ، وضخم. إذا غيرت رأيك ، فما عليك سوى النقر فوق الزر “إعادة تعيين” لإعادة تعيين فقرتك إلى النص الافتراضي.

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

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

إذا كنت مصممًا على الالتزام بالمحرر الكلاسيكي ، فإن الخيار التالي يناسبك.

الطريقة الثالثة: تغيير حجم الخط باستخدام البرنامج المساعد TinyMCE المتقدم

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

هذا مفيد بشكل خاص مع المحرر الكلاسيكي الأقدم ، ولكنه يعمل أيضًا مع محرر الكتلة. يضيف كتلة جديدة تسمى “Classic Paragraph” تحتوي على جميع عناصر تحكم TinyMCE.

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

بعد ذلك ، انتقل إلى الإعدادات »TinyMCE Advanced لتهيئة إعدادات المحرر. هذا هو المكان الذي يمكنك فيه إعداد الأزرار التي تريد استخدامها في شريط أدوات TinyMCE Advanced.

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

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

زر القائمة المنسدلة لأحجام الخطوط في قائمة TinyMCE Advanced للمحرر الكلاسيكي

إذا كنت تستخدم محرر الكتلة ، فستحتاج إلى التمرير لأسفل الشاشة وإضافة القائمة المنسدلة Font Sizes إلى شريط الأدوات عن طريق سحبها وإفلاتها:

إضافة زر أحجام الخط إلى شريط أدوات كتلة TinyMCE Advanced

تأكد من النقر فوق “حفظ التغييرات” أسفل الشاشة.

لمشاهدة الزر أثناء العمل ، قم بإنشاء منشور جديد أو تحرير منشور موجود.

في محرر الكتلة ، سيكون لديك الآن خيار إضافة كتلة “Classic Paragraph”. سيكون لديها عناصر تحكم TinyMCE المتقدمة ، مثل هذا:

كتلة Classic Paragraph في محرر الكتلة ، تمت إضافتها بواسطة البرنامج المساعد TinyMCE Advanced

في المحرر الكلاسيكي ، سترى أشرطة أدوات TinyMCE Advanced مع قائمة منسدلة لحجم الخط:

تغيير حجم الخط باستخدام محرر TinyMCE Advanced

يمكنك تحديد أي حجم خط من القائمة المنسدلة.

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

الطريقة الرابعة: تغيير حجم الخط على مستوى الموقع باستخدام CSS

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

الخبر السار هو أنه يمكنك تغيير الحجم الافتراضي للفقرة عبر موقعك بالكامل. أفضل طريقة للقيام بذلك هي استخدام مُخصص القوالب ضمن المظهر »تخصيص .

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

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

ما عليك سوى النقر فوق خيار “CSS إضافي” في أداة تخصيص السمات. هذا هو المكان الذي يمكنك فيه تخزين جميع أكواد CSS المخصصة الخاصة بك.

استخدام أداة التخصيص لإضافة كود CSS إلى موقعك

الآن ضمن مربع نص CSS الإضافي ، ما عليك سوى إضافة رمز CSS الخاص بك. في هذا المثال ، نقوم بتغيير حجم الخط إلى “16 بكسل” ، يمكنك اختيار حجم خط مختلف.

1

2

3

p {

font-size:16px;

}

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

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

الكود أعلاه ينطبق فقط على نص الفقرة. ماذا لو أردت تغيير حجم الخط لجميع عناوين h2 الفرعية؟

ما عليك سوى تعديل الكود أعلاه لاستهداف عنصر h2 في قالبك كما يلي:

1

2

3

h2 {

font-size:32px;

}

يمكنك فعل الشيء نفسه مع العناوين الأخرى أيضًا عن طريق تغيير h2 إلى h3 أو h4 أو h5.

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

خدمات مميزة لآجلك

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

اشترك معنا لمزيد من المعرفة

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

عن الكاتب

فهرسة المقال

تابعنا على منصات التواصل

إعلان | أطلب متجرك

أخر المنشورات

تابعنا على الفيسبوك

تابعنا على اليوتيوب

إعلان | أطلب متجرك

توضيح

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

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

أرسل تصحيح

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}