اضافة خطوط جوجل العربية في ووردبريس بـ 3 خطوات | تغيير نوع الخط

اضافة خطوط جوجل العربية في ووردبريس في 3 خطوات |Arabic Webfonts

اضافة خطوط جوجل العربية في ووردبريس  في 3 خطوات |Arabic Webfonts

إضافة خطوط جوجل العربية في ووردبريس تحتاج فقط الى استخدام كود بسيط جداً والذي سوف يقوم بدوره تغير نوع الخط وهذا الكود سوف تقوم بلصقه في ملف functions.php في قالب موقعك وهذا بدوره سوف يعمل تغيير نوع الخط الذي تستخدمه افتراضياً في الثيم

سوف نقوم بهذا الدرس بشرح وكتابة الكود الكامل لاظهار خطوط جوجل العربية في موقع ووردبريس , من خلال العمل بالكود في ملف functions.php , وايضاً كود آخر في ملف جديد سوف نقوم بتسميته custom-fonts.php

انشاء ملف custom-fonts.php في مجلد الثيم :

اذهب الى مجلد الثيم , ثم اذا لم تكن قد انشأت مجلد جديد ضمن مجلد الثيم يسمى inc , قم بانشاءه مجدداً وداخل هذا المجلد قم أيضاً بانشاء ملف اعطه الاسم custom-fonts.php ليصبح المسار كالتالي :

Theme Folder – Inc – custom-fonts.php

لصق الكود الأول في ملف custom-fonts.php :

بعد ذلك افتح الملف الذي قمت بانشاءه والصق الكود التالي بداخله :

<?php 
 function studyshoot_fonts_setup($wp_customize) {

    $url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDwe8tl4YMbg8asbjzbXDDFuxzR1Wm9EQ0';
    $response = wp_remote_get( 'http://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDwe8tl4YMbg8asbjzbXDDFuxzR1Wm9EQ0', array( 'sslverify' => true ) );
    $response = wp_remote_retrieve_body( wp_remote_get($url, array('sslverify' => false )));

    if( is_wp_error( $response ) ) {
    echo 'Something went wrong!';
    } else {

        $json_a = json_decode($response,  true);
        $font_items = $json_a['items'];
        $choices = array();

        foreach ($font_items as $font_value => $font_item) {
            $choices[$font_item['family']] = $font_item['family'].' (Google)';
        }

        $font_args = array(  
            'label'     =>  __('Custom Fonts ' , 'studyshoot' ) ,
            'section'   => 'studyshoot_fonts_section',
            'settings'  => 'studyshoot_fonts_display',
            'type'      => 'select',
            'choices'   => $choices
        );
    } 
 
    $wp_customize->add_section( 'studyshoot_fonts_section', array(
        'title' => __( 'Custom Fonts', 'studyshoot' ),
    ));

    $wp_customize->add_setting( 'studyshoot_fonts_display', array(
        'transport' => 'refresh',
    ));

     $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'studyshoot_fonts_display_control', $font_args));

}
add_action( 'customize_register','studyshoot_fonts_setup' );


function calling_google_font_script(){
     // Getting the set font from options.
     $temp_font_name = get_theme_mod('studyshoot_fonts_display');
     // Adding Font in Google URL
     $google_font = esc_url('https://fonts.googleapis.com/css?family=' . $temp_font_name);
     // Now Calling google font in website
     wp_enqueue_style( 'google-fonts', esc_url_raw($google_font), array(), null );
}

add_action('wp_enqueue_scripts','calling_google_font_script');



عمل تطبيق للكود السابق في الثيم من خلال ملف functions.php

نحتاج في هذه الخطوة الى تفعيل الملف والكود الذي كتبناه سابقاً في الثيم , ولذلك يجب أن تذهب الان الى ملف functions.php في مجلد الثيم الذي تستخدمه ومن ثم , الصق الكود التالي .

 require_once(get_template_directory() .'/inc/custom-fonts.php');

الكود السابق يخبر القالب بأن يقوم بجلب الكود من المسار الذي كتبناه inc>>cutom-fonts.php

الآن للتحقق بأن كل شيء على ما يرام , اذهب الى لوحة تحكم ووردبريس , ثم قم بالضغط على خيار مظهر >> تخصيص , سترى في النافذه الجديدة في قسم التخصيص ظهور قسم جديد يسمى custom Fonts , رائع جداً ..

قم باختيار الخط الذي تريد اظهاره , ثم , قم قم بالضغط على نشر ولكن لا تلاحظ أي تغيير أليس كذلك ؟

الخطوة التالية هي التي ستقوم بتفعيل الخطوط و اظهارها في الموقع بحسب الخط الذي تستخدمه

تطبيق و اظهار خطوط جوجل العربية في الموقع

اذهب الآن الى ملف custom-fonts.php واسفل الكود السابق قم بلصق الكود التالي :

