افزودن استایل سفارشی به ویرایشگر دیداری وردپرس

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

افزودن استایل سفارشی به ویرایشگر دیداری وردپرس

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

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

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

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

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

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

و راهی که شما در اینجا در پیش رو دارید این است که به بخش متن ویرایشگر مطلب بروید و در آنجا از کد های Html و CSS برای ایجاد یک دکمه دانلود و یا برای دکمه های دیگر استفاده کنید که انجام این کار برای شما زمان بر و مشکل می باشد . در اینجا هدف تنها ایجاد دکمه ی دانلود نیست بلکه ایجاد هر دکمه و یا تغییرات دیگری در متن و شخصی سازی آن می باشد .

راه حل اساسی

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

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

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

قدم اول : اضافه کردن منوی کشویی استایل ها به ویرایشگر دیداری وردپرس

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

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

قدم دوم : افزودن گزینه های استایل به منوی ایجاد شده در ویرایشگر دیداری در وردپرس

در قدم دوم شما باید گزینه هایی را که می خواهید به منویی که در قدم اول ساخته اید اضافه نمایید و در واقع منظور از گزینه ها ، همان استایل هایی می باشد که شما می خواهید در بخش مطالب خود استفاده کنید . در اینجا ما سه گزینه به زیر منوی خود اضافه می کنیم . پس برای اضافه کردن این سه زیر منو باید قطعه کد زیر را در انتهای فایل 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,
 ),

هر کدام یک از این قطعه کد کوتاهی که مشاهده می کنید ، باعث می شود که زیر منوی جدیدی را اضافه می کند . درکد بالا در بخش title نام گزینه را تعیین می کنید و شما بر اساس نیاز خود این نام را در کد فوق تغییر می دهید و در بخش block می توانید تعیین کنید که عنصر و المانی که توسط این گزینه ایجاد می شود از چه نوعی می باشد ؟ مثلا div و … .

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

قدم سوم : افزودن استایل CSS

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

نمونه کد سفارشی

.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 درون پوشه قالب تون ایجاد کنید و سپس استایل سفارشی که برای فرمت بندی عناصر درون مطلب وردپرس تون ایجاد کرده اید را درون این فایل کپی کنید . در نهایت کار شما در اینجا به پایان می رسد !!! دوستان عزیز امیدوارم تا انتهای این آموزش خسته نشده باشید و با ادامه اموزش های بیگ تم با ما همراه شوید . از شما دوستان عزیز که تا انتهای این آموزش طولانی وردپرس با ما بودین کمال تشکر را دارم .
موفق و پیروز باشید .

منبع : بیگ تم ارائه دهنده قالب شخصی وردپرس و قالب پزشکی وردپرس