محتوانوشته
آیا می خواهید سبک های سفارشی را در ویرایشگر تصویر وردپرس اضافه کنید؟ اضافه کردن استایل دلخواه به ویژوال ادیتور به شما اجازه می دهد تا سریعا قالب بندی را بدون تغییر به ویرایشگر متن اعمال کنید.به همین منظور ما در این مطلب قصد داریم آموزش افزودن استایل سفارشی به ویرایشگر ویژوال را با استفاده از روش های مختلف به شما آموزش دهیم. با نوین وردپرس همراه باشید.
افزودن کد سفارسی به ویژوال ادیتور
بهطور پیش فرض، ویرایشگر بصری وردپرس همراه با قالب و طرح های اولیه ارائه و در اختیار شما قرار داده می شود. اما در برخی از مواقع ممکن است بخواهید از سبک های سفارشی مختلفی مانند: دکمه های جذاب، بلوکهای محتوا، برچسبها و… در سایت خود استفاده کنید، در این صورت شما می توانید استایل های دلخواهتان را به ویرایشگر ویژوال اضافه کنید. مهمتر از همه، شما به راحتی می توانید سبک ها را بدون نیاز به ویرایش پست های وب سایت خود تغییر دهید یا به روز کنید.
بیشتر بخوانید: علت خطای پایگاه داده در وردپرس چیست؟ | راه های رفع خطا در اتصال به دیتابیس وردپرس
آموزش افزودن استایل سفارشی به ویژوال ادیتور
روش های مختلفی برای افزودن کد سفارسی سازی شده به ویژوال ادیتور وجود دارد که ما در این مطلب قصد داریم به 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 – افزودنی زیباسازی فرم های گراویتی فرمز » دانلود gravity forms
مرحله 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' );بیشتر بخوانید: چگونه به برگه یا نوشته اجازه نمایش در جستجوی گوگل را ندهیم؟
سوالات متداول
با افزونههای آماده نیاز به دانش برنامهنویسی نیست، اما برای افزودن استایل سفارشی به ویژوال ادیتور به صورت دستی، آشنایی با CSS و کمی تجربه ویرایش فایلهای قالب ضروری است.آیا برای افزودن استایل سفارشی به ویرایشگر ویژوال نیاز به دانش برنامهنویسی است؟
استایلهای افزوده شده در ویرایشگر ویژوال فقط برای نمایش در محیط ادیتور هستند؛ برای اعمال روی سایت در دسکتاپ یا موبایل باید همان CSS را در قالب یا فایل استایل سایت تعریف کرد.یا افزودن استایل سفارشی به ویژوال ادیتور روی نسخه موبایل و دسکتاپ سایت نمایش داده میشود؟
بله، هم میتوان چند کلاس CSS دلخواه را در ویرایشگر تعریف کرد و هم با استفاده از افزونههای حرفهای استایلهای متنوع را مدیریت و به راحتی بین نوشتهها اعمال کرد.آیا میتوان چندین استایل سفارشی به ویرایشگر ویژوال اضافه کرد؟
خیر، افزودن استایلهای سفارشی به ویرایشگر ویژوال تنها روی محیط مدیریت تأثیر دارد و سرعت بخش کاربری سایت تغییر نمیکند.آیا افزودن استایل سفارشی به ویرایشگر ویژوال باعث کندی سایت میشود؟
استفاده از افزونهها سادهتر و سریعتر است و مناسب کاربران مبتدی است، اما افزودن استایل سفارشی به ویرایشگر ویژوال وردپرس به صورت دستی انعطاف بیشتری دارد و کنترل کامل روی کدها را فراهم میکند.آیا افزودن استایلهای سفارشی به ویرایشگر ویژوال با افزونه بهتر است یا به صورت دستی؟
میتوان از افزونههای مخصوص افزودن استایل سفارشی به ویرایشگر ویژوال استفاده کرد تا بدون نیاز به کدنویسی، سبکهای دلخواه به ویرایشگر اضافه شوند، یا به صورت دستی این کار را با ویرایش فایلهای قالب انجام داد.بهترین روش برای افزودن استایل سفارشی در ویرایشگر ویژوال چیست؟
بیشتر بخوانید: بهترین افزونه های ویرایشگر متن (ادیتور) وردپرس پیشرفته و حرفه ای
جمع بندی: نحوه افزودن سبک های سفارشی به WordPress Visual Editor
ما در این مطلب نحوه افزودن استایل سفارشی به ویرایشگر ویژوال را با استفاده از دو روش به شما عزیزان آموزش دادیم. امیدوارم این مطلب مورد رضایت شما عزیزان قرار گرفته باشد.
منابع: wpbeginner – wpexplorer
نظراتمقاله
سلام دوستان
میشه راهنماییم کنید چطور سایز فونت محیط ویرایشگر رو افزایش بدم؟
طبق این اموزش پیش رفتم ولی نتیجه نداد:
**********
لطفا اگه میدونید راهنمایی کنید.
سلام دوستان
میشه راهنماییم کنید چطور سایز فونت محیط ویرایشگر رو افزایش بدم؟
طبق این اموزش پیش رفتم ولی نتیجه نداد:
**********
لطفا اگه میدونید راهنمایی کنید.