تخصيص القالب في ووردبريس 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');

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

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

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

دروس سابقة :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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