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

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

استفاده از هدرها برای تغییر قلم

همانطور که می‌دانید ویرایشگر بصری یک منوی کشویی دارد که در آن می‌توانید یک هدر (h1-h6) را انتخاب کنید. این منوی کشویی در واقع سایز قلم را بسته به قوانین نوشته شده در فایل CSS شما تغییر می‌دهد. بسیاری از وب سایت‌ها از این به عنوان روشی برای انتخاب سایز قلم استفاده می‌کنند. حتی در وبلاگ‌های حرفه‌ای نیز مشاهده شده است که بیان می‌کنند زمان نیاز به تغییر سایز قلم در وردپرس، از این روش استفاده نمایید. اما واقعیت این است که این هدرها برای تغییر سایز فونت‌ها نیستند!، بلکه برای ایجاد عناوین و ایجاد ویژگی سلسله مراتبی در صفحه وب شما هستند. موتورهای جستجو به آنچه در هر زیر عنوان اضافه می‌کنید بسیار علاقه مند هستند، بنابراین عاقلانه انتخاب کنید و برای تعیین سایز فونت، از آنها استفاده نکنید!

افزودن ویژگی امکان تغییر سایز قلم در وردپرس

به فایل function.php خود بروید و کد زیر را در آن کپی کنید:

    function scanwp_buttons( $buttons ) {
        
        array_unshift( $buttons, 'fontsizeselect' ); 
        return $buttons;
      }
    add_filter( 'mce_buttons_2', 'scanwp_buttons' );

افزودن ویژگی امکان انتخاب نوع قلم در وردپرس

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

    array_unshift( $buttons, 'fontselect' );


      function scanwp_buttons( $buttons ) {
        array_unshift( $buttons, 'fontselect' ); 
        array_unshift( $buttons, 'fontsizeselect' ); 
        return $buttons;
      }

اکنون اگر یک پست / صفحه جدید ایجاد کنید و ویرایشگر بصری خود را ببینید، انتخاب کننده سایز فونت را مشاهده خواهید کرد، اما در این انتخابگر، فاصله زیادی بین سایزهای قلم وجود دارد و از واحدهای pt استفاده می‌شود که خیلی جالب نیست. بنابراین، کاری که ما می‌خواهیم انجام دهیم این است که سایزها و واحدهای فونت سفارشی را اضافه کنیم. برای این کار، باید تابع زیر را به فایل function.php خود اضافه نمایید:

    function scanwp_font_size( $initArray ){
        $initArray['fontsize_formats'] = "9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px";
        return $initArray;
      }
    add_filter( 'tiny_mce_before_init', 'scanwp_font_size' );

اگر می‌خواهید سایزهای فونت بیشتری را اضافه کنید، کافی است درست مانند مثال قبل، یک فاصله بین هر سایز جدید اضافه نمایید.
حال اگر یک پست / صفحه جدید ایجاد کنید، در ویرایشگر بصری بخش زیر را مشاهده خواهید کرد:

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

منبع:

scanwp.net