نحوه افزودن سبک های سفارشی به WordPress Visual Editor

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

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

چرا و وقتی به سبک های سفارشی برای ویرایشگر ویژوال وردپرس نیاز دارید h4>

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

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

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

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

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

روش 1: اضافه کردن سبک های سفارشی در Visual Editor با استفاده از پلاگین h4>

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

برای پیکربندی تنظیمات افزونه ، باید از صفحه تنظیمات »سبک های سفارشی TinyMCE بازدید کنید.

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

پس از آن ، برای ذخیره تغییرات خود باید روی دکمه “ذخیره همه تنظیمات” کلیک کنید.

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

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

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

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

اکنون می توانید یک پست موجود را ویرایش کنید یا یک پست جدید ایجاد کنید. منوی کشویی Format را در ردیف دوم ویرایشگر بصری وردپرس مشاهده خواهید کرد.

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

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

روش 2: به صورت دستی سبک های سفارشی را به WordPress Visual Editor اضافه کنید h4>

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

مرحله 1: منوی کشویی سبک های سفارشی را در WordPress Visual Editor اضافه کنید

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

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

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

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

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

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

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

/ *
* عملکرد برگشت تماس برای فیلتر کردن تنظیمات MCE
* /

عملکرد my_mce_before_init_insert_formats ($ init_array) {

// آرایه style_formats را تعریف کنید

$ style_formats = آرایه (
/ *
* هر کودک آرایه ای یک قالب با تنظیمات خاص خود است
* توجه داشته باشید که هر آرایه دارای عنوان ، بلوک ، کلاس ها و آرگومان های پوششی است
* عنوان برچسبی است که در منوی Formats قابل مشاهده است
* Block تعریف می کند که آیا این سبک به صورت دهانه ، تقسیم ، انتخاب یا سبک است
* کلاسها به شما امکان می دهد کلاسهای CSS را تعریف کنید
* بسته بندی کردن یا عدم اضافه کردن یک عنصر سطح بلوک جدید در اطراف عناصر انتخاب شده
* /
آرایه(
'title' => 'بلوک محتوا' ،
'block' => 'دهانه' ،
'class' => 'محتوای بلوک' ،
'wrapper' => درست است

) ،
آرایه(
'title' => 'دکمه آبی' ،
'block' => 'دهانه' ،
'class' => 'دکمه آبی' ،
'wrapper' => درست است
) ،
آرایه(
'title' => 'دکمه قرمز' ،
'block' => 'دهانه' ،
'class' => 'دکمه قرمز' ،
'wrapper' => درست است
) ،
)
// آرایه را وارد کنید ، JSON ENCODED ، در "style_formats"
$ init_array ['style_formats'] = json_encode ($ style_formats)؛

بازگشت $ init_array؛
  
}
// ضمیمه پاسخ به "tiny_mce_before_init"
افزودن_فیلتر ('tiny_mce_fein_init'، 'my_mce_before_init_insert_format')؛

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

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

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

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

شما باید این CSS را به پرونده های style.css و theme-child خود و فایل editor-style.css اضافه کنید.

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

دکمه قرمز {
background-color: # bc3315؛
-moz-border-radius: 6px؛
شعاع -webkit-border: 6px؛
شعاع مرز: 6px؛
حاشیه: 1px solid # 942911؛
نمایش: بلوک درون خطی ؛
مکان نما: اشاره گر؛
رنگ: #ffffff؛
بالشتک: 6px 24px؛
دکوراسیون متن: هیچ؛
}

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

اگر طرح زمینه شما دارای یک صفحه سبک ویرایشگر نیست ، همیشه می توانید یکی ایجاد کنید. به سادگی یک فایل CSS جدید ایجاد کنید و نام آن را custom-editor-style.css بگذارید.

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

تابع my_theme_add_editor_styles () {
    add_editor_style ('custom-editor-style.css')؛
}
add_action ('init' ، 'them_add_ed__editor_styles_)'؛

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

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .