كيفية استخدام Quicktags API فى الوودربرس

كيفية استخدام Quicktags API فى الووردبرس

ماهو Quicktags ؟

نظام الووردبرس تطور بشكل كبير ولم يعد نظام تدوين عادي، واصبح في معظم الاحيان يستخدم كنظام إدارة محتوى CMS، وبالتالي فإن نظام الووردبرس وفر أدوات تسمح للمستخدمين من تحرير المحتوى بسهولة وكفاءة. لهذا السبب يأتي نظام الووردبرس مع محرر النصوص TinyMCE، واحد من أفضل محررات النصوص (WYSIWYG ) على الإطلاق، ويمكن القول انه محرر النصوص الانسب لنظام الوردبرس. يجعل محرر النصوص TinyMCE تجربة تحرير النص سهلة وغير معقدة، ويعطى للمستخدم كيفيه معاينة شكل النص قبل نشره.

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

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

مقدمه عن الووردبرس

منذ الإصدار 4.0 للووردبرس تم إضافة 18 واجهة برمجية (API) هذه الواجهات البرمجية (API) اضافات مميزات مهمة جداً، لتخدم جوانب متعددة في نظام الووردبرس وتساعد نظام الووردبرس على أن يكون نظام إدارة المحتوى الأكثر مرونة في العالم.

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

كيفية استخدام Quicktags API

إن استخدام Quicktags API سهل للغاية ويعود الفضل الى ملف quicktags.js فهو يخزن بداخله الكثير من الأسطر البرمجية في دالة واحدة فقط، كل ما عليك هو استخدام دالة ()QTags.addButton


اذا كنت تفضل كتابة أكواد Javascript في ملف منفصل استخدم الكود التالي :

لكن اذا كنت تفضل كتابة اكواد الجافاسكربت ضمن ملف php فقم باستخدام الكود التالي :

الأمر سهل للغاية يمكنك ملاحظة اننا قمنا باستخدام الاكشن admin_print_footer_scripts هذه المرة.

التعامل مع دالة ()QTags.addButton

هناك ثمانية معاملات (Parameters) يمكن التحكم فيها مع دالة ()QTags.addButton وهي كالتالي :

 

• ID  ( نصي، مطلوب ): الاسم الفريد للزر، والذي يتم إسناده الى خاصية id في وسم HTML لأزرار Quicktag. 

• display  ( نصي، مطلوب ): الاسم الذي سيظهر على الزر.

• arg1 ( نص او دالة، مطلوب ): اسم البداية الذي سيتم إضافته عند النقر على الزر، او بإمكانك إضافة دالة يتم استدعاؤها عند النقر على الزر.

• arg2 (نصي، اختياري): اسم الإغلاق الذي سيتم اضافته بعد اسم arg1.

• access_key ( نصي، اختياري ): مفتاح الوصول للزر الذي يمكنك من الوصول الى ازرار اخرى من أزرار Quicktag.

• title ( نصي، أختياري): العنوان التوضيحي الذي سيظهر عند تمرير مؤشر الماوس على الزر والذي سيكون على خاصية title للزر بالنسبة لكود HTML.

• priority ( رقمي، اختياري ): من هذا المعامل يمكنك ترتيب عرض الازرار، من 1 الى 9 للمكان الأول، من 11 الى 19 للمكان الثاني، من 21 الى 29 للمكان الثالث، وهكذا.

• instance (نصي، اختياري): لإظهار زر واحد فقط في حالة كان هناك أكثر من زر متشابه. (إذا لم تعيين قيمة، سيتم إضافة الزر الى كافة الحالات ) 

 

كيفية إنشاء زر بشكل سهل

اذا لم تكن لديك خلفية مسبقة عن لغة Javascript قد تبدو لك إنشاء زر Quicktags معقد نوعا ما، لكن لا تقلق من المثال التالي ستعرف ان الامر سهل للغاية ولن تحتاج لكتابة أسطر برمجية كثيرة لإنشاء زر Quicktag.

 في هذا المثال سنقوم بشرح كيفية إضافة زرين

في البداية عرفنا الـ ID للزر وهو info-box ثم قمنا بإضافة أسم للزر info box ثم عند النقر على الزر يقوم بطباعة [infobox]. لاحظ انك لست بحاجة الى اضافة قيمة الى المعامل arg2 اذا لم تكن بحاجة الى استخدام إغلاق، مثل المثال التالي :

لقد قمنا بإنشاء زر بشكل سهل وهذا اقل شئ يمكنك معرفته لإنشاء زر Quicktag.


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