دليلك الشامل لاحتراف التعامل مع الودجات في الووردبريس

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

 

 

ما هي الودجات ؟

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

صممت ودجات الووردبريس مخصوص لتٌقدم للمستخدم أبسط وأسهل طريقة لتصميم محتوى القالب والتحكم في أي جزء منه بسهولة.

 

 

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

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

 

 

إضافة الودجات بإستعمال تقنية السحب والإفلات

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

 

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

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

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

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

أين ودجات ووردبريس؟

أضاف التحديث الجديد لـ ووردبريس 4.8 العديد من المميزات والخصائص فى قسم الودجات، وتوجد الودجات فى القائمة الجانبية من صفحة الووردبريس كما هو موضح بالصورة التالية:

 

كيف أقوم بإخفاء الودجات على الموبايل او الجهاز المكتبي؟

يمكنك التحكم في اخفاء وعرض الودجات على صفحة الووردبريس عن طريق إضافة Widget Options، توفر هذه الإضافة العديد من المميزات التي تمكنك من التحكم في إظهار الودجات على صفحات معينة في الموقع، كذلك التحكم في إخفاء الودجات أو نقلها إلى أماكن أخرى، كما تمكنك من إضافة أكواد برمجية لعنصر معين في الودجات، ولذلك فهي مستخدمة بكثرة في أكثر من 50 ألف موقع ووردبريس.

تتم عملية إخفاء الودجات بإضافة Widget Options من خلال ثلاث خطوات:

• الخطوة الأولى: قُم بتحميل الإضافة Widget Options.

 

 

الخطوة الثانية: قُم بتثبيت الإضافة، ثم قٌم بتفعيلها على الموقع.

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

 

طرق تثبيت الودجات في الووردبريس لتبقى ظاهرة عند تمرير الصفحة لأسفل

يمكن تثبيت الودجت على صفحة الووردبريس من خلال إضافة Fixed Widget، والتى تُمكّنك من التحكم في تثبيت الودجت في مكان معين على الصفحة رغم نزول الزائر إلى أسفل الموقع.

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

 

 

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

 

 

 

تدعم أغلب قوالب الووردبريس إضافة Fixed Widget، ولكن بمجموعة من المتطلبات وهى كالآتى:

• من الضروري وجود النسخة JQuery 1.7  أو النسخة JQuery 1.8.3  أو أحدث من ذلك.
• خلو مكتبة الـ JavaScript من أي أخطاء توجد بسبب الإضافات او اي سكربت آخر.
• وجود دالتين هامتين هما wep_head و wp_footer فى الملفين head.php و footer.php في القالب المستخدم على الووردبريس.

أقرأ المزيد: كيفية استعادة المحرر التقليدي في الوردبريس؟

خطوات إنشاء ودجت لمنصة ووردبريس

غالباً لا تستطيع ودجات الووردبريس الإفتراضية أو التي يتم تحميلها من متجر الإضافات تحقيق ما ترغب فيه، ونظراً لأهمية الودجات فى زيادة فاعلية الموقع وتميزه بين المواقع الأخرى يجب عليك معرفة كيف تصمم ودجت خاص بموقعك؟ وبشكل مبسط بإستخدام لغات البرمجة، وتعلم مبادئ البرمجة الكائنية Object Oriented بلغة الـ PHP أيضاً.

على سبيل المثال، سوف نقوم بتصميم ويدجت لعرض المحتوى، يشمل عنوان ونص بسيط وصورة ورابط، ونضعهم في ويدجت في القائمة الجانبية من صفحة الووردبريس كما هو موضح بالصورة التالية:

 

 

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

بناء الإضافة

لكى تقوم بتصميم ودجت من البداية قم بإنشاء ملف جديد داخل هذا المسار wp content\plugins، وسميه my-featured-content، ثم قم بإنشاء المجلد الأساسى للبلجن داخل هذا الملف، يجب أن يتطابق اسم الملف الذي قمنا بإنشائه مع إسم المجلد ويكون الملف PHP، مثل my-featured-content.php.

قم بفتح الملف الجديد وانسخ به النص التالى:

<?php /

Plugin Name: My Featured Content

Version: 1.0

Plugin URI: http://danielpataki.com

Description: Allows you to add an arbitrary featured item to the sidebar. Includes a title, image, description   and a link.

Author: Daniel Pataki Author

URI: http://danielpataki.com/ /

 

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

مكونات الودجت

تمر عملية تصميم الودجت داخل منصة الووردبريس بأربع مراحل هما:

1.  البدء في إعداد الودجت.
2. تجهيز البنية التحتية للودجت backend والعمل عليها.
3. إستكمال العمل على البنية التحتية للودجت وإضافة قواعد البرمجة rules for processing إليها.
4.  إضافة واجهة رسومية لإدارة تعامل المستخدم مع الودجت.

