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

212 بازدید
پنج شنبه ۱۸ شهریور ۱۳۹۵
آموزش اضافه کردن استایل های دلخواه به ویرایشگر دیداری وردپرسReviewed by جواد نبوی on Sep 8Rating: 5.0

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

اضافه کرده استایل های دلخواه به ویرایشگر دیداری وردپرس

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

توجه: برای شروع این آموزش، نیاز به آشنایی مقدماتی با CSS دارید. مثلا بتوانید کلاس تعریف کنید و در CSS به آن استایل دهید.

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

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

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

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

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

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

در عکس بالا میبینید که من چه گزینه هایی به منوی خودم اضافه کردم.

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

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

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

استایل های سفارشی دلخواه در ویرایشگر دیداری وردپرس

اگر میخواهید به بخش نظرات سایت خود استایل های دلخواه و سفارشی بدهید حتما مقاله استایل دهی به نظرات وردپرس را ببینید.

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *