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

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

اکنون، ممکن است بدانید که این توانایی را دارید که بین ویرایشگرهای متن و ویژوال در وردپرس به عقب و جلو بپرید و مقداری CSS برای ایجاد چیزهایی مانند دکمه‌ها و بلوک‌های متنی وارد کنید، اما این یک دردسر است، و اگر این کار را انجام ندهید. در ویرایش کد تجربه زیادی ندارم، ویرایشگر متن کمی ترسناک به نظر می رسد.

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

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

با افزودن کد، سبک های سفارشی را به ویرایشگر تصویری وردپرس اضافه کنید

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

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

تابع myprefix_mce_buttons_1( $buttons ) {
	array_unshift($buttons, 'styleselect');
	بازگشت $buttons;
}

add_filter('mce_buttons_1', 'myprefix_mce_buttons_1');

در یکی از پست‌های وردپرس خود به ویرایشگر بازگردید و اکنون باید یک دکمه جدید “Formats” را در ردیف بالای ویرایشگر ببینید. توجه کنید که چگونه به «mce_buttons_1» متصل شدیم؟ این دکمه منوی فرمت ها را در ردیف اول ویرایشگر mce قرار می دهد. همچنین می‌توانید از فیلتر «mce_buttons_2» برای قرار دادن آن در ردیف دوم یا «mce_buttons_3» برای قرار دادن آن در ردیف سوم استفاده کنید.

بنابراین، اکنون که آیتم منو را فعال کرده اید، زمان آن رسیده است که سبک های سفارشی خود را برای استفاده در پست های خود اضافه کنید. کد فهرست شده در زیر را بردارید و آن را در فایل functions.php خود جای‌گذاری کنید که 2 سبک جدید را به منوی کشویی Formats اضافه می‌کند – «دکمه تم» و «برجسته».

/**
 * سبک های سفارشی را به منوی کشویی فرمت های mce اضافه کنید
 *
 * @url https://codex.wordpress.org/TinyMCE_Custom_Styles
 *
 */
تابع myprefix_add_format_styles($init_array ) {
	$style_formats = آرایه(
		// هر فرزند آرایه یک قالب با تنظیمات خاص خود است - هر تعداد که می خواهید اضافه کنید
		آرایه(
			'title' => __( 'دکمه تم'، 'متن-دامنه')، // عنوان برای کشویی
			'selector' => 'a'، // عنصر مورد نظر در ویرایشگر
			'classes' => 'theme-button' // نام کلاس مورد استفاده برای CSS
		)
		آرایه(
			'title' => __( 'برجسته'، 'text-domain')، // عنوان برای کشویی
			'inline' => 'span'، // یک فاصله در اطراف محتوای انتخاب شده بپیچید
			'classes' => 'text-highlight' // نام کلاس مورد استفاده برای CSS
		)
	)
	$init_array['style_formats'] = json_encode( $style_formats );
	بازگشت $init_array;
} 
add_filter('tiny_mce_before_init', 'myprefix_add_format_styles');

می‌توانید عناوین را تغییر دهید تا نام‌های مختلف را در منوی کشویی خود نشان دهید، موارد را از آرایه اضافه/حذف کنید، و غیره. می‌توانید تقریباً هر چیزی را در این کد تغییر دهید تا سبک‌های قالب سفارشی خود را نشان دهید، حتماً WordPress Codex برای توضیح عمیق‌تر پارامترهای پذیرفته شده و مقادیر بازگشتی.

اکنون که سبک‌های جدیدی دارید، می‌توانید محتوا را در ویرایشگر خود برجسته کرده و سبک‌ها را اعمال کنید. توجه داشته باشید، چگونه فرمت “دکمه تم” پارامتر انتخابگر دارد؟ این بدان معناست که استایل را فقط می توان برای آن انتخابگر خاص اعمال کرد (در این مورد تگ “a” یا “link”). قالب دومی که ما «Highlight» اضافه کردیم، پارامتر انتخابگر ندارد، بلکه یک پارامتر «داخلی» دارد که به آن می‌گوید سبک را به هر متنی که در ویرایشگر خود برجسته کرده‌اید اعمال کند و آن را در یک بازه با نام کلاس منحصربه‌فرد خود بپیچد. می‌توانید نمونه‌ای از تمام قالب وردپرس در مورد نحوه استفاده ما ببینید. قالب‌هایی که کاربران می‌توانند به راحتی یک فهرست چک را اعمال کنند برای هر گلوله‌ای در ویرایشگر.

