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

ملاحظة: يتطلب هذا البرنامج التعليمي معرفة أساسية بلغة CSS.

لماذا ومتى تحتاج إلى اضافة استايل مخصص فى محرر ووردبريس المرئي

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

يمكنك دائمًا التبديل من محرر مرئي إلى محرر نصي وإضافة HTML وCSS مخصصين. ولكن إذا كنت تستخدم بعض الأستايلات بانتظام، فسيكون من الأفضل إضافتها إلى محرر مرئي حتى تتمكن من إعادة استخدامها بسهولة.

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

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

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

الطريقة 1: اضافة استايل مخصص في المحرر المرئي باستخدام الاضافة

أول شيء عليك القيام به هو تثبيت وتفعيل اضافة TinyMCE Custom Styles. لمزيد من التفاصيل، راجع دليلنا خطوة بخطوة حول كيفية تثبيت اضافة ووردبريس.

بعد التنشيط، تحتاج إلى زيارة صفحة الإعدادات » TinyMCE Custom Styles لتكوين إعدادات الاضافة.

تتيح لك الاضافة اختيار موقع ملفات stylesheet. يمكنه استخدام stylesheet القالب أو القالب الفرعي الخاص بك، أو يمكنك اختيار موقع مخصص خاص بك.

بعد ذلك، تحتاج إلى النقر فوق الزر “Save All Settings” لتخزين التغييرات.

يمكنك الأن إضافة أستايلك المخصص. تحتاج إلى التمرير لأسفل قليلاً إلى قسم الأستايل والنقر فوق الزر “Add new style”.

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

بعد ذلك، أضف كلاس CSS ثم أضف قواعد CSS الخاصة بك كما هو موضح في لقطة الشاشة أدناه.

بمجرد إضافة أستايل CSS، ما عليك سوى النقر فوق الزر “Save All Settings” لتخزين التغييرات.

يمكنك الأن تحرير منشور موجود أو إنشاء منشور جديد. ستلاحظ قائمة منسدلة “تنسيق” في الصف الثاني من محرر ووردبريس المرئي.

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

يمكنك الأن معاينة منشورك للتأكد من تطبيق الأستايل المخصص بشكل صحيح.

الطريقة 2: إضافة أنماط مخصصة يدويًا إلى محرر ووردبريس المرئي

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

الخطوة 1: إضافة قائمة منسدلة للأستايل المخصص في محرر ووردبريس المرئي

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

تحتاج إلى إضافة الكود التالي إلى ملف functions.php الخاص بقالبك أو إلى الاضافة الخاصة بالموقع.

function wpb_mce_buttons_2($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

الخطوة 2: إضافة خيارات التحديد إلى القائمة المنسدلة

الآن ستحتاج إلى إضافة الخيارات إلى القائمة المنسدلة التي قمت بإنشائها للتو. ستتمكن بعد ذلك من تحديد هذه الخيارات وتطبيقها من القائمة المنسدلة “التنسيقات”.

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

ستحتاج إلى إضافة الكود التالي إلى ملف functions.php الخاص بقالبك أو إلى الاضافة الخاص بالموقع.

/*
* Callback function to filter the MCE settings
*/
 
function my_mce_before_init_insert_formats( $init_array ) {  
 
// Define the style_formats array
 
    $style_formats = array(  
/*
* Each array child is a format with it's own settings
* Notice that each array has title, block, classes, and wrapper arguments
* Title is the label which will be visible in Formats menu
* Block defines whether it is a span, div, selector, or inline style
* Classes allows you to define CSS classes
* Wrapper whether or not to add a new block-level element around any selected elements
*/
        array(  
            'title' => 'Content Block',  
            'block' => 'span',  
            'classes' => 'content-block',
            'wrapper' => true,
             
        ),  
        array(  
            'title' => 'Blue Button',  
            'block' => 'span',  
            'classes' => 'blue-button',
            'wrapper' => true,
        ),
        array(  
            'title' => 'Red Button',  
            'block' => 'span',  
            'classes' => 'red-button',
            'wrapper' => true,
        ),
    );  
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  
     
    return $init_array;  
   
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

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

ومع ذلك، فإن تحديدها لا يحدث أي فرق في محرر المنشورات الأن.

الخطوة 3: إضافة أستايل CSS

الآن الخطوة الأخيرة هي إضافة قواعد استايل CSS لأستايلك المخصص.

ستحتاج إلى إضافة هذا CSS إلى ملفات style.css وeditor-style.css الخاصة بقالبك أو قالبك الفرعي.

.content-block { 
    border:1px solid #eee; 
    padding:3px;
    background:#ccc;
    max-width:250px;
    float:right; 
    text-align:center;
}
.content-block:after { 
    clear:both;
} 
.blue-button { 
    background-color:#33bdef;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #057fd0;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    padding:6px 24px;
    text-decoration:none;
}
 
.red-button {
    background-color:#bc3315;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #942911;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    padding:6px 24px;
    text-decoration:none;
}

يتحكم stylesheet المحرر في مظهر المحتوى الخاص بك في المحرر المرئي. راجع وثائق القالب الخاص بك لمعرفة موقع هذا الملف.

إذا لم يكن القالب الخاص بك يحتوي على ملف stylesheet المحرر، فيمكنك دائمًا إنشاء واحد. ما عليك سوى إنشاء ملف CSS جديد وتسميته custom-editor-style.css.

تحتاج إلى تحميل هذا الملف إلى دليل الجذر الخاص بالقالب الخاص بك ثم إضافة هذا الكود في ملف functions.php الخاص بالقالب الخاص بك.

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

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

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