لوحة المتصدرين

يمكنك تنفيذ البرامج الموجودة ضمن هذه السلسلة (كما وسبق أن ذكرنا في المقدّمة) بطريقتين مختلفتين: الأولى هي تحميل وتنصيب بيئة التطوير المجّانيّة Visual Studio 2015 Community من مايكروسوفت. توفّر هذه البيئة خدمات عظيمة للمطوّر وتسهّل عمليّة كتابة البرامج إلى حدّ كبير. ويمكنك الاستفادة من مزايا تنقيح الأخطاء debugging المتقدّمة التي يوفّرها المنقّح debugger المرفق ضمن هذه البيئة. يمكنك تحميل نسختك المجّانيّة من هنا. الطريقة الثانية هي في استخدام الموقع NET Fiddle. الذي يوفّر مزيّة تنفيذ البرامج التي تكتبها على خادم خاص به، ومن ثمّ يعرض لك خرج البرنامج، بدون أن تمتلك نظام تشغيل ويندوز حتى. البرنامج الأول سنبدأ بمثال عمليّ لنسبر سريعًا أغوار هذه اللغة. شغّل برنامج Visual Studio 2015 Community ثم من القائمة File اختر الأمر New > Project. من نافذة مشروع جديد New Project، اختر من القسم الأيسر #Visual C ومن القسم الأيمن اختر Console Application. اكتب HelloWorld ضمن حقل الاسم Name في القسم السفلي، ثم اضغط زر OK. انظر الشكل التوضيحي التالي: قد تبدو الصورة مختلفة بعض الشيء لديك بحسب إعدادات الإظهار التي اخترتها. سيعمل Visual Studio على إنشاء هذا التطبيق وفتح ملف مُجهّز خصيصًا لك اسمه Program.cs. امسح محتويات هذا الملف بالكامل ثم انسخ الشيفرة التالية ضمنه: 1 using System; 2 3 namespace HelloWorld 4 { 5 class Program 6 { 7 static void Main(string[] args) 8 { 9 Console.WriteLine("Hello World!"); 10 } 11 } 12 } اضغط المفتاحين Ctrl+F5 معًا لتبدأ عملية بناء build البرنامج وتنفيذه لتحصل على العبارة Hello World! في خرج البرنامج (أو من القائمة Debug > Start Without Debugging). رغم أنّ البرنامج السابق بسيط جدًّا إلًا أنّه يحتوي على الكثير من المفاهيم الجديدة التي سنتناولها تباعًا في هذه السلسلة. يبدأ هذا البرنامج بتعريف نطاق اسم namespace (السطر 3) اسمه HelloWorld وهو نفس الاسم الذي زوّدناه للبرنامج، سنتكلّم عن نطاقات الأسماء في درس لاحق، ولكن يكفيك أن تعرف الآن أنّ نطاقات الأسماء هي وسيلة لتنظيم الأصناف ضمن مجموعات مترابطة منطقيًّا. يأتي بعد ذلك تعريف صنف class جديد اسمه Program (السطر 5). يحتاج أيّ برنامج مكتوب بالسي شارب إلى نقطة دخول entry point لكي يبدأ تنفيذه. نقطة الدخول يجب أن تكون عبارة عن تابع method اسمه Main (السطر 7)، تكون التوابع عادةً ضمن الأصناف، يكفيك الآن أن تفهم التابع على أنّه شبيه بالدّالة function في لغات البرمجة الأخرى. أي هو جزء من الشيفرة يمكن استدعاؤه لتنفيذ ناحية وظيفيّة مُحدّدة في البرنامج وقد يُرجع قيمة ما أو لا يُرجع أيّ شيء. العبارة الموجودة في السطر 9 هي عبارة برمجّية قياسيّة في لغة سي شارب. وظيفة هذه العبارة استدعاء التابع WriteLine من الصنف Console وتمرير النص "!Hello World" له لكي يُظهر النص !Hello World في خرج البرنامج. أيّ عبارة برمجيّة في سي شارب يجب أن تنتهي بفاصلة منقوطة (;)، وقد تكون العبارة البرمجيّة مجرّد استدعاء تابع أو أن تكون عمليّة إسناد إلى متغيّر، أو قد تكون مزيجًا بينهما. إذا كانت لديك معرفة سابقة بلغات برمجة مثل C أو ++C أو Java ستلاحظ أنّ الصيغة النحويّة syntax للغة سي شارب تشبه إلى حدٍّ كبير الصيغة النحويّة لهذه اللّغات. حيث تُستخدم الحاضنات { } مثلًا لتحديد البداية والنهاية للتابع method وللصنف class ولنطاق الاسم namespace. وحتى أنّهما يشكّلان حدود أيّ بنية برمجيّة في لغة سي شارب مثل العبارات التكراريّة. انظر على سبيل المثال إلى السطر 6 لتجد الحاضنة "{" الخاصّة بالصنف Program وإلى السطر 12 لتجد حاضنة الإغلاق "}" له. كما ينبغي التنبّه أيضًا إلى كون لغة سي شارب حسّاسة لحالة الأحرف كما هو الحال في لغات البرمجة C و ++C و Java. ملاحظة يمكن استخدام المفتاح F6 في بيئة Visual Studio (أو من القائمة Build > Build Solution) لبناء البرنامج دون تشغيله (تنفيذه) وذلك اعتبارًا من الشيفرة والحصول على ملف تنفيذي منه له الامتداد exe في حال كان البرنامج لا يحتوي على أيّ خطأ. برنامج بسيط لجمع عددين صحيحين لنعمل الآن على برنامج عمليّ أكثر. سنكتب برنامج يعمل على جمع عددين صحيحين وإظهار النتيجة للمستخدم. اتبع نفس الخطوات التي أجريناها في البرنامج السابق لإنشاء برنامج جديد باسم SumTwoNumbers، انسخ محتويات الشيفرة التالية إلى الملف Program.cs: 1 using System; 2 3 namespace SumTwoNumbers 4 { 5 class Program 6 { 7 static void Main(string[] args) 8 { 9 int a; 10 int b; 11 int c; 12 13 a = 3; 14 b = 4; 15 16 c = a + b; 17 18 Console.WriteLine("3 plus 4 equals: " + c.ToString()); 19 20 } 21 } 22 } يُقدّم هذا البرنامج البسيط مفهوم التصريح عن المتغيّرات والتعامل معها. صرّحنا في الأسطر من 9 إلى 11 عن ثلاثة متغيّرات a و b و c من النوع int. يجب التصريح في لغة سي شارب عن كل متغيّر قبل استخدامه في البرنامج. لاحظ أنّ التصريح عن متغيّر يتمّ بذكر نوعه ومن ثمّ اسمه. يستطيع المتغيّر من النوع int استيعاب أي عدد صحيح (دون فاصلة عشريّة) يقع بين 2,147,483,648- و 2,147,483,647. لاحظ أنّه قد أسندنا القيمتين 3 و 4 إلى المتغيّرين a و b على الترتيب، وذلك في السطرين 13 و14. نجري عملية الجمع والإسناد إلى المتغيّر c في السطر 16. وفي السطر 18 نعرض رسالة للمستخدم. يمكن إسناد قيمة للمتغيّر مباشرةً عند التصريح عنه. فمن الممكن مثلًا إسناد القيمتين 3 و 4 للمتغيّرين a و b على الترتيب عند التصريح عنهما وذلك بالشكل التالي: int a = 3; int b = 4; كما يمكن استخدام عبارة تصريح واحدة للتصريح عن عدّة متغيّرات بنفس الوقت. فمثلًا كان من الممكن التصريح عن المتغيّرات a و b و c السابقة بعبارة برمجيّة واحدة على الشكل التالي: int a, b, c; في الواقع هناك شكلان من أنواع المتغيّرات تدعمهما منصّة دوت نت. أنواع القيمة value types والأنواع المرجعيّة reference types. سنتحدّث عنهما لاحقًا. يُعتبر النوع int نوع قيمة. يجب إجراء عمليّة إسناد واحدة على الأقل إلى متغيّر قيمة قبل القراءة منه. وإلّا سنحصل على خطأ. جرّب حذف العبارة البرمجيّة الموجودة في السطر 16 والمسؤولة عن إسناد قيمة المجموع إلى المتغيّر c. نفّذ البرنامج وستحصل على الخطأ التالي: Use of unassigned local variable 'c' سبب ذلك أنّنا حاولنا قراءة المتغيّر c في السطر 18 دون أن نُسند أيّ قيمة له. العبارة البرمجيّة الموجودة في السطر 18 مسؤولة عن عرض الرسالة إلى المستخدم كما أسلفنا. ستلاحظ أنّنا مرّرنا التعبير expression التالي إلى التابع WriteLine: "3 plus 4 equals: " + c.ToString() التعبير البرمجي هو مفهوم موجود في جميع لغات البرمجة تقريبًا، وهو ببساطة ناتج عمليّة برمجيّة باستخدام عامل operator واحد أو أكثر، أو استدعاء إلى تابع أو مزيج بينهما. نسمّي عمليّة معالجة التعبير بتقييم التعبير expression evaluation. العامل المُستخدم هنا هو عامل ضمّ النصوص (+)، ولعلّك تستغرب لماذا أدعوه بعامل ضمّ النصوص رغم أنّه يشبه عامل الجمع العادي الذي يجمع عددين مع بعضهما (انظر السطر 16). يعود السبب في ذلك إلى نوع المُعامِلَين operands الموجودين على طرفيه. يمكنك أن تلاحظ بسهولة أنّ المعامل الأيسر هو النص: "3 plus 4 equals: " أمّا المعامل الأيمن فهو: c.ToString() وهو أيضًا نص ويعود سبب ذلك إلى استدعاء التابع ToString من المتغيّر c المعرّف أصلًا أنّه متغيّر من نوع int. ولكنّ استدعاء هذا التابع من المتغيّر c يؤدّي إلى الحصول على التمثيل النصّي للقيمة العددية الموجودة ضمنه أصلًا. فإذا كان المتغيّر c يحمل القيمة العددية 7، فإنّ التابع ToString سيُرجع النص "7"، الذي يعمل عامل الضم + على ضمّه مع النص الذي يسبقه لتكون نتيجة التعبير ككل هي: "3 plus 4 equals: 7" سيُمرّر هذا النص إلى التابع WriteLine لعرضه للمستخدم. أعتقد أنّك قد بدأت بفهم طريقة الوصول إلى التوابع واستدعائها في لغة سي شارب. فنحن نستخدم اسم الصنف (أو الكائن object كما سنرى لاحقًا) الذي يحوي التابع المراد استدعاؤه متبوعًا بنقطة ثم باسم التابع المطلوب، وبعد ذلك قوسين هلاليّين نمرّر بينهما الوسائط التي يطلبها التابع إذا اقتضت الضرورة لذلك. برنامج محسن أكثر لجمع عددين لقد تعلّمنا العديد من المفاهيم الجديدة من خلال البرنامجين السابقين. ولكن لعلّك قد لاحظت من برنامج جمع العددين السابق أنّ البرنامج جامد بعض الشيء. فهو يجمع عدّدين مُحدّدين سلفاً. سنعمل في هذه النسخة المطوّرة من البرنامج على استقبال العددين المراد جمعهما من المستخدم ومن ثمّ إجراء عمليّة الجمع عليهما وعرض النتيجة على المستخدم، مع بعض التحسينات الإضافيّة الأخرى. أنشئ مشروعًا جديدًا باسم EnhancedSumTwoNumbers ثمّ استبدل محتويات الملف Program.cs بالشيفرة التالية: 1 using System; 2 3 namespace EnhancedSumTwoNumbers 4 { 5 class Program 6 { 7 static void Main(string[] args) 8 { 9 string str1, str2, result; 10 double num1, num2, sum; 11 12 //prompt user to get input for first value. 13 Console.Write("Input first number: "); 14 str1 = Console.ReadLine(); 15 16 //prompt user to get input for second value. 17 Console.Write("Input second number: "); 18 str2 = Console.ReadLine(); 19 20 //convert the input values to double numbers. 21 num1 = double.Parse(str1); 22 num2 = double.Parse(str2); 23 24 //perform sum operation. 25 sum = num1 + num2; 26 27 /*concatenate strings to form output 28 message which contains the result.*/ 29 result = num1.ToString() + " + " + num2.ToString() + " = " + sum.ToString(); 30 31 Console.WriteLine(result); 32 33 } 34 } 35 } نفّذ البرنامج بضغط المفتاحين Ctrl+F5 معًا. سيطلب منك البرنامج في البداية إدخال قيمة العدد الأوّل. أدخل القيمة المرغوبة ثم اضغط مفتاح الإدخال Enter. بعد ذلك سيطلب منك البرنامج إدخال قيمة العدد الثاني. أدخلها واضغط Enter. سيعرض البرنامج بعد ذلك النتيجة المطلوبة على شكل رسالة مناسبة. تحتوي هذه النسخة من برنامج جمع الأعداد على عدّة تحسينات: أصبح برنامجنا يدعم جمع أعداد تقبل فاصلة عشرية من خلال التصريح عن متغيّرات من النوع double (انظر السطر 10). والنوع double هو النوع الذي يقبل أعدادًا ذات فاصلة عائمة مزدوجة الدقّة. مجال الأعداد التي يقبلها يقع بين ±5.0*10-324 حتى ±1.7*10308. أصبح بإمكان مستخدم البرنامج أن يُدخل الأعداد المراد جمعها مباشرة من لوحة المفاتيح، وذلك من خلال التابع ReadLine من الصنف Console (انظر السطرين 13 و 16) يُوقف هذا التابع تنفيذ البرنامج وينتظر المستخدم أن يُدخل قيمة ما ويضغط مفتاح الإدخال Enter ليتابع البرنامج التنفيذ. أضفنا تعليقات توضيحيّة ضمن البرنامج. هذه التعليقات لا يكترث بها المترجم، ووظيفتها هي جعل الشيفرة البرمجيّة مقروءةً وسهلة الفهم والتعديل لاحقًا. في الحقيقة تُعتبر عمليّة كتابة التعليقات البرمجيّة فنًّا بحد ذاته، وأنصح أن يمارسها كلّ مبرمج بأيّ لغة برمجة كانت. في الواقع ليس مطلوبًا كتابة التعليقات البرمجيّة قبل كلّ عبارة برمجيّة، فعلى المرء أن يكون حكيمًا في استخدامها بالشكل الذي يحافظ فيه على التوازن بين جعل الشيفرة واضحة ومقروءة، وعدم الإفراط في كتابة التعليقات بدون ضرورة. تدعم لغة سي شارب نوعين من التعليقات: التعليقات على مستوى السطر، حيث يتجاهل المترجم compiler كلّ ما يقع على يمين الرمزين//. والتعليقات التي تمتد على عدّة أسطر، حيث يتجاهل المترجم المحتوى الموجود بين الرمزين /* والرمزين */. انظر الأسطر 12 و 16 و 20 و 24 من أجل التعليقات على مستوى السطر، والسطرين 27 و 28 من أجل التعليقات التي تمتدّ على عدّة أسطر. استخدمنا التابع Write بدلًا من التابع WriteLine (انظر السطرين 13 و 17)، والسبب في ذلك هو أنّنا نريد أن يطلب البرنامج من المستخدم إدخال القيمة على نفس السطر الذي تُعرَض فيه الرسالة وليس على سطرٍ منفصل. فالتابع Write يعرض النص المُمرّر إليه ولا يُحدِث سطرًا جديدًا. في حين يسلك التابع WriteLine نفس سلوك التابع Write ولكن ينتقل إلى سطر جديد بعد عرض النص. يمكنك أن تجرّب استبدال التابع WriteLine بالتابع Write لترى الفرق. جعلنا عمليّة تشكيل النص الذي سيُعرض على المستخدم ضمن سطر منفصل (السطر 29) وأسندنا هذا النص إلى المتغيّر result من النوع string. الهدف من هذا الأمر هو جعل الشيفرة نظيفة وواضحة وسهلة للقراءة. النوع string هو من الأنواع المرجعيّة reference types ويُستخدم للتعبير عن النصوص. ولكن تبقى هناك بعض العيوب التي لم نعالجها والتي قد تسبّب توقّف البرنامج عن العمل: تُعتبر القيم التي يدخلها المستخدم بواسطة التابع ReadLine أنّها قيم نصيّة. وحتى نستطيع التعامل معها كأعداد تقبل فاصلة عشريّة يجب تحويلها إلى قيم عددية من النوع double. نستطيع ذلك بسهولة من خلال التابع Parse من الصنف double. يقبل هذا التابع أن نُمرّر إليه قيمة نصيّة ليعيد إلينا التمثيل العددي لها من النوع double. ولكنّ السؤال هنا أنّه ماذا لو أدخل المستخدم بشكل غير مقصود (أو مقصود) القيمة النصيّة التالية "abc" للعدد الأوّل؟ عندما يصل تنفيذ البرنامج إلى السطر 21 سيعمل التابع Parse على تحويل القيمة "abc" إلى التمثيل العددي من النوع double وهذا ما لا يمكن حدوثه بالطبع، لذلك فسيرمي التابع Parse استثناءً Exception سيؤدّي إلى توقّف البرنامج عن العمل فورًا! سنتحدّث عن الاستثناءات في درس لاحق. وعلى أيّة حال يمكن حلّ هذه المشكلة بطريقتين مختلفتين سنتحدّث عنهما لاحقًا في هذه السلسلة. ولكنّ المغزى هنا هو أنّه لا تثق بمدخلات المستخدم مطلقًا. تُعتبر عملية ضم النصوص التي أجريناها في السطر 29 غير عمليّة وعادة برمجيّة غير جيّدة. يتعلّق هذا الأمر بالحقيقة طريقة تعامل سي شارب مع النصوص، سأترك الحديث عن هذه المشكلة وطرق حلّها عندما نتحدّث عن النصوص والتعامل معها في الدرس السادس. تمارين داعمة تمرين 1 اكتب برنامجًا يطبع العبارات التالية كما يلي على الشاشة: Today is Sunday. Tomorrow is Monday. Yesterday is Saturday. تمرين 2 اكتب برنامجًا يطلب من المستخدم إدخال قيمتين عدديتين، ومن ثمّ يوجد حاصل الضرب لهما (استخدام العامل *) وبعرض النتيجة على الشاشة. يجب أن يدعم البرنامج الأعداد ذات الفاصلة العشرية. الخلاصة تعرّفنا في هذا الدرس على الشكل الأساسيّ لأيّ تطبيق مكتوب بلغة سي شارب. كما تعاملنا مع ثلاثة برامج بسيطة للغاية وضّحت مبادئ كتابة برنامج باستخدام سي شارب. سنتناول في الدرس القادم موضوع المتغيّرات وأنواعها والعوامل والتعابير expressions بتفصيل أكبر.

