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

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

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

الزوار قاموا بقراءة ما يلي أيضاً

كيفية التسجيل في موقع الأونروا -العمل مع الأونروا

كيفية التسجيل في موقع الأونروا -العمل مع الأونروا

تحتفظ الأونروا بملفات نشطة لحوالي 57 مليون لاجئ فلسطيني وأكثر من 685,000 شخص آخرين من ذوي الشأن تم تحديدهم كأهلية للحصول على خدمات UNRWA وفقا... قراءة المزيد

شروط الدراسة في الخارج – كل ماتحتاج معرفته حول الدراسة فى الخارج

شروط الدراسة في الخارج – كل ماتحتاج معرفته حول الدراسة فى الخارج

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

دراسة هندسة السفن – أفضل جامعات الهندسة البحرية

دراسة هندسة السفن – أفضل جامعات الهندسة البحرية

دراسة الهندسة البحرية هي التخصص الذي يتعامل مع الأمور المتعلقة بتصميم وابتكار وبناء وصيانة السفن البحرية ومعدات الملاحة يركز... قراءة المزيد

افضل التخصصات الجامعية من حيث الراتب

افضل التخصصات الجامعية من حيث الراتب

وفقًا لمركز جامعة جورجتاون للتعليم والقوى العاملة ، اختار 80٪ من الطلاب في الدراسات الجامعية تخصصهم الجامعي بناءً على فرص العمل... قراءة المزيد

تخصصات جامعية لها مستقبل | أفضل 15 تخصص جامعي

تخصصات جامعية لها مستقبل | أفضل 15 تخصص جامعي

في قائمة تخصصات جامعية لها مستقبل, قمنا بتوضيح كل الاساسيات التي يعتمدها الطلاب في اختيارهم لتخصص المستقبل الدراسي, ولذلك قمنا... قراءة المزيد

أهم التخصصات الطبية ذات الإمكانات الأكبر في المستقبل

أهم التخصصات الطبية ذات الإمكانات الأكبر في المستقبل

نقوم بإدراج أفضل التخصصات الطبية ذات الإمكانات الأكبر للتطوير في المستقبل يقول البعض إن التكنولوجيا ستحل محل 80٪ من الأطباء في... قراءة المزيد

اخترنا لك المنح التالية للتقديم عليها

منحة جامعة أستون لدراسة الماجستير في بريطانيا

منحة جامعة أستون لدراسة الماجستير في بريطانيا

 ترحب منحة جامعة أستون لدراسة الماجستير بالطلاب من أكثر من 120 دولة مختلفة كل عام للدراسة تقع جامعة Aston في وسط برمنغهام ، ثاني أكبر مدينة... قراءة المزيد

مسابقة معهد سانجر لطلاب البكالوريوس الدوليين

مسابقة معهد سانجر لطلاب البكالوريوس الدوليين

مسابقة معهد سانجر Sanger هي مسابقة توعية للطلاب الجامعيين من البلدان المنخفضةوالمتوسطة الدخل وتمنح الفائز فرصة لتجربة أحدث البحوث... قراءة المزيد

منحة جامعة البرتا في كندا

منحة جامعة البرتا في كندا

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

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

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

منحة جامعة دايتون للبكالوريوس للجدارة للعام الأول المختار وتحويل المتقدمين الدوليين الجامعيين تبلغ هذه المنح الدراسية ما يصل إلى 105،390... قراءة المزيد