كيفية إضافة قائمة منسدلة إلى موضوع WordPress الخاص بك

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

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

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

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

كيفية إضافة قائمة منسدلة في صفحة ووردبريس

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

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

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

كيف أقوم بإضافة قائمة إلى صفحة في WordPress؟

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

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

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

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

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

كيفية إضافة القائمة المنسدلة في Woocommerce

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

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

قائمة ووردبريس المنسدلة بدون صفحة

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

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

إذا كنت تريد مشاهدة ما تفعله في الوقت الفعلي ، فيمكنك القيام بذلك عن طريق تحديد Manage with Live Preview من قائمة الأدوات. يجب استخدام هذه المكونات الإضافية إذا كنت تريد قائمة ضخمة منسدلة. بالإضافة إلى قائمة قابلة للتوسيع وقائمة منسدلة ثنائية الأبعاد ، يعرض هذا التطبيق جميع العناصر افتراضيًا. باستخدام الإصدار المجاني ، يمكنك إضافة قوائم أفقية ضخمة ، أو التمرير ، أو النقر فوق الأحداث ، ودعم القوائم المنبثقة ، واستخدام قوائم متعددة. تبدأ أسعار البرنامج المساعد الاحترافي من 29 دولارًا لموقع واحد وترتفع اعتمادًا على مدى تعقيد المشروع. يمكنك إنشاء قائمة محمولة سريعة الاستجابة من خلال WP Mobile Menu ، والتي تأتي في مجموعة متنوعة من السمات. انها سهلة الاستخدام؛ ما عليك سوى اتباع التعليمات وأنت على ما يرام.

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

تمكين خيار Link Target للقوائم الفارغة المستهدفة

لإنشاء قائمة فارغة مستهدفة ، اتبع الخطوات التالية: br> من خلال تحديد "Link Target" ضمن "Advanced Menu Properties" ، يمكنك الوصول إلى شاشة "Screen Options" عن طريق تمكين خيار "Link Target" أولاً.
إذا كنت تريد ربط جهاز الكمبيوتر الخاص بك ، فانتقل إلى قائمة "Link Target" ضمن "إظهار خصائص القائمة المتقدمة".