كيفية تحرير القائمة المنسدلة في قالب X WordPress

بافتراض أنك تريد تحرير قائمة منسدلة في قالب WordPress: تأتي معظم سمات WordPress بنوع من قائمة التنقل المضمنة. في بعض السمات ، تكون القائمة عبارة عن قائمة بسيطة من الروابط ؛ في حالات أخرى ، يكون الهيكل أكثر تعقيدًا وقد يتضمن قوائم منسدلة. إذا كان المظهر الخاص بك يتضمن قائمة منسدلة ، فيمكنك عادةً تعديله من خلال لوحة تحكم WordPress. لتعديل قائمة منسدلة في WordPress ، قم أولاً بتسجيل الدخول إلى لوحة التحكم. في الشريط الجانبي الأيمن ، من المفترض أن ترى قائمة باسم "المظهر". مرر مؤشر الماوس فوق هذه القائمة وانقر على "القوائم". في صفحة "القوائم" ، سترى قائمة بأي قوائم موجودة. إذا كنت ترغب في تعديل قائمة موجودة ، فما عليك سوى النقر فوق اسمها. أو ، إذا كنت ترغب في إنشاء قائمة جديدة ، انقر فوق الزر "إنشاء قائمة جديدة". بمجرد النقر فوق القائمة التي تريد تحريرها ، سيتم نقلك إلى صفحة حيث يمكنك إضافة عناصر القائمة وإزالتها وإعادة ترتيبها. لإضافة عنصر قائمة جديد ، ما عليك سوى النقر فوق علامة التبويب "إضافة عناصر" وتحديد نوع العنصر الذي تريد إضافته. لإزالة عنصر من القائمة ، انقر على رابط "إزالة" المجاور له. لإعادة ترتيب العناصر ، ما عليك سوى النقر عليها وسحبها بالترتيب الذي تريده. بمجرد الانتهاء من إجراء التغييرات على قائمتك ، تأكد من النقر فوق الزر "حفظ القائمة". ستظهر تغييراتك الآن على موقع الويب الخاص بك.

هناك الكثير من الحديث عن قوائم التنقل هذه الأيام. إنها لفكرة جيدة أن تتعلم كيفية إنشاء قائمة منسدلة قبل أن تبدأ في ترميز القوائم المتقدمة. الهدف من هذا البرنامج التعليمي هو توفير أساس متين لتطوير قوائم أكثر تقدمًا. للمتابعة ، ستحتاج إلى ما يلي: الخطوة الأولى في تعلم قوائم WordPress هي تعلم الأساسيات أولاً. يتم عرض وظائف القائمة المضمنة في WordPress بثلاث طرق مختلفة. لا توجد طريقة أفضل لتعلم كيفية إنشاء قائمة منسدلة على WordPress من دليل المبتدئين هذا. سيوضح لك استخدام CSS لاستهداف HTML لوظيفة قائمة WordPress كيفية القيام بذلك.

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

من الضروري أيضًا توفير الموضع النسبي للعنصر في قائمة عناصر المستوى الأعلى. يمكنك تغيير سمة السمة الخاصة بك عن طريق إضافة ملف جديد يسمى burger-menu.js وفصل جديد يسمى استعلام الوسائط. تأكد من ظهور القائمة عندما ينقر المستخدم على الرمز بمساعدة برنامج نصي. يجب تضمين CSS للقائمة الموجودة داخل عنصر به فئة في استعلام وسائط بحيث يتم إخفاء الشاشة الأكبر.

كيف يمكنني تحرير قائمة منسدلة في WordPress؟

لتحرير قائمة منسدلة في WordPress ، ستحتاج إلى الوصول إلى محرر القائمة . يمكن القيام بذلك عن طريق الانتقال إلى صفحة المظهر> القوائم. من هنا ، يمكنك تعديل القوائم الموجودة أو إنشاء قوائم جديدة. لتحرير قائمة ، ما عليك سوى النقر فوق القائمة التي تريد تعديلها وإجراء التغييرات. بمجرد الانتهاء ، تأكد من النقر فوق الزر "حفظ القائمة".

سيسهل شريط أو قائمة التنقل المصممة جيدًا على المستخدمين استكشاف موقعك. ربما لاحظت أن هناك أنواعًا مختلفة من قوائم التنقل على مواقع الويب المختلفة. في الإرشادات التالية ، سنوضح لك كيفية استخدام ميزات WordPress الأصلية لإنشاء قائمة. إذا كانت لديك قائمة واحدة على الأقل ، فيمكنك إضافة عناصر إليها بمجرد الانتهاء منها. تعد الصفحات والمنشورات وعناوين URL المخصصة أمثلة على العناصر. يمكن أيضًا إضافة التصميم المخصص إلى القائمة المنسدلة باستخدام فئات CSS. عندما تكتب عنصر قائمة في تلك الفئة ، ستفتح صفحة تحتوي على كل المحتوى من تلك الفئة.

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

كيف يمكنني تغيير تصميم القائمة في WordPress؟

في المظهر ، انقر فوق المظهر. من خلال النقر على زر خيارات الشاشة في الزاوية اليمنى العليا ، يمكنك الوصول إلى القوائم. سترى قائمة منبثقة مع المربع بجوار "فئات CSS" كسياق. لتعديل عنصر القائمة الذي تريد توسيعه ، يجب عليك التمرير لأسفل والنقر فوق الزر لتوسيعه.

رمز القائمة المنسدلة لـ WordPress

تعد قائمة WordPress المنسدلة طريقة رائعة لتنظيم محتوى موقع الويب الخاص بك وتسهيل عثور الزائرين على ما يبحثون عنه. هناك عدة طرق مختلفة لإنشاء قائمة منسدلة في WordPress ، ولكن الطريقة الأكثر شيوعًا هي استخدام مكون إضافي. هناك عدد من المكونات الإضافية المختلفة المتاحة التي تسمح لك بإنشاء قائمة منسدلة ، لكننا نوصي باستخدام المكون الإضافي Mega Menu. هذا البرنامج المساعد سهل الاستخدام ويأتي مع عدد من الميزات الرائعة ، بما في ذلك القدرة على إنشاء مستويات متعددة من القوائم المنسدلة . بمجرد تثبيت المكون الإضافي ، ستحتاج إلى إنشاء قائمة جديدة. للقيام بذلك ، انتقل إلى صفحة القوائم في منطقة إدارة WordPress وانقر فوق الزر "إنشاء قائمة جديدة". امنح قائمتك اسمًا ثم ابدأ في إضافة عناصر إليها. يمكنك إضافة عناصر من صفحات موقعك على الويب ومنشوراته وروابطه المخصصة. بمجرد إضافة جميع العناصر التي تريدها ، انقر فوق الزر "حفظ القائمة". الآن بعد أن تم حفظ قائمتك ، ستحتاج إلى إضافتها إلى موقع الويب الخاص بك. للقيام بذلك ، انتقل إلى المظهر> صفحة القوائم وحدد القائمة الجديدة من القائمة المنسدلة "تحديد قائمة للتعديل". بمجرد تحديد قائمتك ، سترى عددًا من الخيارات التي يمكنك استخدامها لتخصيصها. على سبيل المثال ، يمكنك تغيير ترتيب العناصر في قائمتك وإضافة عناصر جديدة وتغيير طريقة ظهور قائمتك. عند الانتهاء من تخصيص قائمتك ، انقر فوق الزر "حفظ القائمة" لحفظ التغييرات. قائمة WordPress المنسدلة الجديدة جاهزة للاستخدام الآن!

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

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

كيفية إنشاء قائمة مخصصة في Wp Admin

