نحوه ایجاد پلاگین TinyMCE وردپرس

اگر شما توسعه دهنده وردپرس هستید ، در برخی موارد ممکن است با شخصی سازی یا گسترش ویرایشگر ویژوال وردپرس روبرو شوید. به عنوان مثال ، ممکن است بخواهید یک دکمه به نوار ابزار Visual Editor اضافه کنید تا به مشتری شما اجازه دهد بدون نوشتن کد HTML به راحتی جعبه متن یا دکمه تماس با عمل را وارد کند. در این مقاله ، ما به شما نحوه ایجاد یک پلاگین TinyMCE در وردپرس را نشان خواهیم داد.

الزامات h4>

این آموزش برای کاربران پیشرفته در نظر گرفته شده است. اگر شما یک کاربر سطح مبتدی هستید که فقط می خواهد ویرایشگر بصری را گسترش دهد ، لطفاً پلاگین TinyMCE Advanced یا نگاهی به این نکات در مورد استفاده از ویرایشگر بصری وردپرس .

برای این آموزش ، شما به مهارت های برنامه نویسی اساسی احتیاج دارید ، دسترسی به نصب وردپرس که می توانید آن را آزمایش کنید.

توسعه پلاگین در یک وب سایت زنده یک کار بد است. یک اشتباه جزئی در کد می تواند سایت شما را از دسترس خارج کند. اما اگر باید این کار را در یک سایت زنده انجام دهید ، حداقل پشتیبان گیری از وردپرس ابتدا.

ایجاد اولین پلاگین TinyMCE خود h4>

ما با ایجاد یک افزونه وردپرس برای ثبت دکمه نوار ابزار TinyMCE سفارشی خود شروع خواهیم کرد. با کلیک بر روی این دکمه ، کاربر می تواند پیوندی با کلاس CSS سفارشی اضافه کند.

کد منبع در انتهای این مقاله به طور کامل ارائه خواهد شد ، اما تا آن زمان ، بیایید مرحله به مرحله افزونه را ایجاد کنیم.

ابتدا باید یک پوشه در پوشه wp-content / plugins نصب وردپرس خود ایجاد کنید. این پوشه را tinymce-custom-link-class نامگذاری کنید.

از اینجا ، ما کد پلاگین خود را اضافه می کنیم.

عنوان پلاگین h4>

یک پرونده جدید در پوشه افزونه ای که ما ایجاد کردیم ایجاد کنید و این پرونده را tinymce-custom-link-class.php نامگذاری کنید. این کد را به پرونده اضافه کنید و آن را ذخیره کنید.

/ **
 * نام پلاگین: کلاس پیوند سفارشی TinyMCE
 * پلاگین URI: http://wpbeginner.com
 * نسخه: 1.0
 * نویسنده: WPBeginner
 * نویسنده URI: https://www.wpbeginner.com
 * توضیحات: یک پلاگین ساده TinyMCE برای افزودن یک کلاس پیوند سفارشی در Visual Editor
 * مجوز: GPL2
 * /

این فقط یک نظر PHP است که نام پلاگین و همچنین نویسنده و توضیحات را به وردپرس می گوید.

در وردپرس منطقه مدیر ، جدید خود را فعال کنید با رفتن به Plugins> Plugins Installed و سپس کلیک بر روی Activate در کنار پلاگین TinyMCE Custom Link Class افزونه:

تنظیم کلاس پلاگین ما h4>

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

کلاس TinyMCE_Custom_Link_Class {

/ **
* سازنده وقتی مقدار اولیه پلاگین فراخوانی می شود.
* /
تابع __construction () {

}

}

$ tinymce_custom_link_class = TinyMCE_Custom_Link_Class جدید؛

این کلاس PHP ما را بهمراه ساختاری ایجاد می کند که وقتی به خط $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class؛ می رسیم فراخوانی می شود.

هر عملکردی که در این کلاس اضافه کنیم نباید با سایر افزونه های وردپرس مغایرت داشته باشد.

راه اندازی افزونه TinyMCE ما را شروع کنید h4>

بعد ، باید به TinyMCE بگوییم که ممکن است بخواهیم دکمه سفارشی خود را به نوار ابزار Visual Editor . برای این کار ، می توانیم از اقدامات وردپرس – به طور خاص ، اقدام

کد زیر را در داخل عملکرد __construction () پلاگین خود اضافه کنید:

if (is_admin ()) {
add_action ('init'، array ($ this، 'setup_tinymce_plugin'))؛
}

این بررسی می کند که آیا در رابط مدیریت وردپرس هستیم یا خیر. اگر ما هستیم ، پس از وردپرس می خواهد وقتی وردپرس برنامه بارگذاری اولیه خود را تمام کرد ، عملکرد setup_tinymce_plugin را در کلاس ما اجرا کند.

بعد ، تابع setup_tinymce_plugin را اضافه کنید:

/ **
* بررسی کنید آیا کاربر فعلی می تواند Posts یا Pages را ویرایش کند یا خیر ، از Visual Editor استفاده می کند
* در این صورت ، چند فیلتر اضافه کنید تا بتوانیم پلاگین خود را ثبت کنیم
* /
تابع setup_tinymce_plugin () {

// بررسی کنید آیا کاربر وارد شده در وردپرس می تواند پست ها یا صفحات را ویرایش کند
// در غیر این صورت ، پلاگین TinyMCE ما را ثبت نکنید

if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages'))) {
برگشت؛
}

// بررسی کنید که آیا کاربر وارد شده در WordPress ویرایشگر ویژوال را فعال کرده است یا خیر
// در غیر این صورت ، پلاگین TinyMCE ما را ثبت نکنید
if (get_user_option ('rich_editing')! == 'true') {
برگشت؛
}

// برخی فیلترها را تنظیم کنید
add_filter ('mce_external_plugins'، array (& $ this، 'add_tinymce_plugin'))؛
add_filter ('mce_buttons'، array (& $ this، 'add_tinymce_toolbar_button'))؛

}

این بررسی می کند که آیا کاربر فعلی وارد شده در وردپرس آیا می تواند پستها یا صفحات . اگر آنها نتوانند ، ثبت پلاگین TinyMCE ما برای آن کاربر فایده ای ندارد ، زیرا آنها هرگز ویرایشگر ویژوال را نمی بینند.

سپس بررسی می کنیم که آیا کاربر از Visual Editor استفاده می کند یا خیر ، زیرا برخی از کاربران وردپرس این کار را از طریق کاربران> نمایه شما خاموش می کنند. دوباره ، اگر کاربر از Visual Editor استفاده نمی کند ، عملکرد را برمی گردانیم (از آن خارج می شویم) ، زیرا نیازی به انجام کار دیگری نیست.

سرانجام ، ما دو فیلتر وردپرس – mce_external_plugins و mce_buttons اضافه می کنیم تا توابع خود را که فایل Javascript مورد نیاز را برای TinyMCE بارگیری می کند فراخوانی کنیم و یک دکمه به TinyMCE اضافه کنیم. نوار ابزار.

ثبت پرونده و دکمه Javascript در ویرایشگر ویژوال h4>

بیایید ادامه دهیم و عملکرد add_tinymce_plugin را اضافه کنیم:

/ **
* یک پرونده JS سازگار با پلاگین TinyMCE به نمونه TinyMCE / Visual Editor اضافه می کند
*
* آرایهparam $ plugin_array آرایه پلاگین های ثبت شده TinyMCE
* array array آرایه اصلاح شده پلاگین های TinyMCE
* /
تابع add_tinymce_plugin ($ plugin_array) {

$ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'tinymce-custom-link-class.js'؛
بازگشت $ plugin_array؛

}
    

این عملکرد به TinyMCE می گوید که باید پرونده های Javascript ذخیره شده در آرایه $ plugin_array را بارگیری کند. این پرونده های Javascript به TinyMCE می گوید که چه کاری انجام دهد.

برای اینکه به TinyMCE در مورد دکمه ای که می خواهیم به نوار ابزار اضافه کنیم ، همچنین باید چند کد به عملکرد add_tinymce_toolbar_button اضافه کنیم.

/ **
* یک دکمه به TinyMCE / Visual Editor اضافه می کند که کاربر می تواند روی آن کلیک کند
* برای درج پیوند با کلاس CSS سفارشی.
*
* دکمه های آرایهparam آرایه دکمه های TinyMCE ثبت شده
آرایهreturn آرایه اصلاح شده دکمه های TinyMCE ثبت شده
* /
دکمه add_tinymce_toolbar_to ($ دکمه ها) {

array_push ($ دکمه ها ، '|' ، 'custom_link_class')؛
بازگشت دکمه های $؛
}

این دو مورد را به آرایه دکمه های TinyMCE هدایت می کند: یک جدا کننده (|) و نام برنامه ای دکمه ما ( کلاس_لینک_لینک ).