function studyshoot_fonts_customize_css() { ?>

    <style type="text/css">
    html, body, h1, h2, h3, h4, h5, h6, p, text, a {
    font-family: <?php echo get_theme_mod('studyshoot_fonts_display'); ?>;
    }
    a, a:focus, a:hover, a:visited {
    font-family: <?php echo get_theme_mod('studyshoot_fonts_display'); ?>;  }
    </style>

<?php }
add_action('wp_head', 'studyshoot_fonts_customize_css');

كما تلاحظ قمنا بكتابة كود css ضمن كود php , نعم لا تستغرب لقد فعلنا هذا مسبقاً في دروس سابقة ! الآن الكود السابق سيقوم باجبار ووردبريس على تفعيل الخط الذي اخترناه ليظهر في الموقع .. قم بالآن باجراء تجربة في الموقع وانظر اذا تغير الخط أو لا ؟

ولكن ماذا لو …

كنت تريد أن تقوم مثلا بتخصيص خط مختلف عن البقية لجزء من الموقع , مثل الترويسات مثلا . هل تريد أن تقوم بتخصيص خط مختلف عن باقي خطوط الموقع لترويسات المقالات , أو الأزرار مثلاً , أو خطوط الروابط الخ.؟؟ !

في آخر كود كتبناه , قمنا بتطبيق الخطوط المخصصة في ووردبريس أي خطوط جوجل العربية على كل الموقع , ولكن المثال التالي , سوف أقوم بتطبيق الخطوط على كل الموقع ماعدا الترويسات , سأختار لها خط مختلف عن الآخر , انظر الكود :

استخدام خطوط جوجل العربية في ووردبريس على كل أجزاء القالب

 function studyshoot_fonts_customize_css() { ?>

    <style type="text/css">
    html, body, p, text, a {
    font-family: <?php echo get_theme_mod('studyshoot_fonts_display'); ?>;
    }
    a, a:focus, a:hover, a:visited {
    font-family: <?php echo get_theme_mod('studyshoot_fonts_display'); ?>; } 

    h1, h2, h3, h4, h5, h6{
    font-family: <?php echo get_theme_mod('studyshoot_fonts_display'); ?>;
     

}
    </style>

<?php }
add_action('wp_head', 'studyshoot_fonts_customize_css');

هل لاحظت , انني قمت بفصل الترويسات عن محتوى الموقع ؟ ترويسات الموقع تأخذ الرموز التالية h1-h2-h3-h4-h5-h6

هل استفدت من درس تغيير نوع الخط في ووردبريس ؟ قم بمشاركته حتى يستفيد غيرك منه وبذلك تكون قد قدمت لي هدية!

تابع أيضاً تخصيص موقع ووردبريس :الدرس السابق بعنوان : اظهار قسم حقوق النشر في تذييل الموقع الدرس الثامن عشر

أحدث المواضيع الى الآن

منحة جامعة قطر 2022 بتمويل كامل

منحة جامعة قطر 2022 بتمويل كامل

لاتفوت الآن فرصة التسجيل في منحة جامعة قطر المقدمة للطلاب الدوليين الراغبين بالدراسة في احدى اهم الجامعات في قطر تعتبر الدراسة في قطر... قراءة المزيد

منحة جامعة برشلونة لدراسة الماجستير الممولة بالكامل

منحة جامعة برشلونة لدراسة الماجستير الممولة بالكامل

تقدم منحة جامعة برشلونة لدراسة الماجستير في الاقتصاد في  كل عام و تمنح جائزة جامعة برشلونة في اسبانيا حوالي 800000 يورو كمساعدة... قراءة المزيد

ماهي شروط المنحة التركية والاوراق المطلوبة

ماهي شروط المنحة التركية والاوراق المطلوبة

هذه شروط المنحة التركية لمنحة الحكومة التركية 2022 للبكالوريوس والماجستير والدكتوراه شروط الحد الأدنى من التحصيل الدراسي للمتقدمين في... قراءة المزيد

التسجيل في المنحة التركية 2022 مجاناً وشروط القبول

التسجيل في المنحة التركية 2022 مجاناً وشروط القبول

ما هي المنحة التركية؟ ما هي شروط ومتطلبات الحصول على منحة دراسية في تركيا؟ التسجيل في المنح التركية وماهي مواعيد التقديم وماماهو رابط... قراءة المزيد

منحة رومانيا الحكومية

منحة رومانيا الحكومية

يمكن التقديم على منحة رومانيا للدراسة المجانية للطلاب العرب في الجامعات الرومانية وفق اتفاقية منحة الحكومة الرومانية مع الدول الأخرى... قراءة المزيد

دراسة الطب في المانيا باللغة الانجليزية

دراسة الطب في المانيا باللغة الانجليزية

ليس سراً أن العديد من الطلاب الدوليين ينجذبون إلى فرصة دراسة الطب في المانيا باللغة الانجليزية ما الذي لا يعجبك؟ تتمتع البلاد بموقع... قراءة المزيد