ووردبريس : إضافة أزرار إلى محرر الـ HTML

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

الخطوة الأولى :

في البداية يجب أن تعلموا أن محرر الووردبريس مبني أساسا على لغة الجافاسكربيت لهذا فأغلب الإضافات ستكون بالجافاسكربت أيضاً ، أنشئ ملف جافاسكربت وليكن أسمه quicktags.js مثلاً ، لإضافة الازرار سنستخدم دالة edButton ستجدها في ملف wp-includes\js\quicktags.dev.js

edButton(id, display, tagStart, tagEnd, access, open)

عناصر الدالة :

id – الإسم الفريد الخاص بالزر ( يجب أن تكون قيمة هذا المتغير مميزة )
display – عنوان الزر الذي سيظهر للمستخدم .
tagStart – وسم البداية .
tagEnd- وسم النهاية .
access – مفتاح الإختصار .
open – تحديد إذا ما كان الزر يحتاج للإغلاق .

الإستخدام :
سنسختدم الدالة أعلاه في ملئ المصفوفة الخاصة بالأزرار مثال :

edButtons[edButtons.length] = new edButton('abbr','abbr','','','');

الخطوة الثانية :

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

wp_enqueue_script('my-quicktags', $File_Url , array('quicktags') );

النتيجة :

أنسخ الكود أدناه إلى ملف functions.php الخاص بالقالب ، وضع ملف الـ quicktags.js في مجلد القالب مباشرة .

add_action('admin_print_scripts', 'my_custom_quicktags');
function my_custom_quicktags () {
wp_enqueue_script('my-quicktags',  get_template_directory_uri().'/quicktags.js' , array('quicktags') );
}

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

7 رأي حول “ووردبريس : إضافة أزرار إلى محرر الـ HTML”

  1. السلام عليكم ورحمة الله وبركاته
    مبروك اولا لرجوع المدونة اخي العزيز نشوان
    بالنسبة لاضافة الازرار لم تضع لنا مثال بسيط لما سيفعله الزر الجديد

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

      الزر الموجود في المقال يستخدم لتمييز المصطلاحات مثال :
      PHP

      تقبل تحياتي ،،،

  2. اولا اسجل اعجابي بمدونتك , فهي تحوي الكثير من المعلومات البرمجية الرائعه.

    ثانيا شكراً جزيلا على الموضوع بجد الفكره حلوه جدا, وجاري التطبيق على السيرفر الشخصي .

  3. جزاك الله كل خير اخي نشوان

    كنت ابحث عن طريقه اخرى لتعمل مع الاصدار الجديد من الووردبريس, حيثُ ان الطرق القديمه لا تعمل مع الأصدار الجديد, واخيراً وجدت ضالتي عندك 🙂

    وفقك الله اخي

  4. شكرا جزيلا لك و لو تفظلت و أكملت الشرح و أرفقت الملفات …
    لقد قمت بالتطبيق و لم تنجح الطريقة للأسف .

اترك رد