لإنشاء قائمة مخصصة في WP Admin ، انتقل إلى المظهر> القوائم وحدد جديد. لإنشاء قائمة ، أعطها العنوان "قائمة ثانوية" ، اختر "قائمتي المخصصة" للموقع ، ثم انقر على زر "إنشاء قائمة". أخيرًا ، ضع بعض العناصر في القائمة (على سبيل المثال ، عنصر القائمة 1 ، عنصر القائمة 2 ، عنصر القائمة 3) واحفظه. إذا كنت ترغب في إنشاء قائمة مخصصة برمجيًا ، يجب أن تحصل أولاً على حق الوصول إلى وظيفة WP_ menus (). تتضمن هذه الخطوة إدخال السطر التالي في ملف function.php: add_action ('WP_head،' WP_add_menu ')؛ ***** br إذا كنت تريد إنشاء قائمة مخصصة جديدة بعد إضافة السطر ، فاستخدم وظيفة WP_ menus (). قبل أن تتمكن من فعل أي شيء آخر ، يجب أن تفهم اسم القائمة أولاً. يمكنك القيام بذلك باستخدام وظيفة wp_ menu_get (). يمكنك الحصول على اسم القائمة الأولية باستخدام الكود التالي: * br. WP_ menus (): // get_primary_menu () // قائمة إعادة التعيين. في القائمة الحالية ، يجب عليك إدخال معرفات العناصر. لتحقيق ذلك ، يجب عليك استخدام وظيفة WP_ menu_get_item (). على سبيل المثال ، إذا كنت تريد معرف العنصر الأول في القائمة الأساسية ، فيمكنك استخدام الكود التالي. في قوائم WP_ ، يتم استخدام طريقة br >>> get_item (0) >> br>. تتيح لك وظيفة wp_ menu_add () إضافة عناصر من القائمة الحالية إلى القائمة المخصصة. على سبيل المثال ، إذا كنت تريد إضافة عنصر يسمى "عنصر القائمة 1" إلى القائمة المخصصة ، فاستخدم الكود التالي. Add_item ("عنصر القائمة 1" ، "القائمة الثانوية" ، "أساسي") بعد إضافة العناصر إلى القائمة المخصصة ، احفظها. يمكن تحقيق ذلك باستخدام وظيفة WP_ menu_save (). إذا كنت تريد حفظ القائمة المخصصة "الثانوية" ، فستحتاج إلى استخدام الكود التالي: * br. حفظ () هو الطريقة الصحيحة للقيام بذلك ، وإلا سيتم تعطيل وظيفة WP_ menus ().

ووردبريس القائمة المنسدلة Css

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

في هذا البرنامج التعليمي ، سوف أطلعك على خطوات إنشاء قائمة في WordPress ، وتخصيصها باستخدام CSS ، ثم طباعتها باستخدام ملف القالب. يفترض هذا البرنامج التعليمي أنك على دراية بـ HTML و CSS ، بالإضافة إلى القدرة على تحرير ملفات سمة WordPress. سيستخدم هذا البرنامج التعليمي نسق Twenty و WordPress الإصدار 39 ، لكن الخطوات ستكون جميعها مماثلة لأي موقع ويب WordPress 3. عندما نستخدم Container_id باعتباره container_id ، فسيتم إضافة معرف CSS إلى قائمة HTML ، والتي سيتم استخدامها لاحقًا في أنماط CSS الخاصة بنا. يرشد فصل مشاة WordPress المخصص الخاص بنا وظيفة WP_nav_menu () لطباعة HTML بناءً على معلمة Walker. يجب وضع كود PHP هذا في ملف سمة معين. إذا كان كل شيء آخر صحيحًا ، فيجب أن يعرض قالبك قائمة HTML غير منظمة.

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

كيفية إنشاء قائمة منسدلة في Css

في CSS ، قم ببساطة بإضافة السطر التالي إلى ورقة الأنماط الخاصة بك: القائمة المنسدلة٪ 22br٪ 22 عرض العنصر هو 100٪.
الكتلة؛ ر> ؛ الكتلة؛ ر> ؛ الكتلة؛ ر> ؛ الكتلة؛ br> يحتوي هذا العنصر على عنصر قائمة منسدلة بالتنسيق التالي: * br. إنه نسبي للآخرين.
جسم عائم في الهواء ؛ تعويم: اليسار.
5 بكسل هو حجم المساحة المتروكة.
الهامش هو 0xbr ، بحد * br. عنصر القائمة المنسدلة: hover [dropdown-box] br [/ dropdown] يمكن العثور على عنوان URL هذا في الرسم التالي: * br>٪ 27

كيفية إنشاء قائمة منسدلة ديناميكية في WordPress

تعد إضافة قائمة منسدلة إلى موقع WordPress الخاص بك طريقة رائعة لتنظيم المحتوى الخاص بك وتسهيل عثور الزوار على ما يبحثون عنه. هناك عدة طرق مختلفة لإضافة قائمة منسدلة إلى WordPress ، لكننا سنستخدم المكون الإضافي "Max Mega Menu" لهذا البرنامج التعليمي. بمجرد تثبيت البرنامج المساعد وتنشيطه ، ستحتاج إلى إنشاء قائمة جديدة في قسم "المظهر> القوائم" في لوحة معلومات WordPress الخاصة بك. للقيام بذلك ، ما عليك سوى إعطاء اسم لقائمتك والنقر فوق الزر "إنشاء قائمة". بعد ذلك ، ستحتاج إلى إضافة بعض العناصر إلى قائمتك. في هذا المثال ، سنضيف بضع صفحات من موقع WordPress الخاص بنا. للقيام بذلك ، ما عليك سوى تحديد المربعات بجوار الصفحات التي تريد إضافتها والنقر فوق الزر "إضافة إلى القائمة". بمجرد إضافة جميع العناصر التي تريدها إلى قائمتك ، فقد حان الوقت لبدء تكوين القائمة المنسدلة. للقيام بذلك ، ما عليك سوى النقر فوق علامة التبويب "Mega Menu" في العمود الأيسر ثم اختيار خيار "القائمة المنسدلة" تحت عنوان "Menu Type". الآن بعد أن حددت خيار "القائمة المنسدلة" ، ستحتاج إلى اختيار العناصر الموجودة في قائمتك التي سيتم عرضها في القائمة المنسدلة. للقيام بذلك ، ما عليك سوى تحديد المربعات بجوار العناصر التي تريد تضمينها في القائمة المنسدلة ثم النقر فوق الزر "حفظ القائمة". وهذا كل ما في الأمر! لقد نجحت الآن في إضافة قائمة منسدلة ديناميكية إلى موقع WordPress الخاص بك.

من السهل نسبيًا إنشاء قائمة منسدلة في قالب WordPress. في هذا المنشور ، سأوجهك عبر طريقتين بسيطتين لـ WordPress لإنشاء HTML لقائمة منسدلة. هناك منشوران سيرشدانك خلال تطوير القوائم المنسدلة إذا لم تكن معتادًا على هذا الموضوع. تستخدم قائمة Suckerfish ملف JavaScript صغيرًا جدًا عند استخدام الإصدار الأقدم من Internet Explorer. يحاول العديد من الأشخاص ترميز HTML في ملف header.php الخاص بهم ، ولكنه ليس مرنًا ويعمل بشكل خاص. نظرًا لأنني غير قادر على ربط القائمة باستخدام WP_list_pages () ، فقد قمت بإنشاء علاماتي الخاصة وأضفت معرفنا إلى القائمة. تسرد العلامة الصفحات التي قمت بإنشائها فقط ، لذلك قمت بتضمين سطر من التعليمات البرمجية لعرض صفحة index.php في القائمة لأن صفحتك الرئيسية غالبًا ما تكون صفحة بخلاف WordPress.

اعتبارًا من WordPress 2.75 ، يوجد سطر واحد من التعليمات البرمجية يمكنه إنشاء ما فعلناه بالضبط أعلاه باستخدام علامة قالب WP_page_menu (). سيتم تسمية الكود على النحو التالي: * نوع الكود = html & code = code سيتم تضمين جميع الروابط ، وسيُشار إلى عناصر القائمة بالصفحات المسماة بعدها. من خلال تعيين قيمة show_home على 1 ، يطلب WordPress منا تضمين صفحتنا الرئيسية في القائمة. الغلاف div غير مطلوب في القوائم المنسدلة ؛ ومع ذلك ، فإنه كثيرا ما يستخدم في الترميز. لتسمية فصلك ، استخدم معلمات اسم الفئة. لا يمكن إضافة فئة current_page_item إلى الصفحة الرئيسية. إذا كنت تريد تحديد نمط عنصر القائمة الحالي ، فاستخدم wp_list_pages بدلاً من ذلك.

كيف يمكنني إنشاء قائمة منسدلة مخصصة في WordPress؟

حدد المظهر من شريط القائمة على الجانب الأيمن من نافذة مسؤول WP. لتغيير ترتيب عنصر في القائمة ، قم بسحبه وإفلاته. يجب سحب العناصر الفردية إلى اليمين لإنشاء قوائم منسدلة ؛ ومع ذلك ، إذا كنت تريد التراجع عن هذا ، يمكنك نقلهم إلى اليسار مرة أخرى.

القائمة المنسدلة

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

يسهّل المكون الإضافي JavaScript في القائمة المنسدلة من Bootstrap على المستخدمين التفاعل مع القوائم المنسدلة. يعتمد قرار التصميم هذا على حقيقة أنه يتم تبديلها عن طريق النقر بدلاً من التمرير فوقها. على الرغم من أنها لا تتطلب تحديد موضع ديناميكي ، إلا أن القوائم المنسدلة لا تُستخدم لوضعها في أشرطة التنقل باستخدام Popper.js. في Bootstrap ، يتم دعم معظم تفاعلات قائمة لوحة المفاتيح القياسية. يمكن استخدام القوائم المنسدلة لأزرار التحجيم مع الأزرار بجميع الأحجام ، بما في ذلك القوائم المنسدلة الافتراضية والمقسمة. بدلاً من استخدام> a> s فقط في القوائم المنسدلة ، استخدم عناصر <button>. عندما تحتوي القائمة المنسدلة على رأس ، يمكن استخدامه لتسمية أقسام الإجراء.

تحتوي القائمة على عدد من العناصر ذات الصلة والتي يتم فصلها بواسطة مقسم. استخدم أدوات الهامش أو الحشو إذا كنت تطلب مقدارًا صغيرًا من المساحة السلبية. يجب إضافة العناصر المعطلة البيانات إلى العناصر الموجودة في القائمة المنسدلة لتعطيلها. Data-toggle = يمكن إضافة القائمة المنسدلة إلى ارتباط أو زر لتبديله. عند تنشيط عنصر قائمة منسدلة ، يتم تشغيل حدث من عنصره الأصلي. في سمات البيانات ، data-offset = 'هو اسم الخيار المراد إلحاقه بالبيانات.