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

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

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

قبل از افزودن فونت فارسی به پیشخوان وردپرس چه چیزهایی لازم دارید؟

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

انتخاب فونت فارسی و بررسی مجوز استفاده از اون

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

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

آماده‌کردن فایل فونت با فرمت WOFF2 و وزن‌های موردنیاز

برای مرورگرهای امروزی، فرمت WOFF2 انتخاب جمع‌وجور و مناسبی برای فونت وب هست. لازم نیست همه وزن‌های موجود در بسته فونت رو بارگذاری کنید. برای شروع، یک وزن معمولی مثل ۴۰۰ و یک وزن ضخیم مثل ۷۰۰ اغلب نیازهای پیشخوان رو پوشش می‌ده؛ ولی بهتره وزن‌ها رو بر اساس ظاهر واقعی پنل و مجوز بسته خودتون انتخاب کنید.

توی این آموزش فرض می‌کنیم دو فایل زیر رو دارید:

• mihan-admin-regular.woff2 برای وزن ۴۰۰
• mihan-admin-bold.woff2 برای وزن ۷۰۰

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

قبل از تغییر فایل‌های PHP، از سایتتون نسخه پشتیبان بگیرید. کد رو داخل قالب اصلی نذارید؛ چون آپدیت قالب می‌تونه اون رو پاک کنه. برای نگه‌داشتن تغییرات، از قالب فرزند یا یک افزونه اختصاصی ساده استفاده کنید.

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

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

ساخت پوشه فونت و قراردادن فایل‌ها داخل اون

داخل قالب فرزندتون یک پوشه به نام assets بسازید. داخل اون هم دو پوشه css و fonts بسازید. فایل‌های WOFF2 رو داخل پوشه fonts قرار بدید.

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

تعریف فونت با قانون @font-face در یک فایل CSS جدا

قانون @font-face به مرورگر می‌گه فایل فونت کجاست و هر فایل چه وزن و حالتی داره. داخل پوشه assets/css فایلی به نام admin-font.css بسازید و تعریف وزن‌های موردنیاز رو داخل اون بذارید.

مسیر ../fonts/ یعنی مرورگر از پوشه css یک مرحله برگرده و بعد وارد پوشه fonts بشه. تا وقتی جای پوشه‌های css و fonts نسبت به هم عوض نشه، این مسیر بعد از انتقال سایت هم به دامنه یا آدرس لوکال وابسته نیست.

فراخوانی فایل CSS در پیشخوان با admin_enqueue_scripts

هوک admin_enqueue_scripts نقطه‌ایه که وردپرس برای بارگذاری فایل‌های CSS و JavaScript پیشخوان در اختیارتون می‌ذاره. هوک یعنی جایی از اجرای وردپرس که می‌تونید تابع خودتون رو به اون وصل کنید. فایل CSS رو با wp_enqueue_style() فراخوانی می‌کنیم تا وردپرس آدرس و ترتیب بارگذاری اون رو مدیریت کنه.

اعمال فونت روی منوها، فرم‌ها و بخش‌های مختلف پیشخوان

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

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

چرا فونت پیشخوان داخل ویرایشگر نمایش داده نمی‌شه؟

صفحه ویرایش نوشته دو بخش جدا داره: رابط کاربری وردپرس و محتوای قابل ویرایش. در نسخه‌های جدید وردپرس، محتوای ویرایشگر بلوکی می‌تونه داخل iframe نمایش داده بشه. iframe یعنی یک صفحه جدا که داخل صفحه اصلی قرار گرفته. به همین دلیل، فایل admin-font.css می‌تونه منوها و دکمه‌های اطراف ویرایشگر رو تغییر بده، ولی نباید فرض کنید استایل اون خودکار به محتوای قابل ویرایش هم می‌رسه.

اگه تازه با این محیط آشنا شدید، آموزش کار با بلوک‌های گوتنبرگ می‌تونه یک نمونه عملی از کار با ویرایشگر بلوکی رو بهتون نشون بده.

اضافه‌کردن فونت به محیط Editor Styles

Editor Styles یا «استایل‌های ویرایشگر» راه قالب برای فرستادن CSS به محتوای ویرایشگره. اول پشتیبانی از این قابلیت رو با add_theme_support( 'editor-styles' ) فعال می‌کنیم. بعد فایل editor-font.css رو با add_editor_style() به ویرایشگر معرفی می‌کنیم.

نمایش فونت داخل ویرایشگر iframe

