کلاس دادن به متن در ادیتور وردپرس

[carnaval 8]

سلام دوستان

من میخواستم قابلیتی به ادیتور وردپرسم اضافه بشه که هر متنی میخوام بهش کلاس یا آیدی بدم

به صورت دستی خیلی کار کند پیش میره و خسته کنندس

گشتم ولی چیزی پیدا نکردم در این مورد ممنون میشم راهنمایی کنید

[استاد اعظم 900]

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

شما قصد دارید دقیقا چیکار کنید ، آیا میخواهید کلاس یا آی دی خاصی به تمامی متن های یک پست اضافه کنید یا بعضی از خط های یک مطلب را؟

[carnaval 8]

مثلا من متنی دارم و میخوام به بعضی از کلمه های اون متن کلاس بدم

[استاد اعظم 900]

کلماتی که میخواهید به آنان کلاس بدید کلمات ثابتی هستند ؟ مثلا در همه ی مطالبتون فقط به کلمات مثل وردپرس ، جوملا و ... کلاس میدی یا کلمه در هر مطلب متفاوت است؟

یک لینک نمونه مطلب ارسال شده بدید!

[Ehsaan 1865]

به طور کلی، شما میتونید یه متن رو اول سلکت کنید، سپس در قسمت ویرایش متنی یا HTML پیش از اون، این رو بنویسید:

<span class="کلاس دلخواه">

و بعد از کلمات موردنظر هم

</span>

دقت کنید که در کد اول به جای «کلاس دلخواه» کلاسی که میخواید ست بشه رو بنویسید.

موفق باشید.

[carnaval 8]

کلماتی که میخواهید به آنان کلاس بدید کلمات ثابتی هستند ؟ مثلا در همه ی مطالبتون فقط به کلمات مثل وردپرس ، جوملا و ... کلاس میدی یا کلمه در هر مطلب متفاوت است؟

یک لینک نمونه مطلب ارسال شده بدید!

خیر کلمات ثابتی نیستند

لینک نمونه ندارم متاسفانه

مثلا این جمله منه : علی کریمی از تیم ملی خداحافظی کرد

من توی ادیتور با گرفتن علی کریمی یه کلاسی که از قبل توی سی اس اس تعریفش کردم بهش میدم و متنم میشه :

علی کریمی از تیم ملی خداحافظی کرد

در واقع میخوام توی نوار تنظیمات ادیتورم گزینه ای اضافه بشه که به کلمه بشه کلاس داد مثل لینک دادن به کلمه

به طور کلی، شما میتونید یه متن رو اول سلکت کنید، سپس در قسمت ویرایش متنی یا HTML پیش از اون، این رو بنویسید:

<span class="کلاس دلخواه">

و بعد از کلمات موردنظر هم

</span>

دقت کنید که در کد اول به جای «کلاس دلخواه» کلاسی که میخواید ست بشه رو بنویسید.

موفق باشید.

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

ویرایش شده دی 93 توسط carnaval

[علی زینلی 2114]

فقط در حدّ تغییر رنگ و هایلایت کردنشون هست یا چیز های دیگه هم هست؟

فکر کنم این مقاله به کارتون بیاد:

http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/

ولی اگر فقط هایلایت افزونه هایلایت زیاد داریم.

[A-fshin 1936]

شورت کد که در فاکشن قرار بدید

function my_custom_highlight($atts, $content = null) {
extract(shortcode_atts(array(
    'color' => 'yellow',
    'font' => '#000000'
  ), $atts));
  return "<span style=\"background-color: $color; color: $font\">$content</span>";
}
add_shortcode('my_highlight','my_custom_highlight');

در ادیتور هم به صورت زیر قرار می دید.

[my_highlight]علی کریمی[/my_highlight] از تیم ملی خداحافظی کرد

[carnaval 8]

فقط در حدّ تغییر رنگ و هایلایت کردنشون هست یا چیز های دیگه هم هست؟

فکر کنم این مقاله به کارتون بیاد:

http://www.wpbeginne...-visual-editor/

ولی اگر فقط هایلایت افزونه هایلایت زیاد داریم.

این مقاله خیلی خوبه فقط ترجمه شدشو سراغ ندارید ؟

تقریبا همونی بود که میخاستم فقط چیزی از نحوه استفادش نفهمیدم زیاد

اون افزون هایی که گفتید چی کار میکنن دقیقا ؟

شورت کد که در فاکشن قرار بدید

function my_custom_highlight($atts, $content = null) {
extract(shortcode_atts(array(
'color' => 'yellow',
'font' => '#000000'
), $atts));
return "<span style=\"background-color: $color; color: $font\">$content</span>";
}
add_shortcode('my_highlight','my_custom_highlight');

