البحث في الموقع

هل أنت مهتّمٌ بإنشاء إضافة ووردبريس خاصّة بك من الصّفر؟ إن لم تكُن قد قمت ببرمجة إضافة خاصّة بك من قبل فقد يبدو لك ذلك كالتوغل في عالم مجهولٍ، خاصّة إن لم تكُن تثق بمهاراتك في لغة PHP. التحدّي الذي ستواجهه سيكون معرفتك من أينَ ستبدأ، بالإضافة إلى قدرتك على تقبّل إمكانيّة ارتكابك لعدّة أخطاءٍ طيلة مسار التعلّم. الإضافات تسمح لك بإضافة جميع أنواع الوظائف الممكنة للووردبريس، انطلاقًا من إضافة استمارة تواصلٍ بسيطةٍ إلى صفحة ما لتعزيز حماية موقعك وُصولًا إلى إضافة قدرات تجارةٍ إلكترونية. تقريبًا يوجد إضافة لأيِّ شيءٍ يخطُر على بالك، إن لم يكن كذلك فيمكنك دائمًا إنشاء واحدة وفق تصوّراتك وحاجاتك. في هذا الدّرس ستتعلّمٌ طريقة برمجة إضافتك الخاصّة لكي تتمكّنً من تعديل وظائف: موقعك الووردبريس أو الإضافات الأخرى أو حتّى القوالب إن أردت. المعلِّقات، الأفعال و المرشِّحات (Hooks, Actions, Filtres ) قبل البدء بإنشاء إضافة خاصّة، فلنبدأ أوّلًا بإلقاء نظرةٍ مفصّلةٍ على المعلِّقات "hooks"، الأفعال "actions" والمرشِّحات "filtres". إنّها تلك العناصر التي يترّكز عليها نظام الإضافة بالكامل والتّي ستُساعدك بشكلٍ كبيرٍ لفهم ما يحدث خلف الستار حول طريقة عمل الووردبريس. لنلقِ نظرة على هذا المثال. ماذا لو أردتَ إنشاء إضافةٍ تقوم بإضافة شفرة تتبُّع تحليليّةٍ لموقعك؟ في العادة هذا النوع من البرمجيّات يتمُّ إضافته في نهاية صفحة الموقع مباشرة فوق وسمِ الإغلاق. هذه الشفرة يجب أن تبقى في ذلك المكان حتّى وإن تمّ تغيير القالب ويجب أن تعمل على أيّ موقع ووردبريس، إذًا كيف ستجعل هذه الشفرة تعمل دائمًا إن لم تكن لديك أية سلطة تحكّم مباشر على القوالب؟ تذكّر أنّه في درس تطوير ووردبريس للمبتدئين: برمجة القوالب قمت بذكر دوال ()wp_head و ()wp_footer و الطريقة التي يجب عليك إضافتها بها في قالبك. مثالنا هذا يبيّن بالتحديد لماذا يجب أن توضع هذه الدّوال بالطريقة المحدّدة سلفًا. دالّة ()wp_footer يمكنها أن تقوم بتشغيل دوالٍّ أخرى محدّدة بواسطة الإضافات. إليك مثال كود يمكنك أن تستمتع بالتجريب عليه: <?php function my_tracking_code() { echo 'Paste tracking code from Google Analytics here'; } add_action( 'wp_footer', 'my_tracking_code' ); لنقم الآن بتفكيك الكود قطعةً قطعة. أوّلًا لقد قمت بكتابة دالّة تقوم بطبع شفرة التتبّع. هذه الدالّة غيرُ مستخدمة في أيّ مكان، هي فقط موجودة بإضافتي. بعد ذلك استخدمت دالّة ()add_action لإخبار الووردبريس متى يجب تشغيل الدالّة. متى ما وجد ووردبريس بدالّة ()wp_header فإنّه سيجد كلّ الدّوال المعلّقة بها بواسطة ()add_action . عندئذٍ سيقوم الووردبريس بتشغيل هذه الدّوال واحدة بواحدة وصولًا إلى دالّتنا التي تقوم بطبع شفرة التتبّع كنتيجة. هذا هو أساس المعلِّقات "hooks" ولكنّنا سنخوض فيها بشكلٍ أعمق لاحقًا خلال هذا الدَّرس لكي تتعلّم عنهم أكثر وتكون قادرًا على استغلال قدراتهم بشكل أفضل. قبل الانتقال إلى شيء آخر أريد ان ألفت انتباهك الى شيء مهم، دالة ()wp_footer الموجودة في تذييل القالب ليست معلِّقا "hook" بل هي في الحقيقة مجرّد دالّة تحتوي على معلِّق في مكان ما بداخلها. للنداء على معلِّق "hook" نستخدم (’do_action(’wp_footer، لكنّ هذا لم يكن مهمًّا في المثال الأوّل. على كلٍّ ستفهم أكثر عن هذا قريبًا! المصطلحات الآن وبعد أن أخذت لمحةً عمَّا سنتحدث عنه، دعني أشرح لك بطريقةٍ مرتّبةٍ المصطلحات التي ستلتقي بها طيلة هذا الدّرس. المعلِّقات "hooks" هي جزء من API إضافات الووردبريس. الأفعال والمرشِّحات "Actions and Filtres" عبارة عن نوع مختلف من المعلِّقات. الأفعال "actions" تسمح لك بإضافة وظائف، أنت في الأساس ستقوم بتحديد دالّة تشتغل في كلّ مرّة يقوم ووردبريس بمعالجة المعلِّق "hook" . المرشِّح "filter" يعمل بشكل مماثل و لكنّه عوض أن يضيف دوالًّا جديدة يقوم بتعديل الدوّال الموجودة مسبقًا بالووردبريس. مثلًا ووردبريس يحتوي على معلِّق يحدّد طول المقتطف إلى 55 كلمةٍ، يمكنك تعديل ذلك باستخدام المرشِّح لجعل عدد كلمات المقتطف أيَّ رقم ترغب به. كلًّ شيءٍ عن الأفعال: الآن وبعد أن صِرنا نعرف القواعد، فلنلقِ نظرةً مفصّلةً على دالّة ()add_action لفهمها بشكلٍ أفضل. هذه الدّالة تأخذ أربعة معاملات هم: اسم المعلِّق. اسم الدالّة التي نريد إضافتها للمعلِّق. الأولويّة. المعاملات المقبولة. لقد سبق وأن ألقينا نظرةً على أوَّل مُعاملين اللّذان هما في الحقيقة المُعاملان الوحيدان الاجباريّان بحيث يقومان بتحديد الدّالة المراد إضافتها والمكان المراد تشغيلها به. المُعامل الثالث يقوم بتحديد ترتيب الدوّال التي يتمّ تشغيلها. فائدة هذا المُعامل تظهر عندما تريد إضافة عدّة دوالٍّ إلى نفس المعلِّق. يمكنك مثلًا إضافة عدَّة شفرات تتبُّعٍ لموقعك وباستخدام مُعامل الأولوية يمكنك التحكُّم بأيّ دالّةٍ سيتمُّ تشغيلها أوّلًا. المُعامل الرّابع يخبر الووردبريس عدَد المعاملات التي تقبلها الدالّة المراد تعليقها. يجب عليك إلقاء نظرة في دليل الووردبريس لِمعرفة إن كان يتوّجب عليك وضع قيمة هنا لأنّ لكلِّ معلِّقِ خصائصه. بعض الدّوال قد تأخذ أكثر من معاملٍ، في هذه الحالة سيكون عليك أنّ تحدّد ذلك هنا. ألقِ نظرةً على المثال أدناه لكي تعرف لِما سيتوجّب عليك استخدام هذه الطريقة عند إنشاء معلِّقاتك الخاصّة لاحقًا. مثال عن فعل ووردبريس لا يوفّر الأفعال للقوالب فقط ولكن أيضًا لواجهة المدير إضافةً إلى أفعال خاصّة بالمستخدمين. معلِّق publish_post يتم تشغيله في كلِّ مرّةٍ يتم نشر مقال ما ليسمح لك بالقيام بشيءٍ ما في تلك المرحلة. الحاجة للمُعاملات تصبحُ ظاهرةً هنا. إذا قمتُ بإضافة دالّةٍ لهذا المعلِّق فكيف لي أن أعرف أيَّ مقالٍ تمَّ نشرهُ وماذا كانت تفاصيلهُ؟ عند قراءة دليل استخدام المعلِّقات يُمكنك أن ترى أنَّ الدالّة تحتوي على معاملين: مُعامِل معرِّف المقال ومُعامِل بيانات المقال. مثلًا لِنقم بإرسال بريدٍ إلكترونيٍّ لكاتب المقال عندما يُنشر مقاله: <?php function our_author_notification( $id, $post ) { $author = $post->post_author; $name = get_the_author_meta( 'display_name', $author ); $email = get_the_author_meta( 'user_email', $author ); $link = get_permalink( $id ); $message = 'Hello ' . $name . ", \n\n" . "Your artcile <a href='" . $link . "'>" . $post->post_title . "</a> has been published."; wp_mail( $email, 'One of your posts has been published', $message ); } add_action( 'publish_post', 'our_author_notification', 10, 2 ); كلًّ شيءٍ عن المرشِّحات: كما سبق وأن ذكرته سابقًا، المرشِّحات تعمل بشكلٍ مماثلٍ للأفعال ولكنّها تقوم بتعديل البيانات لذا ستجد نفسك تقوم بإرجاع نتائج داخل دوالّك المعلّقة. لإضافة مرشِّح نستخدم الدالّةَ ()add_filter التي ستستخدم نفس معاملات الدالّة ()add_action. مثال عن مرشِّح: أحسن مثالٍ للبدء به سيكون تعديل كلمة “قراءة المزيد” الموجودة بِنهاية المقتطف، في الوضع الافتراضي ستجدها بهذا الشَّكل "[…]". لتعديلها يمكنك القيام بشيء مثل هذا: <?php function our_excerpt_more( $more ) { return '... هناك المزيد'; } add_filter( 'excerpt_more', 'our_excerpt_more' ); لاحظ أنّني لم أحدّد مُعامل الأولويّة ولا مُعامل عدد المُعاملات المقبولة. هذا سيجعل الأولويّة 10 وعددُ المُعاملات المقبولة 1. هنا أنا لا أستخدم المعامل المُمرَّر في الدالة more$ إطلاقًا، أنا فقط أقوم بإرجاع نص خطّيٍ. يمكنك استخدام نفس الطريقة لتضمين إعلانٍ قبل الفقرة الأولى من مقالك. انظر الى المثال التالي: function in_content_ad( $content ) { $ad = '<div class="in-content-ad"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Advertisement&w=250&h=250"></div>'; return $ad . $content; } add_filter( 'the_content', 'in_content_ad' ); مع قليل من الـ CSS لتعويم الإعلان نحو اليمين، يُمكنك الحصول على صندوقِ إعلاناتٍ قياسيٍّ داخل محتوى مقالك خلال ثوانٍ معدودة. تعريف المعلِّقات: معرفة كيفيّة تعريف المعلِّقات إضافة إلى معرفةِ الطريقة التي تُنشِئ بها معلِّقاتك الخاصّة سيكون له أثرٌ كبير على فهمك لنظام ووردبريس. فلنفترض أنَّك تريد إنشاء إضافة متجر إلكتروني وأنّك ستقوم بإضافة وظائف لقائمة المنتجات، يمكنك القيام بشيءٍ مشابه لهذا: <?php $products = get_products( 10 ); show_products(); هنا أنت قمت بكتابةِ برمجيّتك بطريقة "إجباريّة" لكي تقوم بعرض فقط 10 منتجات. ولكن ماذا لو حاول شخص ما صنع إضافة لعملك وأراد أن يُظهر فقط ثلاثة منتجات؟ لو أنّك كتبك برمجيّتك بذكاء فإنّك ستسمح للأخرين بتعديلها. دعنا نستخدم معلّقًا للسماح للمطوّرين باستخدام عملنا وتطويره: <?php $product_count = apply_filters( 'product_count', 10 ); $products = get_products( $product_count ); show_products(); باستخدام دالّة ()apply_filters نحن نقوم بإخبار ووردبريس أنّ عندنا معلِّقًا اسمه product_count و أنّنا نريد أن نشغّل جميع الدّوال المربوطة به. في أيّة إضافة أخرى، يمكن للمطوّر أن يغيّر قيمة عدد المنتجات الظاهرة إلى ثلاثةٍ مثلًا باستخدام الطريقة التالية: <?php add_filter( 'product_count', 'carousel_product_count' ); function carousel_product_count( $count ) { return 3; } سنتابع في الدرس القادم أساسيات إنشاء الإضافة وكيفية إضافة خصائص القالب للإضافات… ترجمة -وبتصرّف- للمقال WordPress Development for Beginners: Building Plugins لصاحبه Daniel Pataki

تعرّفنا في الدرس السابق على المعلِّقات، الأفعال و المرشِّحات (Hooks, Actions, Filtres ) وسنتعرّف في هذا الدرس على أساسيات إنشاء الإضافة وكيفية إضافة خصائص القالب للإضافات… أساسيّات إنشاء إضافةٍ: الآن وقد صِرنا نعرف كلّ شيءٍ عن المعلِّقات فإن الخطوة التاليّة ستكون معرفة طريقة استخدامها. لنعد خطوة للوراء ولنلق نظرة عامّة على الإضافات. يتم وضع الإضافات في المجلّد الرئيسي للإضافات في موقعك ووردبريس، يوجد هذا الملف عادة في هذا المسار "wp-content/plugins". كمثال لنقم بإنشاء إضافة تقوم بإضافة رابط تغريده تحت مقالاتك. أوّلا، فلننشئ مجلّدًا في مجلّد الإضافات الرئيسي ولنسمّه مثلا "tweet-plugin-tutorial". الآن أنشئ ملفًّا داخل هذا المجلّد وسمّه "tweet-plugin-tutorial.php". الآن قم بفتح الملف وقم بنسخ البرمجيّة التالية بداخله: <?php /** * Plugin Name: Tweet Plugin Tutorial * Plugin URI: http://danielpataki.com * Description: This plugin adds a simple tweet link below posts. * Version: 1.0.0 * Author: Daniel Pataki * Author URI: http://danielpataki.com * License: GPL2 */ هذه المعلومات سيتم عرضها في لوحة تحكّم المدير في قسم الإضافات. بمجرّد حفظك للملف ستلاحظ ظهور إضافةٍ جديدةٍ في قائمة الإضافات، تهانينا! لقد أنشأت أوّل إضافة لك بإتقان ولكن لا تفرح كثيرًا فهذه الإضافة لا تقوم بأيّة وظيفة بعد، ولكن يمكنك تفعيلها الآن وهو ما ندعوك للقيام به. حاليًّا قمنا بـ 90% من العمل. كلُّ ما علينا القيام به الآن هو إيجاد طريقة لإضافة رابط التغريدة أسفل محتوى المقال. ربّما أنت تفكّر بتعديل محتوى المقال عن طريق إضافة نصٍّ إضافي له. هذا يعني أنّك تفكّر في استخدام معلِّق the_content مثلما قمنا بهذا سابقًا: <?php function tweet_link( $content ) { return $content . '<p><a href="https://twitter.com/intent/tweet?url='.get_permalink().'">Tweet about this</a></p>'; } add_action( 'the_content', 'tweet_link' ); هذه البرمجيّة ستقوم بإضافة رابطٍ بعد محتوى مقالِتنا، ما سيتيح لمستخدمينا مشاركة رابط المقال عن طريق تغريده. في الواقع هذا كلّ ما يجب عليك معرفته لإنشاء إضافة ووردبريس. جميع الإضافات هي عبارة عن مزيج من الدّوال والمعلِّقات التي تحدِّد المكان الذي سيتم منه تشغيل هذه الدّوال. لذا من الآن فصاعدًا عليك التركيز على تعلُّم الأنظمة الفرعية مثل Options API, Metadata API وغيرها. إضافة خصائص القالب للإضافات: هناك عدّة طرق لإضافة خصائص لقوالبك. دعنا أولًّا نلقي نظرة على الطريقة القياسية للقيام بهذا الأمر عن طريق دليل ووردبريس. سوف نبدأ بإنشاء صفحة مدير ستحتوي على النموذج التالي: <?php add_action('admin_menu', 'tweetlink_settings_menu'); function tweetlink_settings_menu() { add_menu_page('Tweet Link Settings', 'Tweet Link', 'manage_options', 'tweetlink-settings', 'tweetlink_settings_page', 'dashicons-twitter'); } function tweetlink_settings_page() { echo '<div class="wrap"><h2>Tweet Link Options</h2></div>'; } دالّة ()tweetlink_settings_menu تمّ تعليقها بمعلِّق admin_menu. حسب دليل الووردبريس هذه هي الطريقة الصحيحة التّي يجب استخدامها لإنشاء قائمة مدخلات في لوحة التحكّم. العمل سيتّم عن طريق دالّة ()add_menu_page التي تأخذ مجموعة مُعامِلات صفحة ذات مستوى أعلى. المعاملات التي تأخذها هذه الدّالة هي: عنوان الصّفحة – يستخدم في وسم العنوان عنوان القائمة – يستخدم في كتابة اسم القائمة في الجهة اليسرى/اليمنى من لوحة تحكم المدير. الإمكانيّة – لتحديد أقل مستوى يمكنه مشاهدة القائمة (مثلا القائمة ستكون ظاهرة فقط للمدير والمحرّرين) الاسم اللطيف للقائمة – يستخدم في الرابط المؤدّي لصفحة القائمة. الدّالة - اسم الدّالة التي تقوم بالتحكّم بالمُخرجات. الأيقونة – رابط صورة او نص لأيقونات ووردبريس. الموقع – تموضع العنصر ضمن القائمة. إليك كيف تبدو صفحة الخصائص في لوحة التحكم: قد تبدو لك هذه الصّفحة رائعة ولكن في الحقيقة هي مبالغةٌ كبيرة إنشاء صفحة كاملة من أجل إضافة بسيطة كالتّي نعمل عليها الآن، لذا سيكون من الأفضل وضع هذه الصفحة داخل قائمة الإعدادات الموجودة سلفا بالووردبريس. يمكنك القيام بذلك باستخدام دالّة ()add_options_page. الخطوة التّالية ستكون جعل الووردبريس يعلم حول إعدادات تغريدتنا. هذا الأمر سيتطلب استخدام دالّة ()register_settings داخل دالّة معلّقة إلى ()to admin_init. إليك كيف سيكون شكل البرمجيّة: <?php add_action( 'admin_init', 'tweetlink_settings' ); function tweetlink_settings() { register_setting( 'tweetlink_settings', 'twitter_account' ); } كلّ شيءٍ تمام. الخطوة الأخيرة ستكون إضافة استمارة تستخدم خصائصنا. استخدم البرمجيّة التاليّة كنموذج لإنشاء إعداداتك الخاصّة، لا تنسَ استخدام دوال ()settings_fields و ()do_settings_sections لضمان قيام الووردبريس بحفظ البيانات لك. <?php function tweetlink_settings_page() { ?> <div class="wrap"> <h2>Tweet Link Settings</h2> <form method="post" action="options.php"> <?php settings_fields( 'tweetlink_settings' ); ?> <?php do_settings_sections( 'tweetlink_settings' ); ?> <table class="form-table"> <tr valign="top"> <th scope="row">Twitter Account</th> <td><input type="text" name="twitter_account" value="<?php echo esc_attr( get_option('twitter_account') ); ?>" /></td> </tr> </table> <?php submit_button(); ?> </form> </div> <?php } عند نهاية العمليّة يجب أن ترى ظهور حقل جديد يُمكّنك من إدخال حسابك على تويتر ثم الضغط على حفظ. بعد ذلك يمكنك استخدام دالّة 'get_option( 'twitter_account ( لاسترجاع القيمة المُدخلة واستخدامها بأي مكان داخل إضافتك. يمكننا الآن التعديل على رابط التغريدة لإضافة "via @username" إذا قام المستخدمون بإضافة حسابهم على تويتر في صفحة الخصائص. إليك كيف عدّلت دالّة ()tweet_link <?php function tweet_link( $content ) { $url = 'https://twitter.com/intent/tweet'; $url .= '?url=' . get_permalink(); $account = get_option( 'twitter_account' ); if( !empty( $account ) ) { $url .= '&via=' . $account; } return $content . '<p><a href="' . $url . '">Tweet about this</a></p>'; } خاتمة هكذا نختم سلسلتنا حول تطوير ووردبريس للمبتدئين. في هذه المقالة تعلّمنا طريقة إنشاء إضافة بسيطة نتمنّى أنها خلقت داخلك شعورًا بالرّضى كونك تمكّنت من برمجة أوّل إضافة لك. فقط التجربة والإصرار من سيجعلان تطوير الووردبريس أسهل بالنسبة إليك وسترتقي من مجرّد مبتدئ غير خبير إلى مستوى مطوّر. ترجمة -وبتصرّف- للمقال WordPress Development for Beginners: Building Plugins لصاحبه Daniel Pataki

تَستخدم المُرشّحات في Angular نمط خطّ الأنابيب (pipeline) بشكلٍ مشابه للـUnix shell، فقد استعارت رمز الخطّ العمودي المشابه لرمز الأنبوب من Unix لتستخدمه لتمرير عبارات التّهيئة أو خواص المجال للمُرشّح وأيضًا لربط المُرشّحات معًا. سنقوم بتحميل إطار عمل Bootstrap الخاصّ بـCSS لأننا سنقوم بإنشاء بعض الجداول في أمثلة هذا الفصل ممّا سيجعلها أكثر ترتيبًا، وسنجلبه من شبكة توصيل المحتوى (CDN) كما تُبيّن الشّيفرة التّالية. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>ستسخدم الأمثلة أيضًا المتحكمات و الخدمات لتحضير البيانات للعرض، لذا سنقوم بتعريف وحدة جذرٍ لإداراتهم. angular.module('app', []);سنقوم بإسناد اسم وحدة الجذر لتطبيقنا إلى التّوجيه ng-app. <body ng-app="app"> <!-- الأمثلة توضع هنا --> </body>مفهوم المُرشّحات سهلُ التّعلّم، لذا سيكون هذا الفصل مرورًا سريعًا على المُرشّحات المبنيّة داخل Angular، ثُمّ سنستعرض كيف يمكننا إنشاء المُرشّحات الخاصّة بنا. lowercase و uppercaseلنبدأ جولتنا مع المُرشّحات المبنيّة في Angular ببعض التّحويلات على السّلاسل النّصية، والمُرشّح lowercase بدايةٌ ممتازة. نبدأ بكتابة أيّ عبارة (في مثالنا استخدمنا عبارة "AngularJS")، ثم نضع رمز الأنبوب (|)، وبعده نكتب اسم المُرشّح (lowercase). <p>{{"AngularJS" | lowercase}}</p>الناتج: angularjsيُمكننا تطبيق المرشّح uppercase على النّتيجة عن طريق إضافة رمز أنبوبٍ آخر، ثمّ اسم المرشّح، وهذا ما نُسمّيه بسلسلة المُرشّحات. <p>{{"AngularJS" | lowercase | uppercase }}</p>الناتج: ANGULARJSبالطّبع ليس هناك فائدةٌ من وضع lowercase قبل uppercase، وسنرى في نهاية هذا الفصل مثالًا أفضل على سَلسَلة المُرشّحات، ولكن على الأقل رأينا كيف نقوم بذلك الآن. numberالمُرشّح التّالي سهلٌ أيضًا، المُرشّح number يُقدّم المساعدة الأساسيّة لتنسيق الأعداد وتقريبها. <p>{{1000.12345 | number}}</p>الناتج: 1,000.123بالنّسبة لإعداداتي المحلّيّة، en-us، المُخرجات في المثال هي 1,000.123، يقوم المُرشّح بتقريب العدد المُمرّر إليه إلى 3 خاناتٍ بعد الفاصلة، ومن الواضح أنّ هذا لن يناسب جميع الاستخدامات، ولحسن الحظ، يمكننا تمرير وسطاء إلى المرشّحات التي تقبل القيام بذلك، والمُرشّح number يقبل ذلك. الوسيط الأول الذي نقوم بتمريره هو القيمة التي نريد تطبيق المُرشّح عليها، أما الوسيط الإضافي الثّاني فيجب أن يتبع اسم المُرشّح ويكون مفصولًا عنه بنقطتين (:). الوسيط الإضافيّ الثّاني للمُرشّح number هو fractionSize، وهو يسمح لنا بالتّحكّم بعدد المنازل التي يتم عرضها بعد الفاصلة، وبهذا يمكننا رؤية القيمة كاملةً. <p>{{1000.12345 | number:5}}</p>الناتج: 1,000.12345ماذا يحدث لو قمنا بتمرير قيمةٍ سالبةٍ إلى الوسيط fractionSize؟ استبدل 5 بـ 3- ثمّ جرّب 4-، هل يُمكنك تخمين السّبب؟ لا مشكلة، حتى أنا لا يمكنني ذلك. currencyالمُرشّح التّالي مفيدٌ بعض الشّيء في التّطبيقات العمليّة: يُقدّم المُرشّح currency الدّعم الأساسيّ لتنسيق العملة وتقريب قيمة العدد. <p>{{1999.995 | currency}}</p>الناتج: $2,000.00وهو يقبل وسيطين إضافيين، أوّلهما هو رمز العملة، استبدل currency بـ'€':currency في المثال السّابق لتجريبه. الوسيط الثّاني هو fractionSize. انتبه عند استخدامك للمُرشّح currency عند تقريب المبَالِغ الماليّة، فليس هناك طريقةٌ واحدةٌ فقط هي الصّحيحة عندما ننظر للأمر على أنّه مسألةٌ ماليٌّةٌ وليست تقنيًّة، فهذا المُرشّح يستخدم تقريب النصف للأعلى وقد لا يكون هذا جيّدًا دومًا، كما رأينا في المثال السّابق. لا يوجد حاليًّا طريقةٌ موثّقةٌ لتجاوز طريقة المُرشّح في التّقريب، ما رأيك بأن تحاول التّعديل على المثال السّابق لتجعل المُرشّح يعرض القيمة الصّحيحة. dateسيبيّن المُرشّح date لك إلى أيّ مدىً تذهب بك إعدادات المُرشّحات. لا تسمح Angular بتهيئة كائنٍ من نوع Date داخل عبارة، لذا سنستخدم متحكّمًا لتحضير النّموذج الخاصّ بالمثال. angular.module('app') .controller('DateController', function($scope) { $scope.now = Date.now(); });يبدأ المثال التّالي بعنصرٍ في المجال اسمه now، بدلًا من كتابة عبارة. <p ng-controller="DateController"> {{now | date}} </p>الناتج: Oct 28, 2015إن قمت بإزالة date | من المثال السّابق سترى القيمة الأصليّة للعنصر now، وهي عدد الميللي ثانية منذ شهر كانون الثّاني عام 1970 حسب التوقيت العالميّ UTC. والآن قم بتجربة بعض التّنسيقات المُعرّفة سابقًا، والتي يدعمها هذا المُرشّح، قم بتجربة 'date:'medium | ثمّ 'date:'shortTime | وبعدها 'date:'yyyy-MM-dd HH:mm:ss Z |، وجرّب بعض التّعديلات من عندك بعد ذلك. يُسمح بكتابة السّلاسل المحرفية داخل نمط التّنسيق، مثلًا "date:"MMMM 'of the year' yyyy |، وبدلًا من استخدام محارف الهروب مثل % لوضع رموز التّنسيق، سيكون عليك وضع السّلاسل المحرفية بين علامتَي تنصّيّصٍ مفردة (') وأن تكون عبارة التّنسيق الكاملة بين علامتَي تنصّيّصٍ مزدوجة ("). كما أنّ الفراغات في عبارة التّنسيق تدخل في تنسيق العبارة. orderByيُمكن للمُرشّحات القيام بما هو أكثر من تنسيق المخرجات، حيث يُمكن استخدمها لتحويل المجموعات، كما سنرى في المثال التّالي. لنفترض أنّ خدمةً في النهاية الخلفية (backend) أَرجعت سجلًّا مرتًبًا بطريقةٍ غير مرغوبةٍ لأسباب تتعلّق بالعرض. (لتبسيط المثال، ستكون البيانات مكتوبةً يدويًّا داخل الخدمة items التي تراها أدناه، وذلك بدلًا من التّعامل مع نهايةٍ خلفيّة بعيدة حقيقيّة.) angular.module('app') .value('items', [ {name: 'Item 3', position: 3, color: 'red', price: 2.75}, {name: 'Item 1', position: 1, color: 'red', price: 0.92}, {name: 'Item 4', position: 4, color: 'blue', price: 3.09}, {name: 'Item 2', position: 2, color: 'red', price: 1.95} ]);سنقوم بعد ذلك بحقن المصفوفة items في داخل متحكّم. angular.module('app') .controller('ItemsController', function($scope, items) { $scope.items = items; });بناءً على ترتيب العناصر الحالي في المصفوفة، كيف يمكننا ترتيب العناصر حسب قيمة العنصر position؟ إن كنتَ قد قفزتَ من مقعدك الآن وصرخت قائلًا "Underscore" (أو "lodash")، فتستحقّ منّي وسام الوفاء لـJavaScript، ولكنّها ليست الإجابة التي نبحث عنها، فـAngular تملك مُرشّحًا للقيام بذلك، إنّه المُرشّح orderBy. <ol ng-controller="ItemsController"> <li ng-repeat="item in items | orderBy:'position'"> {{item.name}} </li> </ol>الناتج: 1. Item 1 2. Item 2 3. Item 3 4. Item 4هذا رائع، ولكن ماذا لو أردنا أن يكون التّرتيب بالجهة المعاكسة؟ في هذا المثال البسيط يمكننا القيام بذلك بطريقتين، الأولى هي إضافة الرمز - قبل اسم العنصر، أي أن نكتب 'orderBy:'-position بدلًا من 'orderBy:'position. (يمكنك أيضًا إضافة الرمز + لاختيار التّرتيب التّصاعدي، إلا أنّه لا يؤثّر على مثالنا السّابق.) أمّا الطّريقة الثّانية فهي إعطاء قيمةٍ للوسيط البولياني reverse بعد اسم العنصر المطلوب التّرتيبُ حسب قيمته. في مثالنا، قم بكتابة orderBy:'position':true بدلًا من 'orderBy:'position. فائدةٌ إضافيّة: عدّل سجلّ البيانات في المتحكّم بحيث تجعل عنصرين في المصفوفة لهما القيمة نفسها بالنّسبة للعنصر position، ألا يزال بإمكانك استخدام المُرشّحorderBy لترتيب العناصر بشكلٍ صحيح؟ ماهي الخاصّيّة التي استخدمتها؟ انتبه للتحديثاتبفضل طريقة Angular في الربط ثنائيّ الاتّجاه، سيكون من السّهل جدًّا أن تجعل النّماذج في قائمة أو جدول العرض قابلةً للتّعديل، كلّ ما تحتاجه هو إضافة خانة إدخالٍ داخل الحلقة مع إسناد اسم عنصر المجموعة إلى التّوجيه ng-model. ولكن انتبه، فبما أنّ Angular جاهزةٌ دومًا وتنتظر إعادة توليد العرض عند أيّ تغيير في الحالة، فقد يتمّ إعادة ترتيب قائمتك قبل أن تنتهي من تعديل العنصر حتّى. <table class="table table-condensed" ng-controller="ItemsController"> <tr ng-repeat="item in items | orderBy:'name'"> <td ng-bind="item.name"></td> <td><input type="text" ng-model="item.name"></td> </tr> </table> جرّب تعديل اسم أحد العناصر في المثال السّابق بحذف المحتوى أوّلًا ثمّ كتابة الأحرف، وستلاحظ مشكلةً كبيرةً في الاستخدام. فـAngular تقوم بإعادة توليد الجدول كاملًا، ونقل السطر إلى مكانٍ آخر قبل أن تنتهي من كتابته. أفضل الحلول لهذه المشكلة قد يكون استخدام عرضٍ(view) آخر منفصلٍ للتّعديل، كما يمكنك نقل المُرشّح orderBy من العرض إلى المتحكّم حيث يتمّ استدعاؤه مرّةً واحدة، وهذا ما سنتكّلم عنه في الفقرة القادمة، استخدام المرشحات في JavaScript. limitToالمُرشّح limitTo مفيدٌ عندما ترغب بعرض مجموعةٍ جزئيّةٍ فقط من مجموعةٍ مرتّبة. مثلًا، يمكننا استخدامها بالتّعاون مع المُرشّح orderBy لنعرض فقط أغلى عنصرين في المجموعة. <ol ng-controller="ItemsController"> <li ng-repeat="item in items | orderBy:'-price' | limitTo:2"> {{item.price | currency}} </li> </ol>الناتج: 1. $3.09 2. $2.75لا تُقدّم Angular طريقةً لتمرير وسيط offset إلى المُرشّح limitTo حاليًّا. ولتقديم حلٍّ كاملٍ للتصحيف (pagination) سيتضمّن ذلك استخدام التّابع slice داخل المتحكّم. filterاسم هذا المُرشّح ظريفٌ نوعًا ما، فهو مرشّحٌ اسمه filter، ربّما لم يكن من المناسب تسمية المُرشّحات بهذا الاسم العام (ربّما يكون الاسم مزخرِفات أو مساعِدات أفضل)، إلّا أنّ هذا المرشّح يقوم فعلًا بالتّرشيح. فهو يقوم بإعادة مصفوفةٍ تحوي فقط على العناصر التي تطابق الشرط المُسند. لنرى ما هي العناصر التي ستطابق وضعنا لشرطٍ يقول بأنّ القيمة العدديّة تساوي 3. <table class="table table-condensed" ng-controller="ItemsController"> <thead> <tr><th>name</th><th>color</th><th>price</th></tr> <thead> <tbody> <tr ng-repeat="item in items | filter:3"> <td ng-bind="item.name"></td> <td ng-bind="item.color"></td> <td ng-bind="item.price | currency"></td> </tr> <tbody> </table>لقد حصلنا على تطابقات في كلا العنصرين name وprice. ماذا سيحدث لو استبدلنا الشرط 3 بالسّلسلة النّصية '3' أو بسلسلة نصّيّة خالية؟ أو لو أضفنا فراغًا في البداية ('3 ')؟ لتجنُّب مطابقة أيّ عنصرٍ، يمكنك تمرير كائنٍ باعتباره شرط التّطابق. <table class="table table-condensed" ng-controller="ItemsController"> <thead> <tr><th>name</th><th>color</th><th>price</th></tr> <thead> <tbody> <tr ng-repeat="item in items | filter:{price: 2, color: 'red'}"> <td ng-bind="item.name"></td> <td ng-bind="item.color"></td> <td ng-bind="item.price | currency"></td> </tr> <tbody> </table>في المثال السّابق، لم يتمّ مطابقة 2 مع item 2 لأننا حدّدنا اسم عنصر التّطابق بأنّه price. أكثر ما يجعل المُرشّح filter رائعًا، هو السهولة الفائقة في دمجه مع الربط ثنائيّ الاتّجاه في Angular، لإنتاج صندوق ترشيحٍ قويّ. Filter: <input type="text" ng-model="q"> <table class="table table-condensed" ng-controller="ItemsController"> <thead> <tr><th>name</th><th>color</th><th>price</th></tr> <thead> <tbody> <tr ng-repeat="item in items | filter:q"> <td ng-bind="item.name"></td> <td ng-bind="item.color"></td> <td ng-bind="item.price | currency"></td> </tr> <tbody> </table>إن كان هناك مثالٌ واحدٌ يبيّن بأفضل طريقةٍ مرونة وقوّة امتدادات HTML التي توفّرها Angular، فقد يكون هذا هو. استخدام المرشحات في JavaScriptتحتاج أحيانًا إلى استخدام مُرشّح ما عندما يكون لديك القوّة الكاملة لـJavaScript، بدلًا من أن تكون محدودًا بما تسمح لك العبارات بالقيام به. مثلًا، أمرٌ بسيطٌ كمعرفة عدد العناصر التي أنتجها المُرشّح، لا يبدو ممكنًا. ربما يمكنك أن تقول بأنّه عندما تصبح العبارة كبيرةً وتحتاج إلى منطقٍ برمجيٍّ فمن الأفضل نقل شيفرتها إلى داخل متحكّم. <p ng-controller="ItemsController"> <!-- Invalid code! --> {{items | filter:{color:'red'}.length}} red items </p>الناتج: [{"name":"Item 3","position":3,"color":"red","price":2.75},{"name":"Item 1","position":1,"color":"red","price":0.92},{"name":"Item 4","position":4,"color":"blue","price":3.09},{"name":"Item 2","position":2,"color":"red","price":1.95}] red itemsيُمكنك حقن المُرشّحات أينما أردت، كما أنّه ليس من الغريب استخدام المُرشّح filter للتعامل مع مصفوفةٍ داخل متحكّم. يكون اسم التّابع الذي يقوم بالترشيح من الشكل filtername>Filter>. مثلًا لاستخدام المُرشّح date نقوم بحقن dateFilter، لاستخدام المُرشّح currency نقوم بحقن currencyFilter، ولاستخدام المُرشّح filter نقوم بحقن filterFilter. (أعرف ذلك، أعرف ذلك) angular.module('app') .controller('FilteredItemsController', function($scope, items, filterFilter) { $scope.redItemsCount = filterFilter(items, {color: 'red'}).length; });<p ng-controller="FilteredItemsController"> {{redItemsCount}} red items </p>الناتج: 3 red itemsما عليك إبقاؤه في ذهنك بشكلٍ أساسيّ هو أنّ استخدام المُرشّح داخل المتحكّم بدلًا من أن يكون في العرض، سيؤدي إلى عدم استدعاء المُرشّح عند حدوث تغييرات في واجهة المستخدم إن كانت تغييراتٍ لا تتضمّن إعادة استدعاء المتحكّم. ولحلّ هذه المشكلة يمكنك ربط استخدام المُرشّح يدويًّا بعنصرٍ في المجال باستخدام التابع scope.$watch. مرشح مخصصالمُرشّح المخصّص هو أفضل مكانٍ لتضع فيه الشيفرات التي تقوم بتحويل بيانات النّموذج للعرض، وذلك لأنّ المُرشّح نموذجيًّا مكوِّنٌ ثابت الحالة (stateless) ويُمكن استخدامه في أيّ مكانٍ داخل القوالب دون خوفٍ من أيّ تأثيراتٍ جانبيّة، كما أنّ إنشاء مُرشّح مخصّص ليس صعبًا، فبشكلٍ مشابهٍ لبقيّة المكوّنات في Angular، نقوم بتسجيل وصفةٍ للمُرشّح داخل الوحدة، باستخدام التّابع filter. angular.module('app') .filter('smiley', function() { return function(text) { return '\u263A ' + text + ' \u263A'; }; });في المثال السّابق، المُرشّح الفعليّ هو التابع الدّاخليّ الذي يقوم بوصل السّلسلة النّصية الممرّرة إليه عن طريق الوسيط text مع رمز الوجه الضاحك. يتم استدعاءُ هذا التابع في كلّ مرّة يتمّ فيها استدعاء المُرشّح، أمّا التابع الخارجيّ الذي يحيط بالمُرشّح فهو وصفة (recipe) إنشائية، وقد ناقشنا هذه الفكرة بعمقٍ في الفصل السّابق، الخدمات. يتمّ تشغيل الوصفة مرّةً واحدةً، أو لا يتمّ تشغيلها أبدًا إن لم يكن لها استخدامٌ في العرض. المُرشّحات المخصّصة تكون متوفّرة تلقائيًّا في أيّ مكانٍ في العرض، ويتمّ استخدامها تمامًا مثل المُرشّحات الأصليّة في المكتبة، حيث نقوم ببساطةٍ بإدخال العبارة فيأنبوب الترشيح داخل العرض، وذلك باستخدام رمز الأنبوب (|)، ويتم تمرير قيم الوسطاء الإضافيّة باستخدام رمز النّقطتين (:). <strong ng-bind="'hello' | smiley"></strong>الناتج: ☺ hello ☺إليك هذا التّحدّي: هل يمكنك إعادة تشكيل المُرشّح بحيث يصبح بإمكاننا تمرير رمز الوجه الضّاحك كوسيط؟ حقن التبعيةبالرغم من كون المُرشّحات ثابتة الحالة وبسيطةً نوعًا ما، إلّا أنّها يمكن أن تملك تبعيّاتٍ تحتاج إلى أن تُحقن. يسمح تابع الوصفة الإنشائيّة الخارجيّ بالتّصريح عن التّبعيّات تمامًا كما نقوم بذلك في الوحدات. فلنلقِ نظرةً على الكيفيّة التي نقوم بها بحقن التّبعيّات في داخل مُرشّح مخصّص للمحلّيّات (localization). سنقوم بتسمية المُرشّح بالاسم localize، ولكن قبل ذلك نحتاج إلى شيءٍ ما لنقوم بالحقن. يمكننا إنشاء جدول لمحتوى المتغيّر locales، حيث يتمّ تعريفها كخدمةٍ قابلةٍ للحقن باستخدام التّابع value. angular.module('app') .value('locales', { 'de': {greeting: 'guten Tag'}, 'en-us': {greeting: 'howdy'}, 'fr': {greeting: 'bonjour'} });يمكننا حقن هذه البيانات في داخل مُرشّحنا البسيط المخصّص بالتّصريح عن وسيطٍ اسمه locales، ولنتمكّن من الحصول على الموضع الحاليّ للمستخدم، يُمكننا استخدام الخدمة locale$ المبنيّة داخل Angular . angular.module('app') .filter('localize', function(locales, $locale) { return function(key) { var locale = locales[$locale.id] || locales['en-us']; return locale[key]; }; });سيعمل المثال السّابق معك فقط إن كانت إعدادات جهازك المحلّيّة من ضمن الأماكن المحدّدة في المثال، إن لم يكن موضعك موجودًا فقم بإضافته بنفسك مع عبارةٍ ترحيبيّة بلغتك. <p> The app says <strong ng-bind="'greeting' | localize"></strong>. </p>الناتج: The app says howdy.يُمكنك أيضًا أن تقوم بحقن المُرشّحات في داخل مُرشّح آخر. يمكنك نقل الوسطاء الكثيرة وسلاسل المُرشّحات الطويلة إلى مُرشّح مخصّص، وهذه طريقةٌ رائعةٌ لإزالة بعض الضجّة من شيفرة العرض. خاتمةالمُرشّحات المبنيّة في Angular جزءٌ هامٌّ من قدراتها الرائعة، كما أنّ استخدامها سهلٌ وبديهيّ بشكلٍ عامٍّ، كما أنّها مرنة بفضل الوسطاء الإضافيّة وسَلسلة المُرشّحات، وأيضًا فإنّ إنشاء مرشّحٍ مخصّص سيكون سهلًا فورَ إتقانك لنمط الوصفة الإنشائيّة (creation recipe) التي تسمح لك بحقن التّبعيّات. والآن بعد أن اعتدنا استخدام هذه الأنماط، فنحن الآن جاهزون للتّحدّي في الفصل القادم، حيث سنقوم بإعداد التّوجيهات الخاصّة بنا. ترجمة وبتصرّف للفصل التاسع من كتاب: Angular Basics لصاحبه: Chris Smith.

كنت في الماضي قد قمت بإنشاء العديد من مثل هذا التأثير باستخدام الفوتوشوب، ولكن مع ظهور CSS3 وجلبها للكثير من الخصائص المدهشة فقد قررت أن أقوم بدرس حول كيفية إنشاء ذلك التأثير بمساعدة واستخدام التدرجات (gradients) والمرشحات (filters) الموجودة في CSS3. سوف نستخدم التدرجات (gradients) والمرشحات (filters) الخاصة بلغة CSS لدمج العديد من الألوان المتداخلة لإنشاء التأثير المطلوب. إنّ دعم المتصفحات للمرشحات جيد جدًا فهو مدعوم في جميع المتصفحات الحديثة ما عدا متصفحات Internet Explorer ومتصفح Opera mini (أنقر هنا لمعلومات أكثر عن دعم المتصفحات). كيف تقوم بإنشاء التأثير باستعمال CSS فقط<div class="retro"> <img src="images/retrofy-me.jpg" alt="Retro is cool!" /> </div>حتى نقوم بإنشاء التأثير سنحتاج إلى صورة، لذلك قم بإضافة صورة باستخدام وسم `<img>`. وبما أنّ بعض تأثيرات CSS تعتمد على وجود عنصر حاوي من نوع block فسوف تكون الصورة موجودة داخل وسم `<div>` (يمكنك استخدام `<p>` بدلًا من `<div>` فكلاهما من نوع block ولكني أفضل استخدام div). .retro { -webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1); box-shadow: inset 0px 0px 100px rgba(0,0,20,1); background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%); background: linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%); display: table; } .retro img { -webkit-filter: sepia(20%) brightness(10%) contrast(130%); filter: sepia(20%) brightness(10%) contrast(130%); position: relative; z-index: -1; }يمكنك استعمال تنسيقات CSS الموجودة في الأعلى لإنشاء تأثير retro على أي صورة. كيف يعمل كل شيء نبدأ تنسيقات CSS باستعمال خاصية `box-shadow` واعطائها القيمة (inset 0px 0px 100px rgba(0,0,20,1 مما يخلق توهجًا داخليًا بلون أزرق داكن وذلك لمحاكاة الصورة باهتة الحواف. ولكن هناك مشكلة وهو أن التأثير الذي تصنعه خاصية box-shadow لن يظهر لأنه سيكون موجودًا أسفل الصورة وسوف يتمدد على العرض الكامل للصفحة وهو ما لا نريده، ولحل تلك المشكلة سوف نضيف للصورة الخصائص position: relative و z-index: -1 حتى نجعل التأثير يظهر فوقها، كما أننا سوف نعطي الخاصية display: table للعنصر الأب حتى نمنع تمدده على كامل الصفحة ويكتفي فقط بالتمدد على أبعاد الصورة. لاحظ أننا استعملنا تدرجين؛ الأول (linear-gradient(top, rgba(255,145,0,0.2) 0%, rgba(255,230,48,0.2) 60% وسوف يعطي تدرجًا عموديًا من اللون البرتقالي إلى اللون الأصفر، وتسمح لنا قيم rgba بتقليل شفافية الألوان حتى نسمح للتدرج بالظهور وكأنه عبارة عن غشاء شفاف فوق الصورة. أمّا بالنسبة للتدرج الثاني (linear-gradient(20deg, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 35% فقد أضفناه للعنصر الأب (وسم div) ويتدرج من لون أحمر ذو شفافية 50% إلى نفس اللون ولكن بشفافية 0% وبزاوية 20 درجة لمحاكاة تأثير تسرب الضوء الجميل. تعمل التأثيرات حتى الآن بشكل جيد ولكن الصورة تبدو مسطحة كثيرًا، لذلك سوف نستعمل مرشحات CSS كالتالي: (filter: brightness(10%) contrast(130%) sepia(20% للتعديل على الصورة قليلًا حتى تبدو أفضل، فخاصية brightness ستزيد سطوع الصورة بمقدار 10%، وخاصية التباين contrast تقوم بتدكين المناطق الداكنة وتفتيح المناطق الفاتحة، أمّا خاصية sepia فتضيف للصورة درجة من اللون البني المائل للصفار وبقيمة 20% حتى نحافظ على الألوان الأصلية للصورة. خاتمةكما رأيت، فبدمج خاصية gradient مع خاصية filter يمكننا إنشاء تأثيرات جميلة وعصرية وتشبه بدرجة كبيرة تلك التي يمكننا إنشاؤها باستخدام برنامج الفوتوشوب. ترجمة -وبتصرّف- للمقال Create a Trendy Retro Photo Effect Purely with CSS لصاحبه Iggy.

بَعدَ أَن تَعرفنا في المقالات السابقة عَن إعداد التَقارير (Reports) وأنواعها والتقارير المُخصصّة Custom Report يأتي هذا المقال تبعا لعرض خاصية المُرشَحات (filters). ما هي المُرشّحات Filtersالمُرشّحات هي أداة تُتيح لَك تقليص بَيانات الزيارات المُتضمنة في الملف الشخصي وتَعديلها، على سبيل المثال: يُمكنك استخدام مُرشّحات لاستبعاد زِيارات مِن عَناوين IP مُعينة، أو التَركيز عَلى نِطاق فَرعي أَو دَليل مُعين، أو تَحويل عَناوين URL لصَفحات مُتفاعلة "Dynamic Pages" إلى سَلاسل نَصية قَابلة للقِراءة وطَريقة إنشاء مُرشح في حِساب Google Analytics هي الذِهاب إلى قَائمة مَسؤول Admin ثُم إلى قِسم العَرض View واختيار الفِلتر Filter "المُرشح" مِن القَائمة ثم الضَغط على زر فلتر جديد New Filter كَما في الصورة التَالية: و هُناك نَوعين رَئيسيّين مِن المُرشّحات في Google Analytics وهُما: المُحَدّدة مُسبَقًا Predefined.المُخَصّصة Custom.وإذا اخترت النَوع الأَول سيَكون لَك 4 خَيارات فَرعية أُخرى مُلحَقَة بِهذا الخَيار وهِيَ كَالتَالي: 1- استبعاد Exclude أو تَضمين Include زِيارات الواردة مِن نِطاقات مُزودي خِدمة الإنترنت: (Traffic from Domain (ISP هذا المُرشح يُستخدم لاستبعاد أو تضمين زيارات مِن نِطاق مُعين فقط، كشبكة مزوّد خدمة إنترنت أو شبكة شركة مثلاً. 2- استبعاد أو تَضمين الزيارات الوَاردة مِن عَناوين (IP) أو Traffic from the IP: يُستخدم هذا المُرشح لاستِبعاد أو تَضمين نَقَرات مِن مَصادر مُعينة فَقط. ملاحظة: عِند تَحديد اسم النِطاق، لا تَكتُب اسم الخَادم المُضيف (مِثال، حَدد example.com، وليس www.example.com). كما يُمكنك تَحديد مَجموعة بَسيطة من العناوين باستخدام الخيارات التي تبدأ بـ That Begin with أو التي تنتهي بـ That end with، ويُمكنك تَصفية مَجموعة أكثر تَعقيداً مِن العَناوين IP. مثال على استبعاد عنوان IP أنشئ مُرشح جديد ثم حدد النوع "مُحدد مُسبقاً" ثُم اختيار استبعاد ثُم اختيار الزيارات الواردة من عناوين IP، واكتب في حقل العنوان: عنوان IP. إذا كان عنوان IP المفرد هو 176.168.1.1، فأدخل عندئذٍ 1.\.1\.168\176 أما اذا كان الاستبعاد لمجموعة من العناوين فعليك كتابتها باستخدام صيغة مُعينة "باستخدام التعابير القياسية Regex" مِثال: إذا كانت مجموعة عناوين IP هي: 25-176.168.1.1 و14-10.0.0.1، فأدخل عندئذٍ: ^176\.168\.1\.([1-9]|1[0-9]|2[0-5])$|^10\.0\.0\.([1-9]|1[0-4])$ولمزيد من المعلومات عن كتابة عدة عناوين في هذا الحقل عليك زيارة هذا الرابط. ومِثال عَلى حَالة استخدام هَذا النَوع هو إن أردت استبعاد زِيارات دَاخلية مِن تَقاريرك (كزيارات مِن صَفحتك الرئيسية أو شَبكة الشركة الداخلية مثلاً) حينها يُمكنك إعداد مُرشح يَتَضمن جَميع عَناوينIP التي تَود استبعادها كما في الشرح السابق. 3- استبعاد أو تَضمين زِيارات إلى الأدلة الفَرعية Subdirectories to theTraffic: يُستخدم هذا المُرشح لاستبعاد أو تضمين زيارات إلى دليل فرعي مُعين مِثال على ذلك: استبعاد النطاق الفرعي التالي على نفس الخطوات السابقة (/motorcycles or /help/content/). ومِثال عَلى حَالة استخدام هَذا النَوع هو إن أردت استبعاد زِيارات دَاخلية مِن تَقاريرك من المُجلدات خَاصة للمًوقع ولا تَرغب في احتساب زِيارات المُوظّفين في مًوقِعك أو استِبعاد مُجلد wp-admin على مدونة WorldPress أو استبعاد لِلزيارات التي تَكون عَبر مُجلدات الخَاصة بالإدارة لكي لا يُحتَسب زِيارات كُتّاب المُدونة مثلاً: wp-admin/ أو admin/ أو مُجلد آخر تود استبعاد زِياراته من تقاريرك على الصيغة التالية : "اسم المجلد/" حينها يُمكنك إعداد مُرشح يَتَضمن جَميع المُجلدات التي تَود استبعادها. 4- استبعاد أو تَضمين المُرور إلى اسم المُضيف Traffic to the hostname: يُستخدم هذا المُرشح لاستبعاد أو تَضمين حَركة المُرور إلى اسم مُضيف معين (مثل sales.mydomain.com أو support.mydomain.com). أما النوع الثاني من المُرشحات وهو المُرشحات المُخصصة Custom فعند الضغط عليها يظهر في حقل الفلتر Filter Field خيارات أُخرى لتحديد نوع المُرشح كما في الصورة التالية: سنشرح الآن كل خيار من هذا النوع من المُرشحات باختصار: الاستبعاد Exclude: يَستبعد هذا النوع مَن المُرشحات أسطر مَلفات السِجلات (مَرات الدخول) التي تَتَطابق مع نَمط المُرشح، ويتم تَجاهُل الأسطر المُطابقة بالكامل، فعلى سبيل المثال: المُرشح الذي يَستبعد Chrome يستبعد أيضًا جميع المعلومات الأخرى في سطر السجل هذا، كمعلومات الزائر والمسار والإحالة والنطاق.التضمين Include: يَتَضمن هذا النَوع مِن المُرشحات أسطر مَلفات السجلات (مرات الدخول) التي تَتَطابق مَع نَمط المُرشح ، ويَتِم تَجاهل جَميع مَرات الدخول غَير المُطابقة ولا تَضُم التَقارير أي بَيانات عَن مرات الدخول الغير مُطابِقة.الأحرف الصَغيرة Lowercase و الأحرف الكَبيرة Uppercase: هذا النَوع يُحوِّل مُحتَويات الحَقل بالكامل إلى أحرف كَبيرة أَو أحرُف صَغيرة. ولا تُؤثر هذه المُرشحات إلا في الأحرف الهِجائية حيث أنها لا تُؤثر في الرُموز الخاصة أو الأرقام.البحث والاستبدال Search and Replace: هو نَوع بَسيط مِن المُرشحات يُستخدم للبَحث عَن نَمط داخل حَقل واستبدال النَمط الذي تَم العُثور عَليه بِنَمط بَديل آخر.مُتَقدم Advanced: يُتيح لَك هذا النَوع إنشاء حَقل مِن حَقل آخر أو حَقلين، ويُطبق مُحرك المُرشحات التَعبيرات المَوجودة في حَقلين مِن حقول الاستخراج على الحُقول المُحددة ، ثُم يُنشئ حَقلاً ثالثًا باستخدام التَعبير "المُنشئ" . اقرأ عن المُرشحات المُتقدمة بِزيارة هذا الرابط.إذا أردت إعداد تَقرير حَول النَشاط في دَليل مُحدد، يُمكنك إعداد مُرشح التَضمين Include. وأيضاً إذا أردت عَرض بَيانات جَميع الصَفحات إلا صَفحة وَاحدة أَو دَليلاً وَاحدًا أو عدة صَفحات أو أدلة، يُمكِنك إجراء ذلك باستخدام مُرشح الاستبعاد Exclude. مُلاحظة مهمة: يَجِب عَدم تَطبيق المُرشّحات على المَلف profile الرئيسي واستِخدام مَلفات جَديدة عِندما تَبدأ في عَملية التَرشيح لأن ذَلك سَيُغير البَيانات بِشكل لا يُمكن التَراجع عنه وقبل ذلك كله ننصحك أن تقوم بعملية التحقق من عمل المرشًّح Filter Verify وذلك بناءً على ما سيأتي من شرح. كَيفية عَمل التَحقق مِن المُرشحيَعمل التَحقق مِن المُرشَّح بتطبيق المُرشَّح الجَديد غَير المَحفوظ عَلى عَينة مُدتها "7 أيام" مِن البَيانات الفِعلية للمَلف الشَخصي المُحدد ويُقَارِن التَحقق بَعد ذَلك نَتائج المُرشَّح الجَديد بِعينة البَيانات الأصلية لإنشاء قائمة بِالصفوف التي تَغيرت. ويُشبه هذا طريقة عَمل مِيزة مُقارنة الملفات المَوجودة في مُحرر نُصوص. يَعرض التحقق من المُرشَّح الصُفوف المُتغيرة في جَدول للمُعاينة يَضم العَمودين قَبل تَطبيق المُرشَّح و بعد تطبيق المُرشَّح حَيثُ يَعرِض العَمود قبل تطبيق المُرشَّح صُفوف البيانات الأصلية التي قَد يَتم تَغييرها بِفعل المُرشَّح المُقترح إذا تَم تَطبيق ذلك المُرشَّح مِن الأسبوع المَاضي ، أما العمود بعد تطبيق المُرشَّح فيَعرِض كَيف سَتبدو تِلك الصُفوف نَفسها مَع تَطبيق المُرشَّح الجَديد ويَعتَبر الاختلاف بَين عَمودي قبل تطبيق المُرشَّح وبعده هو التَأثير الذي قَد يُجريه المُرشَّح الجديد إذا ما تَم تَطبيقه مِن 7 أيام مَضت (كما لو كان لديك آلة زمن خاصة لبَرنامج Google Analytics) . تُوضح الصورة أدناه مِثالاً لجدول مُعاينة حيثُ يَستبعد المُرشَّح المُستَخدَم النَتَائج التي تَحتوي على النِطاق: "adwords.google.com" في حَقل اسم المُضيف و يَعرض الجَدول "قَبل تطبيق المُرشَّح" (العَمود رقم 1) الصفوف في بياناتك. بينما يُظهر الجدول "بعد تطبيق المُرشَّح " (العَمود رقم 2) الصفوف التي سَوف تَتِم إزالتها بِفعل هذا المُرشَّح. وفي بَعض الأحيان لن تَحتوي بَيانات العَينة الأَولية عَلى أَي صُفوف تُطَابِق مَعايير المُرشَّح المَقصود، في هذه الحَالة لَن تُشاهد جَدولاً للمُعاينة، و بَدلاً مِن ذَلك سَوف يَتوفر لَك خِيار آخر وَهو: إما أن تُعدّل المُرشَّح (فرُبَما لَم تَجري تَهيئته بِشكل صَحيح) أو أَن تُطَبِق المُرشَّح الحالي على مَجموعة أَكبر مِن الصُفوف النَموذجية، لذلك عِند تَحديد هذا الخِيار سَوف يَجري Google Analytics نَفس نَموذج طَلب البَحث كَمَا سَبق مَع زِيادة عَدد الصُفوف التي يِتم إرجاعها. ماذا نَفعل لَو اسَتمرت مُشكِلة عَدم ظُهور جَدول لِلمُعاينة؟إذا لَم يَتَمَكن Google Analytics مِن العُثور عَلى أي صُفوف قَد تَتَأثر بِفعل المُرشَّح المُقترح، يَكون مِن المُحتمل أَن المَلف الشخصي الحَالي لا يَجمع البَيانات التي يَستهدِفها المُرشَّح المُقترح وعِندها يَجب عَليك التَفكير في العَمل مِن مَلف شَخصي آخر أَو فَحص المُرشَّحات الأُخرى التي قَد تَكون مُستَخدَمَة لِلمَلف الشَخصي الحَالي لِمَعرفة مَا إذا كَانت هي التي تسبب المُشكلة أم مِن غَيرها. مِثال على التَحقُق مِن المُرشَّحلِنَفترض أنَّك تَجمَع حَاليًا نَتائج لِلنِطاقات الثَلاثَة التَالية: support.mycompany.com.sales.mycompany.com.ads.mycompany.com.وتُريد إنشاء مَلف شَخصي لا يَعرِض إلا النَتَائج لِنطاقك المُعتَمَد , لذا عَليك أَن تُنشئ مًلفًا شًخصيًا جًديدًا و تُحدد مُرشَّحاً مُخصصًا يَتَضمن حَقل اسم النِطاق يُطابق نمط المُرشَّح التالي: com\.mycompany\support و لِلتَحقق مِن هذا المُرشَّح يَكون بِتَقدير Google Analytics لِمُعدل عَينات، و يُحدد مَجموعة أَساسية مِن صُفوف البَيَانات الفِعلية لِلمَلف الشَخصي هذا مِن 7 أيام و قَد تَظهر البَيانات النَاتِجَة كَمَا يَلي: يُطَبِق Google Analytics بَعدَ ذَلك المُرشَّح الجَديد الذي تُنشِئه عَلى عَينات البَيَانات الأَصلية و يُلاحِظ الصُفوف التي سَتَتَغَير بِسَبب هذا المُرشَّح و تُعَد هذه مَجموعة صُفوف قَبل تَطبيق المُرشَّح و لا يَظهر في المَلف الشَخصي الخَاص بِقَبل التطبيق إلا تِلك السِجلات التي سَيَتِم تَضمينها أَو استبعادها أو تَغييرها بِسبب المُرشَّح الجَديد. بَعد تَطبيق المُرشَّح يَتِم عَرض مَجموعة صفوف مَا سَيفعَله المُرشَّح فِعلياً عَلى الصُفوف المُتأثرة (إما تضمينها أو استبعادها أو تغييرها). مِثال عَلى إجراء تَصفية بِشَأن (support\.mycompany\.com): يحتوي العمود قبل تطبيق المُرشَّح عَلى كُل الصُفوف حَيث يَتَضمن اسم المُضيف ذَلك النِطاق (في هذه الحالة لا يوجد إلا صف واحد)، و يَعرِض العَمود بعد تطبيق المُرشَّح نَتائج تِطبيق المُرشَّح عَلى كُل عَينات البَيانات. إعداد التًحقق من المُرشَّح في حِساب Google Analyticsمُلاحَظة: حَتى مَع التَحَقُق مِن المُرشَّحات فإننا ننصحك بِشدة عَلى تَطبيق المُرشَّحات الجَديدة في مَلف شَخصي اختِبَاري قَبَلَ تَعيينها إلى المَلفات الشَخصية الفِعلية. اتِبع الخُطوات المَشروحة مُسبقاً في إنشاء أو إدارة المُرشَّحات Filters .قَبَل حِفظ المُرشَّح ، أُنقر عَلى رابط "تَحَقق مِن هذا الفلتر" (Verify This Filter) كَمَا في الصورة التَالية: أجرِ أي تًحسينات عًلى المُرشَّح إذا لَزِمَ الأمر وانقر عَلى الرابط تَحقَق مَرة أُخرى حَتى تَظهر عَينات بَيانات "بعد تطبيق المُرشَّح" بالطريقة التي تَتَوقعها.- إذا لَم يُرجع المُرشَّح أي نَتائج وأَظهر الرِسالة التَالية بَدلاً مِن ذلك: ("لم يغير هذا الفلتر بياناتك" / This filter would not have changed your data) فَعَليك إمِّا أن تُعدِّل المُرشَّح أَو تَنقُر عَلى (تَحَقَق باسَتِخَدام مَجموعة أكبر من البيانات Verify using a larger set of data). عِندما تَكون رَاضيًا عَن المُرشَّح ، أُنقُر عَلى زِر حفظ Save لِحِفظه. مُلاحظة: نَظرًا لأن التَحَقق مِن المُرشَّح يَستَخدم عَينات مُقَدَّرة مِن البَيانات فإنه لا يُمكن ضَمان دِقة النَتائج في كُل الحالات ويَجب عَليك دَائمًا حِفظ مَلف شَخصي لَم يَقُم عَليه أي عَملية تَصفية " مُرشَّح" للبِيانات كَنُسخة احتياطية و بِسَبب قُيود الخُصوصية لا يُمكن التَحقق مِن المُرشَّحات التي تَستَخدِم حُقول مُستَنَدَة إلى مَواقِع جُغرافِية و لا يُمكنك التَحقق مِن الفَلاتر المُتقدمة أيضاً. وفي نِهاية هذا المَقال و بَعد أن تَعرفنا عَلى المُرشحات في Google analytics وكَيفية إنشائها وأَنواعها والتَحَقُق مِنها، نَسأل الله أَن نَكون قَد حَقّقنا لَكم الفَائدة والمَعرفة المَطلوبة، في المَقال القَادِم سَوف نَتَحَدث عَن الشَرائِح Segments في حِساب Analytics.