carnaval

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

14 پست در این موضوع قرار دارد

سلام دوستان

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

3

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

2

به اشتراک گذاری این پست


لینک به پست

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


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

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


</span>

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

موفق باشید.

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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

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

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

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

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

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


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

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


</span>

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

موفق باشید.

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

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

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

3

به اشتراک گذاری این پست


لینک به پست

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


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] از تیم ملی خداحافظی کرد

5

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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] از تیم ملی خداحافظی کرد

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

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

بازم ممنون

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

به اشتراک گذاری این پست


لینک به پست

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

ShortCode Press

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

2

به اشتراک گذاری این پست


لینک به پست

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

ShortCode Press

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

خب بهتره یه 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');

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

post-4600-0-72536500-1420114809_thumb.pn

3

به اشتراک گذاری این پست


لینک به پست

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

حل شد

خیلی ممنون :wub:

0

به اشتراک گذاری این پست


لینک به پست

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


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

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری