چگونه دکمه‌های دلخواه به ویرایشگر متن وردپرس اضافه کنیم؟

editor
در وردپرس از ویرایشگر متن TinyMCE استفاده می‌شود. این ویرایشگر به خاطر قابلیت‌های فراوانی که دارد و این امکان که کاربر می‌تواند به وسیله‌ی افزونه‌ها بر قابلیت‌های آن بیفزاید، بهترین ویرایشگر WYSIWYG به حساب می‌آید. ویرایشگر WYSIWYG ویرایشگری است که در آن کاربر مثل نرم‌افزار ورد متن مورد نظر را می‌نویسد و به وسیله‌ی گزینه‌های گرافیکی شکل و حالت قسمت‌های مختلف متن را تغییر می‌دهد. سپس ویرایشگر این متن را به کد HTML تبدیل می‌کند. در وردپرس TinyMCE کمی تغییر داده شده و برخی گزینه‌های آن به این خاطر که خیلی استفاده ندارند و در عین حال محیط کار را شلوغ و کاربر را سردرگم می‌کنند، مخفی هستند. برای نمونه دکمه‌های SuperScript (توان)، SubScript (اندیس)، و خط افقی از این جمله هستند. نمایان کردن این دکمه‌ها کار سختی نیست ولی اگر کاربر دکمه‌ی جدیدی بخواهد که کارایی خاصی داشته باشد چه باید بکند؟ در این مقاله می‌خواهیم ببینیم چگونه می‌توانیم این کار را انجام دهیم.

در این مقاله دو دکمه به نام‌های Dropcap و Recent Posts ایجاد می‌کنیم. دکمه‌ی Dropcap یک عمل زیبانویسی در زبان انگلیسی انجام می‌دهد. بدین‌صورت که حرف اول پاراگراف را از متن جدا می‌کند و به صورت بزرگ قبل از پاراگراف قرار می‌دهد. دکمه‌ی Recent Posts نیز نوشته‌های جدید نویسنده را در آخر هر پست لیست می‌کند.

برای اینکه فایل‌ها با هم قاطی نشوند یک پوشه به هر نامی که می‌خواهیم درون پوشه‌ی پوسته ایجاد می‌کنیم. مثلاً ما در اینجا نام wptuts-editor-buttons را انتخاب می‌کنیم. سپس درون آن پوشه یک فایل پی اچ پی (مثلاً wptuts.php) و یک فایل جاوا اسکریپت (مثلاً wptuts-plugin.js) ایجاد می‌کنیم. حال فایل functions.php که درون پوشه‌ی پوسته قرار دارد را باز می‌کنیم و در ابتدای آن به وسیله‌ی require فایل پی اچ پی که ایجاد کردیم را فراخوانی می‌کنیم:

require( 'wptuts-editor-buttons/wptuts.php' );

راحت‌ترین راه برای ایجاد حالت Dropcap تغییر در کد CSS حرف اول پاراگراف است. بدین صورت که یک کلاس با نام dropcap تعریف کرده و با نسبت دادن آن به حرف مورد نظر اندازه‌ی آن را بزرگ می‌کنیم و در سمت چپ پاراگراف قرار می‌دهیم. برای این کار این کد را در فایل style.css مربوط به پوسته کپی کنید:


/* Add this code in style.css */
.dropcap {
float: left;
font-size: 80px;
padding-right: 7px;
line-height: 72px;
}

برای ایجاد لیست آخرین نوشته‌ها از یک shortcode و تابعی به شرح زیر استفاده می‌کنیم. این کد را درون فایل پی اچ پی که ساختید (wptuts.php) کپی کنید:


add_shortcode( 'recent-posts', 'wptuts_recent_posts' );
function wptuts_recent_posts( $atts ) {
extract( shortcode_atts( array(
'numbers' => '5',
), $atts ) );
$rposts = new WP_Query( array( 'posts_per_page' => $numbers, 'orderby' => 'date' ) );
if ( $rposts->have_posts() ) {
$html = '<h3>Recent Posts</h3><ul class="recent-posts">';
while( $rposts->have_posts() ) {
$rposts->the_post();
$html .= sprintf(
'<li><a href="%s" title="%s">%s</a></li>',
get_permalink($rposts->post->ID),
get_the_title(),
get_the_title()
);
}
$html .= '</ul>';
}
wp_reset_query();
return $html;
}

