كيفية تخصيص النص في محرر WordPress Gutenberg (المنطقة الخلفية)

نشرت: 2024-12-09

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

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

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

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

قبل التخصيص
بمجرد تخصيصها

خطوات تخصيص النص في منطقة الواجهة الخلفية لمحرر WordPress Gutenberg

الخطوة 1: أضف الكود المخصص إلى ملف jobs.php

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

في لوحة تحكم WordPress الخاصة بك، انتقل إلى Appearance > Theme File Editor . يمكنك العثور على Theme File Editor ضمن قائمة "الأدوات" إذا كنت تستخدم قالبًا محظورًا.

بمجرد دخولك إلى صفحة Theme File Editor، حدد   ملف jobs.php . بعد ذلك، الصق مقتطف PHP أدناه في نهاية محتوى ملف function.php . بعد ذلك، قم بتحديث ملف السمة بالنقر فوق الزر "تحديث الملف" . 

 // أضف CSS مخصصًا إلى محرر Gutenberg
الوظيفة custom_gutenberg_editor_styles() {
    add_theme_support('أنماط المحرر'); // تمكين أنماط المحرر
    add_editor_style('custom-editor-style.css'); // قم بإدراج ملف CSS المخصص
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// قم بإدراج أنماط المحرر المخصصة مباشرةً
وظيفة enqueue_custom_editor_css() {
    wp_enqueue_style(
        "أنماط المحرر المخصصة" ، 
        get_template_directory_uri() . "/محرر مخصص-style.css"،
        مصفوفة ()،
        '1.0'
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

الخطوة 2: أضف ملف CSS إلى دليل السمات الخاص بك ( custom-editor-style.css )

بعد ذلك، تحتاج إلى إنشاء ملف CSS باسم custom-editor-style.css في دليل السمات الخاص بك (على سبيل المثال، wp-content/themes/your-theme/).

1: قم بتثبيت مدير الملفات لـ WordPress

لإنشاء اسم ملف CSS في دليل السمات الخاص بك، يمكنك استخدام أي مدير ملفات لـ WordPress متوفر في دليل WordPress الإضافي.

يرجى تثبيته وتنشيطه، ثم البدء في إنشاء ملف CSS جديد باسم custom-editor-style.css في دليل السمات الخاص بك. في هذا المثال، نستخدم البرنامج الإضافي Advanced File Manager وموضوع WordPress الحالي الخاص بنا هو Astra لذا سيكون المسار كما يلي: wp-content/themes/astra/custom-editor-style.css

2: أضف مقتطف CSS إلى ملف custom-editor-style.css

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

إليك مقتطف CSS الذي يمكنك استخدامه: 

 /* تخصيص حجم خط الفقرة وارتفاع السطر */
.محرر أنماط المجمع ص {
    حجم الخط: 18 بكسل! مهم؛
    ارتفاع الخط: 1.6! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 400 !مهم;
}



/* تخصيص عنوان مشاركة المحرر (H1) */
.editor-post-title__input {
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    حجم الخط: 40 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 700 !مهم;
    ارتفاع الخط: 1.6! مهم؛
}

/* تخصيص كتل العناوين (H2، H3، H4، H5) */

محرر أنماط المجمع h2 {
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    حجم الخط: 36 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 700 !مهم;
    ارتفاع الخط: 1.6! مهم؛
}

محرر أنماط المجمع h3 {
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    حجم الخط: 32 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 700 !مهم;
    ارتفاع الخط: 1.6! مهم؛
}

.محرر الأنماط المجمعة h4 {
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    حجم الخط: 30 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 700 !مهم;
    ارتفاع الخط: 1.6! مهم؛
}

محرر أنماط المجمع h5 {
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    حجم الخط: 28 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 700 !مهم;
    ارتفاع الخط: 1.6! مهم؛
}


/* نمط القوائم غير المرتبة */
.محرر أنماط المجمع ul {
    الهامش الأيسر: 20 بكسل؛
    المساحة المتروكة لليسار: 20 بكسل؛
    نوع نمط القائمة: قرص؛
    حجم الخط: 18 بكسل! مهم؛
    ارتفاع الخط: 1.6! مهم؛
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 400 !مهم;
}

/* نمط عناصر القائمة */
.محرر الأنماط المجمعة ul li {
    الهامش السفلي: 10 بكسل؛
    حجم الخط: 18 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 400 !مهم;
}

/* أنماط القائمة المتداخلة */
.محرر أنماط المجمع ul ul {
    الهامش الأيسر: 20 بكسل؛
    نوع نمط القائمة: دائرة؛
}

/* أنماط إضافية للقوائم المرتبة إذا لزم الأمر */
.محرر الأنماط المجمعة رأ {
    الهامش الأيسر: 20 بكسل؛
    المساحة المتروكة لليسار: 20 بكسل؛
    نوع نمط القائمة: عشري؛
    حجم الخط: 18 بكسل! مهم؛
    ارتفاع الخط: 1.6! مهم؛
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 400 !مهم;
}

بمجرد إضافة مقتطف CSS إلى ملف custom-editor-style.css ، يمكنك التحقق من تطبيق التخصيصات في المنطقة الخلفية لمحرر Gutenberg بنجاح.

انتقل إلى محرر WordPress Gutenberg عن طريق إنشاء نوع منشور جديد (صفحة أو منشور) أو تحديد النوع الموجود.

ماذا فعل الكود؟

1: كود مخصص في ملف jobs.php

الوظيفة الأولى 
 الوظيفة custom_gutenberg_editor_styles() {
    add_theme_support('أنماط المحرر'); // تمكين أنماط المحرر
    add_editor_style('custom-editor-style.css'); // قم بإدراج ملف CSS المخصص
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

تخبر هذه الوظيفة WordPress باستخدام ملف CSS مخصص ( custom-editor-style.css ) في محرر Gutenberg.

الوظيفة الثانية 
 وظيفة enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles'، // اسم فريد لورقة الأنماط.
        get_template_directory_uri() . '/custom-editor-style.css'، // المسار إلى ملف CSS الخاص بك.
        المصفوفة ()، // لا توجد تبعيات.
        '1.0' // إصدار ملف CSS.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

تقوم هذه الوظيفة بتحميل ملف custom-editor-style.css مباشرةً إلى المحرر.

لماذا وظيفتين؟

  • تضيف الوظيفة الأولى دعمًا أساسيًا للموضوع لتصميم محرر WordPress Gutenberg.
  • تتحكم الوظيفة الثانية في كيفية ووقت تحميل ملف CSS.

2: مقتطف CSS في ملف custom-editor-style.css

تخصيص نص الفقرة (ع) 
 .محرر أنماط المجمع ص {
    حجم الخط: 18 بكسل! مهم؛
    ارتفاع الخط: 1.6! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 400 !مهم;
}

ماذا يفعل:

  • يغير حجم خط الفقرات إلى 18 بكسل.
  • يضبط ارتفاع الخط على 1.6 لسهولة القراءة.
  • يتم تطبيق لون النص الأسود #000000.
  • يستخدم وزن الخط العادي (400).
  • !important : يضمن أن هذه الأنماط تتجاوز أي أنماط متعارضة.
تخصيص عنوان المشاركة (H1) 
 .editor-post-title__input {
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    حجم الخط: 40 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 700؛
    ارتفاع الخط: 1.6؛
}

ماذا يفعل:

  • تغيير خط عنوان المنشور إلى Arial مع خيار sans-serif الاحتياطي.
  • يضبط حجم خط كبير يبلغ 40 بكسل.
  • يضمن أن يكون النص غامقًا (وزن الخط: 700) ويستخدم اللون الأسود.
  • يحافظ على ارتفاع خط ثابت.
تخصيص كتل العناوين (H2، H3، H4، H5) 
 محرر أنماط المجمع h2 {
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    حجم الخط: 36 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 700؛
    ارتفاع الخط: 1.6؛
}

يتم تطبيق أنماط مشابهة على H3 وH4 وH5 مع تقليل أحجام الخطوط:

  • H2: 36 بكسل
  • H3: 32 بكسل
  • H4: 30 بكسل
  • H5: 28 بكسل

ماذا يفعل:

  • توحيد عائلة الخطوط واللون والوزن وارتفاع الخط عبر جميع مستويات العناوين.
  • يضمن تسلسل هرمي واضح عن طريق ضبط أحجام الخطوط.
نمط القوائم غير المرتبة (ul) 
 .محرر أنماط المجمع ul {
    الهامش الأيسر: 20 بكسل؛
    المساحة المتروكة لليسار: 20 بكسل؛
    نوع نمط القائمة: قرص؛
    حجم الخط: 18 بكسل! مهم؛
    ارتفاع الخط: 1.6! مهم؛
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 400 !مهم;
}

ماذا يفعل:

  • إضافة تباعد إلى يسار القوائم غير المرتبة (مسافة بادئة).
  • يضمن استخدام عناصر القائمة لنمط القرص النقطي.
  • يطبق حجم الخط واللون وارتفاع الخط بشكل متسق لمطابقة نص الفقرة.
نمط عناصر القائمة (ul li) 
 .محرر الأنماط المجمعة ul li {
    الهامش السفلي: 10 بكسل؛
    حجم الخط: 18 بكسل! مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 400 !مهم;
}

ماذا يفعل:

  • يضيف المسافات بين عناصر القائمة لتسهيل القراءة (الهامش السفلي: 10 بكسل).
  • يضمن أن أنماط النص تتوافق مع التصميم العام.
نمط القائمة المتداخلة 
 .محرر أنماط المجمع ul ul {
    الهامش الأيسر: 20 بكسل؛
    نوع نمط القائمة: دائرة؛
}

ماذا يفعل:

  • يضبط المسافة البادئة للقوائم المتداخلة غير المرتبة.
  • تغيير نمط التعداد النقطي للقوائم المتداخلة إلى دائرة.
نمط القوائم المرتبة (ol) 
 .محرر الأنماط المجمعة رأ {
    الهامش الأيسر: 20 بكسل؛
    المساحة المتروكة لليسار: 20 بكسل؛
    نوع نمط القائمة: عشري؛
    حجم الخط: 18 بكسل! مهم؛
    ارتفاع الخط: 1.6! مهم؛
    عائلة الخط: 'Arial'، sans-serif !مهم؛
    اللون: #000000! مهم؛
    وزن الخط: 400 !مهم;
}

ماذا يفعل:

  • يضيف المسافات ويستخدم الترقيم العشري للقوائم المرتبة.
  • يضمن أن القوائم المرتبة تتبع نفس أسلوب الطباعة مثل الفقرات والقوائم غير المرتبة.

الخط السفلي

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

يتيح لك تنفيذ الطريقة المذكورة في هذه المقالة (إضافة التعليمات البرمجية المخصصة إلى ملف jobs.php وإضافة ملف CSS في دليل السمات) تخصيص النص في منطقة الواجهة الخلفية لـ Gutenberg بغض النظر عن سمة WordPress التي تستخدمها. يضمن هذا الأسلوب أن تظل تغييراتك متسقة عبر السمات والتحديثات المختلفة.

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