افزودن دکمه دلخواه به ویرایشگر وردپرس

یکی از چیزهایی که علاقه منو به وردپرس دوچندان کرده تمیز نوشتن کدهاش هست. شخصا خیلی از سیستم ها و برنامه ها رو دیدم که کدهاشون واقعا کثیف و ناخوانا هست و حذف قسمت های خالی کار طوری شده که اصلا نمی شه فایل رو ویرایش کرد و ازش سر در آورد.
علاوه بر تمیز نویسی در فایل های وردپرس توضیحات بسیار زیادی هم وجود داره. خیلی از فایل ها خط به خط توضیح داره که این کد چی کار می کنه و … و می شه گفت وردپرس خودش معادل چندین کتاب آموزش زبان PHP می تونه باشه.

در این مطلب قصد دارم روشی رو آموزش بدم که بوسیله این روش شما قادر خواهید بود دکمه های دلخواه خودتون رو به ادیتور وردپرس ( قسمت کد اون ) اضافه کنید. در کل وردپرس ۲ ادیتور داره. یکی ادیتور بصری هست که مثل فرونت پیج خودش خیلی از کارها رو انجام می ده و … و یک ادیتور کد هم داره. برای راحتی این ادیتور کد دکمه هایی در بالاش قرار داده شده که به آنها اصطلاحا Quicktags گفته می شه.

احتمالا با Quicktags ها برخورد داشتید. تصویر زیر نمایی از Quicktags های ادیتور کد وردپرس هست :

نحوه کار با Quicktags های بسیار ساده هست. در کل می شه این دکمه هارو به ۲ دسته تقسیم کرد:
- دسته اول: بطور مثال با فشرده شدن دکمه more عبارت <– more –> نوشته می شه. این جور دکمه ها فقط یک عبارتی رو می نویسند.

- دسته دوم: این دسته یک تگ رو باز و در جای دیگری می بندند. نحوه استفاده به ۲ صورت هست. یکی اینکه متن مورد نظر انتخاب بشه و سپس روی دکمه مورد نظر کلیک بشه تا قبل از متن تگ رو باز و بعد از اون ببنده.
روش دوم هم اینه که شما کلیک کنید. این دکمه تگ مورد نظر رو باز می کنه حالا متن مورد نظرتون رو بنویسید و بعد از اتمام روی دکمه کلیک کنید تا تگ رو ببنده.
بطور مثال برای تو پر کردن یک متن ( Bold ) با کلیک روی دکمه B در ادیتور کد این ادیتور متن انتخاب شده رو به صورت تو پر درمیاره.

خب. احتمالا الان دیگه با نحوه کار این ادیتور آشنا شدید ( استفاده از این ادیتور می تونه مقدمه ای بر یادگیری زبان HTML نیز باشه. ) حالا فکر کنید شما بخواهید یک تگ جدید رو داشته باشید که وردپرس اونو نداره و یا اینکه عبارتی که شما خیلی از اون استفاده می کنید و می خواهید یک راه میانبری نیز بسازید.

برای ساخت دکمه جدید باید فایل quicktags.js موجود در پوشه js موجود در پوشه wp-includes را با ادیتوری مثل نوت پد باز کنید.
در خط ۹ تا ۱۶ شما کد زیر را مشاهده می کنید :
function edButton(id, display, tagStart, tagEnd, access, open) {
this.id = id; // used to name the toolbar button
this.display = display; // label on button
this.tagStart = tagStart; // open tag
this.tagEnd = tagEnd; // close tag
this.access = access; // access key
this.open = open; // set to -1 if tag does not need to be closed
}

نحوه کار این سیستم بطور کامل توسط خود وردپرس در این خطوط آموزش داده شده. کمی پایین تر بیاید جایی که خطوط ۳۶ تا ۴۲ هست. این خطوط دکمه B رو درست کردند :
edButtons[edButtons.length] =
new edButton(’ed_strong’
,’b’
,’<strong>’
,’</strong>’
,’b’
);

توضیحات کد بالا :
ed_strong : شناسه دکمه هست.
b ( اولی ): نام دکمه ( نامی که روی دکمه به نمایش در میاد ).
strong : تگی که قبل از متن باز می کنه ( من <> رو نزاشتم ).
/strong : تگی که بعد از متن افزوده می شه.
b ( دومی ): کلیدمیانبر دکمه ( برای استفاده راحتتر با استفاده از کیبورد ).

اگر دکمه شما طوری هست که قسمت بستن نداره کافیه آخر کد مخصوص به دکمتون عبارت -۱ را اضافه کنید. برای مشاهده نمونه این دکمه می تونید به خطوط ۱۲۶ تا ۱۳۳ مراجعه کنید.

حالا کافیه کد دکمه ای را کپی کرده و در جای مورد نظر پیست کنید و مقادیر دلخواهتون رو اضافه کنید.

× برای استفاده از کلید های میانبر برای مثال دکمه B باید کلید های Alt + B را فشار دهید.

یک مثال کاربردی: یکی از مشکلاتی در در هنگام کار با زبان های راست به چپ در فارسی هست اینه که وقتی شما اعدادی رو همراه با ممیز ، نقطه و یکسری کاراکترهای دیگر می زارید به اشتباه نمایش داده می شود. مثلا شما می نویسید ۲۱/۳۴ اونوقت موقع نمایش عدد ۳۴/۲۱ نشون داده می شه.

راه حل این مشکل اینه که این تکه از متن شما باید از چپ به راست باشه. خب ما در این اینجا برای راحتی کار بیشتر دکمه ای می سازیم که این کار رو انجام بده. کد دکمه ما به شکل زیر در میاد:
edButtons[edButtons.length] =
new edButton(’dir-ltr’
,’LTR’
,’<span dir=”ltr”>’
,’</span>’
,’l’
);

پس از آپلود فایل باید به قسمت ادیتور شما دکمه LTR اضافه شده باشه:

منبع : tamba2

برچسب ها: editor، java script، quicktags، tip، وردپرس

این نوشته در تاریخ پنجشنبه, دی ۱۳م, ۱۳۸۶ در ساعت ۸:۲۶ ق.ظ با موضوع وردپرسارسال شده است. شما می توانید پاسخ های این نوشته را با RSS 2.0 دنبال کنید. شما می توانید نظرتان را بنویسید، ویا از سایت خود یک بازتاب بفرستید.