المحتوى عن 'قوائم'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 5 نتائج

  1. قائمة التنقل هي جزءٌ مهمٌ من موقع ووردبريس وتساعدك زوار موقعك ليتنقلوا بسهولة في موقعك وتسهِّل إظهار البُنية الهيكلية لموقعك؛ وهنالك مكانٌ مخصصٌ لها في مكانٍ ما في أعلى الصفحات في أغلبية القوالب. لكن هل استعمال قوائم التنقل مقتصرٌ على ترويسة الموقع؟ الحقيقة هي أنَّك تستطيع القيام بالكثير معها. سأريك في هذا الدرس بعض الخيارات التي بمقدورك استعمالها لتوظيف قوائم التنقل بشكلٍ أفضل. وسأريك كيف يمكنك إنشاء عدِّة قوائم تنقل لموقعك. سأريك أيضًا طريقتين لوضع القوائم الإضافية في الواجهة الأمامية لموقعك، إحداها باستخدام ودجت والأخرى عبر كتابة شيفرات. استخدام ودجت هو الطريقة الأسهل والمناسبة إذا لم تشأ كتابة الشيفرات، لكنها تعتمد على وجود منطقة ودجات في القالب الذي تستخدمه، فلو لم يكن يحتوي القالب المُفعَّل على منطقة لإضافة ودجات في المكان الذي تريد وضع القائمة فيه، فسأريك كيفية كتابة شيفرة لإضافة القائمة في قالب. لنبدأ بإنشاء بضع قوائم. إنشاء عدِّة قوائم للتنقل يملك موقعي قائمة تنقل رئيسية أنشأتُها مسبقًا، يمكنك أن ترى من الصورة الآتية وجود عدِّة مستويات فيها، حيث توجد العناصر الفرعية داخل قائمة «Services». لقد فعّلتُ خيار «Primary Menu» (القائمة الأساسية) وهذا يعني أنَّ القالب الذي أستعمله (وهو Twenty Sixteen) سيُعرِض القائمة في المكان الرئيسي لها: لكنني لستُ محدودًا بهذه القائمة فقط، وأستطيع إنشاء واحدة أخرى، وسأرجع إلى صفحة «Menus» (قوائم) في لوحة التحكم وأضغط على رابط «create a new menu» (أنشئ قائمة جديدة): هنا يمكنك إضافة قائمةٍ جديدة، القائمة التي سأُنشِئها ستكون لصفحات الخدمات، لذا سأُطلِق عليها اسم «Services» ثم سأضغط على زر «Create Menu» (إنشاء قائمة) لإنشائها، ثم سأضيف تلك الصفحات إليها: بعد إضافة الصفحات إلى قائمتك، فاضغط على زر «Save Menu» (حفظ القائمة) لحفظها. ملاحظة: لا تُفعِّل خيار «Primary Menu» (القائمة الأساسية)، لأنَّك إذا فعلتَ ذلك، فستوضع هذه القائمة بدلًا من القائمة التي أنشأتها ووضعتها في ترويسة الموقع؛ لكننا لا نريد فعل ذلك، بل نريد إضافة هذه القائمة إلى مكانٍ آخر في الموقع. يمكنك فعل كل ذلك عبر صفحة تخصيص القالب، وذلك بالضغط على الخيار «Menus» (قوائم) على جانب الشاشة (الأيسر لو كانت لوحة التحكم عندك بالإنكليزية، والأيمن لو كانت بالعربية) وسترى كل القوائم التي أنشأتها معروضةً: من هنا يمكنك إضافة قائمة جديدة باستخدام زر «Add a Menu» (أضف قائمة)، أو يمكنك اختيار قائمة موجودة مسبقًا لتعدلها. إضافة القوائم باستخدام ودجت بعد أن ضبطتَ القائمة الجديدة، فحان الوقت لإضافتها إلى موقعك. من المفيد أن تُضيف القائمة إلى تذييل الموقع، وهذا يعني أنَّه عندما يُمرِّر الزوار إلى أسفل الصفحة، فليسوا بحاجةٍ إلى التمرير إلى أعلى الصفحة مرةً أخرى لكي يستطيعوا الانتقال إلى صفحةٍ أخرى في الموقع، وهذا مفيدٌ جدًا خصوصًا في الشاشات الصغيرة للهواتف المحمولة. لا يملك القالب الذي أستخدمه منطقة ودجات في التذييل، لكنه يملك منطقة ودجات باسم «Content Bottom» (أسفل المحتوى) الموجودة تحت المحتوى، وسأستخدمها. يمكنك استخدام أيّة منطقة ودجات موجودة في القالب تشاء، وذلك لملائمة احتياجاتك. لإضافة القائمة إلى ودجت، فيمكنك إما أن تستخدم صفحة التخصيص أو صفحة الودجات في لوحة التحكم من «Appearance > Widgets» (مظهر > ودجات)، لكن دعنا نستخدم صفحة التخصيص هذه المرّة. افتح صفحة التخصيص ثم اضغط على خيار «Widgets» (ودجات) الموجود في القائمة الظاهرة على طرف الشاشة: اختر منطقة الودجات التي تريد إضافة القائمة إليها، واضغط على زر «Add a Widget» (أضف ودجت)، وهنا سيُتاح لك الخيار لإضافة الودجات التي تريد: اختر منها «Custom Menu» (قائمة مخصصة)، ثم اختر القائمة التي تريد إضافتها، وأعطها عنوانًا: بعد أن تنتهي من فعل ذلك، فاضغط على زر «Save and Publish» (حفظ ونشر) لتحفظ تعديلاتك، ثم تحقق من ظهور القائمة في واجهة موقعك: إذا أردتَ إضافة قوائم أخرى –سواءً إلى نفس منطقة الودجات أو إلى منطقةٍ أخرى– فاتبع نفس الخطوات السابقة لإنشاء أي عدد من القوائم تحتاج له، ثم أضفها إلى منطقة الودجات التي تشاء. إضافة قائمة إلى قالبك باستخدام الشيفرات إذا لم يملك قالبك منطقةً ودجات مناسبةً لإضافة القائمة التي أنشأتها إليها، فيمكنك كتابة شيفرة لوضع القائمة أينما تشاء. فبدلًا من استخدام منطقة الودجات المسماة «Below Content» (أسفل المحتوى) فسأكتب شيفرةً لإضافة قائمة الخدمات إلى تذييل القالب يدويًا. لاحظ أنني أستعمل قالب Twenty Sixteen، وسأُنشِئ «قالب ابن» (child theme) جديد لفعل ذلك، لأنَّ أيّة تعديلات سأجريها على القالب الأصلي ستختفي عندما أُحدِّث القالب في المستقبل؛ أما إذا كنت تعمل على قالبٍ أنشأتَه أنت (وهو خاصٌ بموقعك) فيمكنك تعديل ملفات القالب مباشرةً. ملاحظة: يمكنك أن تجد الملفات المصدرية لهذا الدرس على GitHub. سأنُشِئ القالب الجديد في مجلد wp-content/themes وفيه ملفين، أحدهما باسم style.css الذي يُخبر ووردبريس أنَّ هذا القالب هو «قالب ابن»، وملف التذييل footer.php الذي سينوب عن الملف الأصلي الموجود في القالب الرئيسي. وستستعمل ووردبريس الملفات الأخرى من مجلد القالب الأب. إنشاء قالب ابن أولًا، عليك إضافة ما يلي إلى ملف style.css لتخبر ووردبريس أنَّ هذا القالب هو قالب ابن: /* Theme Name: WPMU DEV Navigation Menus for Power Users Theme URI: https://github.com/rachelmccollin/wpmudev-nav-menus Description: Theme to support WPMU DEV post on navigation menus Author: Rachel McCollin Author URI: http://rachelmccollin.co.uk/ Template: twentysixteen Version: 1.0 */ @import url("../twentysixteen/style.css"); احفظ الملف. إضافة القائمة إلى التذييل عليك –لإضافة القائمة إلى التذييل– تعديل الملف footer.php؛ وإذا كنتَ تعمل على قالب ابن، فعليك نسخ ملف footer.php من القالب الأساسي إلى مجلد القالب الابن، ثم عليك تعديل الملف المنسوخ. افتح ملف التذييل وأضف ما يلي بعد وسم بداية العنصر <footer>: <aside class="footer-menu widget"> <h3>Services</h3> <nav class="footer-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'wpmudev' ); ?>"> <?php wp_nav_menu( array( 'menu' => 'services', 'menu_class' => 'footer-menu' ) ); ?> </nav> </aside> لاحظ أنني أضفت اسم القائمة (services) كأحد المعاملات التي مررتها إلى الدالة wp_nav_menu()‎، لذا لو سمّيتَ قائمتك باسمٍ مختلف، فاحرص على استعمال ذاك الاسم هنا. أضفتُ أيضًا الفئة widget لتنسيق القائمة، وهذا يعني أنَّ القائمة ستبدو شبيهةً بالودجات في واجهة الموقع: حسنًا، مظهرها ليس جميلًا أبدًا، فهي تقع ملتصقةً بحقوق النشر، لذا لنضف بعض التنسيق عليها. تنسيق القائمة احفظ ملف footer.php وافتح ملف style.css مرةً أخرى، ثم أضف إليه الشيفرة الآتية: .footer-menu { width: 100%; } الشيفرة السابقة تحلّ مشكلة العرض، وستظهر القائمة على يسار الشاشة مع وجود فراغ كبير حولها: لنحل هذه المشكلة بجعل عناصر القائمة تظهر بسطرٍ وحيد، وذلك عبر إضافة الشيفرة الآتية إلى ملف الأنماط: .footer-menu ul { margin-left: 0; } .footer-menu li { float: left; list-style-type: none; margin-left: 0; margin-right: 20px; font-size: 1.5em; } هذا أفضل. يجب أن تبدو القائمة كما هو ظاهر في الصورة الآتية في الشاشات الكبيرة: لكنها لا تظهر بشكلٍ جميلٍ في الشاشات الصغيرة: لنضف سطرًا لكي نفصل بين القائمة والعنصر الذي يليها، وذلك بإضافة الشيفرة الآتية إلى صفحة الأنماط: .site-info { clear: both; } كيف تبدو الآن؟ حسنًا، أصبحت أجمل. أصبح لدينا الآن قائمة الخدمات في تذييل الموقع، ونستطيع إضافة ما نشاء من روابط إليها دون الحاجة إلى تعديل ملفات القوالب مجددًا، إذ كل ما عليك فعله هو تعديل القائمة في لوحة التحكم. أليس هذا بسيطًا؟ الخلاصة يمكن الاستفادة من قوائم التنقل في أمكان كثيرة بخلاف ترويسة الصفحة. يمكنك إنشاء قوائم جديدة وإضافتها إلى مختلف الأماكن مثل التذييل. يمكنك أيضًا إنشاء قائمة للشريط الجانبي وأخرى للتذييل (أو أي مكانٍ آخر في قالبك)، أو يمكنك إضافة عدِّة قوائم في نفس منطقة الودجات؛ فالخيار عائدٌ إليك تمامًا! ترجمة -وبتصرّف- للمقال The Power Users Guide to WordPress Navigation Menus لصاحبته Rachel McCollin.
  2. تُستخدم خاصية التحقق من صحة البيانات Data Validation للتحكم في القيم المُدخلة إلى خلية ما حسب معيار محدد. وتعتبر مفيدة على وجه الخصوص عندما تشارك مصنفاتك مع زملائك في الشركة وترغب في التأكّد من إدخال القيم الصحيحة في تلك الخلية. على سبيل المثال، تقييد المستخدمين بإدخال نص بعدد حروف محدد، أو إدخال قيم موجبة فقط في الخلية. وتتوفر مع هذه الخاصية إمكانية إنشاء رسالة إدخال Input Message تُرشد المستخدمين إلى القيم المناسبة المطلوب إدخالها في الخلية، بالإضافة إلى عرض نافذة تحذيرية Error Alert تنبّه المستخدمين عند إدخال قيمة خاطئة. مثال1: في المصنف التالي، نرغب في التأكد من أن يقوم المستخدمون بإدخال قيم لـ "نسبة الخصم" تتراوح من 15 إلى 25%. أولا، سنحدد الخلية التي نريد تطبيق التحقق من صحة المدخلات عليها، وهي الخلية B15 في هذا المثال، ثم نذهب إلى تبويب بيانات Data وننقر على أمر التحقق من صحة البيانات Data Validation: في مربع الحوار توجد 3 تبويبات. الأول، الإعدادات Settings، ومنه نحدد المعيار الذي يتم التحقق من المدخلات على أساسه، ونلاحظ أنّ الخيار الافتراضي هو السماح بأي قيمة Any Value. وبما أننا في هذا المثال نريد تقييد المستخدم بإدخال قيمة بين 15 و25%، سنسمح بإدخال القيم العشرية باختيار Decimal من حقل Allow، المعيار بين Between من حقل Data، ثم ندخل الحدين الأقصى والأدنى: وفي التبويب الثاني، رسالة الإدخال Input Message، نقوم بإدخال العنوان والتلميح الذي نريد إظهاره للمستخدمين عند تحديد الخلية لتغيير محتواها: إنّ إظهار رسالة التلميح اختياري، يمكنك عدم إظهارها بإلغاء تأشير الخيار Show input message when cell is selected. في التبويب الثالث، التنبيه إلى الخطأ Error Alert، نقوم بإدخال الرسالة التي تظهر للمستخدم عند إدخال قيمة خاطئة، ويفضّل أن تكون رسالة واضحة تُرشد المستخدم إلى الشيء الذي يجب فعله بالضبط. بعدها نحدد نوع التنبيه Style: تختلف أنواع التنبيه كالتالي: إيقاف Stop: يمنع المستخدم من إدخال قيمة غير صحيحة، ولا تؤخذ القيمة ما لم تحقق المعيار. وهذا النوع من التنبيه هو الأكثر تقييدا. تحذير Warning: تُحذر المستخدم بأنّ القيمة التي قام بإدخالها غير صحيحة، لكن يمكن قبول هذه القيمة عند النقر على نعم Yes حتى وإن لم تحقق المعيار، أو تعديل القيمة عند النقر على كلا No. معلومات Information: تُخبر المستخدم بأنّ القيمة غير صحيحة فقط، وهذا النوع من التنبيه عادة ما يكون مرنا ويتم تجاهله من قبل المستخدمين. يمكن عدم إظهار رسالة التنبيه بإلغاء تأشير الخيار Show error alert after invalid data is entered . عند الانتهاء من تعديل كافة الخيارات ننقر موافق OK. وبذلك ستظهر رسالة التلميح عند تحديد الخلية: وعندما نقوم بإدخال قيمة خارج المدى، 12% مثلا، ستظهر رسالة التنبيه حسب النوع الذي اخترناه. بما أننا اخترنا نوع الإيقاف Stop لدينا خيار إعادة المحاولة Retry وإدخال قيمة صحيحة، إلغاء عملية التحرير Cancel، أو الذهاب إلى صفحة المساعدة Help. أما عند اختيار النوع الثاني، تحذير Warning، وإدخال قيمة خاطئة، فيمكننا المواصلة مع هذه القيمة عند النقر على نعم Yes، إعادة إدخال قيمة صحيحة عند النقر على كلا No، إلغاء عملية التحرير بالنقر على Cancel، أو الذهاب إلى صفحة المساعدة Help. وفي النوع الثالث، معلومات Information، يمكننا تجاهل التنبيه بالنقر على موافق OK، إلغاء عملية التحرير Cancel، أو الذهاب إلى صفحة المساعدة Help. مثال2: في هذا المثال البسيط، نريد تقييد المستخدم باختيار لغة من مجموعة لغات تظهر في قائمة منسدلة: سنحدد أولا الخلية التي نريد إضافة القائمة إليها، وهي D3 في هذا المثال، ثم ننقر التحقق من صحة البيانات Data Validation من تبويب بيانات Data: سنختار قائمة List من حقل Allow، ثم نحدد القيم التي نريد إدراجها في القائمة، وقد قمنا بكتابتها مسبقا على جنب: لا نريد هنا إظهار رسالة إدخال ورسالة تنبيه، لذلك سنتجاوز هذه الخطوة وننقر موافق OK. والنتيجة ستكون ظهور سهم بجانب الخلية D3، عند النقر عليه تظهر قائمة اللغات المتاحة التي يمكن الاختيار منها:
  3. بعد أن تعرّفنا في الدّرس السّابق على طريقة التّعامل مع البيانات مثل المُتغيّرات وأنواعها كالأرقام وإسناد القيم، سنكمل في هذا الدّرس الثّالث مشوار تعلّم هذه اللغة بتعلّم كيفيّة التّعامل مع كل من القوائم والسّلاسل النّصيّة. تذكير: الشيفرات التّي تكون مسبوقة بعلامة "<<<" يجب أن تُنفّذ على مُفسّر بايثون. القوائم تعتبر القوائم طريقة رائعة للتّعامل مع البيانات في لغة بايثون، وتتعلّق القائمة بمتغيّر معيّن بحيث يحمل أكثر من قيمة، ويمكن الوصول إلى هذه القيم باستعمال رقم كل قيمة. لتفهم أكثر، اعتبر أنّ لك 5 أبناء، بحيث تكون قائمة الأبناء: 0، عمر 1، خالد 2، حسن 3، زيد 4، يوسف في بايثون، ننشئ القائمة بالطّريقة التاليّة: >>> children = ['Omar','Khaled','Hassan','Zaid','Youssef'] لنسمّي القائمة أعلاه باسم children، وتحتوي على خمس عناصر، ولكل عنصر رقم خاص به، بحيث يبدأ العدّ من الصّفر، فمثلا إذا أردنا مناداة الابن "عمر" فسيتوجّب علينا مناداته برقمه (أي الرقم 0)، وطريقة مناداة باقي الأبناء تكون بالشّكل التّالي: >>> print 'Come here ' + children[0] Come here Omar >>> print 'Come here ' + children[1] Come here Khaled >>> print 'Come here ' + children[2] Come here Hassan >>> print 'Come here ' + children[3] Come here Zaid >>> print 'Come here ' + children[4] Come here Youssef الآن، لننتقل إلى تطبيق مبادئ القوائم على بايثون، يُمكننا إسناد قائمة إلى متغيّر كالتّالي: >>> x = [1, 2, 3] ويُمكنك إنشاء قائمة سلاسل نصيّة عوضا عن الأرقام: >>> x = ["hello", "world"] يُمكن أن تجمع بين أنواع القيّم المُختلفة، هذا المثال يجمع بين الأرقام والسّلاسل النّصيّة: >>> x = [1, 2, "hello, "world"] ويُمكن أن تحتوي القائمة على قائمة أخرى: >>> x = [1, 2, "hello, "world", ["another", "list"]] أو بالطّريقة التّاليّة: >>> a = [1, 2] >>> b = [1.5, 2, a] >>> b [1.5, 2, [1, 2]] يُمكن أن نستخدم الدّالة len المعرّفة مُسبقا لنقيس طول قائمة ما (عدد مكونات القائمة): >>> x = [1, 2, 3] >>> len(x) 3 نصل إلى عناصر قائمة ما بكتابة اسم المُتغيّر الذي يحمل القائمة، ثمّ رقم العنصر بين رمزي []: >>> x = [1, 2, 3] >>> x[1] 2 >>> x[1] = 4 >>> x[1] 4 مع ملاحظة أنّ التّرقيم يبدأ بالصّفر، بحيث يكون العنصر الأوّل من القائمة يحمل الرّقم 0 والعنصر الثّاني يحمل رقم 1 وهكذا دواليك. يُمكن إنشاء قائمة تحتوي على أعداد صحيحة من مجال معيّن بالدّالة Range، في المثال التّالي قُمنا بإنشاء قائمة تحتوي على أربعة عناصر من 0 إلى 3، ثمّ قائمة تحتوي على ثلاثة عناصر بين العددين 3 و 6، ثمّ في السّطر الأخير قُمنا بإنشاء قائمة مُتكوّنة من 3 عناصر بين العددين 2 و 10 مع زيادة بقيمة 3 : >>> range(4) [0, 1, 2, 3] >>> range(3, 6) [3, 4, 5] >>> range(2, 10, 3) [2, 5, 8] يُمكن كذلك استخدام الدّالة len لحساب عدد عناصر قائمة ما: >>> a = [1, 2, 3, 4] >>> len(a) 4 كما يُمكنك التّعامل مع القوائم بالرموز الرّياضيّة * و + لتكرار أو الجمع بين عناصر قائمة ما: >>> a = [1, 2, 3] >>> b = [4, 5] >>> a + b [1, 2, 3, 4, 5] >>> b * 3 [4, 5, 4, 5, 4, 5] للوصول إلى عناصر قائمة مُعيّنة نستعين برقم العنصر، مع ملاحظة بأنّ التّرقيم يبدأ من الصّفر إلى ( عدد العناصر-1 ). >>> x = [1, 2] >>> x[0] 1 >>> x[1] 2 إذا استخدمت فهرسا (ترقيما) خاطئا، فسيُرجِع مفسّر بايثون خطأ: >>> x = [1, 2, 3, 4] >>> x[6] Traceback (most recent call last): File "<stdin>", line 1, in ? IndexError: list index out of range يُمكنك كذلك استخدام التّرقيم السّلبي للوصول إلى عناصر القائمة من الآخر إلى الأول ( آخر عنصر يحمل القيمة -1 والعنصر الأول يحمل الرقم السّلبي لعدد العناصر): >>> x = [1, 2, 3, 4] >>> x[-1] 4 >>> x[-2] 3 >>> x[-4] 1 يُمكننا تشريح قائمة (تقسيمها إلى أجزاء)، بالطّريقة التّاليّة: >>> x = [1, 2, 3, 4] >>> x[0:2] [1, 2] >>> x[1:4] [2, 3, 4] ويمكن استخدام الأرقام السلبيّة في التّقسيم كذلك: >>> x[0:-1] [1, 2, 3] إذا تركت مكان الرقم الأول فارغا، فالقيمة الافتراضيّة هي الصّفر، و القيمة الافتراضيّة للشّطر الثاني تكون عدد عناصر القائمة: >>> x = [1, 2, 3, 4] >>> a[:2] [1, 2] >>> a[2:] [3, 4] >>> a[:] [1, 2, 3, 4] يُمكن استخدام رقم ثالث لتحديد الخطوة (يعني المقدار الذي نضيفه في العنصر الحالي مقارنة بالعنصر السّابق)، والذي يكون الرّقم واحد افتراضيّا: >>> x = range(10) >>> x [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] >>> x[0:6:2] [0, 2, 4] يُمكننا عكس عناصر القائمة بتحديد -1 كقيمة للزيّادة بالشّكل التّالي: >>> x = range(10) >>> x [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] >>> x[::-1] [9, 8, 7, 6, 5, 4, 3, 2, 1, 0] يُمكن كذلك تغيير قيم عناصر القائمة بتعيين قيمة أخرى: >>> x = [1, 2, 3, 4] >>> x[1] = 5 >>> x [1, 5, 3, 4] يُمكن استعمال العامل in للتحقق من تواجد عنصر في القائمة، فإن أرجع القيمة True فهذا يعني أن القيمة موجودة، أما إن أرجع False فهذا يعني بأنّ القيمة غير موجودة في القائمة: >>> x = [1, 2, 3, 4] >>> 2 in x True >>> 10 in x False يُمكن إضافة قيم أخرى إلى قائمة بدالّة الإلحاق append، في المثال التّالي نلحق (نضيف) القيمة 3 إلى القائمة a: >>> a = [1, 2] >>> a.append(3) >>> a [1, 2, 3] السلاسل النصية السّلاسل النّصيّة أو Strings هي التّقنيّة المُستخدمة لكتابة النّصوص في بايثون، وهي سلاسل من الحروف (والتّي بدورها تُشكل جملا فنصوصا)، فمثلا الكلمة "مرحبا" عبارة عن سلسلة نصيّة تحتوي على 5 عناصر، ويمكن الوصول إلى كلّ عنصر كالآتي: العنصر رقم 0 => م العنصر رقم 1 => ر العنصر رقم 2 => ح العنصر رقم 3 => ب العنصر رقم 4 => ا مع ملاحظة أنّ المسافات تُحسَبُ كذلك في السّلاسل النّصيّة فمثلا السّلسلة "مرحبا " تحتوي على 6 عناصر (لاحظ المسافة بعد الألف). وتكون السلاسل النّصية ضمن علامتي تنصيص مزدوجتين "" أو علامتي تنصيص مُفردتين ''. >>> x = "hello" >>> y = 'world' >>> print x, y hello world مع ملاحظة أنّ هناك فرقا بين علامات التّنصيص المزدوجة والمنفردة، ويُمكن استعمالهما بشكل تبادلي. أمّا السّلاسل النّصيّة التي تحتوي على أكثر من سطر، فيُمكن تعيينها لمُتغيّر باستعمال ثلاثة رموز إمّا ''' أو """، انظر المثال التّالي (لكي يعمل بشكل جيّد، من المُفضّل وضعه في ملفّ باسم example1.py وتنفيذه بالأمر python example1.py): x = """This is a multi-line string written in three lines.""" print x y = '''multi-line strings can be written using three single quote characters as well. The string can contain 'single quotes' or "double quotes" ''' print y في المثال أعلاه قمنا بتعيين سلسلة من ثلاثة أسطر للمُتغيّر x بحيثُ يكون المُخرج عند طباعة المُتغيّر x: This is a multi-line string written in three lines. يُمكن كذلك إنشاء سلسلة نصيّة متعدّدة الأسطر بإضافة \n إلى نهاية كلّ سطر، انظر المثال: >>> x = 'This is a multi-line string\nwritten in\nthree lines.' >>> print x مُخرجات المثال أعلاه: This is a multi-line string written in three lines. يُمكن الاستعانة بدّالة المُعرّفة مُسبقا في بايثون لقيّاس عدد أحرف سلسلة نصّية، وهذه الدّالة تُدعى len ويُمكن استخدامها على النّحو التّالي: >>> len("Abdelhadi") 9 السّلاسل النّصيّة في بايثون تتصرّف تماما كالقوائم، بحيث تكون السّلسلة بمثابة قائمة تحتوي على عدّة أحرف، ويمكن فهرسة (الوصول إلى عناصر السّلسلة) وتقطيع السّلاسل النّصيّة بتتبع نفس مبدأ القوائم، انظر المثال: >>> a = "helloworld" >>> a[1] 'e' >>> a[-2] 'l' >>> a[1:5] "ello" >>> a[:5] "hello" >>> a[5:] "world" >>> a[-2:] 'ld' >>> a[:-2] 'hellowor' >>> a[::-1] 'dlrowolleh' يُمكن استعمال العامل in للتحقق فيما إذا كانت السّلسلة النّصيّة جزءا من سلسلة أخرى، في المثال التّالي نقوم بالتحقق من أنّ كلّا من hell و full و el ضمن hello: >>> 'hell' in 'hello' True >>> 'full' in 'hello' False >>> 'el' in 'hello' True عندما يكون المخرج True (صحيح) فهذا يعني بأنّ السّلسلة الصغيرة جزء من السّلسلة النّصيّة الكبيرة. هناك العديد من العمليّات التّي يُمكن تطبيقها على السّلاسل النّصيّة، وسنتعرّف على بعض منها فيما يلي من الأسطر: split: فصل سلسلة نصّية إلى أجزاء يفصل بينها أي رمز (شرط أن يكون في السّلسلة) نقوم بتمريره إلى هذه الدّالة، إذا لم تُحدّد أي فاصل فاستعمل split على فصل السّلسلة النّصيّة اعتمادا على مسافة بيضاء (أي تقسيم الجملة إلى كلمات)، لتفهم أكثر ما الذي أقصده تمعّن في المثال التّالي فبه سيتّضح المقال: >>> "hello world".split() ['hello', 'world'] >>> "a,b,c".split(',') ['a', 'b', 'c'] join: هذه الدّالة تعكس مفعول split حيث تجمع بين عناصر القائمة وترجعها سلسلة نصّية: >>> " ".join(['hello', 'world']) 'hello world' >>> ','.join(['a', 'b', 'c']) 'a,b,c' strip: تقوم بإرجاع سلسلة نصية مع حذف المسافات الزائدة. >>> ' hello world\n'.strip() 'hello world' في المثال أعلاه، يدّل الرّمز \n على "سطر جديد" بحيث يطبع السّطر التّالي سطرين الأول hello والثّاني world: >>> print 'hello\nworld' hello world يُمكن كذلك تمرير قيمة نصيّة لـstrip بحيث تُرجع الدّالة سلسلة نصيّة بدون القيمة المُمَرّرَةِ، لاحظ بأنّها تحذف فقط العناصر الموجودة في بداية وآخر السّلسلة، انظر المثال (لاحظ بأنّ d لم تُحذف، وذلك لأنّها وسط السّلسلة): >>> 'abcdefgh'.strip('abdh') 'cdefg' replace: تقوم باستبدال جزء من السّلسلة أو كامل السّلسلة بقيمة أخرى: >>> 'Hsoub Academy'.replace('Academy', 'I/O') 'Hsoub I/O' تمارين تمرين 1 ما مُخرجات البرنامج التّالي (اُكتبه في ملفّ باسم exercise1.py ثمّ قم بتنفيذه بالأمر python exercise1.py): x = [0, 1, [2]] x[2][0] = 3 print x x[2].append(4) print x x[2] = 2 print x تمرين 2 كم عدد عناصر القائمة x في المثال التّالي (لا تقم بالأمر يدويّا، بل استعن بما تعلّمته): x = [1, 2, "hello, "world", ”Hi”, 4, 8, 3, 0, “Abdelhadi”, “Hsoub Academy”] تمرين 3 أزل القيمة "bad" من السّلسلة التاليّة: >>> 'python is awesome bad' ترجمة -وبتصرف- للكتاب Python Practice Book لصاحبه Anand Chitipothu.
  4. في بيئة عمل تهيمن عليها عملية الـscroll، يُعتبر توفير قوائم رأسية ثابتة (sticky headers) أمرًا مفيدًا ومحببا لدى المستخدمين، ما يضمن وضوح قائمة التصفح وسهولة الوصول إليها في كل الأوقات. في حال ما إن لم تكن تستخدم قالبًا يدعمها بشكل مُباشر، يبقى استعمال أحد الملحقات (plugin) المتوافرة بكثرة أسهل طريقة لإضافة التصفح الثابت، سنتعرف في هذا المقال على إيجابيات وسلبيات إضافة هذه الخاصية إلى موقعك إضافة إلى مجموعة من الملحقات الرائعة للقيام بذلك. إيجابيات وسلبيات القوائم الرأسية الثابتة (Sticky Headers)أصبحت القوائم الرأسية الثابتة تحظى بشعبية كبيرة في السنوات الأخيرة، لا يعتبر استعمالها موجة موضة عابرة فقط بل ضرورة ملحة في ظل تزايد أهمية الوصول السريع لقوائم تصفح المواقع نظرا لتكاثر الأجهزة صغيرة الحجم بشكل كبير والهبوط المستمر اللانهائي (Infinite scrolling) لصفحات المواقع. رغم ما أسلفنا الذكر فإن الآراء تنقسم بين مؤيد ومعارض لاستعمال القوائم الرأسية الثابتة، لكل من الفريقين حججه، فلنبدأ بالإيجابيات: تجربة المستخدم (User Experience)تعتبر هذه المسألة أكثر النقاط الإيجابية وضوحا وبداهة، فالوصول اللَّحْظي للأقسام الأساسية لموقع ما يجعل عملية التصفح أكثر سرعة، ما يعني امتلاك المستخدمين لحرية الاختيار بشكل دائم بغض النظر عن مدى تعمقهم في جزء ما من المحتوى، ما يعتبر ذا أهمية أكبر عند التصفح باستخدام الهاتف. الترويج لعلامتك التجارية (Branding)من خلال إدماج شعارك (logo) في القائمة الرأسية بطريقة تحافظ على الجمالية وتراعي الذوق الرفيع عن طريق استعمال الحجم والتموقع المناسبين، فإنك تجعل أحد أهم عناصر الترويج التجاري في الواجهة بشكل دائم. من البديهي أنك لن تركز على هذا الجانب بشكل كبير في استراتيجيتك الترويجية، لكن ذلك لا يمنع من أنه سيساعد كثيرا في ترسيخ شعارك في الأذهان والرفع من معرفة المستخدمين بمنتوجك مع مرور الوقت. مقاييس تحليلية أفضل (Better Analytics Metrics)نظرا لسهولة التصفح التي يوفرها استعمال القوائم الثابتة فإنه من المرجح أن تلاحظ انخفاضا في معدل الارتداد (bounce rate) وارتفاعا في عدد الصفحات المشاهدة عند كل زيارة (page views per visit)، على الأقل هذا ما لاحظت حدوثه على موقعي الخاص، رغم ذلك يبقى تسجيل هذه التغيرات أمرا غير مضمون على أي حال. وكما هو الأمر بالنسبة لأغلب الأمور فإن القوائم الرأسية الثابتة سيف ذو حدين، يبقى الخطر الأكبر هو أن يؤدي استعمالها إلى إفساد عملية التنفيذ (implementation) بشكل من الأشكال، أبسط مثال على هذا هو جعل القائمة الرأسية كبيرة الحجم أو ظاهرة بشكل مزعج خصوصا عندما يتعلق الأمر بالشاشات الصغيرة. يعتبر القيام بتوفير هذا النوع من التصفح بشكل جيد نتيجة مباشرة للتجريب والفحص على أرض الواقع باستعمال كل من الأجهزة الحقيقية والأدوات، يبقى استعمال محاكي وضع الهاتف المقدم من جوجل device mode and mobile emulation إضافة إلى خيارات المعاينة المدمجة في حزمة التصميم (design package) التي تعتمد عليها من بين أفضل الطرق لضمان حصول المستخدم على تجربة تصفح سلسة ومنظمة. يمكنك التعامل مع مظهر قائمتك الرأسية الثابتة بشكل ذكي للتجاوب مع ما يقوم به مستخدموك فعلا وذلك بغرض الحد من شعورهم بفرضها عليهم واقتحامها لشاشاتهم، فلنأخذ على سبيل المثال طريقة تثبيت القائمة الرأسية في Medium حيث تختفي كل من خيارات البحث، التسجيل والتصفح بشكل كامل عند الانتقال لأسفل الصفحة (scroll down) ثم تعود للظهور بشكل تدريجي عند الانتقال للأعلى (scroll up) لإعطائك خيارات التصفح بشكل لحظي في الوقت الذي غالبا ما ستكون تبحث عنها ما يعتبر لمسة بسيطة وفي نفس الوقت مُبْهِجَةً للغاية فيما يتعلق بسهولة الاستخدام إجمالا. يبقى ثاني أكبر خطر هو الإخلال بعملية التنفيذ (implementation) من الناحية التقنية والحصول على قائمة رأسية مُشَوَّهَة تحجب المحتوى بشكل كلي أو تسبب في أخطاء برمجية مزعجة بلا فائدة تذكر. تجدون أسفله مجموعة من ستة ملحقات (plugin) انتقيتها لكم لتفادي الوقوع في شرك هذا النوع من المشاكل من خلال تفادي الحاجة لأي نوع من البرمجة المتقدمة إطلاقا. قبل التطرق لهذه التشكيلة من ملحقات وورد بريس لنلق نظرة على بعض الأمثلة البارزة لاستعمال أنماط التنفيذ المعهودة في التصفح الثابت. مواقع رفيعة المستوى تستعمل التصفح الثابت (Sticky Navigation)على غرار مثال Medium الذي تطرقنا له أعلاه، توجد أكثر من طريقة لتقديم التصفح الثابت على موقعك. يقدم موقع فرقة الروك الإنجليزية Oasis مثالا جيدا لقائمة تصفح رأسية مثبتة بطريقة اعتيادية، يمكنك أن تقوم بالتنقل بأريحية تامة كيفما تشاء داخل المحتوى على شاشة من أي قياس كان دون أن تبتعد أكثر من ضغطة زر أو إبهام عن المحتوى الأساس الذي تنشده بصفتك من معجبي الفرقة. عند تصفحك للموقع باستعمال الحاسوب فإنك ستجد كل الخيارات معروضة أمامك، أما عندما تقوم بتصغير متصفحك أو استعمال جهاز متنقل فإنك ستلاحظ عددا أقل من الخيارات المحددة بشكل ذكي من خلال الإبقاء على تلك الأساسية فقط إضافة إلى قائمة سريعة (hamburger menu) للتحكم في خيارات التصفح الأساسية من خلال عرض أفقي. أما بالنسبة لموقع Gareth Emery فأنه يستعمل نمطا مبتكرا آخر من خلال تصغير حجم القائمة بالتزامن مع الانتقال إلى الأسفل (scroll down) من أجل إتاحة مساحة أكبر وتوفير وضوح أكبر. عند انتقالك إلى جهاز محمول فإنّك ستلاحظ مثالا رائعا عن استعمال القوائم الرأسية في الترويج التجاري (branding) بشكل جيد، حيث يتم تقليص خيارات المستخدمين إلى شعار الموقع وقائمة سريعة (hamburger menu). رغم أن استخدام القوائم الجانبية الثابتة قد قل في هذه الأيام بشكل كبير إلا أنه كان يعتبر من بين الخاصيات المحددة للأنترنيت في أزمنته الأولى. يعتبر موقع Squid Compression من بين أفضل الأمثلة حيث يتم استعمال قائمة جانبية ثابتة عند التصفح من خلال الحواسيب والتحول إلى تصفح رأسي بالإضافة إلى قائمة سريعة عند العرض على شاشات أصغر حجما. الآن بعد أن تعرّفنا على أهمية القوائم الرأسية الثابتة ثم ألقينا نظرة على بعض الأمثلة الحية لم يبق لنا إلا التطرق للأدوات التي ستساعدك على تقديم التصفح الثابت على موقع وورد بريس الخاص بك أنت أيضا. ملحقات القوائم الرأسية الثابتة لووردبريسSticky Header المُقدّم من طرف ThematoSoup يعتبر ملحق Sticky Header المقدم من طرف ThematoSoup خيارا مباشرا لأصحاب المواقع الذين يرغبون في إضافة وظائف القوائم الرأسية الثابتة. يقدم لك هذا الملحق خيارات عرض حتى وإن كانت مُقَلَّصَةً قدر الإمكان إلى الأهم فقط فإنها تبقى معقولة للغاية، يتواجد معظمها في Customizer، من خلال استعمال هذا الملحق فإنك تبقى محصورا في مستوى واحد للتصفح مع توفرك على إعدادات بسيطة للتحكم في لون الخلفية، لون الكتابة والعرض الأقصى للقائمة الرأسية. تتوافر إعدادات أكثر تقدما أيضا، كإمكانية تحديد المسافة التي يجب أن تظهر عندها القائمة الرأسية، أما إن كنت قلقا حول كيفية ظهورها في الشاشات صغيرة الحجم فبإمكانك إخفاء القائمة بشكل كامل بالنسبة لكل الشاشات التي لا يتجاوز عرضها قيمة معينة تحددها أنت. Sticky Menu (or Anything!) on Scroll من المؤكد أن لهذا الملحق اسما لا يقع على طرف الألسن، لكنك بالتأكيد لن تخطئه نظرا لدقة وصفه. يعطي هذا الملحق إمكانيات أكبر بخصوص ما يمكن تثبيته من خلال السماح لك بتثبيت في أعلى الصفحة أي عنصر (element) يحمل اسما (name)، قسما (class) أو رقم تعريف (id) خاصا، ما يفتح الباب أمام استعمالات مبتكرة باستخدام الإعلانات (banners) أو الدعوات إلى الإجراء (calls to action) إضافة إلى القوائم الرأسية، ما يستوجب الحذر من التأثير السلبي لقيامك بذلك على تجربة المستخدم كإفساد عملية التصفح أو جعلها أكثر تعقيدا دون فائدة ترجى. ستحتاج بعض الخبرة في استخدام HTML/CSS حتى تقوم بالعرض كونك ستكون مسؤولا عن الاستهداف الصحيح للمحدد (selector) على الصفحة التي تريد العمل عليها، يعتبر القيام بهذا الأمر بشكل صحيح عملية سهلة نسبيا في أغلب الأحيان. يتوفر هذا الملحق على خيارات للتحكم في التموضع انطلاقا من أعلى الشاشة كما يمكن تحديد السماح بالعرض فقط لبعض أحجام الشاشات في حال ما إذا كنت قلقا حول كيفية الظهور في الأجهزة الصغيرة. هنالك أيضا إعدادات خاصية Z-index لجعل ما تريد تثبيته في المقدمة بغض النظر عن أي عناصر أخرى مُتَوَضِّعَة فوقه بغرض ضمان وضوحه في كل الأحيان، إضافة إلى واجهة تصحيح الأخطاء (debug mode) سهلة الاستخدام من خلال استعمال وحدة تحكم المتصفح (browser’s console) لإظهار الأخطاء عند حدوثها. myStickymenu رغم أن ملحق myStickymenu تم تصميمه في الأصل ليعمل مع قالب Twenty Thirteen إلا أنه من المفترض أن يعمل بتناغم وسلاسة مع قوالب أكثر حداثة وتجاوبا. يتميز هذا الملحق بكون جاهزًا للتّرجمة، متجاوب مباشرة عند الحصول عليه كما يتضمن أيضا خيارات لإضافة أكواد CSS متقدمة للتعديل على مظهره. قام مصممو هذا الملحق بتوفير صفحة تجريبية عملية بغرض معاينة عمل الملحق قبل اتخاذ القرار بتحميله، يصل عدد مرات تحميل هذا الملحق إلى 000 10 مرة كما أنه حصل على تصنيف خمس نجمات ما يدل على أدائه للمطلوب بشكل جيد للغاية بالنسبة للعديد من أصحاب المواقع. WordPress Notification Bar تعتبر الخيارات التي قمنا بتغطيتها إلى حد الآن موجهة بشكل أساس لتوفير خيارات التصفح في قائمة رأسية ثابتة، لكن قد يكون كل ما تحتاج إليه مجرد تنبيه أو دعوة إلى إجراء (call to action). للقيام بذلك يمكن استخدام الطرق التقليدية من خلال إبراز العروض الخاصة أو تشجيع المستخدمين على التسجيل في نشرة إخبارية مثلا. يعتبر ملحق WordPress Notification Bar المقدم من SeedProd الأداة المناسبة لك إن كان إضافة تنبيه أو دعوة إلى إجراء كل ما تريده، حيث يتميز هذا الملحق بكونه سهل الإعداد، يتوفر على إعدادات سهلة لاختيار الألوان المرغوب بها، كما أنه قابل للترجمة (translation-ready) (تتوافر حاليا الترجمة لثمان لغات) فضلا عن دعمه للتنصيب نسخة Multisite من ووردبريس WPFront Notification Bar ملحق WPFront Notification Bar هو الآخر موجه لتوفير التنبيهات بشكل أساسي كما يدل اسمه على ذلك. تتميز الخيارات التي يقدمها هذا الملحق بكونها متقدمة نوعا ما مقارنة بالملحقات التي تطرقنا لها سابقا كما أنه يوفر إمكانية القيام بالكثير من التعديلات. يمكنك تغيير الارتفاع، اختيار العرض الأفقي، تثبيت القائمة في أعلى أو أسفل الصفحة، كما أنك ستملك تحكما كاملا في اختيار وتخصيص الألوان. يمكنك أيضا تحديد تواريخ بدأ ونهاية عرض القائمة الرأسية (تتجلى أهمية هذه الخاصية عند التعامل مع العروض التي يعتبر الوقت فيها عاملا حساسا) والقيام بحصر عرضها في منشورات معينة ولرتب مستخدمين محددة. قام مطورو هذا الملحق بالعمل على توفير صفحة أفكار مع عينة من تجارب الاستخدام بغرض إلهام الزوار، إضافة إلى دليل مفصل لكل الخصائص المتوافرة. Hero Menu – Responsive WordPress Mega Menuملحق Hero Menu – Responsive WordPress Mega Menu هو الملحق الوحيد المدفوع في اللائحة التي نقدمها لكم اليوم حيث يبلغ ثمنه 19 دولارا. يخول هذا الملحق للمستخدمين إمكانية إنشاء مختلف أنواع القوائم في بضع دقائق، سواء تعلق الأمر بالقوائم الضخمة الغنية بالخاصيات أو القوائم المنسدلة البسيطة. يعمل هذا الملحق بتوافق تام مع WooCommerce، كما تم تجربته بشكل مُكثّف مع العديد من أشهر القوالب الأخرى المدفوعة مثل Enfold، Avada وDivi إضافة إلى كل قوالب وورد بريس الافتراضية من Twenty Eleven إلى Twenty Fifteen. توجد كل المعلومات المتعلقة بالإعداد باستعمال هذه القوالب المشهورة في دليل الاستخدام (integration guide) الخاص بالملحق. فيما يتعلق بالقوائم الرأسية الثابتة، كل ما تحتاجه هو القيام بضغطة زر على إعدادات الملحق من أجل توفير التصفح الثابت، كما تتوافر لك إعدادات مستقلة للتحكم في الألوان، الشفافية والشعار في حال ما إن أردت إعداد قائمتك الرأسية الثابتة بشكل مختلف عن قائمتك الرأسية العادية. كما تم توفير التوثيق والدعم على الموقع الخاص بالمطورين. إن كنت تبحث عن قائمة تتضمن كل الخاصيات التي تحتاجها إضافة إلى حل لتوفير التصفح الثابت فإن هذا الملحق يقدم كل هذا بثمن مناسب. إضافة التصفح الثابت لموقعكسواء تعلق الأمر بوضع كل دعوات الإجراء في واجهة ومركز موقعك أو ضمان توفر مستخدميك بشكل دائم على خيارات التصفح المناسبة فإن استعمال القوائم الثابتة يبقى أمرا منطقيا للغاية من منظور كل من صاحب الموقع والمستخدمين. ما قمت بالتطرق له من الملحقات يكفي لتغطية أغلبية وضعيات الاستعمال، لكن من الواضح أن ذلك ليس كل شيء، حيث تظهر المزيد من الخيارات كل أسبوع، إن كنت تفضل إحدى أدوات التصفح الثابت شاركنا إياها في التعليقات أسفله. ترجمة بتصرف للمقال: HOW TO CREATE STICKY NAVIGATION FOR WORDPRESS لصاحبه: TOM EWER.
  5. css 101

    في هذا الدرس من سلسلة تعلّم CSS، سنشرح كيف يمكن استخدام CSS لتحديد مظهر القوائم؛ وسنتدرّب على ذلك بإنشاء مستند جديد يحوي قوائم، ونُرفقه بورقة أنماط جديدة تُنسّق القوائم الّتي أنشأناها. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. (هذا الدرس) تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. القوائم إن كنت قد أتممت التّمرين في الدرس السابق "إضافة محتوى إلى صفحة ويب باستخدام CSS" فلعلّك لاحظت كيف يمكن إضافة محتوىً قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة. تقدّم CSS بعض الخواصّ المُصمّمة خصّوصًا للقوائم، ومن الأفضل استخدام هذه الخواصّ في معظم الحالات. لتعيين نمط القائمة، استخدام الخاصّة list-style لتحديد نوع العلامة الّتي تظهر قبل كلّ عنصر في القائمة. يمكن استهداف القائمة ذاتها (<ul> مثلًا) بحيث ترث العناصر منها، أو يمكن استهداف العناصر ضمن القائمة (<li> مثلًا). القوائم غير المرتبة في القوائم غير المرتّبة، تكون لكلّ العناصر العلامة ذاتها. تتضمّن CSS ثلاثة أنواع للعلامات: disc (قرص) circle (دائرة) square (مربّع) يمكن أيضًا تحديد رابط صورة لاستخدامها كعلامة للعناصر كخيار بديلٍ. مثال القاعدتان التاليتان تُحدّدان علامات مختلفة لأصناف مختلفة من عناصر القائمة: li.open {list-style: circle;} li.closed {list-style: disc;} نستخدم الأصناف للتمييز بين العناصر المفتوحة والمغلقة (مثلًا: في قائمة مهامّ): <ul> <li class="open">Lorem ipsum</li> <li class="closed">Dolor sit</li> <li class="closed">Amet consectetuer</li> <li class="open">Magna aliquam</li> <li class="closed">Autem veleum</li> </ul> قد تبدو النّتيجة هكذا: القوائم المرتبة في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في السلسلة. لتعيين نمط القائمة، استخدام الخاصّة list-style لتحديد نوع العلامة الّتي تظهر قبل كلّ عنصر في القائمة: decimal (أرقام بنظام العدّ العشريّ) lower-roman upper-roman lower-latin upper-latin مثال القاعدة التّالية تجعل العناصر في القائمة المرتّبة <ol> من الصّنف info مرتّبة بحروف لاتينيّة كبيرة: <ol class="info"> <li>Lorem ipsum</li> <li>Dolor sit</li> <li>Amet consectetuer</li> <li>Magna aliquam</li> <li>Autem veleum</li> </ol> ol.info {list-style: upper-latin;} ترث العناصر <li> هذا التنسيق عن القائمة: تفاصيل أكثر الخاصّة list-style هي خاصّة مختصرة، وقد ترغب في التنسيقات المعقّدة باستخدام الخصائص المنفردة لتعيين قيم مستقلّة. للاطّلاع على الخصائص المنفردة، وعلى تفاصيل أكثر عن قوائم CSS، راجع صفحة list-style. إن كنت تستخدم لغة رماز مثل HTML توفّر وسومًا مختلفة للقوائم المرتّبة (<li>) وتلك غير المرتّبة (<ol>)، فيفضّل استخدام هذه القوائم بحسب دلالتها، على أنّه يمكن عرض القوائم المرتّبة لتبدو وكأنها غير مرتّبة من خلال CSS والعكس بالعكس. قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا تتوقّع الحصول على نتائج متطابقة تمامًا في كلّ المتصفّحات. العدادات ملاحظة هامّة: بعض المتصفحات لا تدعم العدّادات، تقدّم الصّفحة CSS contents and browser compatibility على موقع َQuirks Mode مخطّطًا تفصيليًّا لتوافق المتصفحات مع هذه الميزة وميزات أخرى، كما توفّر الصّفحات الفرديّة في مرجع CSS معلومات عن دعم المتصفّحات. يمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند. لمتابعة العدّ، تحتاج إلى إنشاء عدّاد (counter) ذي اسم خاصّ تحدّده بنفسك. يمكن تصفير العدّاد ضمن عنصر ما قبل البدء بالعدّ باستخدام الخاصّة counter-reset مع اسم العدّاد الذي اخترته. الأب المشترك للعناصر الّتي ترغب بعدّها مكانٌ مناسب لتصفير العدّاد، ولكن يمكن استخدام أي عنصر يرد قبل العناصر المطلوب عدّها. في كلّ عنصر ترغب بعدّه، استخدم الخاصّة counter-increment مع اسم العدّاد الّذي اخترته. لعرض العدّاد، استخدام ‎::before‎ أو ‎::after‎ مع المُحدّد واستخدم الخاصّة content (كما شاهدنا في الدّرس السابق عن إضافة المحتوى). استخدم ‎counter()‎ مع اسم العدّاد كقيمة للخاصّة content، ويمكن كذلك استخدام نوع للعلامة (غير إلزاميّ). الأنواع المُتاحة هي ذاتها الّتي عرضناها في فقرة القوائم المرتّبة. يزيد العنصر الّذي يعرض العدّاد قيمته عادةً. مثال هذه القاعدة تُنشئ عدّادًا لكلّ عنصر <h3> من الصّنف numbered: h3.numbered {counter-reset: mynum;} هذه القاعدة تعرض وتزيد العدّاد لكلّ عنصر <p> من الصّنف numbered: <p class="numbered">Lorem ipsum</p> <p class="numbered">Dolor sit</p> <p class="numbered">Amet consectetuer</p> <p class="numbered">Magna aliquam</p> <p class="numbered">Autem veleum</p> body { counter-reset: mynum; } p.numbered:before { content: counter(mynum) ": "; counter-increment: mynum; font-weight: bold; } هكذا تبدو النّتيجة: تفاصيل أكثر لا يمكنك استخدام العدّادات إلّا إن كنت متأكّدًا من أن كلّ جمهورك يستخدم مُتصفّحًا يوفّر العدّادات. إحدى مزايا العدّادات أنّها تُوفّر إمكانيّة تنسيق العدد بصورة مستقلّة عن عنصر القائمة المرافق لها، لاحظ كيف جعلنا العدد ذا خطّ عريض دون عناصر القائمة في المثال السّابق. يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرّسميّة. تمرين: قوائم منسقة أنشئ مستند HTML جديد في ملف doc2.html، انسخ والصق المحتوى التالي: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document 2</title> <link rel="stylesheet" href="style2.css"> </head> <body> <h3 id="oceans">The oceans</h3> <ul> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul> <h3 class="numbered">Numbered paragraphs</h3> <p class="numbered">Lorem ipsum</p> <p class="numbered">Dolor sit</p> <p class="numbered">Amet consectetuer</p> <p class="numbered">Magna aliquam</p> <p class="numbered">Autem veleum</p> </body> </html> أنشئ ورقة أنماط جديدة style2.css وضع فيها المحتوى التّالي: /* numbered paragraphs */ h3.numbered {counter-reset: mynum;} p.numbered:before { content: counter(mynum) ": "; counter-increment: mynum; font-weight: bold; } غيّر أسلوب تنسيق الشّيفرة والتعليقات كما تحبّ إن لم يُعجباك. افتح المستند في المتصفّح، إن كان متصفّحك يدعم العدّادات، سترى ما يشبه الصّورة أدناه، وإلّا فلن ترى الأرقام (ولا النّقطتين (:) حتّى في بعض المتصفّحات): تمرين أضف قاعدة إلى ورقة الأنماط السّابقة بحيث تعدّ الأرقام باستخدام الحروف الرّومانيّة من i إلى v: وعدّل ورقة الأنماط بحيث تستخدم العناوين حروفًا لاتينيّة كبيرة: شاهد الحل الحروف الرّومانيّة الصّغيرة عرّف قاعدة لعناصر القائمة لتستخدم lower-roman كقيمة للخاصّة list-style: li { list-style: lower-roman; } الحروف اللاتينيّة الكبيرة أضف قاعدة لمتن المستند (كونه أب العناوين) لتصفير عدّاد جديد، ثمّ زد قيمته عند كلّ عنوان: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } ما التّالي؟ عندما يعرض المتصفّح مستندك، فإنّه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة، سنشرح في الدّرس القادم كيف يمكن استخدام CSS للتّعامل مع الأشكال الضّمنيّة للعناصر (المستطيلات) من خلال استخدام الصناديق Boxes في CSS. ترجمة -وبتصرف- للمقال Lists من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.