فایل معرفی‌شده از راه Editor Styles به محیط محتوای ویرایشگر اضافه می‌شه و در حالت iframe هم داخل همون محیط بارگذاری می‌شه. برای همین باید تعریف @font-face و قانون اعمال فونت رو داخل editor-font.css هم داشته باشید. فقط اضافه‌کردن کلاس‌های داخلی ویرایشگر به فایل CSS پیشخوان راه قابل اتکایی نیست؛ چون اون کلاس‌ها ممکنه تغییر کنن و CSS بیرون iframe هم به محتوای داخل اون دسترسی نداره.

کد کامل افزودن فونت فارسی به پنل مدیریت وردپرس

ساختار پیشنهادی فایل‌ها

your-child-theme/
├── functions.php
└── assets/
    ├── css/
    │   ├── admin-font.css
    │   └── editor-font.css
    └── fonts/
        ├── mihan-admin-regular.woff2
        └── mihan-admin-bold.woff2

your-child-theme فقط یک نام نمونه‌ست. شما باید این فایل‌ها رو داخل پوشه قالب فرزند فعال سایتتون بسازید.

کد PHP برای بارگذاری فایل استایل

کد زیر رو به فایل functions.php قالب فرزند اضافه کنید.

اگه فایل از قبل با <?php شروع شده، دوباره این عبارت رو وسط فایل ننویسید.

function mihanwp_enqueue_admin_font() {
    $css_file = get_stylesheet_directory() . '/assets/css/admin-font.css';

    wp_enqueue_style(
        'mihanwp-admin-font',
        get_stylesheet_directory_uri() . '/assets/css/admin-font.css',
        array(),
        file_exists( $css_file ) ? filemtime( $css_file ) : null
    );
}
add_action( 'admin_enqueue_scripts', 'mihanwp_enqueue_admin_font' );

function mihanwp_add_editor_font_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-font.css' );
}
add_action( 'after_setup_theme', 'mihanwp_add_editor_font_styles' );

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

کد CSS برای تعریف و اعمال فونت

کد زیر رو داخل فایل admin-font.css قرار بدید:

