هل تريد إضافة أنماط مخصصة على محرر WordPress المرئي؟ تتيح لك إضافة أنماط مخصصة إمكانية تطبيق التنسيق بسرعة دون الانتقال إلى محرر النصوص. في هذه المقالة ، سوف نوضح لك كيفية إضافة أنماط مخصصة إلى محرر WordPress المرئي.
ريمارك: هذا البرنامج التعليمي يتطلب المعرفة الأساسية لل CSS.
عندما سيكون لك هل تحتاج إلى إضافة نمط مخصص في محرر WordPress المرئي؟
افتراضيًا، يوفر المحرر المرئي في WordPress خيارات التنسيق والتصميم الأساسية. ومع ذلك، في بعض الأحيان ستحتاج إلى أنماط مخصصة سهلة الاستخدام تسمح لك، على سبيل المثال، بإضافة أزرار CSS، محتويات، السنانير، الخ.
يمكنك دائمًا التبديل من المحرر المرئي إلى محرر النصوص وإضافة كود HTML و CSS مخصص. ولكن إذا كنت تستخدم أنماطًا معينة بانتظام ، فسيكون من الأفضل إضافتها في المحرر المرئي بحيث يمكنك إعادة استخدامها بسهولة.
سيوفر لك هذا قدرًا هائلاً من الوقت ، ويسمح لك أيضًا باستخدام نفس الأنماط دائمًا في كل مكان على جهازك موقع انترنت.
الأهم من ذلك ، يمكنك بسهولة تعديل أو تحديث الأنماط دون الحاجة إلى تحرير المقالات على موقعك.
سنكتشف الآن كيفية القيام بذلك على ووردبريس.
طريقة 1: إضافة نمط مخصص مع البرنامج المساعد
أول شيء عليك القيام به هو تثبيت وتفعيل البرنامج المساعد " أنماط مخصصة TinyMCE ". لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت ملف وورد البرنامج المساعد.
بعد التنشيط ، يجب عليك زيارة " الإعدادات> الإعدادات »TinyMCE Custom Styles لتكوين إعدادات البرنامج المساعد.
يسمح لك المكون الإضافي باختيار موقع ملفات ورقة الأنماط. يمكنه استخدام نسقك أو نمط موضوعك الفرعي ، أو يمكنك اختيار موقع مخصص.
بعد ذلك ، عليك أن تضغط على الزر " حفظ جميع الإعدادات لتخزين الإعدادات الخاصة بك.
الآن يمكنك إضافة الأنماط المخصصة الخاصة بك. تحتاج إلى التمرير إلى قسم النمط والنقر فوق الزر إضافة نمط جديد ".
يجب عليك أولاً إدخال عنوان للنمط. سيتم عرض هذا العنوان في القائمة المنسدلة. ثم عليك أن تحدد. سواء كان صفًا أو كتلة أو عنصر تحديد.
بعد ذلك أضف فئة CSS ثم أضف قواعد CSS كما هو موضح في لقطة الشاشة أدناه.
بمجرد إضافة نمط CSS ، ما عليك سوى النقر فوق الزر "حفظ كافة الإعدادات" لحفظ التغييرات.
يمكنك الآن تحرير مقال موجود أو إنشاء مقال جديد. ستلاحظ وجود تنسيق في القائمة المنسدلة ، في الصف الثاني من محرر WordPress المرئي.
ما عليك سوى تحديد نص في المحرر ، ثم اختيار نمطك المخصص من القائمة المنسدلة لتطبيقه.
يمكنك الآن معاينة مقالك لمعرفة ما إذا كانت أنماطك المخصصة تنطبق بشكل صحيح.
أسلوب 2: إضافة الأنماط يدويًا إلى محرر Visual
تتطلب هذه الطريقة إضافة رمز يدويًا إلى ملفات WordPress الخاصة بك. إذا كانت هذه هي المرة الأولى التي تقوم فيها بذلك ، فراجع البرنامج التعليمي الخاص بنا حول كيفية إضافة ملف وورد البرنامج المساعد.
الخطوة 1: إضافة نمط مخصص من القائمة المنسدلة من محرر WordPress المرئي.
أولاً ، سنضيف قائمة منسدلة في محرر WordPress المرئي. ستسمح لنا هذه القائمة المنسدلة بعد ذلك بتحديد وتطبيق أنماطنا المخصصة.
يجب عليك إضافة الكود التالي إلى ملف jobs.php أو البرنامج المساعد.
الوظيفة wpb_mce_buttons_2 (أزرار $) {array_unshift (أزرار $، 'Stylicelect')؛ أزرار العودة $؛ } add_filter ('mce_buttons_2'، 'wpb_mce_buttons_2') ،
الخطوة 2: كيفية إضافة خيارات في القائمة المنسدلة
الآن سوف تحتاج إلى إضافة بعض الخيارات إلى القائمة المنسدلة التي أنشأتها للتو. ستتمكن بعد ذلك من اختيار هذه الخيارات وتطبيقها من التنسيقات في القائمة المنسدلة.
في هذا البرنامج التعليمي، سنضيف ثلاثة أنماط مخصصة لإنشائها محتويات الكتلة والأزرار.
ستحتاج إلى إضافة الكود التالي إلى ملف "jobs.php" الخاص بوظائفك. php أو ملحق محدد.
/ * * وظيفة رد الاتصال لتصفية إعدادات MCE * / الوظيفة my_mce_before_init_insert_formats ($ init_array) {// تحديد style_formats المصفوفة $ style_formats = array (/ * * كل مصفوفة فرعية هي تنسيق بإعداداتها الخاصة * لاحظ أن كل مصفوفة لها عنوان ، كتلة ، فئات ، وسيطات الغلاف * العنوان هو التسمية التي ستكون مرئية في قائمة التنسيقات * تحدد الكتلة ما إذا كان نمط امتداد أو div أو محدد أو نمط مضمّن * تسمح لك الفئات بتعريف فئات CSS * التفاف سواء كان أضف عنصرًا جديدًا على مستوى الكتلة حول أي عناصر محددة * / مصفوفة ('title' => 'Content Block'، 'block' => 'span'، 'classes' => 'content-block'، 'wrapper' => true،)، array ('title' => 'Blue Button'، 'block' => 'span'، 'classes' => 'blue-button'، 'wrapper' => true،)، المصفوفة ('title' => 'الزر الأحمر'، 'block' => 'span'، 'classes' => 'red-button'، 'wrapper' => true،)،)؛ // أدخل المصفوفة ، JSON ENCODED ، في 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats)؛ إرجاع init_array $؛ } // إرفاق رد الاتصال بـ 'tiny_mce_before_init' add_filter ('tiny_mce_before_init'، 'my_mce_before_init_insert_formats') ؛
يمكنك الآن إضافة منشور جديد على WordPress والنقر فوق التنسيقات من القائمة المنسدلة للمحرر المرئي. ستلاحظ أن الأنماط المخصصة الخاصة بك مرئية الآن.
ومع ذلك ، فإن اختيارهم لن يحدث أي فرق على المحرر المرئي في WordPress.
3 الخطوة: إضافة نمط CSS
الخطوة الأخيرة الآن هي إضافة قواعد أنماط CSS لأنماطك المخصصة.
ستحتاج إلى إضافة CSS هذا في ملف style.css الخاص بقالبك أو السمة الفرعية.
.content-block {border: 1px solid #eee؛ الحشو: 3 بكسل ؛ الخلفية: #ccc ؛ أقصى عرض: 250 بكسل ؛ تعويم: صحيح ؛ محاذاة النص: مركز ؛ } .content-block: بعد {clear: both؛ } الزر الأزرق {background-color: # 33bdef؛ - دائرة نصف قطرها: 6 بكسل ؛ نصف قطر مجموعة الويب الحدودية: 6 بكسل ؛ نصف قطر الحدود: 6 بكسل ؛ الحدود: 1 بكسل صلب # 057fd0 ؛ عرض: مضمنة كتلة ؛ المؤشر: نقطة ؛ اللون: #ffffff ؛ الحشو: 6 بكسل 24 بكسل ؛ زخرفة النص: لا شيء ؛ } الزر الأحمر {background-color: # bc3315؛ - دائرة نصف قطرها: 6 بكسل ؛ -webkit-border-radius: 6px ؛ نصف قطر الحدود: 6 بكسل ؛ الحد: 1 بكسل صلب # 942911 ؛ عرض: مضمنة كتلة ؛ المؤشر: نقطة ؛ اللون: #ffffff ؛ الحشو: 6 بكسل 24 بكسل ؛ زخرفة النص: لا شيء ؛ }
تتحكم ورقة أنماط المحرر في مظهر ملفك محتويات في المحرر المرئي. تحقق من الوثائق لمعرفة كيفية العثور على موقع هذا الملف.
إذا لم يكن قالبك يحتوي على ملف أنماط ، فيمكنك دائمًا إنشاء واحد. ما عليك سوى إنشاء ملف CSS جديد وتسميته " العرف تحرير style.css ".
تحتاج إلى تحميل هذا الملف إلى الدليل الجذر لقيمتك ، ثم إضافة هذا الرمز إلى ملف "jobs.php" الخاص بالقالب.
function my_theme_add_editor_styles () {add_editor_style ('custom-editor-style.css')؛ } add_action ('init'، 'my_theme_add_editor_styles')؛
هذا كل شيئ. لقد قمت للتو بإضافة أنماطك المخصصة في محرر WordPress المرئي. يمكنك الآن إجراء التخصيصات التي تعتقد أنها صحيحة.
لا تتردد في مشاركة هذا البرنامج التعليمي مع أصدقائك على الشبكات الاجتماعية المفضلة لديك.
