إعجاب

اضافة خطوط جوجل العربية في ووردبريس في 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

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

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

إعجاب

الزوار قدّ شاهدوا أيضاً المقالات التالية :

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

STUDYSHOOT ©