چگونه برای اضافه کردن یک سبک بصری به ویرایشگر وردپرس

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

توجه داشته باشید: این آموزش به دانش پایه CSS نیاز دارد.

وقتی که به شما آیا می خواهید یک سبک سفارشی به WordPress Visual Editor اضافه کنید؟

به طور پیش‌فرض، ویرایشگر بصری وردپرس گزینه‌های قالب‌بندی و استایل اولیه را ارائه می‌دهد. با این حال، گاهی اوقات شما نیاز دارید که سبک های سفارشی را در اختیار داشته باشید که به شما امکان می دهد برای مثال دکمه های CSS را اضافه کنید. محتویات، قلاب و غیره

شما همیشه می توانید از ویرایشگر بصری به ویرایشگر متن تغییر وضعیت دهید و کدهای HTML و CSS سفارشی را اضافه کنید. اما اگر مرتباً از برخی سبک ها استفاده می کنید بهتر است آنها را در ویرایشگر بصری اضافه کنید تا بتوانید به راحتی از آنها استفاده مجدد کنید.

این باعث صرفه جویی در زمان شما می شود و همچنین به شما این امکان را می دهد که همیشه از همان سبک ها در همه جای خود استفاده کنید وب سایت.

مهمتر از همه ، شما بدون نیاز به ویرایش مقالات در سایت خود می توانید به راحتی سبک ها را ویرایش یا به روز کنید.

اکنون می دانیم که چگونه این کار را در وردپرس انجام دهیم.

1 روش: یک سبک دلخواه را با یک افزونه اضافه کنید

اولین کاری که باید انجام دهید نصب و فعال سازی افزونه " سبک های سفارشی TinyMce ". برای جزئیات بیشتر به راهنمای گام به گام ما در مورد نحوه نصب a مراجعه کنید پلاگین وردپرس.

پس از فعال سازی ، باید بازدید کنید " تنظیمات> تنظیمات »سبک های سفارشی TinyMCE برای پیکربندی تنظیمات افزونه.

این افزونه به شما این امکان را می دهد که مکان فایل های شیوه نامه را انتخاب کنید. می تواند از طرح زمینه یا سبک تم کودک شما استفاده کند، یا می توانید یک مکان سفارشی انتخاب کنید.

پس از آن ، شما باید روی دکمه کلیک کنید " همه تنظیمات را ذخیره کنید برای ذخیره تنظیمات خود

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

ابتدا باید عنوانی برای سبک وارد کنید. این عنوان در منوی کشویی نمایش داده می شود. سپس باید تعریف کنید. چه یک ردیف باشد ، چه یک بلوک ، یا یک عنصر انتخاب.

پس از آن یک کلاس CSS اضافه کنید و سپس قوانین CSS خود را اضافه کنید همانطور که در تصویر زیر نشان داده شده است.

وقتی سبک CSS را اضافه کردید ، برای ذخیره تغییرات کافیست روی دکمه "ذخیره همه تنظیمات" کلیک کنید.

اکنون می توانید یک مقاله موجود را ویرایش کرده یا یک مقاله جدید ایجاد کنید. شما در منوی کشویی ، در ردیف دوم ویرایشگر تصویری وردپرس ، یک فرمت را مشاهده خواهید کرد.

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

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

2 Method: به صورت دستی سبک ها را به ویرایشگر ویژوال اضافه کنید

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

مرحله 1: از منوی کشویی ویرایشگر ویژوال WordPress ، یک سبک سفارشی اضافه کنید.

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

شما باید کد زیر را به فایل functions.php یا پلاگین خود اضافه کنید.

تابع wpb_mce_buttons_2 ($ دکمه ها) {array_unshift ($ دکمه ها ، 'styleselect')؛ بازگشت دکمه های $؛ } add_filter ('mce_buttons_2'، 'wpb_mce_buttons_2')؛

مرحله 2: نحوه اضافه کردن گزینه ها در منوی کشویی

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

برای این آموزش، سه سبک سفارشی برای ایجاد اضافه می کنیم محتویات بلوک و دکمه ها

