تخصيص القالب في ووردبريس customizer الدرس السادس عشر

تخصيص القالب في ووردبريس customizer هو ما يعرف عند الذهاب الى قسم مظهر , ثم الضغط على تخصيص , ستجد عادة في كل ثيم منصب اقسام معينة مثل التحكم بالخطوط , الألوان , التحكم بعرض المحتوى والصفحات ,وكذلك عرض الصور والتصنيفات في المقالات الخ … وهذا ما يسمى Theme Customization API

لنبدأ الدرس :

المحتويات الاساسية لهذا الدرس هي :

• انشاء كود لقسم تخصيص لون خلفية الموقع
• انشاء كود للتحكم بألوان الخطوط في الموقع

انشاء كود لقسم تخصيص لون خلفية الموقع

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

اذهب الى مجلد الثيم , وقم بانشاء مجلد جديد اعطيه الاسم inc ,ثم ضمن هذا المجلد قم بانشاء ملف جديد اعطيه الاسم customizer.php

انظر أيضاً في المقال : أفضل شركات الإستضافة لعام 2020 ووردبريس

بعد انشاء ما سبق , اذهب الى ملف FUNCTIONS.PHP ثم قم بلصق الكود التالي :

require_once(get_template_directory().'/inc/customizer.php');

بهذا قمنا بإخبار وورد بريس بأن يقوم بقراءة الملف customizer.php والمحتوى البرمجي الذي سنقوم بكتابته ضمنه .

ماسنقوم بكتابته في ملف customizer.php هو عبارة عن كود مايسمى FUNCTION اي وظيفة جديدة لاظهار الاقسام التي تحدثنا عنها في أول الدرس :

الكود سيكون كالتالي :

function studyshoot_front_page_site_callout($wp_customize){
$wp_customize->add_section('studyshoot_color_section' ,
                array(
                            'title'=> __( 'لون الخلفية', 'studyshoot' ),
                            ));
   $wp_customize->add_setting('studyshoot_body_color' , 
                array(
                    'default'=> '#001826',
                    'transport'=>'refresh',
                    'sanitize_callback' => 'sanitize_hex_color' ,
                    ));
            $wp_customize->add_control(new WP_Customize_Color_Control( 
            $wp_customize,'studyshoot_body_color', 
                array(
                    'label'=> __( 'اختر لوناً للخلفية', 'studyshoot),
                    'section'=>'studyshoot_color_section',
                    'settings' => 'studyshoot_body_color',
                    )));
}
add_action ('customize_register', 'studyshoot_front_page_site_callout');

شرح الكود :

function studyshoot_site_body_color_callout($wp_customize){

هذا القسم هو عبارة عن اعطاء وظيفة لووردبريس أي function قمنا باعطائها اسم studyshoot_site_body_color_callout ; وبعدها في داخل هذه الوظيفة سنقوم باعطاء الاوامر التي نريد . أما عن wp_customize فهي لاحقة ثابتة في وردبريس ,

القسم الثاني من شرح الكود هو : لانشاء أي قسم في التخصيص في ووردبريس يجب أن تحقق ثلاث اقسام في الكود وهي add_section , add_setting ,add_control , يمعنى اضافة قسم || اضافة اعدادات || اضافة تحكم على التوالي .. وهذه الأدوات ثابتة , ويجب تعريف كل منها باسم كما قمنا سابقا كما تلاحظ بالاسماء التاليه :

 add_section('studyshoot_color_section' ,
$wp_customize->add_setting('studyshoot_body_color' , 
$wp_customize->add_control(new WP_Customize_Color_Control( 
 $wp_customize,'studyshoot_body_color', 
       

أما عن الكود الذي قمنا بكتابته اسفل كل قسم من الاقسام التاليه واقصد هنا title , default , transport , sanitize_callback فهي أيضاً دلالات ثابته لا تتغير , تقوم بتغيير فقط ما بعدها من خلال اعطاء اسم مثلا كما قمت انا مثلا بكتابة’title’=> __( ‘لون الخلفية’, ‘studyshoot’ ),, وهكذا.

الآن للقسم الاخير من شرح الكود هو add_control كما لاحظت قمت بكتابة الكود التالي في الاسفل :

 'section'=>'studyshoot_color_section',
'settings' => 'studyshoot_body_color',

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

الخطوة الثانية :

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

function studyshoot_customize_css() { ?>
 
<style type="text/css">
    html,
    body{
        background-color:  <?php echo esc_html (get_theme_mod('studyshoot_footer_color','#1f2024')); ?>;
    }
</style>
<?php }
 
add_action('wp_head' , 'studyshoot_customize_css');

في الكود التالي قمنا بكتابة كود بلغة php وكذلك css , وبهذا سيقوم ووردبريس الآن بتغيير خلفية الموقع بناءاً على اللون الذي سنقوم باختياره من اعدادات لون الخلفية في تخصيص ووردبريس ..

هل الأمر صعب ؟ يحتاج فقط الى فهم الكود , واعادة كتابته مرات عدّة ومحاولة البحث أكثر لتعرف أمثلة وكودات أخرى

انشاء كود للتحكم بألوان الخطوط في الموقع

الكود الثاني الذي سنقوم بانشاءه أيضاً هو للتحكم بألوان الخطوط في الموقع .

قم فقط بنسخ الكود التالي ولصقه في الصفحة اسفل ما كتبناه سابقاً :

function studyshoot_site_fonts_color_callout($wp_customize){
$wp_customize->add_section('studyshoot_fonts_color_section' ,
                array(
                            'title'=> __( 'لون الخطوط', 'studyshoot' ),
                            ));
   $wp_customize->add_setting('studyshoot_fonts_color' , 
                array(
                    'default'=> '#00000',
                    'transport'=>'refresh',
                    'sanitize_callback' => 'sanitize_hex_color' ,
                    ));
            $wp_customize->add_control(new WP_Customize_Color_Control( 
            $wp_customize,'studyshoot_fonts_color', 
                array(
                    'label'=> __( 'تعيين لون للخطوط في الموقع', 'studyshoot),
                    'section'=>'studyshoot_fonts_color_section',
                    'settings' => 'studyshoot_fonts_color',
                    )));
}
add_action ('customize_register', 'studyshoot_site_fonts_color_callout');

ومن ثم أيضاً اسفله الكود التالي لاظهار النتائج في الموقع :

function studyshoot_customize_css() { ?>
 
<style type="text/css">
 html, body, h1, h2, h3, h4, h5, h6, p, text, a {
 
       color:  <?php echo esc_html (get_theme_mod('studyshoot_fonts_color','#00000')); ?>;
    }
</style>
<?php }
 
add_action('wp_head' , 'studyshoot_customize_css');

هذا القسم من تطوير تخصيص القالب في ووردبريس أو حتى الاضافات هو القسم الأكثر تعقيداّ ولكن الأكثر جمالاً عند اتقانه ومعرفة التعامل معه ومعرفة حيثياته أيضاً … انتظرني في دروس لاحقة لأنني سوف اتحدث كثيراً عن انشاء اقسام اخرى في تخصيص وورد بريس …

اذا اعجبك الدرس قم من فضلك بمشاركته , حتى استطيع ايصاله لعدد أكبر من المهتمين …

الدرس التالي : اظهار السوشال ميديا في قالب ووردبريس من قسم تخصيص الدرس السابع عشر

دروس سابقة :

• انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر
• كيف تقوم باضافة موقعك الى google search console
• إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية – الدرس الثاني عشر