كيفية إنشاء قائمة تنقل سريعة الاستجابة في WordPress

نشرت: 2021-07-22

الطريق إلى إنشاء قائمة تنقل سريعة الاستجابة في WordPress مفتوح النهاية. هناك طرق لا حصر لها للقيام بذلك بفضل المرونة التي يوفرها WordPress.

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

استجابة التنقل في wp

قبل أن نبدأ ، نقترح أن يكون لديك بعض المعرفة الأساسية لتطوير الواجهة الأمامية. (نحن نطلب فقط الألفة وليس الكفاءة ، لذا من فضلك لا داعي للذعر.) ستكون المعرفة الأساسية بـ HTML و CSS و jQuery و WordPress مثالية. هذا برنامج تعليمي للمبتدئين إلى المتوسطين ، حيث يتضمن تعديل ملفات سمات WordPress.

ستحتاج أيضًا إلى الوصول إلى ملفات سمات WordPress التالية:

  • functions.php
  • header.php
  • footer.php
  • Style.css

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

سيساعدك تطبيق التطوير المحلي المجاني الخاص بنا ، Local ، على تبسيط سير عملك وتجربة موقعك بأمان. جربه اليوم!
كمبيوتر محمول على مكتب به مصباح يعرض صفحة رئيسية لموقع ويب لشركة تسمى "Sharp Minds" تقرأ "Creative Minds Powerful Words"

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

دعونا ننكب على العمل.

1. قم بتنزيل أحدث إصدار مضغوط من bigSlide.js. انسخ الملف إلى مجلد السمة /js .

2. افتح functions.php في محرر الكود المفضل لديك. ابحث عن wp_enqueue_script . من المحتمل أن ترى حالات متعددة ، لأن wp_enqueue_script هي الطريقة القياسية لإضافة البرامج النصية إلى WordPress.

3. بعد آخر مثيل لـ wp_enqueue_script ، أضف المقتطف التالي واحفظه.

 wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true );

4. افتح header.php ، وأضف push الفئة إلى div الأول بعد علامة النص مباشرةً. عادة ما يبدو هذا القسم كما يلي:

 <body <?php body_class(); ?>><div class="hfeed site">.

لذلك بعد الإضافة يجب أن ينتهي بك الأمر بـ:

 <div class="hfeed site push">.

5. بينما لا يزال داخل البحث header.php عن site-navigation . سيكون هذا إما فئة أو معرفًا اعتمادًا على المظهر الخاص بك. في معظم قوالب WordPress ، يجب أن تبدو كما يلي:

 <nav class="site-navigation primary-navigation" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?> </nav>

6. أضف المقتطف التالي قبل </nav> . يجب أن ينتهي بك الأمر بهذا:

 &amp;amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;amp;gt;

نحن هنا نقوم بإنشاء رمز هامبرغر سيتم استخدامه لتشغيل قائمة الهاتف المحمول.

لقطة شاشة لموقع "Sharp Words" مع قائمة الهامبرغر على اليمين

7. افتح footer.php وابحث عن <?php wp_footer(); ?> <?php wp_footer(); ?> . بعد هذا السطر مباشرةً ، أضف المقتطف التالي:

 &amp;amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({ menu: '.mobile-menu', speed: 300, side:"right", easyClose:true});&amp;amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;amp;gt;

بشكل أساسي ، نقوم بإنشاء قائمة تنقل مكررة مخفية في التذييل.

8. أخيرًا ، افتح style.css وبعد السطر الأخير مباشرةً ، قم بإضافة مقتطف الشفرة التالي:

 .panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;} .push{position:relative;} .menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;} .mobile-menu a{display:block;color:#fff;padding:10px 15px;} .mobile-menu a:hover{background-color:#555;} .mobile-menu li{border-bottom:1px #444 solid;} @media only screen and (max-width:900px) { #primary-menu{display:none;} .mobile-menu #primary-menu{display:block;} .menu-link{display:inline-block;} }

لقد استخدمت نظام ألوان داكن هنا ، لكن لا تتردد في تغيير الألوان لتناسب احتياجاتك.

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

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

عند النقر فوق رمز الهامبرغر أو النقر عليه ، تفتح القائمة التي قمنا بتكرارها في التذييل كتطبيق مثل اللوحة الجانبية.

استجابة-التنقل-القائمة-المحمول-الشريحة

إذا واجهتك مشكلة ، فالرجاء ترك تعليق أدناه. سأكون أكثر من سعيدة لتقديم المساعدة. ترميز سعيد!