افزونه خود را ذخیره کنید ، و سپس یک صفحه یا پست را ویرایش کنید تا Visual Editor را مشاهده کنید. به احتمال زیاد ، نوار ابزار در حال حاضر نمایش داده نمی شود:

نگران نباشید – اگر از کنسول بازرسی مرورگر وب خود استفاده کنیم ، خواهیم دید که یک خطا و اعلان 404 توسط TinyMCE ایجاد شده است و به ما می گوید فایل Javascript ما را پیدا نمی کند.

خوب است – این بدان معناست که ما پلاگین سفارشی TinyMCE خود را با موفقیت به ثبت رسانده ایم و اکنون باید فایل Javascript را ایجاد کنیم تا به TinyMCE بگوییم چه کاری انجام دهد.

ایجاد پلاگین Javascript h4>

یک پرونده جدید در پوشه wp-content / plugins / tinymce-custom-link-class ایجاد کنید و نام آن را tinymce-custom-link-class.js بگذارید . این کد را در پرونده js خود اضافه کنید:

(تابع() {
tinymce.PluginManager.add ('custom_link_class' ، تابع (ویرایشگر ، آدرس اینترنتی) {

})
}) ()؛

این کلاس TinyMCE Plugin Manager را فراخوانی می کند ، که می توانیم برای انجام تعدادی از اقدامات مربوط به پلاگین TinyMCE از آن استفاده کنیم. به طور خاص ، ما با استفاده از عملکرد add افزونه خود را به TinyMCE اضافه می کنیم.

این دو مورد را می پذیرد. نام پلاگین ( custom_link_class ) و یک عملکرد ناشناس.

اگر با مفهوم توابع در کدگذاری آشنا هستید ، یک تابع ناشناس به سادگی تابعی بدون نام است. به عنوان مثال ، function foobar () {...} تابعی است که می توانیم آن را با استفاده از foobar () در جای دیگری از کد خود فراخوانی کنیم.

با یک تابع ناشناس ، نمی توانیم آن تابع را در جای دیگری از کد خود فراخوانی کنیم – فقط در نقطه ای فراخوانی می شود که تابع add () فراخوانی می شود.

پرونده Javascript خود را ذخیره کرده و سپس برای مشاهده ویرایشگر ویژوال ، یک صفحه یا پست را ویرایش کنید. اگر همه کارها انجام شود ، نوار ابزار را مشاهده خواهید کرد:

p >

در حال حاضر ، دکمه ما به آن نوار ابزار اضافه نشده است. به این دلیل که ما فقط به TinyMCE گفته ایم که یک افزونه سفارشی هستیم. اکنون باید به TinyMCE بگوییم چه کاری انجام دهد – یعنی یک دکمه به نوار ابزار اضافه کنیم.

فایل Javascript خود را به روز کنید و کد موجود خود را با موارد زیر جایگزین کنید:

(تابع() {
tinymce.PluginManager.add ('custom_link_class' ، تابع (ویرایشگر ، آدرس اینترنتی) {
// افزودن دکمه به Visual Editor Toolbar
editor.addButton ('custom_link_class'، {
عنوان: "درج دکمه پیوند" ،
cmd: 'custom_link_class'،
})
})
}) ()؛

توجه کنید که عملکرد ناشناس ما دارای دو استدلال است. اولین مورد editor است – این TinyMCE Visual Editor است. به همین ترتیب می توانیم توابع مختلف را در PluginManager فراخوانی کنیم ، همچنین می توانیم توابع مختلف را در editor فراخوانی کنیم. در این حالت ، ما برای افزودن یک دکمه به نوار ابزار ، با تابع addButton تماس می گیریم.

پرونده Javascript خود را ذخیره کنید و به Visual Editor خود برگردید. در اولین نگاه ، به نظر می رسد هیچ چیز تغییر نکرده است. با این حال ، اگر نشانگر موشواره را در سمت راست نماد سمت راست ردیف بالا قرار دهید ، باید یک راهنما را ببینید:

ما با موفقیت یک دکمه به نوار ابزار اضافه کردیم ، اما به یک تصویر نیاز دارد. پارامتر زیر را به عملکرد addButton در زیر عنوان عنوان: اضافه کنید:

 تصویر: url + '/icon.png' ،

url URL پلاگین ما است. این مفید است اگر بخواهیم یک فایل تصویری را در پوشه پلاگین خود ارجاع دهیم ، زیرا می توانیم نام فایل تصویر را به URL اضافه کنیم. در این حالت ، ما به یک تصویر به نام icon.png در پوشه پلاگین خود نیاز داریم. از نماد زیر استفاده کنید:

