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

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

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

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

قبل از شروع بحث این را بگوییم که بهتر است شما مقداری با کد های css آشنایی داشته باشید تا این مطلب را بهتر درک کنید و همچنین بتوانید بدون رفتن به قسمت ویرایش نوشته ها، در همان برگه ویرایشگر دیداری به دادن استایل مورد نظر خود مشغول شوید.

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

به طور پیش فرض، بخش ویرایشگر دیداری ، خود دارای استایل و ابزار هایی از نظیر تغییر رنگ، تغییر سایز و…  برای متن مطالبتان است که و عناصر مختلفی در آن وجود دارد که مطمعنا با آن ها سر و کار داشته اید. اما اگر متوجه شده باشید، این قابلیت ها خیلی محدود و راضی کننده نیستند و پس از مدتی باعث بی رنگ و روح شدن مطالبتان برای خود و کاربران می شود. به طور مثال شما اگر بخواهید یک دکمه با ظاهری که مورد نظرتان هست ایجاد کنید، باید از طریق نوشتن کد اقدام نمایید وگرنه انجام این کار از قسمت ویرایشگر دیداری امکان پذیر نیست. مطمعنا کد زدن به صورت html  و css  هم برای شما وقت گیر و خسته کننده خواهد بود. به طور مثال شما در یک برگه می خواهید 5 تا دکمه با طرح های متخلف بزارید. در این حال باید 5 قطعه کد از خود تولید کنید که این  کار مطمعنا باب میل شما نیست. در این مطلب هدف فقط ایجاد دکمه نیستو بلکه ایجاد هر بخش و استایلی است که شما نیاز دارید. یکی از خوبی هایی که این آموزش دارد این است که شما می توانید با افزودن استایل های خود، آن ها را  بروزرسانی کنید.

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

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

مرحله اول

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

<?php function wpb_mce_buttons_2($buttons) { array_unshift($buttons, 'styleselect'); return $buttons; } add_filter('mce_buttons_2', 'wpb_mce_buttons_2'); ?>

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

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

در این قسمت ما 3 گزینه به منو خود اضافه می کنیم. برای اضافه کردن این 3 گزینه باید قطعه کد زیر را در آخر فایل  functions.php قالب وردپرس تان اضافه کنید:

<?php /* * Callback function to filter the MCE settings */ function my_mce_before_init_insert_formats( $init_array ) { $style_formats = array( /* * هر آرایه عنوان، بلوک و کلاس های مخصوص به خودش را دارد * title عنوانی است که درون منوی کشویی به عنوان یک گزینه فرمت بندی نشان داده می شود * Block نوع بلوک را مشخص می کند * Class ها اجازه تعریف کلاس های سی اس اس را می دهند */ array( 'title' => 'بلوک متنی', 
 'block' => 'span', 
 'classes' => 'content-block',
 'wrapper' => true,
  
 ), 
 array( 
 'title' => 'دکمه سبز', 
 'block' => 'span', 
 'classes' => 'blue-button',
 'wrapper' => true,
 ),
 array( 
 'title' => 'دکمه قرمز', 
 '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' ); 
?>

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

array( 
 'title' => 'دکمه قرمز', 
 'block' => 'span', 
 'classes' => 'red-button',
 'wrapper' => true,
 ),

هر کدام یک از این نمونه قطعه کدی که مشاهده می کنید، به معنای ایجاد یک زیر منو می باشد. در قسمت کد بالا در بخش tittle شما باید عنوان استایل و یا اسم گزینه را وارد نمایید، در قسمت block می توانید مشخص کنید که عنصر یا المانی که ساخته می شود از چه نوعی باشد(مثل div)،

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

مرحله سوم: اضافه کردن استایل های css

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

.content-block { 
 border:1px solid #ddd; 
 padding:3px;
 background:#ccc;
 max-width:250px;
 float:right; 
 text-align:right;
}
.content-block:after { 
 clear:both;
} 
.blue-button { 
 background-color:#33bdef;
 padding:6px 30px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:5px;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 text-decoration:none;
}
 
.red-button {
 background-color:#bc3315;
 padding:6px 30px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:5px;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 text-decoration:none;
}

اگر به قطعه کد بالا توجه کنید مشاهده خواهید کرد که به سه بخش red-button – blue-button و content-block استایل مورد نظر خود را اضافه کردیم و ظاهر آن ها را مطابق سلیقه خود تغییر دادیم. پس از انجام تمامی این مراحل  و ذخیره تغییرات آن ها نوبت آن است که به ویرایشگر دیداری خود بروید و پس از انتخاب قسمتی از متن مطلب تان باید یکی از زیر  منو های جدیدی را که ایجاد نموده ایم را  انتخاب کنید و استایل خود را پیاده سازی نمایید و در نهایت نتیجه مشاهده  شده را ذخیره نمایید و سپس آن را نمایش دهید و از استایل های خود لذت ببرید.

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

<?php function my_theme_add_editor_styles() { add_editor_style( 'post-editor-style.css' ); } add_action( 'init', 'my_theme_add_editor_styles' ); ?>

و در آخر یک  فایل به  اسم post-editor-style.css در درون پوشه پوسته تان ایجاد نمایید و سپس تمام استایل هایی را که برای قالب بندی المان ها و عناصر درون پست های تان ایجاد کرده اید را  در این فایل کپی و پیست کنید.

امیدواریم از این آموزش بهره کافی را برده باشید.

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