تغییر فونت ویرایشگر وردپرس

اگه از وردپرس استفاده می‌کنید و مثل من از شکل ظاهری ویرایشگرش ناراضی هستید، این نوشته برای شماست.

نمی‌دونم فقط من این طوریم یا شما هم با فونت Arial راحت نیستید.

من هر جا متنی با فونت Arial (یا فونت‌های مشابه) ببینم، قبل از انجام هر کاری فونت رو تغییر می‌دم.

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

ولی در ویرایشگر وردپرس مجبور بودم این وضعیت رو تحمل کنم.

معمولا مطالب رو در جای دیگه‌ای می‌نوشتم و صرفا برای ویرایش نهایی سراغ ویرایشگر وردپرس میومدم.

یه مدت دنبال افزونه‌هایی بودم که ویرایش رو در قسمت Front-End کار انجام بدن.
چندتایی‌شون رو امتحان کردم. ولی هر کدوم داستان خودشون رو داشتن. یه مشکل رو برطرف می‌کردن و ده تا مشکل دیگه اضافه می‌شد.

نهایتا بعد از امتحان کردن راهکارهای مختلف، متوجه شدم استایل ویرایشگر وردپرس قابل تغییره. (لینک مطلب اصلی:‌change the Gutenberg editor’s default font)

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

چطور فونت ویرایشگر وردپرس رو تغییر بدیم؟

کار خیلی ساده است. البته لازمه تا حدی با کدنویسی در وردپرس آشنا باشید.

سه تا کار باید انجام بدیم:

۱- از فایل Function.php یک بک آپ بگیرید.

۲- کد زیر رو به Function.php اضافه کنید.

/*-------------- تغییر استایل ویرایشگر----------*/
function paul_guten_block_editor_assets() {
	wp_enqueue_style(
		'paul-editor-style',
		get_stylesheet_directory_uri() . "/editor.css",
		array(),
		'۱.۰'
	);
}
add_action('enqueue_block_editor_assets', 'paul_guten_block_editor_assets');
/*-----------------------------------*/

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

function my_theme_add_editor_styles() {
    add_editor_style( '/editor.css' );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

/*--------------------------------*/

۳- فایلی با نام Editor.css ایجاد کنید و بعد از جایگذاری کدهای زیر، اون رو در پوشه تم اصلی (یا تم چایلد) سایتتون قرار بدین. (می‌تونید از طریق این لینک دانلودش کنید)

@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 900;
	src: url('fonts/eot/IRANSansWeb_Black.eot');
	src: url('fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('fonts/woff/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: bold;
	src: url('fonts/eot/IRANSansWeb_Bold.eot');
	src: url('fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 500;
	src: url('fonts/eot/IRANSansWeb_Medium.eot');
	src: url('fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('fonts/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 300;
	src: url('fonts/eot/IRANSansWeb_Light.eot');
	src: url('fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('fonts/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 200;
	src: url('fonts/eot/IRANSansWeb_UltraLight.eot');
	src: url('fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: normal;
	src: url('fonts/eot/IRANSansWeb.eot');
	src: url('fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('fonts/ttf/IRANSansWeb.ttf') format('truetype');
}

.editor-post-title__block .editor-post-title__input,
.edit-post-visual-editor, .edit-post-visual-editor p,strong , h1, h2, h3, h4, h5, h6, body#tinymce {
	font-family: "IRANSans", sans-serif;
}

.editor-post-title__block .editor-post-title__input {
	font-size: 30px;
	font-weight: 400;
	line-height: 50px;
	text-align: center;
}

.edit-post-visual-editor, .edit-post-visual-editor p,
.editor-rich-text__tinymce.mce-content-body {
	font-size: 20px;
	line-height: 30px;
}

با اعمال این تغییرات، فونت ویرایشگر شما به ایران سنس تغییر می‌کنه. البته می‌تونید با یه سری تغییر کوچیک در کدهای CSS، اون رو به فونت دلخواهتون تغییر بدین.

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

آپدیت جدید: کدهای بالا علاوه بر ویرایشگر گوتنبرگ، برای ویرایشگر کلاسیک هم جواب میدن.

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

این هم از نتیجه کار: