علیرضا صادقی
1 سال پیش توسط علیرضا صادقی مطرح شد
12 پاسخ

بخش تنظیمات فونت قالب در Redux

سلام دوستان
من درحال ایجاد تنظیمات قالب برای قالب وردپرسی هستم با استفاده از Redux این کار را انجام دادم
برای بخش تنظیمات فونت قالب نیاز به راهنماییی دارم . صفحه مربوط به تنظیمات فونت را ایجاد کردم و فونت هارا داخل فایل Fonts قالبم قرار دادم میخوام بدونم چجوری باید اسم فونت هایی که داخل صفحه تنظیمات قالبم قرار دادم و قرار است کاربر هرکدام را خواست انتخاب کند را به فایل فونت وصل کنم و فونت کل قالب تغییر کنه
باتشکر


ثبت پرسش جدید
مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش مطرح شد
0

سلام مجدد ، حتما 🖐️

ابتدا، مشکل در اضافه کردن فونت‌ها به وب‌سایت رو حل میکنیم

function enqueue_custom_fonts() {
    wp_enqueue_style('custom-styles', get_template_directory_uri() . '/styles.css');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff2');
    // و سایر wp_enqueue_style ها...
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

باید از wp_enqueue_style برای هر فونت جداگانه استفاده کنی و نه همه فونت‌ها را در یک wp_enqueue_style. به این صورت:

function enqueue_custom_fonts() {
    wp_enqueue_style('custom-styles', get_template_directory_uri() . '/styles.css');
    wp_enqueue_style('custom-font-dana', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff');
    wp_enqueue_style('custom-font-dana2', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff2');
    // و سایر wp_enqueue_style ها...
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

در فایل style.css، به جای ؟؟؟؟؟؟؟ نام فونت را قرار بده که می‌خواهی استفاده کنی . به عنوان مثال، اگر فونت‌ها را با نام custom-font-dana و custom-font-sans و غیره فراخوانی کردی، باید نام فونت‌ها را در font-family مشخص کنید. به این شکل:

body {
    font-family: 'custom-font-dana', sans-serif;
}

توجه داشته باش که نام فونت رو باید بر اساس نامی که برای wp_enqueue_style استفاده کرده‌اید تعیین کنی و تمام

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹


مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش آپدیت شد
0

سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨

  • فونت‌ها: اولش که ، باید فونت‌هایی که می‌خوای برای قالبت استفاده کنی رو تهیه کنی. فونت‌ها رو توی پوشه‌ای مثل fonts در قالبت قرار بده.

  • ایجاد صفحه تنظیمات فونت: حالا بیا توی Redux یه صفحه‌ای ایجاد کنی که کاربر بتونه تنظیمات فونت‌ها رو انجام بده. برای هر فونت، یه فیلد انتخاب فونت بسازی که از نوع typography باشه. این فیلد می‌تونه فونت رو به عنوان output برای تمامی متن‌های قالب اعمال کنه.

  • استفاده از فونت‌ها در قالب: حالا از اطلاعاتی که کاربر توی تنظیمات انتخاب کرده، برای تغییر فونت‌ها در قالب استفاده می‌کنی. می‌تونی از wp_enqueue_style استفاده کنی تا فایل‌های CSS فونت‌ها رو به قالب اضافه کنی.

نمونه کدش و از جنس php😊

Redux::setSection('theme_options', array(
    'title' => __('تنظیمات فونت', 'your-theme'),
    'id'    => 'font_settings',
    'icon'  => 'el el-font',
));

Redux::setSection('font_settings', array(
    'title' => __('انتخاب فونت', 'your-theme'),
    'id'    => 'font_select',
    'desc'  => __('لطفاً فونت مورد نظر خود را انتخاب کنید.', 'your-theme'),
    'type'  => 'typography',
    'output' => array('body'),
    'units' => 'px',
));

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹


مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش مطرح شد
0

سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨

  • فونت‌ها: اولش که ، باید فونت‌هایی که می‌خوای برای قالبت استفاده کنی رو تهیه کنی. فونت‌ها رو توی پوشه‌ای مثل fonts در قالبت قرار بده.

ایجاد صفحه تنظیمات فونت: حالا بیا توی Redux یه صفحه‌ای ایجاد کنی که کاربر بتونه تنظیمات فونت‌ها رو انجام بده. برای هر فونت، یه فیلد انتخاب فونت بسازی که از نوع typography باشه. این فیلد می‌تونه فونت رو به عنوان output برای تمامی متن‌های قالب اعمال کنه.

نمونه کدش و از جنس php😊

Redux::setSection('theme_options', array(
    'title' => __('تنظیمات فونت', 'your-theme'),
    'id'    => 'font_settings',
    'icon'  => 'el el-font',
));

Redux::setSection('font_settings', array(
    'title' => __('انتخاب فونت', 'your-theme'),
    'id'    => 'font_select',
    'desc'  => __('لطفاً فونت مورد نظر خود را انتخاب کنید.', 'your-theme'),
    'type'  => 'typography',
    'output' => array('body'),
    'units' => 'px',
));

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹


علیرضا صادقی
تخصص : وردپرس
@aliireza 1 سال پیش مطرح شد
0

ممنون بابت راهنمایی من تمامی این کار هایی که شما فرمودید رو انجامشون دادم ولی در اصل در کار با تابع wp_enqueue_style گیر کردم


oss_vahid
تخصص : wp developer
@ossvahid 1 سال پیش مطرح شد
0

سلام ارادت من از ریداکس خبری ندارم ولی من بودم اینکارو میکردم

ببین داخل php ما ی تابع داریم بنام scandir این تابع میان ی پوشه رو اسکن میکنه و نام هاي فایل هارو برامون برمیگردونه آدرسی که به فونت ها ختم میشه رو به این تابع بده و php
scandir رو اجرا میکنه و ی ارایه از تمامی اسم های فایل ها بهت میده بعد اون اسم ها میشه دقیقا نام هر فایل فونتی که داخل پوشه font هستش دیگه تا الان شما هم اسم فونت رو داری و هم آدرسش
میشه ی اکشن wp_head بزنی و فونت ها و مستقیم بزاری توی هد قالب تا اجرا بشه راه های دیگه اییم هست البته
scandir


علیرضا صادقی
تخصص : وردپرس
@aliireza 1 سال پیش مطرح شد
0

این کد هایی هست که تو صفحه تنظیماتم قرار دادم ولی نمیدونم دقیقا چجوری باید فونت ها فراخوان بشن

array(
                'id' => 'content_font_size',
                'type' => 'slider',
                'title' => __('سایز فونت را انتخاب نمایید', 'test'),
                'default' => 14,
                'min' => 12,
                'step' => 1,
                'max' => 30,
                'display_value' => 'label'
            ),

            array(
                'id'       => 'font_select',
                'type'     => 'select',
                'title' => __('فونت قالب', 'test'),
                'subtitle' => __('فونت را انتخاب کنید پیشفرض: دنا می باشد', 'test'),
                'options'  => array(
                    'dana' => __('دنا', 'test'),
                    'sans' =>  __('ایران سنس', 'test'),
                    'yekan' =>  __('ایران یکان', 'test'),

                ),
                'default'  => 'dana',

            ),

@mahdi.nazari


مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش مطرح شد
0

مشکلی نیست. با استفاده از تابع wp_enqueue_style راهنماییت میکنم

ابتدا فونتایی که میخای در صفحه تنظیمات قالب تعریف کنی رو در پوشه Fonts قرار بده. این پوشه معمولاً در مسیر wp-content/themes/your-theme-name/Fonts قرار می‌گیره

در فایل تنظیمات تم (به عنوان مثال، functions.php) کد زیر را اضافه کن

function enqueue_custom_fonts() {
    // فایل‌های فونتی که تعریف کرده‌اید را به استایل اضافه می‌کنیم
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/your-font-styles.css');

    // دیگر کدها و تنظیمات مربوط به تم خودتان
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

در اینجا your-font-styles.css به نام فایل CSS اضافه شده . توی این فایل می‌توانی استایل‌های مرتبط با فونت‌های خود ت رو تعریف کنی


علیرضا صادقی
تخصص : وردپرس
@aliireza 1 سال پیش آپدیت شد
0

خیلی ممنونم بابت راهنمایی خیلی کامل توضیح دادید
تایعی نیست که بشه کل استایل هارو مورد هدف قرار بده ؟
من یک قالب رو فارسی کردم بخاطر همین خیلی توابع قالب تسلط ندارم
و خود نویسنده قالب هم بخشی رو برای انتخاب فونت قرار نداده
ممنون بابت کمک
@mahdi.nazari


مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش مطرح شد
0

بنظرم این کد جوابگو مشکلت خواهد بود
css

/* استایل‌های مورد نظر شما */
body {
    font-family: 'YourChosenFont', sans-serif;
}
/* سایر استایل‌ها */

php

function enqueue_custom_styles() {
    // فایل استایل کلی
    wp_enqueue_style('custom-styles', get_template_directory_uri() . '/styles.css');

    // دیگر کدها و تنظیمات مربوط به تم خودتان
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

علیرضا صادقی
تخصص : وردپرس
@aliireza 1 سال پیش مطرح شد
0

سلام
من تمامی کد هایی که اضافه کردم رو اینجا نوشتم لطفا کمکم کنید هنوز مشکل دارم

ابتدا در صفحه تنظیمات قالب بخش انتخاب فونت را اضافه کردم

Redux::set_section(
    $opt_name,
    array(
        'subsection' => true,
        'title' => esc_html__('فونت قالب', 'test'),
        'fields' => array(
            array(
                'id' => 'show_typography',
                'type' => 'section',
                'title' => esc_html__('انتخاب فونت قالب', 'test'),

            ),

            array(
                'id' => 'content_font_size',
                'type' => 'slider',
                'title' => __('سایز فونت را انتخاب نمایید', 'test'),
                'default' => 14,
                'min' => 12,
                'step' => 1,
                'max' => 30,
                'display_value' => 'label'
            ),

            array(
                'id'       => 'font_select',
                'type'     => 'select',
                'title' => __('فونت قالب', 'test'),
                'subtitle' => __('فونت را انتخاب کنید پیشفرض: دنا می باشد', 'test'),
                'options'  => array(
                    'dana' => __('دنا', 'test'),
                    'sans' =>  __('ایران سنس', 'test'),
                    'yekan' =>  __('ایران یکان', 'test'),
                    'byekan' =>  __('یکان Bold', 'test'),

                ),
                'default'  => 'dana',

            ),

            ),
        )
    );  

فونت های نام برده شده در بخش انتخاب فونت در پوشه fonts قرار گرفتند

کد های زیر به فایل functions.php اضافه شدند
کدها👇

 function enqueue_custom_fonts() {
       wp_enqueue_style('custom-styles', get_template_directory_uri() . '/styles.css');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff2');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/sans/IRANSansWeb.ttf');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/sans/IRANSansWeb.woff');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/sans/IRANSansWeb.woff2');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/yekan/iranyekanwebregular.ttf');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/yekan/iranyekanwebregular.woff');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/yekan/iranyekanwebregularfanum.ttf');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/byekan/byekan.woff');

}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

تا اینجا پیش رفتم و کد های زیر را در style.css قرار دادم

body {
    font-family: '؟؟؟؟؟؟؟', sans-serif;
}
  1. در اون جایی که عامت سوال گذاشتم دقیقا نمیدونم باید چی قرار بدم
  2. اصلا نمیدونم body کل متن های قالب رو مورد هدف قرار میده یا نه
  3. چجوری قرار هست بعد از اینکه کاربر فونت رو از تنظیمات انتخاب کرد اون فونت فرا خوانی بشه ؟
    با توجه به گفته های خود شما مراحل بالا رو رفتم
    ممنون میشم کمک کنید

@mahdi.nazari


مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش مطرح شد
0

سلام مجدد ، حتما 🖐️

ابتدا، مشکل در اضافه کردن فونت‌ها به وب‌سایت رو حل میکنیم

function enqueue_custom_fonts() {
    wp_enqueue_style('custom-styles', get_template_directory_uri() . '/styles.css');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff');
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff2');
    // و سایر wp_enqueue_style ها...
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

باید از wp_enqueue_style برای هر فونت جداگانه استفاده کنی و نه همه فونت‌ها را در یک wp_enqueue_style. به این صورت:

function enqueue_custom_fonts() {
    wp_enqueue_style('custom-styles', get_template_directory_uri() . '/styles.css');
    wp_enqueue_style('custom-font-dana', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff');
    wp_enqueue_style('custom-font-dana2', get_template_directory_uri() . '/Fonts/dana/dana-fanum-regular.woff2');
    // و سایر wp_enqueue_style ها...
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

در فایل style.css، به جای ؟؟؟؟؟؟؟ نام فونت را قرار بده که می‌خواهی استفاده کنی . به عنوان مثال، اگر فونت‌ها را با نام custom-font-dana و custom-font-sans و غیره فراخوانی کردی، باید نام فونت‌ها را در font-family مشخص کنید. به این شکل:

body {
    font-family: 'custom-font-dana', sans-serif;
}

توجه داشته باش که نام فونت رو باید بر اساس نامی که برای wp_enqueue_style استفاده کرده‌اید تعیین کنی و تمام

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹


علیرضا صادقی
تخصص : وردپرس
@aliireza 1 سال پیش مطرح شد
0

من تمامی مراحل رو رفتم ولی نمیدونم چرا فونت ها خوانده نمیشن
برای اینکه از استایل مطمعن بشم سایز فونت دادم کار کرد ولی فونت ها خولنده نمیشن
و اینکه اون بخش تنظیمات که قرار دادم چجوری وصل میشه به فونت ها و یا در بخش myfont کد زیر چی باید بزارم تا وصل بشه به redux ؟

*
‌{
font-family : myfont !important;
} 

@mahdi.nazari

@ossvahid


oss_vahid
تخصص : wp developer
@ossvahid 1 سال پیش مطرح شد
1

سلام ارادت متاسفانه از ریداکس خبری نداره چطوری کار میکنه نمیدونم چرا از همون هوک customze register وردپرس استفاده نمیکنی خیلی بهتر از ریداکس هستش

قطعا وقتی یک تنظیمات رو ست میکنی و داده ها میره سمت دیتابیس باید ی کدی ریداکس داشته باشه تا بتونی از طریق اون تنظیماتی که وارد کردی مقدار رو دریافت کنی و در قالبت بزاری

توی فایل css شما نمیتونی بیایی کد php یا جاوااسکریپت بنویسی باید اون قسمت
که فونت هارو به تمام تگ های سایت وارد میکنه رو از طریق هوک wp_head بنویسی داخل head قالب تا اجرا بشه
ی چنین چیزی میشه

add_action('wp_head',function(){
?>
<style>
*
‌{
font-family : ****  !important;
} 
</style>
<?php
});

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

هوک بالا باید بعد از هوک wp_enqueue_script اجرا بشه حواست باشه اگه قبلش اجرا بشه فونت ها کار نمیکنه اول باید فایل فونت ها ست بشه داخل هد بعد این هوک اجرا بشه

بهتره بری داخل فایل style css و تمام font-style هارو هم پاک کنی تا صد در صد همین font-family که داخل هد قالب زدی کار کنه


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام