خبرگزاری آیصد (جدیدترین و جذاب ترین اخبار ایران و جهان)

نشر توسط:admin Views 24 تاریخ : 31 ارديبهشت 1395

نظرات ()

یکی از سوالات پر طرفدار در طراحی سایت وردپرس افزودن فونت جدید در ویرایشگر دیداری tinymce است، این‌کار کمی پیچیده است ولی من آنرا در 5 مرحله به شما آموزش میدهم:

1. فونت جدید را در هاست آپلود نمایید (یا از سروری دیگر صدا نمایید)
2. ایجاد یک stylesheet جدید با اعلان فونت
3. افزودن stylesheet جدید به ویرایشگر دیداری tinymce
4. تعیین نام فونت جدید در dropdown ویرایشگر دیداری tinymce
5. افزودن stylesheet فونت جدید به front و end وردپرس

1. آپلود فونتوردپرس:

توسط ftp یا cpanel یه هاست دسترسی پیدا کرده و فونت مورد نظر را در پوشه ای از قالب خود کپی نمایید، همانطور که شاید اطلاع داشته باشید فونت شما که از این پس وب فونت می‌نامیم دارای 6 فرمت woff, woff2, ttf, otf, eot, svg است. جهت اطلاع از موارد استفاده از هر یک از این فرمت‌ها در مرورگرهای مختلف به web font سایت w3schools مراجعه نمایید. در این راستا مطالعه websafe font هم پیشنهاد میشود.

2. ایجاد stylesheet فونت جدید وردپرس:

کافیست کد زیر را در فایل custom-fonts.css ذخیره نمایید

@font-face {
    font-family: seaside;
    src: url('http://mysite.com/wp-content/custom-fonts/seaside.ttf') format('truetype');
}
@font-face {
    font-family: journal;
    src: url('http://mysite.com/wp-content/custom-fonts/journal.ttf') format('truetype');
}

 3. افزودن stylesheet به ویرایشگر tinymce وردپرس:

کد زیر را به فایل function.php اضافه نمایید

function load_custom_fonts($init) {

    $stylesheet_url = 'http://mysite.com/wp-content/custom-fonts/custom-fonts.css';

    if(empty($init['content_css'])) {
        $init['content_css'] = $stylesheet_url;
    } else {
        $init['content_css'] = $init['content_css'].','.$stylesheet_url;
    }

//Step 4

    return $init;
}
add_filter('tiny_mce_before_init', 'load_custom_fonts');

4.  تعیین نام فونت در dropdown ویرایشگر وردپرس:

کد زیر را به کدهای مرحله 3 اضافه نمایید، همان مکانی که با کامنت Step 4 مشخص شده است

$font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';  

$custom_fonts = ';'.'SeaSide=seaside;Journal=journal';

$init['font_formats'] = $font_formats . $custom_fonts;

 5. افزودن stylesheet فونت جدید به front و end وردپرس

توسط دو دستور add_action زیر stylesheet ایجاد شده در مرحله 2 را به front و end اضافه خواهیم کرد

function load_custom_fonts_frontend() {

    echo '< link type="text/css" rel="stylesheet" href="http://mysite.com/wp-content/custom-fonts/custom-fonts.css">';
}
add_action('wp_head', 'load_custom_fonts_frontend');
add_action('admin_head', 'load_custom_fonts_frontend');