- افزودن کد سفارسی به ویژوال ادیتور
- آموزش افزودن استایل سفارشی به ویژوال ادیتور
- 1- افزودن استایل های سفارشی در ویرایشگر ویژوال با استفاده از افزونه
- 2- افزودن استایل سفارشی به ویرایشگر ویژوال وردپرس به صورت دستی
- مرحله 1: افزودن منوی کشویی سبک های سفارشی در ویرایشگر ویژوال وردپرس
- مرحله 2: گزینه های انتخابی را به منوی کشویی اضافه کنید
- مرحله 3: اضافه کردن سبک های CSS
- جمع بندی: نحوه افزودن سبک های سفارشی به WordPress Visual Editor
افزودن استایل سفارشی به ویرایشگر ویژوال | چگونه به ویژوال ادیتور کد سفارشی بیافزاییم؟
( 0 رای , میانگین : 0,00 از 5)
بارگذاری...آیا می خواهید سبک های سفارشی را در ویرایشگر تصویر وردپرس اضافه کنید؟ اضافه کردن استایل دلخواه به ویژوال ادیتور به شما اجازه می دهد تا سریعا قالب بندی را بدون تغییر به ویرایشگر متن اعمال کنید.به همین منظور ما در این مطلب قصد داریم آموزش افزودن استایل سفارشی به ویرایشگر ویژوال را با استفاده از روش های مختلف به شما آموزش دهیم. با ما همراه باشید.
افزودن کد سفارسی به ویژوال ادیتور
به‌طور پیش فرض، ویرایشگر بصری وردپرس همراه با قالب و طرح های اولیه ارائه و در اختیار شما قرار داده می شود. اما در برخی از مواقع ممکن است بخواهید از سبک های سفارشی مختلفی مانند: دکمه های جذاب، بلوک‌های محتوا، برچسب‌ها و… در سایت خود استفاده کنید، در این صورت شما می توانید استایل های دلخواهتان را به ویرایشگر ویژوال اضافه کنید. مهمتر از همه، شما به راحتی می توانید سبک ها را بدون نیاز به ویرایش پست های وب سایت خود تغییر دهید یا به روز کنید.
بیشتر بخوانید: علت خطای پایگاه داده در وردپرس چیست؟ | راه های رفع خطا در اتصال به دیتابیس وردپرس
آموزش افزودن استایل سفارشی به ویژوال ادیتور
روش های مختلفی برای افزودن کد سفارسی سازی شده به ویژوال ادیتور وجود دارد که ما در این مطلب قصد داریم به 2 مورد از آنها اشاره کنیم و آنها را به صورت کامل به شما توضیح دهیم.
1- افزودن استایل های سفارشی در ویرایشگر ویژوال با استفاده از افزونه
یکی از ساده ترین روش های افزودن استایل سفارشی به ویرایشگر ویژوال ، استفاده از یک افزونه وردپرس می باشد. افزونه های مختلفی در این خصوص ارائه شده که بی تردید افزونه TinyMCE Custom Styles یکی از بهترین و محبوب ترین آنها محسوب می شود. این افزونه به صورت کاملاً رایگان در مخزن وردپرس به ثبت رسیده که می توانید به سادگی آن را در سایت خود فعال کنید.
در اولین قدم، شما باید این افزونه را در سایت خود نصب و فعال کنید. برای انجام اینکار، در ابتدا وارد پیشخوان وردپرس خود شوید و سپس از بخش “افزونه ها” روی گزینه “افزودن” کلیک نمائید. سپس نام افزونه را در باکس بالای صفحه جستجو نمائید.
پس از پیدا شدن افزونه کافیست آن را نصب و فعال کنید. همچنین اگر با نحوه نصب افزونه آشنایی ندارید می توانید آموزش نصب افزونه وردپرس را مشاهده کنید.
بیشتر بخوانید: آموزش کار با افزونه مداد زرد Yellow Pencil
پس از فعال سازی، برای پیکربندی تنظیمات افزونه، از بخش “تنظیمات” روی گزینه “TinyMCE Custom Styles” کلیک نمائید. حال در این قسمت شما می توانید تنظیمات مربوط به افزونه را انجام دهید.
این افزونه به شما این امکان را می دهد که مکان فایل های شیوه نامه را انتخاب کنید. همچنین می توانید از طرح های زمینه یا شیت های طرح زمینه کودک استفاده نمائید. علاوه بر آن می توانید مکان سفارشی خود را انتخاب کنید. پس از آن، باید روی دکمه «ذخیره همه تنظیمات» کلیک کنید تا تغییرات شما ذخیره شود.
بیشتر بخوانید: افزونه المنتور (Elementor) یا ویژوال کامپوزر (Visual composer)؟
پس از آن باید صفحه را به سمت پایین اسکرول کنید تا وارد بخش “سبک ها” شوید و بتوانید سبک های دلخواه خود را اضافه نمائید. برای انجام اینکار از پایین صفحه روی دکمه “Add New Style” کلیک کنید.
اینجا جایی است که می‌خواهید استایل‌های سفارشی‌تان را شخصی‌سازی کنید. در ابتدا شما باید یک عنوان برای سبک وارد کنید. این عنوان در منوی کشویی نمایش داده می شود. در مرحله بعد، باید انتخاب کنید که یک عنصر درون خطی، بلوک یا انتخابگر باشد. پس از آن یک کلاس CSS اضافه کنید و سپس قوانین CSS خود را همانطور که در تصویر نشان داده شده است، اضافه نمائید.
بعد از اینکه سبک CSS دلخواه خود را اضافه کردید، کافیست روی دکمه ذخیره تغییرات کلیک نمائید. اکنون شما باید یک پست جدید ایجاد کنید و یا می توانید یکی از پست های قدیمی خود را ویرایش نمائید. پس از اینکه وارد صفحه ویرایشگر پست خود شدید، یک دکمه به نام “Format” در ردیف دوم ویرایشگر بصری وردپرس شما ظاهر می شود. درست چیزی مانند تصویر زیر:
به سادگی متنی را در ویرایشگر وارد و سپس سبک دلخواه خود را از منوی کشویی Formats انتخاب نمائید. پس از آن می توانید پیش نمایش سایت خود را مشاهده کنید.
بیشتر بخوانید: اتصال اینستاگرام به وردپرس | چگونه پست های اینستاگرام را در سایت خود نمایش دهیم؟
2- افزودن استایل سفارشی به ویرایشگر ویژوال وردپرس به صورت دستی
یکی دیگر از روش های اضافه کردن استایل دلخواه به ویژوال ادیتور در وردپرس، استفاده از کدنویسی می باشد. این روش مستلزم این است که به صورت دستی کدی را به فایل های وردپرس خود اضافه کنید. برای انجام اینکار مراحل زیر را دنبال کنید:
مرحله 1: افزودن منوی کشویی سبک های سفارشی در ویرایشگر ویژوال وردپرس
در ابتدا باید یک منوی کشویی Formats را در ویرایشگر بصری وردپرس اضافه کنید، سپس منوی کشویی به شما امکان می دهد تا سبک های سفارشی خود را انتخاب و اعمال نمائید. برای انجام اینکار شما باید کدزیر را با فایل functions.php قالب خود اضافه کنید:
function wpb_mce_buttons_2($buttons) {array_unshift($buttons, 'styleselect');return $buttons;}add_filter('mce_buttons_2', 'wpb_mce_buttons_2');بیشتر بخوانید: آموزش استفاده از ویرایشگر کلاسیک وردپرس
مرحله 2: گزینه های انتخابی را به منوی کشویی اضافه کنید
در این مرحله شما باید گزینه هایی را به منوی کشویی که ایجاد کرده اید را اضافه نمائید. سپس می توانید این گزینه ها را از منوی کشویی Formats انتخاب و اعمال کنید. ما در این آموزش قصد داریم سه سبک سفارشی را برای ایجاد بلوک محتوا و دکمه ها اضافه کنیم. برای انجام اینکار، باید کد زیر را به فایل functions.php قالب خود اضافه کنید:
/** Callback function to filter the MCE settings*/function my_mce_before_init_insert_formats( $init_array ) { // Define the style_formats array$style_formats = array( /** Each array child is a format with it's own settings* Notice that each array has title, block, classes, and wrapper arguments* Title is the label which will be visible in Formats menu* Block defines whether it is a span, div, selector, or inline style* Classes allows you to define CSS classes* Wrapper whether or not to add a new block-level element around any selected elements*/array( 'title' => 'Content Block', 'block' => 'span', 'classes' => 'content-block','wrapper' => true,), array( 'title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button','wrapper' => true,),array( 'title' => 'Red Button', 'block' => 'span', 'classes' => 'red-button','wrapper' => true,),); // Insert the array, JSON ENCODED, into 'style_formats'$init_array['style_formats'] = json_encode( $style_formats ); return $init_array; } // Attach callback to 'tiny_mce_before_init' add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); اکنون می توانید یک پست جدید در وردپرس خود اضافه کنید و روی منوی کشویی Formats در ویرایشگر ویژوال کلیک نمائید. سپس متوجه خواهید شد که سبک های سفارشی شما اکنون در قالب ها قابل مشاهده هستند.
بیشتر بخوانید: افزودنی Gravity Forms Styles Pro – افزودنی زیباسازی فرم های گراویتی فرمز
مرحله 3: اضافه کردن سبک های CSS
در آخرین مرحله شما باید قوانین سبک های CSSرا برای استایل های سفارشی خود اضافه کنید. برای انجام اینکار شما می توانید کدهای CSS زیر را به قالب و یا فایل های style.css و editor-style.css خود اضافه نمائید:
.content-block { border:1px solid #eee; padding:3px;background:#ccc;max-width:250px;float:right; text-align:center;}.content-block:after { clear:both;} .blue-button { background-color:#33bdef;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #057fd0;display:inline-block;cursor:pointer;color:#ffffff;padding:6px 24px;text-decoration:none;}.red-button {background-color:#bc3315;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #942911;display:inline-block;cursor:pointer;color:#ffffff;padding:6px 24px;text-decoration:none;}همچنین اگر قالب شما یک فایل شیوه نامه ویرایشگر ندارد، می توانید خودتان به صورت دستی آن را ایجاد کنید. برای انجام اینکار؛ به سادگی یک فایل CSS جدید ایجاد و نام آن را custom-editor-style.css بگذارید. سپس باید این فایل را در پوشه اصلی قالب خود آپلود کنید. پس از آن هم باید کد را در فایل functions.php قالب خود اضافه کنید:
function my_theme_add_editor_styles() {add_editor_style( 'custom-editor-style.css' );}add_action( 'init', 'my_theme_add_editor_styles' );بیشتر بخوانید: چگونه به برگه یا نوشته اجازه نمایش در جستجوی گوگل را ندهیم؟
جمع بندی: نحوه افزودن سبک های سفارشی به WordPress Visual Editor
ما در این مطلب نحوه افزودن استایل سفارشی به ویرایشگر ویژوال را با استفاده از دو روش به شما عزیزان آموزش دادیم. امیدوارم این مطلب مورد رضایت شما عزیزان قرار گرفته باشد.
منابع: wpbeginner – wpexplorer
بهترین افزونه های ویرایشگر متن (ادیتور) وردپرس پیشرفته و حرفه ای
لیست مطالب
- افزودن کد سفارسی به ویژوال ادیتور
- آموزش افزودن استایل سفارشی به ویژوال ادیتور
- 1- افزودن استایل های سفارشی در ویرایشگر ویژوال با استفاده از افزونه
- 2- افزودن استایل سفارشی به ویرایشگر ویژوال وردپرس به صورت دستی
- مرحله 1: افزودن منوی کشویی سبک های سفارشی در ویرایشگر ویژوال وردپرس
- مرحله 2: گزینه های انتخابی را به منوی کشویی اضافه کنید
- مرحله 3: اضافه کردن سبک های CSS
- جمع بندی: نحوه افزودن سبک های سفارشی به WordPress Visual Editor
چند نکته قبل از ارسال دیدگاه :
- تمامی دیدگاه ها قبل از انتشار عمومی توسط کارشناسان سایت بررسی خواهند شد.
- دیدگاه هایی که جنبه تبلیغاتی داشته باشند تایید نخواهند شد.
- آدرس سایت ، مشخصات مدیریت و... در متن دیدگاه حذف خواهند شد.
- دیدگاه هایی که به زبان انگلیسی باشند تایید نخواهند شد.
- دیدگاه هایی که حاوی توهین ، تهدید یا... باشند تایید نخواهند شد.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.
مطالب مرتبط
۱۶ نرم افزار برتر برای مدیریت وب سایت وردپرس
سلام با یک آموزش وردپرس دیگر در خدمت شما عزیزان هستیم
در این آموزش ۱۶ نرم افزار برتر برای مدیریت وب سایت وردپرس آموزش خواهیم داد پس با نوین وردپرس ...
جزییات بیشتر آموزش را بخوانید!
آموزش ثبت دامنه ir + آموزش ساخت شناسه ایرنیک
یکی از مهم ترین اقداماتی که برای راه اندازی وب سایت باید انجام دهید، خرید دامنه می باشد. منظور از دامنه همان نام وب سایت شماست. پسوندهای مختلفی ...
جزییات بیشتر آموزش را بخوانید!
پنالتی شدن سایت در گوگل؛ راه های تشخیص و رفع آن
پنالتی شدن سایت توسط گوگل یکی از بدترین اتفاقاتی است که ممکن است صاحبان وب سایت ها با آن مواجه شوند. در واقع؛ زمانی که شما به عنوان ...
جزییات بیشتر آموزش را بخوانید!
آموزش ارزیابی و بررسی تعامل کاربران در وردپرس با Google Analytics
آیا میزان تعامل کاربران در سایت وردپرس خود را به درستی ارزیابی و بررسی می کنید؟ تعامل کاربران یکی از مهم ترین عوامل برای بررسی است چرا که ...
جزییات بیشتر آموزش را بخوانید!
راهنمای انتخاب قالب فروشگاهی مناسب و خوب برای وردپرس
راه اندازی یک فروشگاه آنلاین با وردپرس کار بسیار ساده ای است، زیرا وردپرس انواع قالب های فروشگاهی را ارائه می دهد که می توانید از میان آنها ...
جزییات بیشتر آموزش را بخوانید!
نحوه سفارشی سازی ایمیل های ارسالی در ووکامرس
زمانی که کاربری از سایت فروشگاهی شما خریدی انجام می دهد، یک ایمیل برای مشتریان ارسال می شود. در واقع ایمیلی که برای مشتریان ارسال می شود دارای ...
جزییات بیشتر آموزش را بخوانید!
آموزش نحوه زمان بندی انتشار در وردپرس
زمان بندی انتشار در وردپرس یکی از اقداماتی است که به شما کمک می‌کند تا تمامی محتوای خود را بدون بدون وقفه و در یک زمان خاص منتشر ...
جزییات بیشتر آموزش را بخوانید!
افزایش بازدید سایت و بالا بردن ترافیک از طریق لینک سازی
سلام به دنیای وردپرس :)
امروز در این مقاله از نوین وردپرس قصد داریم به شما راهکار هایی را معرفی کنیم که با استفاده از می توانید ترافیک سایتتان ...
جزییات بیشتر آموزش را بخوانید!
اگر دوست دارید در زمینه آموزش ، افزونه ، قالب وردپرس و ووکامرس ، آموزش سئو و… مقالات آموزشی خود را در نوین وردپرس منتشر کنید میتوانید به عنوان نویسنده در نوین وردپرس فعالیت کنید.
سلام دوستان
میشه راهنماییم کنید چطور سایز فونت محیط ویرایشگر رو افزایش بدم؟
طبق این اموزش پیش رفتم ولی نتیجه نداد:
**********
لطفا اگه میدونید راهنمایی کنید.