كيفية إنشاء ضوابط مخصصة لمخصص قوالب ووردبريس
نشرت: 2015-06-17تتيح ميزة WordPress Theme Customizer (يشار إليها أيضًا باسم "Customizer") للمطورين القدرة على تخصيص مظهر المظهر الخاص بهم ، وحتى مساعدتهم في معاينة التغييرات التي تم إجراؤها على السمة في الوقت الفعلي. في عصر اليوم ، حيث يتزايد السباق لجذب العملاء نحو موقع ويب ، ستشعر غالبًا بالحاجة إلى تخصيص تصميم موقع الويب الخاص بك. وبفضل أداة تخصيص السمات ، يمكنك توفير الكثير من وقتك الثمين من خلال المعاينة المباشرة للتغييرات التي تم إجراؤها على تصميم WordPress الخاص بك.
تم تقديم أداة تخصيص سمة WordPress كجزء من واجهة برمجة تطبيقات تخصيص السمة (التي تم تقديمها في الإصدار 3.4 من WordPress. إذا كنت ترغب في إجراء تغييرات على إعدادات السمة الخاصة بك ، فستحتاج إلى استخدام عناصر التحكم المخصصة التي تأتي مع السمة أداة تخصيص مثل مربع الاختيار ، وحقل النص ، والراديو وعدد قليل من الآخرين. ولكن ، ماذا لو كنت ترغب في إضافة عناصر التحكم المخصصة الخاصة بك إلى قالب WordPress الخاص بك؟
لمساعدتك على فهم كيفية إنشاء وإضافة عناصر تحكم مصممة خصيصًا لتلبية احتياجاتك الخاصة ، سنعرض إنشاء ثلاثة عناصر تحكم مخصصة لإجراء بعض التغييرات على تذييل القالب الخاص بنا. ومع ذلك ، لبدء العملية ، ستحتاج أولاً إلى التعرف على فئة WP_Customizer_Control.
التعرف على فئة "WP_Customizer_Control"
لإنشاء عنصر تحكم مخصص ، تحتاج إلى إنشاء فئة جديدة وتوسيعها باستخدام فئة WP_Customizer_Control. يستخدم هذا الفصل طريقة "$ wp_customize-> add_control ()" لإضافة عنصر التحكم المخصص الخاص بك إلى شاشة تخصيص سمة موقع WordPress. علاوة على ذلك ، للوصول إلى هذه الطريقة ، تحتاج إلى استخدام الكائن $ wp_customize المتاح في مسار الإجراء: custom_register.
دعنا نفكر في مثال يوضح كيف يمكنك إضافة عنصر تحكم مخصص موجود إلى قسم السمة الخاصة بك (في ربط الإجراء "custom_register") على النحو التالي:
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
في المثال أعلاه ، نقوم بإنشاء عنصر تحكم يمنح المستخدمين القدرة على اختيار صورة رأس جديدة.
أمثلة توضيحية: كيفية إنشاء المزيد من عناصر التحكم المخصصة؟
ينقسم هذا القسم إلى ثلاث خطوات مختلفة ، حيث تحتوي كل خطوة على رمز يقوم بإنشاء عنصر تحكم مخصص لمنطقة النص لمخصص السمة الخاصة بك. سنضيف الكود في ملف footer.php الخاص بموضوع WordPress ، وذلك لإجراء تغييرات على التذييل عبر عناصر التحكم الجديدة في منطقة النص.
الخطوة 1: إنشاء عنصر تحكم بسيط في منطقة النص
كما ناقشنا أعلاه ، من أجل إنشاء عنصر تحكم مخصص جديد ، نحتاج إلى تحديد فئة سيتم استخدامها لتوسيع فئة WP_Customize_Control. بشكل أساسي ، يتم استخدام هذه الفئة مع واجهة برمجة تطبيقات تخصيص سمة WordPress لإضافة عنصر تحكم إدخال (أي عنصر تحكم مخصص) على شاشة تخصيص السمة. لنلقِ نظرة على الكود لتنفيذ هذه المهمة:
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
في هذا الرمز ، يتم استخدام خطاف الإجراء customer_register لإخبار WordPress بالوظيفة المخصصة ، التي أنشأناها بالاسم: theme_footer_customizer. كما تعلم ، فإن فئة WP_Customize_Manager تساعد في التحكم في WordPress Theme Customizer ، وبالتالي سيصبح عنصر التحكم المخصص جزءًا من هذه الفئة. ومع ذلك ، للوصول إلى عنصر التحكم الخاص بك ، ستحتاج إلى استخدام كائن "wp_customize" الذي يمثل مثيلاً لخطاف التخصيص التخصيص.
في حالتنا ، يتم استخدام الكائن wp_customize لتحديد قسم تذييل جديد سيتم تضمينه في منطقة النص. لذلك ، أيًا كان ما ستكتبه في قسم "منطقة النص" في قسم التذييل ، فسيتم عرضه في تذييل المظهر كما هو موضح في لقطة الشاشة أدناه:
في لقطة الشاشة هذه ، يمكنك أن ترى أنه تمت إضافة "قسم نص التذييل" الجديد إلى المظهر الخاص بك. سيتم عرض النص المكتوب في هذا القسم في تذييل المظهر الخاص بك.
الخطوة 2: إضافة عنصر تحكم مخصص لتغيير لون الخلفية
لذلك ، بعد أن أنشأنا عنصر تحكم في منطقة النص ، يمكنك إضافة العديد من عناصر التحكم المخصصة المختلفة إليه. في هذا المثال ، سنضيف عنصر تحكم مخصص إلى قسم نص التذييل الجديد لدينا والذي سيساعد في تغيير لون خلفية التذييل. للقيام بذلك ، ما عليك سوى إضافة مقتطف الشفرة التالي في ملف footer.php الخاص بالقالب:
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
كما يمكنك في لقطة الشاشة أعلاه ، باختيار لون مناسب من "إعداد لون التذييل" ، فقد تغير لون خلفية التذييل إلى اللون الرمادي.
الخطوة 3: إضافة عنصر تحكم مخصص لإضافة شعار
عنصر تحكم آخر نضيفه إلى قسم نص التذييل هو "شعار التذييل". كما يوحي الاسم ، سيساعد عنصر تحكم "شعار التذييل" في إضافة شعار في التذييل. لإضافة عنصر التحكم هذا ، ستحتاج إلى تضمين مقتطف الشفرة أدناه في ملف footer.php:
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
دعونا نختتم!
قد تجد أن عملية إنشاء عناصر تحكم مخصصة تستغرق وقتًا طويلاً. ولكن ، لا يمكنك إهمال حقيقة أن عناصر التحكم الأفضل التي ستضيفها إلى شاشة تخصيص سمة موقع الويب الخاص بك ، يمكن توفير المزيد من الوقت للمستخدمين ، مما يؤدي إلى تحسين تجربة المستخدم. لذلك ، إذا كنت تخطط لإنشاء بعض عناصر التحكم المخصصة بنفسك لتتم إضافتها إلى أداة تخصيص سمة WordPress ، فإن هذا المنشور سيثبت لك دليلًا مفيدًا.
