اضافة خيارات لصفحة تخصيص قالب ووردبرس

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

ولكن كما نعلم بأن ووردبريس يعرض بعض الخيارات الافتراضية للتخصيص مثل عنوان الموقع، سطر الوصف و خيارات الصفحة الرئيسية . لكن كيف يمكن اضافة خيارات لصفحة تخصيص قالب ووردبرس

في ووردبريس يوجد ما يسمى مرجعية تخصيص قالب ووردبرس التي خصصت لبرمجة مثل هذه الخيارات من هنا Theme Customization API.

ومايقصد من كل ما سبق هو القسم ألوان الخلفية في الصورة التالية على سبيل المثال

الدالات الاساسية عند اضافة خيارات لصفحة تخصيص قالب ووردبرس

• add_panel : وهو المسؤول عن اضافة القسم الرئيسي بمسى جديد لصفحة التخصيص
• add_section : هو المسؤول عن اضافة قسم داخل القسم السابق
• add_setting : هو الذي يضيف اعدادات هذا القسم
• add_control : هو الذي يضيف امكانية التحكم في هذا القسم

كل قسم من الاقسام السابقة له ايضاً دلالات معينة كالتالي:

add_section كما في الكود التالي

$wp_customize->add_section( 'wpmrj3_new_section' , array(
    'title'      => __( ' الوان الخلفية ', 'wpmrj3' ),
    'priority'   => 30,
) );

كما لاحظنا , في الكود هناك دالتين الاولى لاعطاء مسمى للقسم الجديد والثاني لاعطاء مكان الظهور .

add_setting كما في الكود التالي

$wp_customize->add_setting( 'wpmrj3_header_textcolor' , array(
    'default'   => '#000000',
    'transport' => 'refresh',
) );

كما نلاحظ في الكود السابق , عبارة wpmrj3_header_textcolor وهي دلالة تدل على اسم الدالة add_setting , وهي ضرورية أن تكون ذات اسم مميز , هناك اسماء معينه يمكنك استخدامها في بعض الحالات مثل اعداد للتحكم باللون أو تحميل صورة مثلاً .. انظر الامثلة في الاسفل.

1- بالنسبة لخيار default هنا يأخذ القيمة الافتراضية للشيء الذي تريد اضافته , فلو كان اعداد للون مثلاً , تستطيع وضع اللون الافتراضي في حال المستخدم لم يقم بتعديل هذا الخيار , أو نصاً مثلا اذا كنت تريد اضافة اعداد تخصيص لنص معين.

2- الخيار transport له قيمتان , refresh اي بمعنى المعاينة الفورية عند التغيير في صفحة التخصيص و القيمةا الثانية هي postMessage اي تتم المعاينة فقط عند تحديث الصفحة بعد حفظ الاعداد في صفحة تخصيص

add_control كما في الكود التالي

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
    'label'      => __( 'لون الترويسة ', 'mytheme' ),
	'section'    => 'wpmrj3_new_section',
	'settings'   => 'wpmrj3_header_textcolor',
) ) );

في الكود السابق وفي سطر new WP_Customize_Color_Control , هنا تجد اسم الدالة الافتراضية لاضافة كود التحكم باللون مثلاً , ولايمكن تغيير هذه القيمة دائماً … تستطيع ايضاً التعرف على باقي الدالات اسفل المقال في الامثلة .

بالنسبة كما شاهدنا أيضاً خيار label هو المسمى الفرعي لخيار التخصيص في القسم

في سطر section هنا تضع اسم الداله الأولى الذي اعطيناه في البداية عند اضافة قسم section والذي في مثالنا هذا هو wpmrj3_new_section

في سطر settings تضع هنا ايضاً اسم دالة الاعدادات التي وضعناها وفي مثالنا هي wpmrj3_header_textcolor

صياغة الكود الكامل

قمنا سابقاً بشرح الدالات والمسميات المستخدمة ولكن الان سوف نتعرف على استخدامها بشكل كامل.

هذه الاكود لك الخيار في مكان وضعها في الثيم , فمثلا تستطيع كتابتها في ملف functions.php أو تستطيع ان تقوم بانشاء مجلد جديد مثلا ضمن مجلد الثيم و تقوم ضمن هذا المجلد بانشاء ملف جديد تسميه customizer.php

ومن ثم تستطيع أن تقوم بجلب هذا الملف الى ملف functions.php باستخدام الكود التالي :

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

اما عن صياغة الكود فيجب أن يكون كل ماكتبناه سابقاً بين دالتين اساسيتين وهما function و add_filter

كما في الشكل التالي

function wpmrj3_control_options($wp_customize){
//هنا يوضع الكود بشكل كامل 
} 
add_action ('customize_register', 'wpmrj3_control_options');
 
  

الكود السابق بشكل الكامل ليصبح :

 
<?php 
function wpmrj3_control_options($wp_customize){
//هنا يوضع الكود بشكل كامل 


    $wp_customize->add_section( 'wpmrj3_new_section' , array(
    'title'      => __( ' الوان الخلفية ', 'wpmrj3' ),
    'priority'   => 30,
) );
$wp_customize->add_setting( 'wpmrj3_header_textcolor' , array(
    'default'   => '#000000',
    'transport' => 'refresh',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
    'label'      => __( 'لون الخلفية', 'wpmrj3' ),
    'section'    => 'wpmrj3_new_section',
    'settings'   => 'wpmrj3_header_textcolor',
) ) );
} 
add_action ('customize_register', 'wpmrj3_control_options');
 
  

كيفية اظهار وتطبيق التعديلات على صفحة تخصيص قالب ووردبرس

بالنسبة لمثالنا السابق , قمنا بانشاء قسم جديد يسمى لون الخلفية , وهذا يعني لون خلفية كل الموقع , فلتطبيق التغييرات على الموقع يجب أن نقوم أيضاً باستخدام كود اخر لتعديل التنسيق . سنستخدم في هذا الكود معاً php و css على الشكل التالي :

function wpmrj3_customize_css() { ?>
//هنا سوف نقوم بوضع كود التنسيق css
<?php }
add_action('wp_head' , 'wpmrj3_customize_css');

 

قمنا بانشاء امر جديد سابقأ لكي نتمكن الان من تطبيق التنسيق css لقسم خيار تخصيص والذي هو لون الخلفية . وكود التنسيق الكامل سيصبح كالتالي :

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

كما لاحظنا قمنا بحقن كود css داخل الامر السابق وهو اعطاء body لون خلفية . اما عن السطر الذي يلي background-color: هو قيمة افتراضية تطبق دائماً عند استخراج قيمة خيار التخصيص, وتطبيقها في الموقع.

أمثلة على أكواد php لاضافة خيارات لصفحة تخصيص قالب ووردبرس

1- اضافة خيار تحميل صورة :

function wpmrj3_upload_control_options($wp_customize){
 $wp_customize->add_section('wpmrj3_upload_control_options_section' , array(
'title'=>__('   تحميل صورة   ', 'wpmrj3'),
'priority'    => '19',
));

$wp_customize->add_setting('frontpage_image');
$wp_customize->add_control(new WP_Customize_Upload_Control($wp_customize,'frontpage_image_control',array(
 'label'      => __(' تحميل صورة افتراضية ', 'wpmrj3'),
 'section'    => 'wpmrj3_upload_control_options_section',
 'settings'   => 'frontpage_image',
 )));

 
} 
add_action ('customize_register', 'wpmrj3_upload_control_options');

2- اضافة خيار كتابة نص :

function wpmrj3_text_control_options($wp_customize){
 $wp_customize->add_section('wpmrj3_text_control_options_section' , array(
'title'=>__(' كتابة نص ', 'wpmrj3'),
'priority'    => '19',
));

$wp_customize->add_setting('wpmrj3_text_control_options_settings', array(
 'default'        => ' مرحبا بالعالم  ',
  'transport'=>'refresh'
) );
$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'wpmrj3_text_control_options_settings_control', array(
'label'   => 'اكتب نصاً هنا ',
'section'=>'wpmrj3_text_control_options_section',
'settings'   => 'wpmrj3_text_control_options_settings',
'type'=>'text'
)));
} 
add_action ('customize_register', 'wpmrj3_text_control_options');

2- اضافة خيار رابط :

function wpmrj3_site_users_page_link($wp_customize){
 $wp_customize->add_section('wpmrj3_site_users_page_link_section' , array(
'title'=>__(' كتابة نص ', 'wpmrj3'),
'priority'    => '19',
));

$wp_customize->add_setting('wpmrj3_site_users_page_link', array(
 'default'        => '#',
));
$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'wpmrj3_site_users_page_link_control', array(
'label'   => ' اختر صفحة المستخدم . ',
'section'=>'wpmrj3_site_users_page_link_section',
'settings'   => 'wpmrj3_site_users_page_link',
'type'=>'dropdown-pages'
)));
} 
add_action ('customize_register', 'wpmrj3_text_control_options');

كما لاحظنا في الامثلة السابقة استخدمنا في قسم add_control دالة وهي type . وهنا تجد في ووردبريس اكثر من خيار تستطيع استخدامه وهي كالتالي :

•  text
•  checkbox
• radio 
• select 
• textarea
•  dropdown-pages 
• email 
• url 
• number
•  hidden

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