مدخل إلى برمجة إضافات ووردبريس مثال عملي لبرمجة إضافة ووردبريس- الجزء الثّاني

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

برمجة ويدجت المقالات الأكثر مشاهدة

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

• الأولى هي الدالة الأساسية للويدجت والتي نعرف فيها اسم ووصف الودجت. 
• والثانية لعرض خيارات الويدجت في لوحة تحكم ووردبريس (في القائمة المظهر – الودجات) .
• والثالثة لحفظ خيارات الويدجت عندما يقوم المستخدم بتعديلها.
• والرابعة هي ما سيتم عرضه في واجهة الموقع (الشريط الجانبي) عند إستخدام الويدجت. 

وإذا أردت أن تتعمق أكثر في برمجة الويدجات يمكنك مراجعة مقال كيف تبني ودجت لووردبريس.

ملف widget.php

بالطبع سنكتب جميع الشيفرات المتعلقة ببرمجة الويدجت في هذا الملف، ولنبدأ بكتابة صنف الودجت وفيه الدوال الأربعة السابقة بدون تفصيل كالآتي:

class HA_Views_Widget extends WP_Widget { 
    // البيانات الأساسية للودجت (مثل اسم ووصف الودجت)
    public function __construct() { 

    } 

    // عرض خيارات الويدجت في لوحة تحكم ووردبريس 
    public function form( $instance ) { 

    }

    // لحفظ خيارات الويدجت عندما يقوم المستخدم بتعديلها 
    public function update( $new_instance, $old_instance ) { 

    }

    // ما سيتم عرضه في واجهة الموقع (المقالات الأكثر مشاهدة)
    public function widget($args, $instance ) { 

    } 

}

الأن سنقوم بإعلام ووردبريس أنه لدينا ودجت جديد من خلال تسجيله كالآتي:

// تسجيل الويدجت من خلال إضافة الدالة أدناه للحدث widget_init
add_action( 'widgets_init', 'ha_widget_init' ); 
function ha_widget() { 
  register_widget( 'HA_Views_Widget' ); 
}

لاحظ أن الدالة ()register_widget تستقبل مُعاملًا واحدًا وهو اسم صنف الودجت الذي نود تسجيله وهو في حالتنا هذه HA_Views_Widget كما اخترناه في الأعلى.

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

الدالة construct

في هذه الدالة نقوم ببناء الودجت من خلال تمرير البيانات الأساسية للودجت وهي الاسم والوصف بالإضافة للمعرف وكذلك اسم صنف CSS الذي سيقوم ووردبريس بإضافة للودجت، ويتم ذلك بهذه الطريقة:

$widget_details = array( 'classname' => 'ha_views_widget', 'description' => 'ودجت لعرض المقالات الأكثر مشاهدة' ); 
parent::__construct( 'ha_views_widget', 'المقالات الأكثر مشاهدة', $widget_details );

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

الدالة form

نود أن نضيف للمستخدم خيار لاختيار عدد المقالات الأكثر مشاهدة التي يود عرضها في واجهة الموقع وخيار آخر لاختيار عنوان الودجت الذي سيظهر أعلى المقالات، وهذا ما ستقوم به هذه الدالة فهي المسؤولة عن إنشاء النموذج form الذي سيظهر للمستخدم في لوحة التحكم، وهذه هي الصورة النّهائية لها:

public function form( $instance ) { 
    $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'count' => '' ) );
    $title = strip_tags($instance['title']);
    $count = $instance['count'];
?>
    <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('العنوان:'); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
    <p><label for="<?php echo $this->get_field_id('count'); ?>"><?php _e('عدد المقالات:'); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="text" value="<?php echo $count; ?>" /></p>
<?php
}

الدّالة update

هذه الدالة مهمتها بسيطة جدا وهي حفظ خيارات المستخدم عندما يقوم بتعديلها من خلال الضغط على زر الحفظ، وهي ببساطة تقوم بإرجاع القيم الجديدة للخيارات بالصورة التالية:

public function update( $new_instance, $old_instance ) { 
    return $new_instance; 
}

الدالة widget

سنقوم من خلال هذه الدالة بعرض اكثر المقالات مشاهدة وذلك من خلال استخدام حلقة ووردبريس لجلب المقالات وذلك باستخدام صنف WP_Query والذي يمكننا من تحديد المقالات التي نود جلبها وفي حالتنا هذه نود جلب أعلى المقالات مشاهدة اعتمادًا على قيمة الميتا post_meta التي استخدمناها سابقا لحفظ عدد المقالات، أي أننا نود جلب المقالات مرتبة على حسب قيمة الميتا ha_post_views_count ولحسن الحظ يوفر صنف WP_Query طريقة سهلة لإنشاء مثل هذا الاستعلام. 
وهذه هي صورة الاستعلام:

$count = ( ! empty( $instance['count'] ) ) ? $instance['count'] :  5 ;
$query_args = array(
        'meta_key'       => 'ha_post_views_count',
        'orderby'        => 'meta_value_num',
        'posts_per_page' => $count
        )
$query = new WP_Query($query_args);

حيث أننا باختيار قيمة orderby لتكون على حسب meta_value_num أي على حسب قيمة الميتا وهي قيمة عددية، وكذلك قمنا باختيار عدد المقالات المعروض ليساوي count$ وهي القيمة التي سيدخلها المستخدم والتي نستطيع التوصل إليها من خلال المتغير instance$ الذي يتم تمريره للدالة والذي من خلاله يمكنك الوصول للبيانات التي قام المستخدم بإدخالها في لوحة التحكم. في حالة لم يقم المستخدم باختيار عدد المقالات المعروضة سيتم عرض 5 مقالات. 
الآن لم يتبقَ لنا سوى إنشاء الحلقة وعرض عناوين وروابط المقالات وكذلك عنوان الودجت لتصبح الصورة النهائية لهذه الدالة كالاتي:

public function widget($args, $instance ) { 

$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] :  'المقالات الأكثر مشاهدة' ;
$count = ( ! empty( $instance['count'] ) ) ? $instance['count'] :  5 ;

$query_args = array(
            'meta_key'       => 'ha_post_views_count',
            'orderby'        => 'meta_value_num',
            'posts_per_page' => $count
            );
    $query = new WP_Query($query_args);

    if($query->have_posts()):
?>
    <?php echo $args['before_widget']; ?>
    <?php if ( $title ) {
        echo $args['before_title'] . $title . $args['after_title'];
    } ?>
    <ul>
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
        </li>
    <?php endwhile; ?>
    </ul>
    <?php echo $args['after_widget']; ?>
<?php
    wp_reset_postdata();
    endif;
}

وبهذا نكون قد أكملنا برمجة الودجت ولا تنس إضافة بعض التنسيقات للودجت في ملف widget.css والذي قمنا بصفه سابقا.

اقتراحات لتطوير الإضافة

كانت هذه النسخة الأولى من الإضافة بالتالي تحتوي على المميزات الأساسية ويمكنك إضافة المزيد من المميزات في النسخ القادمة وسنقترح عليك بعض التطوير لتتدرب عليها، وهي:

• إضافة خيار في الشيفرة المختصرة shortcode لإدخال معرف المقال الذي تود عرض عدد مشاهداته، فربما يود المستخدم عرض عدد مشاهدات مقال ما داخل مقال آخر.
• إضافة المزيد من الخيارات للودجت مثل اختيار المدة الزمنية للمقالات المعروضة، مثلا أشهر المقالات خلال هذا الأسبوع.
• التعديل على ما يعرضه الويدجت وكذلك تنسيقه، كأن تعرض مثلا صور بارزة للمقالات الأكثر مشاهدة.

يمكنك تحميل أو نسخ الإضافة من هذا الرابط.

أدوات مفيدة لمطوري إضافات ووردبريس

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