تترجم عملية إنشاء الودجت داخل منصة الووردبريس بشكل عملى على هيئة دوال

add_action( ‘widgets_init’, ‘mfc_init’ );

function mfc_init() {

register_widget( ‘mfc_widget’ );

}

class mfc_widget extends WP_Widget {

public function __construct() {

// Basic widget details

}

public function widget($args, $instance ) {

// Widget output in the front end

}

public function update( $new_instance, $old_instance ) {

// Form saving logic – if needed

}

public function form( $instance ) {

// Backend Form

}

}

 

بعد الإنتهاء من كتابة كود برمجة الودجت بشكل صحيح ومنظم، نلاحظ إنه تم إنشاء فئة ممتدة (class extending) بإسم wp_widget، أيضا قمنا بضم الدالة mfc_init داخل الحدث widget_init.

ولكى نقوم بإعداد الودجت نستخدم الدالة register widget، ونمرر إسم الفئة mfc widget لها ” تدل الحروف الثلاثة الأول على “my featured content”، وهوا إسم المجلد الذي قمنا بإنشائه في الخطوة السابقة.

يسمى هذا القسم بإسم بادئة إسم الدالة “function prefixing”، ويهدف هذا القسم إلى التفريق بين الدوال المستخدمة وتسمية كل واحدة منها بإسم مختلف، تجنباً لمشكلة التعارض بين أسماء الدوال المختلفة المستخدمة في الإضافات المختلفة.

بنية الودجت

تضم الطريقة ()__construct معلومات أساسية عن الودجت، وتحدد الفئة wp_widget جزء كبير منها، وبإضافة النص التالى إلى بنية الودجت، نلاحظ ظهور الفئة ضمن لوحة إدارة الودجات في الووردبريس

$widget_details = array( ‘classname’ => ‘mfc_widget’, ‘description’ =>h ‘Creates a featured item consisting of a title, image, description and link.’ );

parent::__construct( ‘mfc_widget’, ‘Featured Item Widget’, $widget_details );

نموذج البنية التحتية

عند نقل الودجات إلى الشريط الجانبي من صفحة الووردبريس، تظهر الودجت مع نموذج صغير لإعدادها، كما ذكرنا في المثال السابق أن محتوى هذا النموذج عبارة عن ” العنوان – الشرح – عنوان الرابط ” تترجم هذه الخطوات على هيئة دوال كالآتى:

 

<?php public function form( $instance ) {

$title = ”;

if( !empty( $instance[‘title’] ) ) {

$title = $instance[‘title’];

}

$description = ”;

if( !empty( $instance[‘description’] ) ) {

$description = $instance[‘description’];

}

$link_url = ”;

if( !empty( $instance[‘link_url’] ) ) {

$link_url = $instance[‘link_url’];

}

$link_title = ”;

if( !empty( $instance[‘link_title’] ) ) {

$link_title = $instance[‘link_title’];

}

?>

<p>

<label for=”<?php echo $this->get_field_name( ‘title’ ); ?>”>

<?php _e( ‘Title:’ ); ?>

</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_name( ‘description’ ); ?>”><?php _e( ‘Description:’ ); ?></label>

<textarea class=”widefat” id=”<?php echo $this->get_field_id( ‘description’ ); ?>” name=”<?php echo $this->get_field_name( ‘description’ ); ?>” type=”text” ><?php echo esc_attr( $description ); ?></textarea> </p>

<p>

<label for=”<?php echo $this->get_field_name( ‘link_url’ ); ?>”><?php _e( ‘Link URL:’ ); ?></label>

<input class=”widefat” id=”<?php echo $this->get_field_id( ‘link_url’ ); ?>” name=”<?php echo $this->get_field_name( ‘link_url’ ); ?>” type=”text” value=”<?php echo esc_attr( $link_url ); ?>” />

</p>

<p>

<label for=”<?php echo $this->get_field_name( ‘link_title’ ); ?>”><?php _e( ‘Link Title:’ ); ?></label>

<input class=”widefat” id=”<?php echo $this->get_field_id( ‘link_title’ ); ?>” name=”<?php echo $this->get_field_name( ‘link_title’ ); ?>” type=”text” value=”<?php echo esc_attr( $link_title ); ?>” />

</p>

 

تشير هذه الدوال إلى قيمة كل عنصر داخل الودجت، حيث يشير المتغيّر $instances إلى القيم الافتراضية للعناصر تحسباً لتركها فارغة من قبل المستخدم، وتشير الدالتين ()get_field_name و()get_field_id إلى إنشاء حقلين لكل عنصر حقل لإدخال النص المطلوب، وحقل آخر يضم عنوان تعريفي له ويوضح وظيفته.

نظراً لتجنب التعارض بين الودجات الموجود بالفعل على الووردبريس، والودجات المصممة تم إستخدام دوال functions للحقول الأربعة بدلاً من كتابة أسمائهم.

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

 

 

معالجة بيانات النموذج

تُمكّنت الدالة ()update من معالجة بيانات الودجت قبل حفظه، حيث تشير إلى أي أحداث نريد تنفيذها على الودجت المصمم، كما يمكن إستخدام هذه الدالة في التحقق من صحة بيانات الودجت أو صحية كتابة الروابط، ويكون شكل الدالة كالآتى:

 

public function update( $new_instance, $old_instance ) {

return $new_instance;

}

عرض الودجات

يتم عرض الودجت الخاص بنا على الدالة ()widget، تأخذ هذه الدالة محدّدين Arguments، يشر الأول إلى منطقة وضع الودجت، بينما يشير الثاني إلى القيم الافتراضية لمتغيرات الودجت.

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

echo $args[‘before_widget’];

if ( ! empty( $instance[‘title’] ) ) {

echo $args[‘before_title’] . apply_filters( ‘widget_title’, $instance[‘title’] ). $args[‘after_title’];

}

// Rest of the widget content

echo $args[‘after_widget’];

نضيف قيمة حقلي “الوصف” و”الرابط” الذين حصلنا عليها من حقلي link_url و link_title، داخل هذا الإطار كالآتى:

<div class=’mfc-description’>

<?php echo wpautop( esc_html( $instance[‘description’] ) ) ?>

</div>

<div class=’mfc-link’>

<a href='<?php echo esc_url( $instance[‘link_url’] ) ?>’>

<?php echo esc_html( $instance[‘link_title’] ) ?>

</a>

</div>

من الأفضل إستخدام دالة الهروب “escaping function” في هذه المرحلة، وذلك لحماية البيانات التي ستقدمها للمستخدم.

إضافة صورة

هناك العديد من الطرق المستخدمة لإضافة صورة إلى الودجت، والتى تتطّلب معرفة أساسيات التعامل مع لغة الـ CSS، والجافا سكربت، وأيضا معرفة كيفية إضافة الأكواد إلى الودجت الخاصة بموقعك، ولذلك سوف نستخدم دالة إدارة الوسائط المُقّدمة من ووردبريس، لتمكننا من وضع الصورة على الودجت، إذا كنت تريد تصميم الدالة الخاصة بك فيجب إستعمال نصوص الـ CSS وال Javascript أيضاً، ويتم تعريف هذا الحدث ضمن بنية الدالة بإضافة الكود الآتي:

add_action( ‘admin_enqueue_scripts’, array( $this, ‘mfc_assets’ ) );

يشير الكود السابق إلى أن البارامتر الثاني للدالة ()add_action عادة ما يكون سلسة تشير إلى الدالة المطلوبة، بما إننا نريد إدراج الدالة ()mfc_asset ضمن الفئة التي أنشأناها وليس في دالة بمجال عام global scope. نقوم بإنشاء الدالة ()mfc assets داخل الفئة التى أنشأناها، ثم نضع فيها نصوص الـ CSS والجافا سكربت اللازمة بداخلها كما هو موضح بالكود الآتى:

public function mfcassets() {

    wpenqueue_script(‘media-upload’);

    wp_enqueue_script(‘thickbox’);

    wp_enqueue_script(‘mfc-media-upload’, plugin_dir_url(__FILE) . ‘mfc-media-upload.js’, array( ‘jquery’ )) ;

    wp_enqueue_style(‘thickbox’);

}

كما هو موضح فى الكود السابق فقد تم إضافة كلاً من media-upload و thickbox وهي سكربتات مقدمة من ووردبريس تدير تعامل المستخدم مع الوسائط، أيضا تم إضافة السكربت mfc-media-upload.js، وهو الملف الذى يدير عملية رفع الصور، أيضا تم إضافة ملف التصميم CSS من خلال الدالة thickbox لتعديل الخطوات السابقة وإضافة حقل إضافة الصورة على كود الدالة كالآتى:

$image = ”;

if(isset($instance[‘image’])) {

    $image = $instance[‘image’];

}

<p>

    <label for=”<?php echo $this->get_field_name( ‘image’ ); ?>”><?php _e( ‘Image:’ ); ?></label>

    <input name=”<?php echo $this->get_field_name( ‘image’ ); ?>” id=”<?php echo $this->get_field_id( ‘image’ ); ?>” class=”widefat” type=”text” size=”36″ value=”<?php echo esc_url( $image ); ?>” />

    <input class=”upload_image_button” type=”button” value=”Upload Image” />

</p>

هذا الكود مشابة تماماً للخطوة السابقة، ولكن بإضافة جديدة وهي زر إدخال input مع الفئة upload image button، بعد الأنتهاء من هذه الخطوة قم بإنشاء ملف جديد يحمل إسم mfc-media-upload.js، وضع فيه نص جافا سكربت الذى يعمل على إظهار مربع إختيار صورة عند الضغط على الزر، ثم ضع الكود التالى داخل الملف:

jQuery(document).ready(function($) {

    $(document).on(“click”, “.upload_image_button”, function() {

        jQuery.data(document.body, ‘prevElement’, $(this).prev());

        window.send_to_editor = function(html) {

             var imgurl = jQuery(‘img’,html).attr(‘src’); var inputText = jQuery.data(document.body, ‘prevElement’);

             if(inputText != undefined && inputText != ”) { inputText.val(imgurl);

        }

        tb_remove();

     };

tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’); return false; });

});