بنابراین اکنون می‌توانید از قالب‌های سفارشی‌تان استفاده کنید، اما تا زمانی که مقداری CSS سفارشی برای استایل دادن به آن‌ها به سایت خود اضافه نکنید، تفاوتی با هم ندارند. شما باید شیوه نامه طرح زمینه خود (اگر طرح زمینه خود را بسازید) یا طرح زمینه فرزند را پیدا کنید و کد CSS زیر را در فایل قرار دهید.

.theme-button {
	صفحه نمایش: inline-block;
	بالشتک: 10 15 پیکسل;
	رنگ: #fff;
	پس زمینه: #1796c6;
	text-decoration: هیچ;
}
.theme-button:hover {
	text-decoration: هیچ;
	Opacity: 0.8;
}
.text-highlight {
	پس زمینه: #FFFF00;
}

اکنون، این استایلی را به فرمت‌های جدید شما برای قسمت جلویی اضافه می‌کند تا در صورت اعمال بتوانید آنها را به صورت زنده ببینید. آری اما آیا خوب نیست که هنگام اعمال استایل های خود را در ویرایشگر واقعی مشاهده کنید؟ برای انجام این کار باید از تابع “ویرایشگر شیوه نامه” در وردپرس استفاده کنید. اگر در حال ساخت تم خود هستید، می‌خواهید یک فایل css جدید در قالب خود به نام “editor-style.css” ایجاد کنید (می‌توانید نام آن را هر چه می‌خواهید بگذارید، فقط مطمئن شوید که قطعه زیر را متناسب با آن ویرایش کنید) با CSS سفارشی برای فرمت‌های شما اضافه شده و سپس تابع زیر را اضافه کنید تا در باطن بارگیری شود.

function myprefix_theme_add_editor_styles() {
    add_editor_style('editor-style.css');
}
add_action('init', 'myprefix_theme_add_editor_styles' );

اگر با طرح زمینه شخص دیگری کار می‌کنید، باید آن را در طرح زمینه فرزند خود اضافه کنید، فقط مطمئن شوید که یک نام منحصربه‌فرد به آن بدهید تا با طرح زمینه اصلی شما در تضاد نباشد یا اگر طرح زمینه والدین شما قبلاً دارای یک طرح زمینه است. فایل CSS را برای ویرایشگر می‌توانید در واقع آن را کپی کرده و در طرح زمینه فرزند خود جای‌گذاری کنید (بدون افزودن کد PHP در بالا) سپس CSS جدید خود را اضافه کنید زیرا وردپرس قبل از بارگیری فایل CSS ویرایشگر طرح زمینه والد، ابتدا موضوع فرزند را بررسی می‌کند. در عوض آن را از طرح زمینه فرزند بارگیری می کند.

با یک افزونه زیبا، سبک های سفارشی را به ویرایشگر تصویری وردپرس اضافه کنید

اگر وقت ندارید با کد بازی کنید، یا خودتان نمی توانید آن را بفهمید، خبر خوبی وجود دارد. افزونه‌ای وجود دارد که به شما امکان می‌دهد دقیقاً همان کاری را که در بالا انجام دادیم بدون نیاز به پیچاندن کد انجام دهید.

به سادگی افزونه TinyMCE Custom Styles را جستجو، نصب و فعال کنید و آن را فعال کنید در سایت وردپرس شما.

به Settings > TinyMCE prof.styles در سمت چپ داشبورد وردپرس خود بروید. اینجاست که تنظیمات خود را برای افزونه تغییر می‌دهید.

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

هنگامی که تنظیمات را ذخیره کردید، به پایین بروید تا دکمه افزودن سبک جدید را انتخاب کنید.

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

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

روی گزینه Big Blue Button یا هر چیزی که ایجاد کردید کلیک کنید تا آن را در ویرایشگر خود مشاهده کنید. برای استفاده از آن به سادگی متنی را که می‌خواهید قالب‌بندی شود برجسته کنید، سپس روی گزینه و voila خود کلیک کنید!

نتیجه گیری

فعلاً همین است! همیشه می‌توانید با بررسی صفحه کدکس وردپرس که به این موضوع اختصاص دارد، درباره نحوه استفاده از استایل‌های جدید بیشتر بدانید.

اگر سؤالی در مورد نحوه افزودن سبک های سفارشی به ویرایشگر بصری وردپرس دارید، در بخش نظرات با ما در میان بگذارید. و با خیال راحت هر سبک غیرمعمولی را که ایجاد کرده اید به اشتراک بگذارید تا سایت خود کمی زیباتر به نظر برسد!