ویژوال ویرایشگر ما را مجدداً بارگیری کنید و اکنون دکمه خود را با نماد مشاهده خواهید کرد:

تعریف یک دستور برای اجرا h4>

در حال حاضر ، اگر روی دکمه کلیک کنید ، اتفاقی نمی افتد. بیایید یک دستور به TinyMCE اضافه کنیم و به او بگوییم با کلیک روی دکمه ما چه کاری انجام دهد.

در پرونده Javascript ما ، کد زیر را در انتهای قسمت editor.addButton اضافه کنید:

// با کلیک روی دکمه ، دستور را اضافه کنید
editor.addCommand ('custom_link_class' ، تابع () {
alert ('دکمه کلیک شد!')؛
})

ویرایشگر ویژوال ما را دوباره بارگیری کنید ، روی دکمه کلیک کنید و یک هشدار ظاهر می شود که تأیید می کند ما فقط دکمه را کلیک کرده ایم:

p >

بیایید هشدار را با یک اعلان جایگزین کنیم ، از کاربر پیوندی را که می خواهد در متن انتخاب شده در ویرایشگر ویژوال بپیچد ، درخواست کنیم:

// با کلیک روی دکمه ، دستور را اضافه کنید
editor.addCommand ('custom_link_class' ، تابع () {
// بررسی کنید متن خاصی را انتخاب کرده ایم که می خواهیم پیوند دهیم
var text = editor.selection.getContent ({
'format': 'html'
})
if (text.length === 0) {
alert ('لطفاً برای پیوند دادن چند متن انتخاب کنید.')؛
برگشت؛
}

// از کاربر بخواهید یک URL وارد کند
var result = prompt ("پیوند را وارد کنید")؛
اگر (! نتیجه) {
// کاربر لغو شد - خروج
برگشت؛
}
اگر (نتیجه طول === 0) {
// کاربر URL را وارد نکرد - از آن خارج شوید
برگشت؛
}

// متن انتخاب شده را مجدداً وارد ویرایشگر کنید و آن را در یک برچسب لنگر قرار دهید
editor.execCommand ('mceReplaceContent'، false، '' + text + '')؛
})

این مجموعه کد چند عمل انجام می دهد.

ابتدا بررسی می کنیم که آیا کاربر متنی را برای پیوند دادن در Visual Editor انتخاب کرده است یا خیر. در غیر این صورت ، آنها هشدار را مشاهده می کنند که به آنها می گوید برای نوشتن متن برخی از متن را انتخاب کنید.

p >

بعد ، ما از آنها می خواهیم پیوند را وارد کنند ، دوباره بررسی می کنند که آیا آن را وارد کرده اند. اگر آنها لغو کردند ، یا چیزی وارد نکردند ، ما کار دیگری نمی کنیم.

سرانجام ، ما عملکرد execCommand را در ویرایشگر TinyMCE اجرا می کنیم ، به طور خاص عمل mceReplaceContent را اجرا می کنیم. با استفاده از متنی که کاربر انتخاب کرده است ، متن انتخاب شده را با کد HTML ما جایگزین می کند که متشکل از یک پیوند لنگر با کلاس = “دکمه” است.

اگر همه کارها انجام شد ، می بینید که متن انتخاب شده شما اکنون در Visual Editor و نماهای متصل شده و کلاس روی دکمه تنظیم شده است:

خلاصه h4>

ما با موفقیت یک افزونه وردپرس ایجاد کردیم که یک دکمه به ویرایشگر بصری TinyMCE در وردپرس اضافه می کند. این آموزش همچنین برخی از اصول TinyMCE API و فیلترهای وردپرس موجود برای یکپارچه سازی TinyMCE را پوشش داده است.

ما کدی را اضافه کردیم تا وقتی کاربری روی دکمه سفارشی ما کلیک می کند ، از وی خواسته می شود که برخی از متن ها را در Visual Editor انتخاب کند ، سپس می تواند آنها را به URL دلخواه خود پیوند دهد. سرانجام ، پلاگین ما متن انتخاب شده را با نسخه پیوندی جایگزین می کند که شامل یک کلاس CSS سفارشی به نام دکمه است.

امیدواریم این آموزش به شما کمک کرده باشد نحوه ایجاد یک افزونه WordPress TinyMCE را یاد بگیرید. همچنین ممکن است بخواهید راهنمای ما را در نحوه ایجاد یک افزونه وردپرس مخصوص سایت .

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .