خطوط عربية ووردبريس – الخطوط المخصصة في ووردبريس

  خطوط عربية ووردبريس – الخطوط المخصصة في ووردبريس

خطوط عربية ووردبريس يقصد بها , تغيير شكل الخط في الموقع الالكتروني , من خلال اظهار خطوط جوجل بدون الحاجة الى اضافة , فقط باستخدام كود بسيط جداً سوف تقوم بلصقه في ملف الثيم . لـ تخصيص موقع ووردبريس

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

الخطوة الأولى :

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

Theme Folder – Inc – 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 في مجلد الثيم الذي تستخدمه ومن ثم , الصق الكود التالي .

 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

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

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