این کد بدین صورت نوشته شده است که با کلیک کاربر بر روی دکمه‌ی مورد نظر یک پنجره باز می‌شود که کاربر باید در آن تعداد آخرین نوشته‌هایی که می‌خواهد لیست شوند را وارد کند. اگر مثلاً کاربر عدد ۷ را وارد کند، shortcode مربوطه بدین‌صورت خواهد شد:

[recent-posts numbers="7"/]

ثبت کردن یک افزونه‌ی جدید برای TinyMCE در وردپرس اگر تصور کنیم هم‌اکنون یک افزونه‌ی جدید برای TinyMCE داریم و می‌خواهیم آن را در وردپرس ثبت کنیم از این کد استفاده می‌کنیم:


add_action( 'init', 'wptuts_buttons' );
function wptuts_buttons() {
 add_filter( "mce_external_plugins", "wptuts_add_buttons" );
 add_filter( 'mce_buttons', 'wptuts_register_buttons' );
}
function wptuts_add_buttons( $plugin_array ) {
 $plugin_array['wptuts'] = get_template_directory_uri() . '/wptuts-editor-buttons/wptuts-plugin.js';
 return $plugin_array;
}
function wptuts_register_buttons( $buttons ) {
 array_push( $buttons, 'dropcap', 'showrecent' ); // dropcap', 'recentposts
 return $buttons;
}

هوک mce_external_plugins بسیار مهم است به این دلیل که افزونه را به TinyMCE وارد می‌کند. علاوه بر این احتیاج داریم که یک نشانه (ID) برای افزونه (wptuts) و آدرس دقیق فایل جاوا اسکریپت (wptuts-plugin.js) را وارد کنیم. هوک mce_buttons به TinyMCE‌ می‌گوید از چه دکمه‌هایی برای افزونه استفاده بکند. Dropcap و showrecent نیز نشانه‌ی این دکمه‌ها هستند. این‌ها را باید به خاطر بسپاریم زیرا بعداً از آن‌ها استفاده خواهیم کرد. راه‌اندازی افزونه‌ی TinyMCE به نظر من بهترین راه برای دانستن چگونگی گسترش یک قابلیت بر روی یک پلتفرم استفاده از راهنمای آن است. TinyMCE نیز راهنمای wiki دارد که به ما نشان می‌دهد چگونه برای TinyMCE افزونه بسازیم. در راهنما این‌گونه ذکر شده که برای ایجاد یک افزونه باید از این کد استفاده کنیم:


