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

في هذا المقال القصير سوف نصنع تنبيها مؤقتا بسيطا عبر CSS animations. ما سنفعله بالتحديد هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفائها. وسوف سنعمل شريط تقدم (progress bar) لنعرف كم تبقى من الوقت ليختفي التنبيه. ستكون تنبيهات هذا الدرس من الشكل التالي: بالنسبة للهيكلة فسوف نستخدم div يحتوي على الرسالة وبداخله div آخر من أجل شريط التقدم: <div class="tn-box tn-box-color-1"> <p>Your settings have been saved successfully!</p> <div class="tn-progress"></div> </div>سيملك التنبيه tn-box. و tn-box-color-1. من أجل تحديد اللون، سوف نثبت الصندوق أسفل النافذة حتى يرتفع عندما يظهر: .tn-box { width: 360px; position: fixed; bottom: 20px; left: 20px; padding: 25px 15px; text-align: right; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6); opacity: 0; cursor: default; display: none; transform: translateY(30px) } .tn-box-color-1{ background: #ffe691; border: 1px solid #f6db7b; }أما بالنسبة لشريط التقدم فسنعطيه التالي: .tn-progress { width: 0; height: 4px; background: rgba(255,255,255,0.3); position: absolute; bottom: 5px; right: 2%; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05), 0 -1px 0 rgba(255,255,255,0.6); }في البداية، سيكون عرض شريط التقدم 0. في هذا المثال، أنا أستخدم checkbox من أجل إطلاق animation عندما يتم الضغط عليه: <input type="checkbox" class="fire-check"> <section> <div class="tn-box tn-box-color-1"> <p>شريط التقدم الجميل!</p> <div class="tn-progress"></div> </div> </section>الزر يسبق صندوق التنبيهات لذا نستطيع استخدام محدد ~ من أجل تحديد العنصر الذي يأتي بعده. وإذا أردت أن تتحكم بالأمر عبر جافاسكربت (عبر إضافة tn-box-active. )، فاستخدم التالي: .tn-box.tn-box-active { display: block; animation: fadeOut 5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .tn-box.tn-box-active .tn-progress { animation: runProgress 4s linear forwards 0.5s; }أما بالنسبة للحركية (animation) فهي كالتالي: @keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; transform: translateY(0px);} 90% { opacity: 1; transform: translateY(0px);} 99% { opacity: 0; transform: translateY(30px);} 100% { opacity: 0; } } @keyframes runProgress { 0% { width: 0%; background: rgba(255,255,255,0.3); } 100% { width: 96%; background: rgba(255,255,255,1); } }ما ستقوم به الـحركية (animation) هو إظهار الصندوق (عبر رفعه ورفع درجة الشفافية) ثم تكبير عرض شريط التقدم. حددنا عرض شريط التقدم إلى 96% (لأنه يبعد عن يمين الصندوق بـ 2% لذا نريده أن يتوقف قبل 2% من اليسار أيضا). مثال حيSee the Pen ZbzMWQ by Hsoub Academy (@HsoubAcademy) on CodePen. ملاحظة: شيء إضافي وجدت أنه من الجميل إضافته هو إيقاف animation عند تمرير المؤشر على الصندوق. ولكن للأسف، الأمر لم ينجح في chrome بينما نجح في فيرفكس. .tn-box:hover, .tn-box:hover .tn-progress{ animation-play-state: paused; }ترجمة -وبتصرف- للمقال: Timed Notifications with CSS Animations لصاحبه Mary Lou. حقوق الصورة البارزة: Designed by Freepik.

أحيانًا قد يحتاج قالب أو إضافة إلى إظهار إشعارات/تنبيهات للمُستخدمين عبر لوحة تحكُّم ووردبريس. تنفيذ هذا الأمر بسيط جدًّا حيثُ أنَّهُ يتمّ باستخدام خُطَّاف admin_notices والذي يقوم باظهار صُندوق رسائل في أعلى الشَّاشة. عرض إشعار قياسيfunction my_admin_notice(){ echo '<div class="updated"> <p>I am a little yellow notice.</p> </div>'; } add_action('admin_notices', 'my_admin_notice');حيثُ أنَّه قد تمَّ إضافة الصّنف"updated" إلى الوسم div فسيظهر الإشعار باللَّون الأصفر. أمَّا في حالة تغيير الصّنف إلى "error" فإنَّ الإشعار يظهر أحمرًا. كيفيَّة عمل إشعار قابل للإغلاقمن المُمكن -مع القليل من العمل الإضافي- عرض الإشعار وإبقائه حتَّى يقوم المُستخدم بالضغط على زرٍّ لإغلاقه. تُعتبر تلك الطَّريقة مُفيدة للتأكُّد من أنَّ المُستخدم قد قام برؤية الإشعار وكذلك لن يُضايقه وجود الإشعار طوال الوقت. المثال التَّالي تمَّ استخراجه من إضافة AddThis. يُستخدم أيضًا شيء مُشابه في Options Framework.. إذا قام المُستخدم بالضَّغط لإخفاء الإشعار فسيتمّ حفظ تفضيله في بيانات user meta. /* Display a notice that can be dismissed */ add_action('admin_notices', 'example_admin_notice'); function example_admin_notice() { global $current_user ; $user_id = $current_user->ID; /* Check that the user hasn't already clicked to ignore the message */ if ( ! get_user_meta($user_id, 'example_ignore_notice') ) { echo '<div class="updated"><p>'; printf(__('This is an annoying nag message. Why do people make these? | <a href="%1$s">Hide Notice</a>'), '?example_nag_ignore=0'); echo "</p></div>"; } } add_action('admin_init', 'example_nag_ignore'); function example_nag_ignore() { global $current_user; $user_id = $current_user->ID; /* If user clicks to ignore the notice, add that to their user meta */ if ( isset($_GET['example_nag_ignore']) && '0' == $_GET['example_nag_ignore'] ) { add_user_meta($user_id, 'example_ignore_notice', 'true', true); } }عرض الإشعارات في صفحات تحكُّم مُعيَّنةأحيانًا قد نحتاج إلى تحديد ظهور الإشعار ليكون في صفحاتٍ مُعيَّنة قد يحتاج المُستخدم لرؤية الإشعار بها. يُمكنكَ تنفيذ هذا باستخدام المُتغيِّر العام $pagenow. على سبيل المثال، سيظهر الإشعار التالي في صفحة الإضافات فقط: function my_admin_notice(){ global $pagenow; if ( $pagenow == 'plugins.php' ) { echo '<div class="updated"> <p>This notice only appears on the plugins page.</p> </div>'; } } add_action('admin_notices', 'my_admin_notice');التحقُّق من دور المُستخدم قبل عرض الإشعاريجب عرض الإشعارات للمُستخدمين المعنيين بالأمر فقط. على سبيل المثال، لا فائدة من عرض إشعار عن تعديل خيارات القالب لمُستخدم لا يملك صلاحية التَّعديل على خيارات القالب. إليكَ طريقة للتّحقق من الأدوار الشائعة: if ( current_user_can( 'install_plugins' ) ) if ( current_user_can( 'manage_options' ) ) if ( current_user_can( 'edit_theme_options' ) )آداب الإشعارأحيانًا تُصبح الإشعارات مُزعجة، لهذا عليكَ الحذر عند استخدامها. أبقِ النَّصَّ قصيرًا وحاول ألَّا تعرض أكثر من إشعار. عليك استخدام هذه الميزة باعتدال. مصادر أخرىhttp://theme.it/how-to-display-an-admin-notice-for-required-theme-pluginshttp://codex.wordpress.org/Plugin_API/Action_Reference/admin_noticesترجمة -وبتصرّف- للمقال: Admin Notices in WordPress.