مكتبات وفئات Classes جاهزة

1- WordPress Plugin Boilerplate

وهي عبارة عن نموذج جاهز أو أساس يمكنك استخدامه لبناء إضافتك، وما يميزها أنه تم بناءها من قبل المطور المشهور Tom McFarlin كما أنه تم بنائها بأسلوب برمجة الكائنات Object Oriented Programming بالتّالي تعتبر بالفعل أساسًا جيّدًا لإضافة قابلة للتطوير. فوق ذلك هنالك مولد يمكنك استخدامه لإنشاء ملفات إضافتك بالاعتماد على هذا النموذج.

2- CMB2

وهذه عبارة عن مكتبة جاهزة للتعامل مع الحقول المُخصصة Custom fields لأنواع المقالات المختلفة Post Types وكذلك الحقول والبيانات الخاصة بالمستخدمين User Meta كما يمكنك استخدامها لإنشاء صفحات الخيارات Options Page ويمكنك دمجها في مشروعك بسهولة. تدعم هذه المكتبة عددًا كبيرًا جدًا من الحقول المتقدمة ويمكنك إضافة أنواع جديدة بسهولة حيث توفر مجموعة كبيرة من الخطافات Hooks التي تسهل من عملية التعديل عليها وزيادة مميزاتها بدون لمس الشيفرات الأساسية. ولا ننسى أن نذكر أن هذه المكتبة والنسخة الأولى منها CMB لقيت قبول ورواج كبير بين مطوري ووردبريس.

3- Settings API Class

في بعض الأحيان يكون التعامل مع Settings API بطيئًا وربما مُتعبًا بعض الشّيء، في مثل هذه الحالات يمكنك استخدام هذه الصّنف الجاهز التي تُسهّل التّعامل مع هذه الواجهة البرمجية، خصوصا إذا لم ترد أن تُثقل مشروعك بمكتبات كبيرة.

إضافات للمطورين

1- إضافة Developer

هذه الإضافة تساعدك في عملية التطوير وبعد تنصيب الإضافة تعرض عليك اختيار ما تقوم بتطويره (إضافة، قالب) وبعدها تعرض عليك مجموعة من الإضافات التي تعمل معها لتنصيبها كما موضح في الصورة:

وإليك بعض أهم هذه الإضافات:

• Debug Bar وكما يظهر من اسمها حيث تعرض قائمة لعمل Debug للاستعلامات Query والـ Cache ومجموعة أخرى من المعلومات المفيدة لعمل Debug.
• Rewrite Rules Inspector وهي عبارة عن أداة لتحليل قواعد إعادة كتابة الروابط links rewrite rules.
• log Viewer توفر لك طريقة سهلة لعرض ملفات Log عن طريق لوحة تحكم ووردبريس مباشرة.

2- إضافة Query Monitor

تقوم هذه الإضافة بعرض معلومات متعلقة باستعلامات قاعدة البيانات مثل الأداء Performance للاستعلامات وكذلك الخطافات Hooks وغيرها من المعلومات المفيدة التي تساعدك في تتبع الأخطاء وزيادة كفاءة وسرعة استعلامات قاعدة البيانات.

مواقع ومصادر

1- التّوثيق الرّسمي لووردبريس WordPress Codex

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

2- القسم الخاص بووردبريس في موقع StackExchange

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

3- مجموعة Advanced WordPress على فيس بوك

نعم هذه مجموعة على فيس بوك لكنها مختلفة نوعا ما فهي تجمع مجموعة كبيرة من محترفي ووردبريس ومطوري بعض الإضافات الشهيرة مثل Joost de Valk مطور إضافة WordPress SEO by Yoast المشهورة.

4- رابطة مطوري ووردبريس (باللغة العربية)

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

5- موقع ManageWP.org

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

6- موقع wpsnipp

مجموعة من الشيفرات الجاهزة لعمل أشياء مختلفة ربما تفيدك.

7- موقع WP-Snippets

شبيه بالموقع السابق.