بعد تحديد وحفظ الصورة المحددة، يجب عليك الإنتقال إلى قيمة الحقل لإظهار الصورة ضمن الودجت من خلال الكود الآتي:                           

<p> <img src='<?php echo $instance[‘image’] ?>’> </p>

 

وبعد الإنتهاء يجب أن تكون النتيجة النهائية للودجت هكذا كما هو موضح بالصورة التالية:

 

 

كيفية التعديل على الودجات

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

 

 

 

التعديل في قائمة الودجت لن يتم بشكل مباشر من لوحة تحكم الووردبريس، بل يجب الدخول إلى ملفات الموقع من خلال FTP لعمل التعديلات اللازمة على الملف class-wp-widget-meta.php. 

قم بالدخول إلى الإستضافة الخاصة بموقعك عبر برنامج FTP وليكن برنامج “FileZilla”،ثم إذهب إلى الملف المثبت بداخله الووردبريس، وأبحث عن ملف بإسم “wp-includes/widgets” وأدخل عليه، ثم أبحث عن ملف الودجت التى تريد تعديلها  class-wp-widget-meta.php، بعدها قم بفتحه بواسطة محرر النصوص الذي تستعمله، وابحث عن الكود التالى

<ul>

<?php wp_register(); ?>

<li><?php wp_loginout(); ?></li>

<li><a href=”<?php echo esc_url( get_bloginfo( ‘rss2_url’ ) ); ?>”><?php _e( ‘Entries feed’ ); ?></a></li>

<li><a href=”<?php echo esc_url( get_bloginfo( ‘comments_rss2_url’ ) ); ?>”><?php _e( ‘Comments feed’ ); ?></a></li>

<?php

/**

 * Filters the “WordPress.org” list item HTML in the Meta widget.

 *

 * @since 3.6.0

 * @since 4.9.0 Added the `$instance` parameter.

 *

 * @param string $html     Default HTML for the WordPress.org list item.

 * @param array  $instance Array of settings for the current widget.

 */

echo apply_filters(

 ‘widget_meta_poweredby’,

 sprintf(

  ‘<li><a href=”%1$s”>%2$s</a></li>’,

  esc_url( __( ‘https://wordpress.org/’ ) ),

__( ‘WordPress.org’ )

  ),

$instance

);

wp_meta();

?>

</ul>

بعد العثور على الكود يمكنك حذف الروابط التي لا تحتاجها، وإضافة روابط أخرى عبر أكواد PHP و html، فمثلا إن كنت تريد حذف رابط خلاصة آخر المقالات وترك باقى الروابط “تسجيل- تسجيل الدخول- إدارة الموقع” يمكنك استعمال الكود التالى:

<ul>

                <?php wp_register(); ?>

                <li><?php wp_loginout(); ?></li>

                <?php wp_meta(); ?>

</ul>

بعد الإنتهاء من التعديل على الودجت قم بحفظ التغييرات، ستظهر لك رسالة من برنامج FTP المستخدم “FileZilla”، إذا كنت تريد استبدال الملف إضغط على “نعم”.

كيف تتحكم في الودجات

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

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

للتحكم فى إضافة أو حذف الودجات على منصة الووردبريس نتبع الآتى:

إضافة ودجات إلى الموقع

لكي تقوم بإضافة ودجات إلى الموقع، إذهب إلى القائمة الفرعية ثم إختر “مظهر” سوف يتم توجيهك مباشرةً إلى صفحة الودجات المتاحة لك على الموقع، ثم قم بالآتى:

1. إختار الودجت التى تريد إضافتها إلى الموقع.
2. حدد المكان الذى تريد وضع الودجت فيه.
3. إضغط على “أضف ودجت”.
4. ثم قم بتعديل الودجت وإضافة عنوان له.
5. بعد الإنتهاء إضغط على حفظ وسيتم حفظ الودجت في المكان المحدد كما هو موضح بالصورة التالية:

 

 

حذف الودجت

لكي تقوم بحذف ودجت معين من مكانه، قم بالضغط على الودجت المراد حذفها، ثم اضغط حذف وسوف يتم حذفها على الفور.