من المؤكد أنك قمت بتصفح الإنترنت من هاتف محمول، ستلاحظ في كثير من المواقع زر فتح قائمة التنقل الموجود في أعلى الموقع الذي بمجرد أن تضغط عليه يقوم بفتح قائمة تنقل الموقع. إضافة هذا الزر إلى موقع ووردبريس الخاص بك سوف تحسن تجربة المستخدم بشكل كبير للمستخدمين الذين يزورون الموقع من أجهزة الهاتف المحمول أو الأجهزة اللوحية. صحيح بأنه يمكنك استعمال إضافة ووردبريس جاهزة للقيام بهذه المهمة أو تنصيب قالب يحوي هذه الميزة ولكن ماذا لو كنت تستعمل قالب خاص بك وتريد إضافة هذه الميزة بنفسك؟ في هذه المقالة سوف أريك كيف تقوم بعمل هذا بمساعدة ووردبريس وبعض تعليمات css وjavascript وتحويل القائمة إلى الشكل المطلوب. ماذا ستحتاج لتتابع مع هذا المقال، ستحتاج إلى: موقع ووردبريس على حاسوبك الذي يحتوي قائمة. قالب ابن للقالب الذي تعمل عليه من أجل أن تبقى تعديلاتك في مكانها عندما يتم تحديث هذا القالب من الإنترنت. سأقوم بتنفيذ هذه التعليمات على موقعي الخاص، الذي يستهدف قائمة التنقل الرئيسية والتي في موقعي الخاص تملك اسم صنف css وهو menu.main ، إذا كان اسم هذا الصنف مختلفًا في موقعك فسوف تقوم بتطبيق التعليمات على اسم الصنف الخاص بقائمتك. القائمة الحالية قائمتي تبدو على أجهزة الحاسب بهذا الشكل: لكن على شاشة الهاتف ليست جميلة: يمكنني تحسين ذلك بجعل محاذاة القائمة إلى المنتصف لكن ذلك سيأخذ الكثير من مساحة الشاشة لذلك سنقوم بعمل زر القائمة الذي بمجرد الضغط عليه سوف تظهر القائمة التي سنقوم بإخفائها في أجهزة الهاتف المحمول. إضافة زر القائمة الخطوة الأولى هي إضافة أيقونة زر القائمة. سوف نقوم بذلك في ملف header.php في قالبك أضف رابط تحت قائمة التنقل الرئيسية ها هو الخاص بي: <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> <a class="toggle-nav" href="#">☰</a> هذا الرابط سيقوم بعمل زر الذي يقوم بفتح وإغلاق زر القائمة وله اسم الصنف togglenav وبداخله الأيقونة وهي في هذه الحالة رمز html. هذا كل ما يتطلب إضافته إلى ملف header.php إذا قمت بإعادة تحميل صفحتك سترى بأن زر القائمة قد ظهر على الشاشة: إخفاء زر القائمة على الشاشات الكبيرة لنبدأ مع شاشات الحاسب ونضيف هذه التعليمات، لكن لا تنسى وضع هذه التعليمات ضمن media query المناسبة لعرض الشاشة: .toggle-nav { display: none !important; } هذا يجعل الرابط الذي يحوي الأيقونة بداخله يختفي. لقد أضفت كلمة important! حتى تبقى هذه التعليمة هي الأقوى و لا يتم الكتابة عليها من قبل التعليمات الآخرى. لقد اختفى. سوف نقوم بإخفائه أيضًا في الشاشات الأصغر من ذلك و لكن سنأتي لهذا لاحقًا. إضافة تنسيقات css لزر القائمة الأن نحن نحتاج لإضافة بعض التنسيقات إلى القائمة في شاشات الهاتف والتي تظهر عندما يضغط المستخدم زر القائمة. أولًا، في ملف css الخاص بك أضف media query المناسبة: @media screen and ( max-width: 480px) { } لقد استهدفت الشاشات التي يبلغ أكبر عرض لها 480px ولكن يمكنك اختيار الأبعاد المناسبة لقائمتك. الآن لنقم بإضافة بعض تعليمات css في media query أولًا سنقوم بإظهار الأيقونة مجددًا و نقوم بوضع تنسيقات لها لتبدو أفضل: .toggle-nav { padding: 15px; margin: 15px; display: inline-block !important; color: #8D7F68; color: #fff; transition: color linear 0.15s; } .toggle-nav:hover, .toggle-nav.active { text-decoration: none; color: #8D7F68; } الأن لنقم بتنسيق القائمة نفسها و إضافة هذه التعليمات في نفس media query : .menu.main { display: inline-block; position: relative; background: #fff; } .menu.main ul { display: none; position: absolute; top: 80%; left: 0px; padding-left: 15px; background: #fff; } .menu.main li { display: block; float: none; } والآن الخطوة الأخيرة هي إضافة javascript المسؤولة عن إظهار القائمة عندما يضغط المستخدم على زر الأيقونة. إضافة سكربت javascript هذه الخطوة تتألف من خطوتين استدعاء السكربت وإضافة التعليمات له. لنقم أولًا باستدعائه. في قالبك أضف مجلدًا جديدًا يسمى scirpts وفي داخله ملف فارغ باسم burger-menu-script.js. الآن افتح ملف functions.php في قالبك وأضف التالي إليه: function wpmu_burger_menu_scripts() { wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wpmu_burger_menu_scripts' ); /* الآن قمنا باستدعاء الملف بشكل صحيح وسنضيف التعليمات البرمجية له، افتح ملف وأضف التالي */ jQuery(document).ready(function() { jQuery('.toggle-nav').click(function(e) { jQuery('.menu.main ul').slideToggle(500); e.preventDefault(); }); }); هذه التعليمات استهدفت العنصر الذي له اسم الصنف toggle-nav. و هو في حالتنا الزر و الذي سوف يتم تنفيذ التعليمات عليه عند الضغط عليه من قبل المستخدم و ستعمل دالة slideToggle الخاصة بمكتبة jquery لإخفاء زر القائمة و إظهاره عند الضغط عليه من قبل المستخدم. والآن لنرى النتيجة: وعندما أضغط على الأيقونة تظهر القائمة: وهذا فيديو يوضح كيف تجري العملية: استخدام زر القائمة سيحسن تجربة المستخدم على جهاز الهاتف المحمول إذا اتبعت الخطوات السابقة، سيصبح لديك زر قائمة بسيط والذي سيحسن تجربة المستخدم بشكل كبير عندما يزور المستخدمون موقعك من شاشات صغيرة. ويمكنك فعل ما تشاء لتحسن مظهر هذا الزر وجعله مناسبًا لموقعك. ترجمة -وبتصرّف- للمقال How to Create a Custom Animated Burger Menu for WordPress لصاحبته Rachel McCollin حقوق الصورة البارزة محفوظة لـ Freepik