وردپرس

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

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

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

به همین دلیل، بسیاری از افراد ترجیح می دهند که کد خود را با استفاده از ویرایشگر HTML که با زبانه «متن» مشخص شده، بنویسند یا حداقل آن را اصلاح کنند. از آنجایی که ویرایشگر دیداری صرفا حدس می زند که شما چه چیزی می خواهید نمایش دهید، امکان خطای زیادی وجود دارد. اما در ویرایشگر HTML دقیقا همان چیزی که میخواهید ایجاد میکنید. من خودم بیشتر اوقات از ویرایشگر HTML استفاده میکنم.

همانطور که در تصویر زیر می بینید، در ویرایشگر HTML تعدادی دکمه « تگ سریع یا Quick tag » در بالای ویرایشگر وجود دارد که تا حدودی ناکافی است :

دکمه های ویرایشگر کلاسیک وردپرس

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

بیایید ببینیم چطور میشود تگ هایی که من بیشتر از آن ها استفاده می کنم مانند pre و div را به ویرایشگر اضافه کنیم.

افزودن دکمه تگ سریع

در این آموزش یاد میگیریم که چگونه دکمه های “تگ سریع (quicktag)” دلخواه خودمان را به ویرایشگر کد کلاسیک اضافه کنیم تا با کلیک بر روی دکمه، یک متن یا تگ HTML از پیش تعیین شده در ویرایشگر وارد شود.

در وردپرس، تگ های سریع با php ساخته نمی شوند بلکه با جاوا اسکریپت ایجاد می گردند. بنابراین نیازی نیست که از توابع php برای ایجاد تگ های سریع استفاده کنیم. به طور مشخص ما می بایست شیئی به نام Qtags را دستکاری کنیم که هنگام نمایش صفحه ویرایشگر ساخته می شود. فایل جاوا اسکریپتی که وظیفه ایجاد شیء Qtags را به عهده دارد با نام  “quicktags” شناخته می شود. پس در مرحله اول می بایست چک کنیم که آیا این فایل در صفحه بارگزاری شده است یا خیر :

وقتی که مطمئن شدیم اسکریپت مربوطه بارگزاری شده است، از تابع زیر برای افزودن دکمه های تگ سریع به ویرایشگر استفاده می کنیم. مثلا من تگ pre را ایجاد میکنم :

این کد تابع “addButton” از شیء Qtags را برای افزودن یک دکمه تگ سریع فراخوانی می کند. توضیحات بیشتر را می توانید از صفحه کدکس وردپرس بدست آورید. فقط دو آرگومان اول لازم است، اولی آی دی HTML دکمه و دومی متنی است که روی دکمه نوشته می شود. دو آرگومان بعدی، تگ های شروع و پایان را تعریف می کند. آرگومان بعدی کلید دسترسی را تعریف میکند که منسوخ شده است، پس آن را خالی میگذاریم. ‘Pre tag’ هم متن پاپ آپ دکمه را تعریف میکند تا زمانی که نشانگر ماوس را روی دکمه نگه میداریم این متن نمایش داده شود. در آخر نیز شماره اولویت نمایش دکمه را وارد میکنیم که مکان نمایش دکمه را در ویرایش گر نمایش می دهد.

تمام این کد ها بصورت یکجا در زیر آمده است :

من با استفاده از قلاب ”admin_print_footer_scripts” کد جاوا اسکریپت را به قسمت مدیریت وردپرس اضافه کردم.

دقت کنید که من تگ php را در میان کد ها، بستم و سپس آن را برای بسته شدن آکولاد ها، باز کردم. شما می توانید این کد را درون فایل function.php یا هرجایی که کدهای اختصاصی php را قرار می دهید، وارد کنید. بعد از اعمال این تغییرات خروجی آن بصورت دکمه های تگ سریع در ویرایشگر وردپرس به شکل زیر می شود :

دکمه های تگ سریع اضافه شده به ویرایشگر وردپرس

همانطور که در تصویر زیر می بینید وقتی که روی دکمه div code کلیک میکنید یک تگ div با کلاس css اختصاصی در متن وارد می شود و میتواند محتوای دلخواه شما را در بر بگیرد.

نتیجه دکمه های تگ سریع

برای کسانی که دائما میخواهند تگ های HTML اختصاصی خود را در اغلب نوشته های وبلاگشان وارد کنند، تگ های سریع وردپرس امکان فوق العاده مفیدی است.

منبع : webhostinghero.com

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *