تخصيص القالب في ووردبريس 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
- إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية – الدرس الثاني عشر
من المهم جداً قراءة المواضيع التالية :