باید کد زیر را به پرونده "functions.php" از توابع.php یا یک پلاگین خاص اضافه کنید.

/ * * عملکرد برگشت برای فیلتر کردن تنظیمات MCE * / تابع my_mce_before_init_insert_formats ($ init_array) {// تعریف آرایه style_formats $ style_formats = array (/ * * هر آرایه کودک یک قالب با تنظیمات خاص خود است * توجه داشته باشید که هر آرایه عنوان دارد ، بلوک ، کلاسها و آرگومان های پوششی * عنوان برچسبی است که در منوی Formats قابل مشاهده است یک عنصر سطح بلوک جدید در اطراف عناصر انتخاب شده اضافه کنید * / array ('title' => 'Content Block'، 'block' => 'span'، 'class' => 'content-block'، 'wrapper' => true،)، array ('title' => 'Blue Button'، 'block' => 'span'، 'class' => 'blue-button'، 'wrapper' => true،)، array ('title') => 'دکمه قرمز' ، 'بلوک' => 'دهانه' ، 'کلاسها' => 'دکمه قرمز' ، 'بسته بندی' => درست است ،) ،)؛ // آرایه را وارد کنید ، JSON ENCODED ، در 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats)؛ بازگشت $ init_array؛ } // ضمیمه پاسخ به 'tiny_mce_be_init' add_filter ('tiny_mce_be_init' ، 'my_mce_before_init_insert_formats')؛

اکنون می توانید یک پست جدید در وردپرس اضافه کنید و از منوی کشویی ویرایشگر ویژوال بر روی قالب ها کلیک کنید. مشاهده خواهید کرد که سبک های سفارشی شما اکنون قابل مشاهده هستند.

با این حال ، انتخاب آنها هیچ تغییری در ویرایشگر بصری وردپرس نخواهد کرد.

3 مرحله: یک سبک CSS اضافه کنید

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

شما باید این CSS را در پرونده style.css از طرح زمینه خود و یا از طرح کودک اضافه کنید.

.content-block {border: 1px solid #eee؛ بالشتک: 3px؛ پس زمینه: #ccc؛ حداکثر عرض: 250 پیکسل شناور: درست؛ text-align: مرکز؛ } .content-block: بعد از {پاک کردن: هر دو؛ } .blue-button {background-color: # 33bdef؛ -moz-border-radius: 6px؛ شعاع -webkit-border: 6px؛ شعاع مرز: 6px؛ حاشیه: 1px solid # 057fd0؛ نمایش: بلوک درون خطی ؛ مکان نما: نقطه؛ رنگ: #ffffff؛ بالشتک: 6px 24px؛ دکوراسیون متن: هیچ؛ } .red-button {background-color: # bc3315؛ -moz-border-radius: 6px؛ شعاع -webkit-border: 6px؛ شعاع مرز: 6px؛ حاشیه: 1px solid # 942911؛ نمایش: بلوک درون خطی ؛ مکان نما: نقطه؛ رنگ: #ffffff؛ بالشتک: 6px 24px؛ دکوراسیون متن: هیچ؛ }

شیوه نامه ویرایشگر ظاهر شما را کنترل می کند محتویات در ویرایشگر تصویری برای مشاهده نحوه یافتن مکان این فایل، اسناد را بررسی کنید.

اگر طرح زمینه شما دارای یک فایل صفحه سبک نیست ، پس همیشه می توانید یک پرونده ایجاد کنید. فقط یک فایل CSS جدید ایجاد کنید و نام آن را بگذارید " سفارشی ویرایشگر را ببندید '.

شما باید این فایل را در پوشه اصلی تم خود بارگذاری کنید ، سپس این کد را به پرونده "functions.php" تم خود اضافه کنید.

function my_theme_add_editor_styles () {add_editor_style ('custom-editor-style.css')؛ } add_action ('init'، 'my_theme_add_editor_styles')؛

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

احساس رایگان کنید که این آموزش را در شبکه های اجتماعی مورد علاقه خود با دوستان خود به اشتراک بگذارید.