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

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

قم بإنشاء قائمة  ووردبريس سريعة الاستجابة للجوال

هذا برنامج تعليمي متعمق. سنعرض كلاً من طريقة البرنامج المساعد للمبتدئين (بدون تشفير) وطريقة الترميز للمستخدمين الأكثر تقدمًا.

بنهاية هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء قائمة متحركة مدمجة ، وقائمة منسدلة للهاتف المحمول ، وقائمة تبديل للهاتف المحمول.

مستعد؟ هيا بنا نبدأ.

فيديو تعليمي

اشترك في WPBeginner

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

الطريقة الأولى: إضافة قائمة سريعة الاستجابة في  ووردبريس باستخدام البرنامج المساعد

هذه الطريقة أسهل ويوصى بها للمبتدئين لأنها لا تتطلب أي ترميز مخصص.

في هذه الطريقة ، سننشئ قائمة هامبرغر تنزلق على شاشة الهاتف المحمول.

عرض البرنامج المساعد للقائمة المستجيبة

أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Respive Menu . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون  ووردبريس الإضافي .

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

إعدادات القائمة سريعة الاستجابة

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

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

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

لا تنس النقر فوق الزر “خيارات التحديث” لتخزين إعداداتك.

يمكنك الآن زيارة موقع الويب الخاص بك وتغيير حجم شاشة المستعرض الخاص بك لرؤية قائمة الاستجابة قيد التنفيذ.

عرض البرنامج المساعد للقائمة المستجيبة

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

الطريقة الثانية: إضافة قائمة تحديد منسدلة باستخدام البرنامج المساعد

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

قائمة اختيار سريعة الاستجابة

أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Respive Select Menu . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون  ووردبريس الإضافي .

عند التنشيط ، تحتاج إلى زيارة المظهر »تحديد متجاوب لتهيئة إعدادات البرنامج المساعد.

حدد إعدادات القائمة

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

لا تنس النقر فوق زر حفظ جميع الإعدادات لتخزين التغييرات الخاصة بك.

يمكنك الآن زيارة موقع الويب الخاص بك وتغيير حجم شاشة المتصفح لرؤية قائمة التحديد سريعة الاستجابة قيد التنفيذ.

الطريقة الثالثة: إنشاء قائمة مستجيبة متوافقة مع الجوّال مع تأثير التبديل

أحد أكثر الطرق شيوعًا لعرض قائمة على شاشات الهاتف المحمول هو استخدام تأثير التبديل.

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

تحتاج أولاً إلى فتح محرر نصوص مثل المفكرة ولصق هذا الرمز.

( function() {
    var nav = document.getElementById( 'site-navigation' ), button, menu;
    if ( ! nav ) {
        return;
    }
 
    button = nav.getElementsByTagName( 'button' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
        return;
    }
 
    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = 'none';
        return;
    }
 
    button.onclick = function() {
        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
            menu.className = 'nav-menu';
        }
 
        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.replace( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )(jQuery);

أنت الآن بحاجة إلى حفظ هذا الملف navigation.jsعلى سطح المكتب الخاص بك.

بعد ذلك ، تحتاج إلى فتح عميل FTP لتحميل هذا الملف إلى /wp-content/themes/your-theme-dir/js/مجلد على موقع  ووردبريس الخاص بك.

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

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

wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

نحتاج الآن إلى إضافة قائمة التنقل إلى سمة  ووردبريس الخاصة بنا. عادةً ما يتم إضافة قائمة التنقل إلى header.phpملف النسق .

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

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

الخطوة الأخيرة هي إضافة CSS بحيث تستخدم قائمتنا فئات CSS المناسبة للتبديل للعمل عند عرضها على الأجهزة المحمولة.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}
 
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}
 
// CSS to use on mobile devices
 
@media screen and (min-width: 600px) {
 
.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
     
    }

يمكنك الآن زيارة موقع الويب الخاص بك وتغيير حجم شاشة المستعرض الخاص بك لرؤية قائمة التبديل سريعة الاستجابة أثناء العمل.

تبديل معاينة القائمة

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

الطريقة الرابعة: إضافة قائمة الشرائح في الهاتف المحمول في  ووردبريس

هناك أسلوب شائع آخر لإضافة قائمة هاتف محمول وهو استخدام قائمة لوحة منزلقة (كما هو موضح في الطريقة 1).

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

أولاً ، تحتاج إلى فتح محرر نص عادي مثل Notepad وإضافة الكود التالي إلى ملف نصي فارغ.

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

لا تنس استبدال example.com باسم المجال your-themeالخاص بك وبدليل السمة الفعلي الخاص بك. احفظ هذا الملف slidepanel.jsعلى سطح المكتب الخاص بك.

ستحتاج الآن إلى صورة سيتم استخدامها كأيقونة قائمة. يتم استخدام رمز الهامبرغر بشكل شائع كرمز القائمة. ستجد الكثير من هذه الصور من مواقع مختلفة. سنستخدم رمز القائمة من مكتبة Google Material Icons .

بمجرد العثور على الصورة التي تريد استخدامها ، احفظها باسم menu.png.

بعد ذلك ، تحتاج إلى فتح عميل FTP وتحميل slidepanel.jsالملف إلى /wp-content/your-theme/js/المجلد.

إذا لم يكن دليل السمة الخاص بك يحتوي على مجلد JS ، فأنت بحاجة إلى إنشاء tit ثم تحميل ملفك.

بعد ذلك ، تحتاج إلى تحميل ملف menu.png إلى /wp-content/themes/your-theme/images/المجلد.

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

أضف هذا الرمز إلى ملف function.php الخاص بالنسق الخاص بك .

wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

نحتاج الآن إلى إضافة الكود الفعلي في ملف header.php الخاص بقالبك لعرض قائمة التنقل. يجب أن تبحث عن رمز مشابه لهذا:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

تريد التفاف قائمة التنقل الحالية برمز HTML لعرض قائمة لوحة الشرائح على شاشات أصغر.

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

لاحظ أن قائمة التنقل الخاصة بموضوعك لا تزال موجودة. لقد قمنا للتو بلفها حول HTML التي نحتاجها لتشغيل قائمة slidepanel.

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

إليك نموذج CSS يمكنك استخدامه كنقطة بداية:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}
 
} 
 
@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}
 
 
#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;
 
}
 
.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}
 
.nav-menu li:hover { 
background:#CCC;
}
 
.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

اعتمادًا على سمة  ووردبريس الخاصة بك ، قد تحتاج إلى ضبط CSS لتجنب التعارضات.

إليك كيف بدا الأمر على موقعنا التجريبي:

قائمة منزلقة سريعة الاستجابة في  ووردبريس

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

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..