إضافة زر مخصص لمحرر TinyMCE في ووردبريس بسهولة

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

فهم محرر TinyMCE في ووردبريس

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

خطوات إضافة زر مخصص إلى TinyMCE

أول خطوة سنقوم بها هي تعديل ملف functions.php في القالب الخاص بك. يجب أن نضيف بعض الأكواد البرمجية التي ستساعدنا في تسجيل الزر المخصص وتنشيط الوظائف المرتبطة به.

add_action('admin_init', 'custom_tinymce_button');
function custom_tinymce_button() {
    add_filter('mce_external_plugins', 'add_custom_tinymce_plugin');
    add_filter('mce_buttons', 'register_custom_button');
}
function add_custom_tinymce_plugin($plugin_array) {
    $plugin_array['custom_button'] = get_template_directory_uri() . '/js/custom-button.js';
    return $plugin_array;
}
function register_custom_button($buttons) {
    array_push($buttons, 'custom_button');
    return $buttons;
}

تساعد هذه الأكواد في إضافة فلتر لـ mce_external_plugins والذي يُستخدم لتحميل البرنامج المساعد الجديد الذي نرغب في إضافته. كما يوجد فلتر آخر لتعريف الزر المخصص.

إنشاء البرنامج المساعد الخاص بالزر

الآن ننتقل إلى إنشاء ملف JavaScript الخاص بالزر. نحن نحتاج إلى إعداد ملف custom-button.js الذي سيتعامل مع النقر على الزر المخصص:

(function () {
    tinymce.create("tinymce.plugins.custom_button_plugin", {
        init: function (ed, url) {
            ed.addButton("custom_button", {
                title: "قالب البداية",
                image: url + "/images/icon.png", //اختياري
                onclick: function () {
                    ed.insertContent(`
                        <p>قم بإضافة فقرتك</p>
                        <ul>
                            <li>أضف عنصر 1</li>
                            <li>أضف عنصر 2</li>
                            <li>أضف عنصر 3</li>
                        </ul>
                    `);
                },
            });
        },
        createControl: function (n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add("custom_button", tinymce.plugins.custom_button_plugin);
})();

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

إضافة أيقونة الزر

من المهم إضافة ملف أيقونة (icon.png) للقالب الخاص بك، حيث ستظهر هذه الأيقونة بجانب الزر المخصص في واجهة محرر TinyMCE. تأكد من وضع ملف الأيقونة في الدليل الصحيح الذي تم تعريفه في كود JavaScript.

تجربة الزر المخصص

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

خلاصة

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

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