(function() {
 tinymce.create('tinymce.plugins.Wptuts', {
 /**
 * Initializes the plugin, this will be executed after the plugin has been created.
 * This call is done before the editor instance has finished it's initialization so use the onInit event
 * of the editor instance to intercept that event.
 *
 * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
 * @param {string} url Absolute URL to where the plugin is located.
 */
 init : function(ed, url) {

},

/**
 * Creates control instances based in the incomming name. This method is normally not
 * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
 * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
 * method can be used to create those.
 *
 * @param {String} n Name of the control to create.
 * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
 * @return {tinymce.ui.Control} New control instance or null if no control was created.
 */
 createControl : function(n, cm) {
 return null;
 },

/**
 * Returns information about the plugin as a name/value array.
 * The current keys are longname, author, authorurl, infourl and version.
 *
 * @return {Object} Name/value array containing information about the plugin.
 */
 getInfo : function() {
 return {
 longname : 'Wptuts Buttons',
 author : 'Lee',
 authorurl : 'http://wp.tutsplus.com/author/leepham',
 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example',
 version : "0.1"
 };
 }
 });

// Register plugin
 tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();

این کد را باید به فایل wptuts-plugin.js اضافه کنید. کدهای راهنما (comment) را به این دلیل حذف نکردیم که متوجه شوید چگونه کار می‌کند. اگر فکر می‌کنید احتیاجی به آن‌ها ندارید می‌توانید آن‌ها را حذف کنید. ما در این کد دو کار اساسی انجام می‌دهیم: در ابتدا با استفاده از متود create در TinyMCE یک افزونه‌ی جدید ایجاد می‌کنیم. عملکرد افزونه در توابع init و createControl مشخص می‌شوند. اطلاعاتی مثل نام افزونه، نام برنامه نویس و … در تابعی به نام getInfo تشریح شده‌اند. همانطور که می‌بینید اسم افزونه را Wptuts و نشانه‌ی آن را wptuts گذاشته ایم. در قسمت آخر، افزونه‌ی جدید، به ابزار مدیریت افزونه‌های (TinyMCE Plugin Manager) اضافه می‌شود. ایجاد دکمه‌ها در تابع init دکمه‌هایی که قرار است در نوار ابزار TinyMCE گذاشته شوند را ایجاد می‌کنیم.


(function() {
 tinymce.create('tinymce.plugins.Wptuts', {
 init : function(ed, url) {
 ed.addButton('dropcap', {
 title : 'DropCap',
 cmd : 'dropcap',
 image : url + '/dropcap.jpg'
 });

ed.addButton('showrecent', {
 title : 'Add recent posts shortcode',
 cmd : 'showrecent',
 image : url + '/recent.jpg'
 });
 },
 // ... Hidden code
 });
 // Register plugin
 tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();

در شیئ ed از متود addButton استفاده کردیم تا به برنامه بگوییم که می‌خواهیم یک دکمه ایجاد کنیم. این متود دو آرگومان دارد:
اولین آرگومان شامل نشانه‌ی دکمه است. می‌بایست از همان نشانه‌ای استفاده کنیم که قبلاً هم استفاده کردیم واگرنه برنامه کار نخواهد کرد.
دومین آرگومان شامل اطلاعات ظاهری و نحوه‌ی کارکرد دکمه می‌شود:
عنوان دکمه
عملکرد دکمه. عملکرد دکمه مهم‌ترین چیزی است که در اینجا می‌نویسید. همانطور که می‌بینید در این قسمت روبروی cmd نوشته شده است: showrecent این نشانه‌ مربوط به دستوراتی است که هر دفعه با اجرای دکمه فراخوانی می‌شود.
تصویر دکمه. در اینجا آدرس تصویر را وارد کرده ایم. پارامتر URL آدرس کامل پوشه‌ای که افزونه در آن قرار دارد را به برنامه وارد می‌کند. در این صورت با گذاشتن تصویر پلاگین در همان پوشه و نوشتن اسم آن بعد از URL می‌توانید به راحتی آن را آدرس دهی کنید.
حال اگر ویرایشگر وردپرس را باز کنیم دکمه‌ها را در آن‌جا می‌بینیم. البته هنوز کار نمی‌کنند.
wordpress_custom_buttons

  راهنمای ارائه پشتیبانی منظم برای مشتریان

اضافه کردن دستورات دکمه‌ها

تا کنون نشانه‌ی دستوراتی که قرار است هر دکمه فراخوانی کند را به TinyMCE داده‌ایم ولی مشخص نکرده‌ایم که این دستورات چه هستند. درون تابع init کارایی دکمه‌ها را مشخص خواهیم کرد:

(function() {
tinymce.create('tinymce.plugins.Wptuts', {
init : function(ed, url) {
ed.addButton('dropcap', {
title : 'DropCap',
cmd : 'dropcap',
image : url + '/dropcap.jpg'
});

ed.addButton('showrecent', {
title : 'Add recent posts shortcode',
cmd : 'showrecent',
image : url + '/recent.jpg'
});

ed.addCommand('dropcap', function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '<span class="dropcap">' + selected_text + '</span>';
ed.execCommand('mceInsertContent', 0, return_text);
});

ed.addCommand('showrecent', function() {
var number = prompt("How many posts you want to show ? "),
shortcode;
if (number !== null) {
number = parseInt(number);
if (number > 0 && number <= 20) {
shortcode = '[recent-post number="' + number + '"/]';
ed.execCommand('mceInsertContent', 0, shortcode);
}
else {
alert("The number value is invalid. It should be from 0 to 20.");
}
}
});
},
// ... Hidden code
});
// Register plugin
tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();

برای اضافه کردن یک دستور از متود ed.addCommand استفاده کرده‌ایم. در اینجا احتیاج دارید نشانه‌ی دستور و تابع callback که توسط متود ed.execCommand فراخوانی می‌شود را وارد کنید. توجه داشته باشید که شیئ ed بیانگر tinyMCE.activeEditor است. بیایید نگاهی به توابع callback بیندازیم:
در دستور dropcap می‌خواهیم با انتخاب یک حرف توسط کاربر و کلیک بر روی دکمه‌ی مربوطه آن حرف تبدیل به حالت dropcap بشود. یعنی از پاراگراف بیرون بیاید و با اندازه‌ی بزرگ در سمت چپ آن قرار گیرد. برای گرفتن حرف از متود ed.selection.getContent استفاده می‌شود. حال که حرف مورد نظر را وارد برنامه کرده‌ایم آن را درون یک المان span قرار می‌دهیم تا حالتی که در فایل style.css برای dropcap مشخص کردیم بر آن اعمال شود. حال می‌خواهیم نتیجه‌ی کار را به بخش HTML ویرایشگر باز گردانیم. برای این کار از یکی از دستورات TinyMCE به نام mceInsertContent استفاده می‌کنیم. آنچه که قرار است به ویرایشگر باز گردد در سومین آرگومان mceInsertContent نوشته می‌شود.
فرایند مشابهی برای دستور showrecent انجام می‌شود. به جز اینکه در اینجا احتیاجی نیست که کاربر حرفی را انتخاب کند بلکه تنها از او سؤال می‌شود که چه تعداد از نوشته‌های جدید را می‌خواهد در آن مکان لیست کند.

ایجاد CSS برای ویرایشگر (اختیاری)

تا اینجا با انجام هر کدام از فرایندها نتیجه‌ی کامل در سایت نمایش داده می‌شود و نه در ویرایشگر. برای اینکه مثلاً نتیجه‌ی Dropcap را درون ویرایشگر نیز ببینیم می‌توانیم کد CSS که برای آن درون فایل style.css نوشتیم را درون فایل editor-style.css نیز کپی کنیم. برای دکمه‌ی دیگر کار به راحتی Dropcap نیست به این خاطر که المان HTML ندارد. البته می‌توانیم به shortcode یک المان HTML نسبت بدهیم و سپس به آن المان شکل و حالت CSS اعمال کنیم ولی به سادگی آنچه برای Dropcap‌ انجام دادیم نخواهد بود.
نتایج:
نتیجه‌ی Dropcap در ویرایشگر بدین صورت است:

wordpress_custom_buttons1

و درون مرورگر:

wordpress_custom_buttons2
دکمه‌ی Recent Posts نیز به خوبی کار می‌کند.

wordpress_custom_buttons3
در این آموزش ما از یک ساز و کار ساده برای ایجاد دکمه‌های دلخواه استفاده کردیم. ممکن است توجه کرده باشید که برای پرسش تعداد نوشته‌های جدید از کاربر از prompt‌ استفاده کردیم که تنها یک ورودی دارد. این سؤال پیش می‌آید که اگر بخواهیم چند چیز مختلف از کاربر سؤال کنیم آیا باید چند بار این کار را تکرار کنیم یا می‌توانیم یک پنجره با چند قسمت برای وارد کردن اطلاعات به کاربر نشان دهیم. اگر می‌خواهید بدانید با آموزش‌های آینده‌ی ما همراه باشید.

اگر هم میخواهید نمونه فایل انجام شده را از اینجا دانلود کنید

منتظر مطالب حرفه ای ما باشید … 😀

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

331,349 نفر

پاسخی بگذارید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. سلام

    ببخشید من افزونه را از شما خریداری کرده ام و می خواهم در صفحه اصلی دکمه عضویت را بسازم که با کلیک روی آن به قسمت ثبت نام هدایت شود چگونه در ابزارکها در قسمت متن زیر شورت کد ورود باید این دکمه قرار گیرد؟ در کل میخواهم مثل سایت مدیر سبز باشد /// ایشون گفتند از خریدار پلاگین این سوال را داشته باشم من هم مزاحم شما شدم.
    افزونه Frontend Membership Modules
    مشکلش این است برای قسمت ثبت نام در صفحه اصلی باید یک دکمه درست کرد و میخواستم محبت کنید راهنمایی فرمایید.

    • 6 سال عضو همیار وردپرس

      با احترام
      احتمالا شما از مارکت وردپرس خرید داشته‌اید
      لطفا از marketwp.ir و به شیوه زیر پیگیری نمایید:
      “خواهشمند است تیکت های مربوط به محصولات خریداری شده را در سیستم پشتیبانی تیکت از بخش “ارتباط با فروشنده” و پس از آن انتخاب گزینه “اخذ راهنمایی” به ثبت برسانید. تا ضمن مشخص شدن محصول خریداری شده، تیکت شما به فروشنده محصول ارجاع شده و پاسخ برای شما ارسال شود.”

    • سلام

      تشکر از راهنمایی شما

  2. ممنون که دیدگاهمو تایید کردین مشکلم حل شد از افزونه WooCommerce Product Gift Wrap استفاده کردم

  3. سلام.ببخشید من می خواستم باسه افزونم ،کنار دکمه افزودن پرونده چند رسانه ای یه دکمه بزارم که یه صفحه پاپ اب باز کنه و یه چیزی رو اخر سر تو ادیتور اضافه کنم.بی زحمت چند تا آموزش معرفی کنید.انگلیسی هم باشه مشکلی نداره ،چون خودم پیدا نکردم یا خودتون راهنمایی کنید.ممنون

    • 6 سال عضو همیار وردپرس

      سلام
      بررسی میکنم

    • سلام ببخشید من میخوام یه button بسته بندی محصول و یه textbox جهت درج متن دلخواه روی هدیه توسط مشتری به سبد خریدم اضافه کنم آیا با اینکار امکان افزودن button و textbox به سبد خرید وجود داره؟؟
      ممنون میشم برای اینکارم راهنماییم کنید.

  4. سلام تشکر از لطفت عالی بود

  5. دست گلت درد نکنه.عالی بود.

  6. سلام
    من یک سایت وردپرسی دارم که چندتا از دکمه های ویرایشگر متنش حذف شده.
    میتونین کمکم کنید؟
    قالب رو هم عوض کردم، درست نشد
    دکمه های مثل رنگ متن و چندتای دیگه حذف شده

  7. ممنون داداش….

  8. بسیار عالی دست شما درد نکنه

  9. بسیار سپاس اموزش جامعی بود !!!

  10. سلام.من به کدی برای ورد پرس احتیاج دارم که فایل متنی را از سیستم خوانده سپس سطر اول فایل متنی را به عنوان “عنوان پست” سطر بعدی را به عنوان ” دسته پست ” و بقیه را هم به عنوان ” متن پست یا همان مطلب پست” در قالب یک پست جدید در ورد پرس ایجاد کند.اگر فرصت نوشتن کد را ندارید لطفا مرا راهنمایی فرمایید.متشکرم.

  11. بسیار سپاس اموزش جامعی بود !!!

  12. واقعا مفید بود؛ ممنون

  13. آموزش خوبی بود

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

  15. مرسی خیلی به دردم خورد

  16. با سلام و خسته نباشید
    فقط می خواستم بگم که تو ویرایش این مطلب کمی بی دقتی کردین و همه نوشته را در صفه اول و نه در ادامه مطلب قرار دادین.
    با تشکر

  17. سلام و خسته نباشید
    برای اینکار افزونه ای هست که در بخش دیداری دکمه با دستور دلخواه خودمون ایجاد کنیم ؟
    منبع نوشته رو هم بدید لطفا

  18. یه سوال !!
    چرا این مطلب در بخش افزونه ها منتشر شده ؟
    آموزش خوبی بود ممنون احسان جان .

مطالب زیر را حتما بخوانید

دوره‌های آموزشی