در ادیتور هم به صورت زیر قرار می دید.

[my_highlight]علی کریمی[/my_highlight] از تیم ملی خداحافظی کرد

از شما هم بسیار ممنونم

اینم باز دستی باید کد وارد کرد که

بازم ممنون

ویرایش شده دی 93 توسط carnaval

[علی زینلی 2114]

سلام ، فکر کنم منظور شما یه همچین افزونه ای باشه:

ShortCode Press

اگه نه بگو تا بیشتر توضیح بدم راجب اون مقاله.

[carnaval 8]

سلام ، فکر کنم منظور شما یه همچین افزونه ای باشه:

ShortCode Press

اگه نه بگو تا بیشتر توضیح بدم راجب اون مقاله.

خیلی ممنون این افزونه هم افزونه خوبیه ولی مشتاقم بیشتر در مورد اون مقاله بدونم

دقیقا روش استفادش چه جوریه و اونطور که دیدم اون برای button نوشته شده بود که میخوام برای لینک یا پاراگراف باشه

[A-fshin 1936]

خب بهتره یه button برا شورت کد highlight بسازیم.

مرحله ی اول :

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

function my_custom_highlight($atts, $content = null) {
extract(shortcode_atts(array(
		 'color' => 'yellow',
		 'font' => '#000000'
), $atts));
return "<span style=\"background-color: $color; color: $font\">$content</span>";
}
add_shortcode('my_highlight','my_custom_highlight');

سپس در پوشه ی قالبمون یک فولدر به نام shortcodes می سازیم.در این پوشه باید یه سری دستورات رو قرار بدیدم.عملا داریم یه پلاگین برای tinymce می سازیم.

برای شورت کد myhighlight نیاز به کد جاوا زیر داریم.به صورت js و با نام customذخیره کنید و در فولدر shortcodes قرار بدید

(function() {
tinymce.create('tinymce.plugins.Addshortcodes', {
init : function(pasargad_bt, url) {
//////--------------- Add Highlight button ---------------//////
pasargad_bt.addButton('myhighlight', {
title : 'هایلات',
image : url+'/highlight.png',
onclick : function() {
		 pasargad_bt.selection.setContent('[my_highlight]' + pasargad_bt.selection.getContent() + '[/my_highlight]');
}
});

},
});
tinymce.PluginManager.add('pasargadShortCodes', tinymce.plugins.Addshortcodes);
})();

سپس یه آیکون دلخواه با نام highlight.png هم در پوشه بذارید تا این آیکون در ادیتور نشون داده بشه و شما متوجه بشید.

خب حالا نیاز داریم با هوکی با نام mce_buttons_3 در ردیف سوم button خودمون رو رجیستر کنیم برای این منظور فایل php با نام shortcode می سازیم و کدهای زیر رو قرار می دیم.سپس این فایل رو در فولدر shortcodes قرار می دیم.

<?php
define ( 'JS_PATH' , get_template_directory_uri().'/shortcodes/custom.js');
function pasargad_custom_addbuttons() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", "add_pasargad_custom_tinymce_plugin");
add_filter('mce_buttons_3', 'register_pasargad_custom_button');
}
}
function register_pasargad_custom_button($buttons) {
array_push(
$buttons,
"myhighlight"
);
return $buttons;
}
function add_pasargad_custom_tinymce_plugin($plugin_array) {
$plugin_array['pasargadShortCodes'] = JS_PATH;
return $plugin_array;
}
add_action('init', 'pasargad_custom_addbuttons');
//////--------------- Add Tooltip to shortcode ---------------//////
function pasargad_shortcode_Tooltip( $atts, $content = null ) {
@extract($atts);
if( empty($gravity) ) $gravity = '';
$out = '<span class="post-tooltip tooltip-'.$gravity.'" title="'.$content.'">'.$text.'</span>';
return $out;
}
add_shortcode('tooltip', 'pasargad_shortcode_Tooltip');
?>

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

کد زیر رو در فانکشن قالب قرار می دیم که از فولدر shortcodes فایل shortcode رو انکلود کنه

include (get_template_directory() . '/shortcodes/shortcode.php');

خب اگه مشکلی وجود نداشته باشه تصویر مشابه زیر باید داشته باشید.سعی کردم آسون بگم و این کدها هم اختصاصی فرم ورک خودم هست.متن خودتون رو انتخاب کنید و روی آیکون هایلات کلیک کنید تا خودکار شورت رو به اون متن اضافه کنه.

[carnaval 8]

آقا دست گلت درد نکنه

حل شد

خیلی ممنون

[A-fshin 1936]

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

[my_highlight]علی کریمی[/my_highlight] از تیم ملی خداحافظی کرد.