nasrin1363
New Member
آیا می خواهید که استایل های شخصی سازی شده را به ویرایشگر بصری وردپرس اضافه کنید؟ اضافه کردن استایل های شخصی سازی شده به شما اجازه می دهد تا تغییرات را به سرعت و بدون رفتن به ویرایشگر متن انجام دهید. در این مقاله ما به شما نشان می دهیم که چگونه می توانید استایل های شخصی سازی شده را به ویرایشگر بصری وردپرس اضافه کنید.
توجه: این آموزش نیاز دارد تا شما اطلاعات اولیه از CSS داشته باشید.
چرا و چه موقع شما به استایل های شخصی سازی شده برای ویرایشگر بصری وردپرس احتیاج دارید؟
به صورت پیش فرض وردپرس یک ویرایشگر بصری با یک سری گزینه های ابتدایی تغییرات و ویرایش دارد. اما گاهی اوقات شما ممکن است نیاز داشته باشید تا استایل های شخصی سازی شده توسط خودتان برای اضافه کردن دکمه های CSS، بلوک های مطالب، خطهای برچسب و غیره استفاده کنید.
شما می توانید همیشه از ویرایشگر بصری به ویرایشگر متن بروید و HTML و CSS شخصی سازی شده خود را اضافه کنید. اما اگر شما به طور معمول از بعضی استایل ها استفاده می کنید، پس بهتر است که این استایل ها را به ویرایشگر تصویر خود اضافه کنید تا راحت تر دوباره از آن ها استفاده کنید.
این باعث می شود در زمانی که برای جابجایی بین ویرایشگر متن و ویرایشگر بصری صرف می کنید صرفه جویی شود. همچنین این کار باعث می شود تا به صورت پیوسته از یک سری استایل در کل وب سایت خود استفاده کنید.
مهمتر از همه این است که شما به آسانی می توانید استایل ها را تغییر دهید و به روز رسانی کنید بدون این که نیاز داشته باشید پست های خود را در وب سایتتان ویرایش کنید. با گفتن این ها حال برویم و ببینیم چگونه می توان استایل های شخصی سازی شده را در ویرایشگر بصری وردپرس وارد کرد.
روش اول: اضافه کردن استایل های شخصی سازی شده در ویرایشگر بصری با استفاده از پلاگین
اولین کاری که باید انجام دهید این است که پلاگین TinyMCE Custom Styles را نصب و فعال کنید. بعد از فعال سازی، باید به صفحه Settings » TinyMCE Custom Styles سر بزنید تا تنظیمات پلاگین را انجام دهید.
این پلاگین به شما اجازه می دهد تا مکان فایل های استایل را مشخص کنید. این پلاگین می تواند از قالب شما و یا استایل های زیر مجموعه قالب شما استفاده کند و یا شما می توانید یک مکان به دلخواه خود انتخاب کنید.
بعد از آن، باید بر روی Save All Settings کلیک کنید تا تغییرات تنظیمات ذخیره شود.
حالا شما می توانید استایل های شخصی سازی شده خود را اضافه کنید. در همان صفحه پایین تر بیایید و در بخش style بر روی Add new style کلیک کنید. در ابتدا باید یک عنوان برای استایل خود انتخاب کنید. این عنوان در منوی کشویی نمایش داده خواهد شد. سپس باید انتخاب کنید که این استایل درون خطی است یا بلوک و یک المان انتخاب گر.
بعد از آن یک کلاس CSS اضافه کنید و قوانین CSS خود را این طور که در شکل زیر نشان داده شده است وارد کنید.
هنگامی که شما یک استایل CSS بر روی Save All Settings تا تنظیمات خود را ذخیره کنید. شما می توانید حالا یک پست جدید بسازید و یا یک پست قدیمی خود را ویرایش کنید. شما متوجه یک منوی کشویی با نام Formats در ردیف دوم ویرایشگر بصری وردپرس خواهید شد.
به سادگی یک بخشی از متن خود را در ویرایشگر انتخاب کنید و سپس از داخل منوی کشویی Formats، استایل شخصی سازی شده خود را انتخاب کنید تا تغییرات اعمال شود. شما اکنون می توانید پیش نمایش پست خود را ببینید و ببینید که آیا تغییرات به درستی اعمال شده اند یا خیر.
روش دوم: اضافه کردن دستی استایل های شخصی سازی شده به ویرایشگر بصری وردپرس
این روش به این نیاز دارد تا شما کد به فایل های وردپرس خود اضافه کنید. اگر اولین باری است که این کار را انجام می دهید، لطفا به آموزش ها و راهنماهای این کار مراجعه کنید تا این کار را درست انجام دهید.
قدم اول: اضافه کردن یک منوی کشویی استایل های شخصی سازی شده در ویرایشگر بصری وردپرس
اولین کاری که باید کنیم این است که یک منوی کشویی به ویرایشگر بصری وردپرس اضافه کنیم. این منوی کشویی به ما اجازه می دهد تا استایل های مورد نظرمان را انتخاب و اعمال کنیم.
شما باید کد زیر را در فایل قالب functions.php قرار دهید.
۱ function wpb_mce_buttons_2($buttons) {
۲ array_unshift($buttons, ‘styleselect’);
۳ return $buttons;
۴ }
۵ add_filter(‘mce_buttons_2’, ‘wpb_mce_buttons_2’);
قدم دوم: اضافه کردن گزینه های انتخاب در منوی کشویی
حال شما باید گزینه هایی را در منوی کشویی که ساخته اید اضافه کنید. شما بعد از این کار قادر خواهید بود که این گزینه ها را انتخاب و در پست خود اعمال کنید. برای این آموزش ما سه استایل شخصی سازی شده برای ایجاد بلوک های متنی و دکمه ها اضافه می کنیم.
شما باید کد زیر را در فایل قالب 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 در ویرایشگر بصری وردپرس کلیک کنید. شما خواهید دید که استایل های شخصی سازی شده اکنون در این منوی کشویی قابل مشاهده هستند. اما انتخاب این استایل ها هیچ گونه تغییری در ویرایشگر پست ایجاد نمی کند.
قدم سوم: اضافه کردن استایل های 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
ointer;
۲۰ 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;
۳۲ cursorointer;
۳۳ color:#ffffff;
۳۴ padding:6px 24px;
۳۵ text-decoration:none;
۳۶ }
این برگه استایل ویرایشگر، ظاهر مطالب شما در ویرایشگر بصری را کنترل می کند. اسناد قالب خود را کنترل کنید تا مکان این فایل را پیدا کنید.
اگر قالب شما یک فایل برگه استایل (stylesheet) نداشت، شما می توانید یک فایل بسازید. به راحتی یک فایل CSS جدید بسازید و آن را custom-editor-style.css نام گذاری کنید.
حال باید این فایل را در دایرکتوری اصلی قالب خود بارگذاری کنید و این کد را به فایل قالب functions.php خود اضافه کنید:
تمام. شما با موفقیت استایل های شخصی سازی شده خود را به ویرایشگر بصری وردپرس اضافه کردید. با خیال راحت با کد مربوطه بازی کنید و المان ها و استایل های خودتان را در آن قرار دهید.
منبع :پایگاه دانش یزد سرور
لینک
توجه: این آموزش نیاز دارد تا شما اطلاعات اولیه از CSS داشته باشید.
چرا و چه موقع شما به استایل های شخصی سازی شده برای ویرایشگر بصری وردپرس احتیاج دارید؟
به صورت پیش فرض وردپرس یک ویرایشگر بصری با یک سری گزینه های ابتدایی تغییرات و ویرایش دارد. اما گاهی اوقات شما ممکن است نیاز داشته باشید تا استایل های شخصی سازی شده توسط خودتان برای اضافه کردن دکمه های CSS، بلوک های مطالب، خطهای برچسب و غیره استفاده کنید.
شما می توانید همیشه از ویرایشگر بصری به ویرایشگر متن بروید و HTML و CSS شخصی سازی شده خود را اضافه کنید. اما اگر شما به طور معمول از بعضی استایل ها استفاده می کنید، پس بهتر است که این استایل ها را به ویرایشگر تصویر خود اضافه کنید تا راحت تر دوباره از آن ها استفاده کنید.
این باعث می شود در زمانی که برای جابجایی بین ویرایشگر متن و ویرایشگر بصری صرف می کنید صرفه جویی شود. همچنین این کار باعث می شود تا به صورت پیوسته از یک سری استایل در کل وب سایت خود استفاده کنید.
مهمتر از همه این است که شما به آسانی می توانید استایل ها را تغییر دهید و به روز رسانی کنید بدون این که نیاز داشته باشید پست های خود را در وب سایتتان ویرایش کنید. با گفتن این ها حال برویم و ببینیم چگونه می توان استایل های شخصی سازی شده را در ویرایشگر بصری وردپرس وارد کرد.
روش اول: اضافه کردن استایل های شخصی سازی شده در ویرایشگر بصری با استفاده از پلاگین
اولین کاری که باید انجام دهید این است که پلاگین TinyMCE Custom Styles را نصب و فعال کنید. بعد از فعال سازی، باید به صفحه Settings » TinyMCE Custom Styles سر بزنید تا تنظیمات پلاگین را انجام دهید.
این پلاگین به شما اجازه می دهد تا مکان فایل های استایل را مشخص کنید. این پلاگین می تواند از قالب شما و یا استایل های زیر مجموعه قالب شما استفاده کند و یا شما می توانید یک مکان به دلخواه خود انتخاب کنید.
بعد از آن، باید بر روی Save All Settings کلیک کنید تا تغییرات تنظیمات ذخیره شود.
حالا شما می توانید استایل های شخصی سازی شده خود را اضافه کنید. در همان صفحه پایین تر بیایید و در بخش style بر روی Add new style کلیک کنید. در ابتدا باید یک عنوان برای استایل خود انتخاب کنید. این عنوان در منوی کشویی نمایش داده خواهد شد. سپس باید انتخاب کنید که این استایل درون خطی است یا بلوک و یک المان انتخاب گر.
بعد از آن یک کلاس CSS اضافه کنید و قوانین CSS خود را این طور که در شکل زیر نشان داده شده است وارد کنید.
هنگامی که شما یک استایل CSS بر روی Save All Settings تا تنظیمات خود را ذخیره کنید. شما می توانید حالا یک پست جدید بسازید و یا یک پست قدیمی خود را ویرایش کنید. شما متوجه یک منوی کشویی با نام Formats در ردیف دوم ویرایشگر بصری وردپرس خواهید شد.
به سادگی یک بخشی از متن خود را در ویرایشگر انتخاب کنید و سپس از داخل منوی کشویی Formats، استایل شخصی سازی شده خود را انتخاب کنید تا تغییرات اعمال شود. شما اکنون می توانید پیش نمایش پست خود را ببینید و ببینید که آیا تغییرات به درستی اعمال شده اند یا خیر.
روش دوم: اضافه کردن دستی استایل های شخصی سازی شده به ویرایشگر بصری وردپرس
این روش به این نیاز دارد تا شما کد به فایل های وردپرس خود اضافه کنید. اگر اولین باری است که این کار را انجام می دهید، لطفا به آموزش ها و راهنماهای این کار مراجعه کنید تا این کار را درست انجام دهید.
قدم اول: اضافه کردن یک منوی کشویی استایل های شخصی سازی شده در ویرایشگر بصری وردپرس
اولین کاری که باید کنیم این است که یک منوی کشویی به ویرایشگر بصری وردپرس اضافه کنیم. این منوی کشویی به ما اجازه می دهد تا استایل های مورد نظرمان را انتخاب و اعمال کنیم.
شما باید کد زیر را در فایل قالب functions.php قرار دهید.
۱ function wpb_mce_buttons_2($buttons) {
۲ array_unshift($buttons, ‘styleselect’);
۳ return $buttons;
۴ }
۵ add_filter(‘mce_buttons_2’, ‘wpb_mce_buttons_2’);
قدم دوم: اضافه کردن گزینه های انتخاب در منوی کشویی
حال شما باید گزینه هایی را در منوی کشویی که ساخته اید اضافه کنید. شما بعد از این کار قادر خواهید بود که این گزینه ها را انتخاب و در پست خود اعمال کنید. برای این آموزش ما سه استایل شخصی سازی شده برای ایجاد بلوک های متنی و دکمه ها اضافه می کنیم.
شما باید کد زیر را در فایل قالب 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 در ویرایشگر بصری وردپرس کلیک کنید. شما خواهید دید که استایل های شخصی سازی شده اکنون در این منوی کشویی قابل مشاهده هستند. اما انتخاب این استایل ها هیچ گونه تغییری در ویرایشگر پست ایجاد نمی کند.
قدم سوم: اضافه کردن استایل های 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
ointer;۲۰ 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
ointer;۳۳ color:#ffffff;
۳۴ padding:6px 24px;
۳۵ text-decoration:none;
۳۶ }
این برگه استایل ویرایشگر، ظاهر مطالب شما در ویرایشگر بصری را کنترل می کند. اسناد قالب خود را کنترل کنید تا مکان این فایل را پیدا کنید.
اگر قالب شما یک فایل برگه استایل (stylesheet) نداشت، شما می توانید یک فایل بسازید. به راحتی یک فایل 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’ );
۲ add_editor_style( ‘custom-editor-style.css’ );
۳ }
۴ add_action( ‘init’, ‘my_theme_add_editor_styles’ );
تمام. شما با موفقیت استایل های شخصی سازی شده خود را به ویرایشگر بصری وردپرس اضافه کردید. با خیال راحت با کد مربوطه بازی کنید و المان ها و استایل های خودتان را در آن قرار دهید.
منبع :پایگاه دانش یزد سرور
لینک