@font-face {
    font-family: 'MihanAdminFont';
    src: url('../fonts/mihan-admin-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'MihanAdminFont';
    src: url('../fonts/mihan-admin-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

body,
button,
input,
select,
textarea,
.wp-core-ui {
    font-family: 'MihanAdminFont', Tahoma, Arial, sans-serif;
}

بعد فایل editor-font.css رو بسازید و این کد رو داخل اون بذارید:

@font-face {
    font-family: 'MihanAdminFont';
    src: url('../fonts/mihan-admin-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'MihanAdminFont';
    src: url('../fonts/mihan-admin-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

body {
    font-family: 'MihanAdminFont', Tahoma, Arial, sans-serif;
}

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

تغییر نام فونت، مسیر فایل و وزن‌ها در نمونه کد

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

• نام MihanAdminFont باید در همه قانون‌های @font-face و font-family یکسان باشه.
• نام فایل‌های نوشته‌شده در url() باید دقیقاً با فایل‌های پوشه fonts یکی باشه.
• عدد font-weight باید وزن واقعی همون فایل رو نشون بده. یک فایل Regular رو با وزن ۷۰۰ معرفی نکنید.

اگه فقط یک وزن دارید، قانون وزن دوم رو حذف کنید. اگه وزن دیگه‌ای مثل ۵۰۰ لازم دارید، یک @font-face جدا با فایل و وزن درست بسازید.

کدها رو کجا قرار بدید تا با آپدیت قالب پاک نشن؟

روش اول: استفاده از قالب فرزند

اگه فونت پیشخوان بخشی از تنظیمات ظاهری قالب شماست، قالب فرزند انتخاب ساده‌ایه. فایل‌های PHP، CSS و فونت رو داخل قالب فرزند می‌ذارید و با آپدیت قالب اصلی از بین نمی‌رن.

یادتون نره که این روش به فعال‌بودن همون قالب فرزند وابسته‌ست. اگه قالب سایت رو عوض کنید، کد بارگذاری فونت هم غیرفعال می‌شه.

روش دوم: ساخت یک افزونه اختصاصی ساده

اگه می‌خواید فونت رابط پیشخوان با تغییر قالب هم باقی بمونه، یک افزونه اختصاصی ساده انتخاب بهتریه. داخل پوشه wp-content/plugins پوشه‌ای مثل mihanwp-admin-font بسازید. فایل اصلی افزونه و پوشه‌های assets/css و assets/fonts رو هم داخل اون قرار بدید.

mihanwp-admin-font/
├── mihanwp-admin-font.php
└── assets/
    ├── css/
    │   └── admin-font.css
    └── fonts/
        ├── mihan-admin-regular.woff2
        └── mihan-admin-bold.woff2

کد زیر رو داخل فایل mihanwp-admin-font.php بذارید. بعد وارد بخش «افزونه‌ها» در پیشخوان بشید و افزونه‌ای رو که ساختید فعال کنید.

<?php
/**
 * Plugin Name: MihanWP Admin Font
 * Description: Loads a custom font in the WordPress admin area.
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function mihanwp_plugin_enqueue_admin_font() {
    $css_file = plugin_dir_path( __FILE__ ) . 'assets/css/admin-font.css';

    wp_enqueue_style(
        'mihanwp-plugin-admin-font',
        plugin_dir_url( __FILE__ ) . 'assets/css/admin-font.css',
        array(),
        file_exists( $css_file ) ? filemtime( $css_file ) : null
    );
}
add_action( 'admin_enqueue_scripts', 'mihanwp_plugin_enqueue_admin_font' );

فایل admin-font.css و فونت‌ها همون ساختاری رو دارن که بالاتر دیدید. این نمونه فقط فونت رابط پیشخوان رو بارگذاری می‌کنه. برای استایل محتوای ویرایشگر، هماهنگی با قالب مهمه. پس اگه هدفتون اینه که نوشته داخل ویرایشگر شبیه ظاهر واقعی سایت دیده بشه، بهتره Editor Styles رو در قالب فرزند نگه دارید.

کدوم روش برای شما مناسب‌تره؟

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

چطور مطمئن بشید فونت درست بارگذاری شده؟

بررسی فونت با ابزار Inspect مرورگر

یکی از متن‌های پیشخوان رو پیدا کنید، روی اون راست‌کلیک کنید و گزینه Inspect رو بزنید. پنل ابزار توسعه‌دهنده مرورگر باز می‌شه. در بخش Styles دنبال قانون font-family بگردید. بخش Computed هم نتیجه نهایی محاسبه‌شده برای همون عنصر رو نشون می‌ده و از اونجا می‌تونید فونت استفاده‌شده رو بررسی کنید.

اگه قانون شما خط خورده، یک قانون دیگه اولویت بیشتری داره. انتخاب‌گر همون بخش رو کمی دقیق‌تر کنید. استفاده فوری از !important رو به آخرین راه بسپارید؛ چون بعداً تغییر و نگه‌داری CSS رو سخت می‌کنه.

پیداکردن خطاهای مسیر فایل در تب Console و Network

ابزار توسعه‌دهنده مرورگر رو باز کنید و وارد تب Network بشید. این بخش درخواست‌های فایل‌ها رو نشون می‌ده. صفحه رو تازه‌سازی کنید و عبارت woff2 یا بخشی از نام فونت رو جست‌وجو کنید. پاسخ موفق معمولاً با کد ۲۰۰ دیده می‌شه. خطای ۴۰۴ یعنی مرورگر فایل رو در آدرس نوشته‌شده پیدا نکرده.

تب Console رو هم بررسی کنید. این بخش پیام‌ها و بعضی خطاهای دسترسی، سیاست امنیتی یا بارگذاری فایل رو نشون می‌ده. برای تشخیص مشکل فقط به ظاهر متن تکیه نکنید؛ چون ممکنه فونت مشابهی از سیستم خودتون نمایش داده شده باشه.

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

پیشخوان و یک نوشته رو در دست‌کم دو مرورگر بررسی کنید. اگه به مرورگر دیگه دسترسی ندارید، یک پنجره ناشناس باز کنید تا اثر بخشی از کش و افزونه‌های مرورگر کمتر بشه. بهتره حساب یک نویسنده یا ویرایشگر رو هم آزمایش کنید؛ چون صفحه‌ها و دسترسی‌های اون با مدیر فرق داره.

رفع مشکلات رایج فونت فارسی در پیشخوان وردپرس

فونت اعمال شده ولی بعضی بخش‌ها هنوز تغییر نکردن

بعضی افزونه‌ها یا صفحه‌های مدیریت، فونت خودشون رو با انتخاب‌گر دقیق‌تری اعمال می‌کنن. بخش تغییرنکرده رو با Inspect بررسی کنید و فقط انتخاب‌گر لازم رو به admin-font.css اضافه کنید. بهتره کلاس‌های عمومی و پایدار همون افزونه رو هدف بگیرید و به کلاس‌های موقتی یا تولیدشده وابسته نشید.

فونت داخل ویرایشگر بلوکی نمایش داده نمی‌شه

اول بررسی کنید که add_theme_support( 'editor-styles' ) و add_editor_style() اجرا می‌شن. بعد در ابزار توسعه‌دهنده بررسی کنید که فایل editor-font.css به محیط محتوای ویرایشگر رسیده یا نه. اگه ویرایشگر از iframe استفاده می‌کنه، باید خود iframe رو انتخاب کنید و فایل‌های بارگذاری‌شده داخل اون رو ببینید. وجود فونت در رابط بیرونی ویرایشگر به معنی بارگذاری اون داخل محتوا نیست.

فایل فونت با خطای ۴۰۴ یا دسترسی روبه‌رو می‌شه

نام فایل، پسوند، حروف بزرگ و کوچک و مسیر ../fonts/ رو بررسی کنید. مطمئن بشید فایل واقعاً روی سرور قرار گرفته و وب‌سرور اجازه خوندن اون رو داره. مجوز فایل‌ها رو بدون شناخت تنظیمات هاست تغییر ندید. اگه درباره دسترسی مطمئن نیستید، از پشتیبانی هاست بخواید مسیر و دسترسی فایل رو بررسی کنه. اگه وردپرس موقع آپلود فرمت فونت رو قبول نمی‌کنه، فایل رو از راه مدیریت فایل هاست یا SFTP داخل پوشه مشخص‌شده قرار بدید. تغییر سراسری فرمت‌های مجاز آپلود فقط برای این کار ضروری نیست.

بعد از انتقال سایت، فونت دیگه بارگذاری نمی‌شه

اگه داخل CSS آدرس کامل دامنه یا localhost نوشته باشید، بعد از انتقال سایت مسیر خراب می‌شه. از مسیر نسبی ../fonts/ داخل CSS و توابع پویای وردپرس داخل PHP استفاده کنید. یادتون نره که ساختار پوشه‌های CSS و فونت باید بعد از انتقال هم حفظ بشه. بعد از انتقال، کش مرورگر و هر لایه کش سایت رو هم پاک کنید.

تغییرات به‌خاطر کش مرورگر دیده نمی‌شن

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

فونت بعد از آپدیت قالب حذف می‌شه

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

چطور سرعت پیشخوان رو بعد از افزودن فونت حفظ کنید؟

فونت سفارشی درخواست شبکه و حجم دانلود داره، ولی با چند انتخاب ساده می‌تونید اثر اون رو محدود نگه دارید:

• از WOFF2 استفاده کنید: این فرمت برای استفاده در وب طراحی شده و معمولاً حجم مناسبی داره.
• فقط وزن‌های لازم رو بارگذاری کنید: هر وزن یک فایل و یک درخواست جداست. وزن‌هایی رو که در پیشخوان استفاده نمی‌شن حذف کنید.
• فونت رو به صفحه‌های مدیریت محدود کنید: هوک admin_enqueue_scripts فایل CSS رو در پیشخوان بارگذاری می‌کنه و ظاهر عمومی سایت رو بی‌دلیل درگیر نمی‌کنه.
• حجم و تعداد درخواست‌ها رو اندازه بگیرید: تب Network اندازه هر فایل و زمان دریافت اون رو نشون می‌ده. قبل و بعد از افزودن فونت، نتیجه رو مقایسه کنید.

font-display: swap کمک می‌کنه متن تا زمان آماده‌شدن فونت سفارشی پنهان نمونه. اگه درباره این مشکل در بخش عمومی سایت هم سؤال دارید، راهنمای رفع خطای نمایش‌ندادن متن هنگام بارگذاری فونت رو ببینید.

جمع‌بندی

برای افزودن فونت فارسی به پنل مدیریت وردپرس، فایل WOFF2 رو داخل قالب فرزند یا افزونه اختصاصی قرار بدید، فونت رو با @font-face تعریف کنید و فایل CSS پیشخوان رو با admin_enqueue_scripts فراخوانی کنید. برای محتوای ویرایشگر بلوکی هم یک فایل جدا رو از راه Editor Styles بارگذاری کنید؛ چون نباید فرض کنید CSS معمولی پیشخوان به محیط محتوای ویرایشگر هم می‌رسه.

بعد از انجام کار، نتیجه رو فقط با نگاه‌کردن بررسی نکنید. تب‌های Network و Console و بخش Computed ابزار Inspect بهتون نشون می‌دن فایل واقعاً دریافت شده و مرورگر از همون فونت استفاده می‌کنه. با مسیرهای نسبی، وزن‌های محدود و نگه‌داشتن کد بیرون قالب اصلی، این تغییر بعد از انتقال سایت و آپدیت قالب هم قابل مدیریت می‌مونه.

سؤال‌های متداول

تیم تولید محتوا

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