هل ترغب في إنشاء قائمة سريعة الاستجابة على مدونة WordPress الخاصة بك؟

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

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

ولكن من قبل ، إذا لم تقم بتثبيت WordPress ، فاكتشف كم من الإضافات لتثبيت على وورد. et كيفية العثور عليها، وتثبيت وتفعيل موضوع ورد على بلوق 

ثم عد إلى سبب وجودنا هنا.

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

الطريقة الأولى: إنشاء قائمة جوّال باستخدام ملحق WordPress

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

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

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

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

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

بعد ذلك عليك تحديد القائمة التي تريد استخدامها على الهاتف المحمول.

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

لا تنس النقر على « خيارات التحديث لحفظ الإعدادات الخاصة بك.

نقترح عليك أيضا اكتشاف لدينا 10 WordPress plugins لإنشاء قوائم على مدونتك

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

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

طريقة 2: كيفية إضافة قائمة الهاتف المحمول يدويا

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

تتطلب هذه الطريقة إضافة رمز مخصص إلى ملفات WordPress الخاصة بك.

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

يجب عليك أولاً فتح محرر نصوص مثل المفكرة ولصق هذا الكود.

(function () {nav var = document.getElementById ('site-navigation') ، زر ، قائمة ؛ إذا (! nav) {return؛} button = nav.getElementsByTagName ('button') [0] ؛ القائمة = التنقل. getElementsByTagName ('ul') [0] ؛ إذا (! زر) {return؛} // إخفاء الزر إذا كانت القائمة مفقودة أو فارغة إذا (! 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 '،' ')؛} آخر {button.className + =' toggled-on '؛ menu.className + =' toggled-on '؛}}؛})) (jQuery)؛

عليك الآن حفظ هذا الملف باسم " navigation.js على مكتبك.

فأنت بحاجة إلى فتح عميل FTP لتنزيل هذا الملف إلى موقع "/ wp-content / themes / your-theme / js /" على موقع WordPress الإلكتروني الخاص بك.

يستعاض عن التعبير " الخاص بك موضوع باستخدام اسم مجلد قالب ووردبريس الحالي. إذا لم يكن مجلد js موجودًا في دليل القالب، فستحتاج إلى إنشاء واحد.

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

اكتشف شيئًا آخر ماذا يمكنك أن تفعل مع ملف jobs.php؟

 wp_enqueue_script ( 'bpc_togglemenu "get_template_directory_uri ()' /js/navigation.js، مجموعة ( 'مسج')، 20160909 '، صحيح)؛

الآن نحتاج إلى إضافة قائمة التنقل في قالب WordPress الخاص بنا. عادة ما تتم إضافة قائمة التنقل في " 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>

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

الخطوة الأخيرة هي إضافة 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;
    }
    
    }

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

اكتشف أيضًا بعض الإضافات المتميزة لبرنامج WordPress  

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

نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.

1. UberMenu

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

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

انظر أيضا لدينا 9 الإضافات ووردبرس] لإنشاء شبكات الأسعار على بلوق

ستجد من بين أمور أخرى: 3 قوالب قوائم، وتصميم متجاوب بالكامل، وتوافق مع الأجهزة المحمولة (آيفون، آيباد، أندرويد)، ودعم شاشات اللمس، إلخ...

تحميل | عرض | استضافة المواقع

2. LMM

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

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

تحميل | عرض | استضافة المواقع

3. 8Degree Fly Menu

8Degree Fly Menu هو إضافة ووردبريس مميزة تتيح لك إضافة قائمة منسقة إلى موقعك الإلكتروني، مما يمنحه مظهرًا جذابًا وسهل الاستخدام يُبرز معلوماتك. تستخدم هذه الإضافة وظائف قوائم ووردبريس الافتراضية لإنشاء قوائمها.

ستتمكن من إضافة عناصر إضافية إلى عناصر القائمة الافتراضية ، مثل الرموز وشعارات القائمة ورأس التجميع الزائف ووصفًا طويلًا.

لقراءة أيضا: 10 ملحقات WordPress لتحسين الشريط الجانبي والرؤوس اللزجة

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

تحميل | عرض | استضافة المواقع

الموارد الأخرى الموصى بها

ندعوك أيضًا إلى الرجوع إلى الموارد الموضحة أدناه للمضي قدمًا في قبضة والتحكم في موقع الويب والمدونة.

• كيفية إعادة تسمية الصور على بلوق وورد
• كيفية إنشاء قائمة العائمة على وورد
• ملحقات 8 WordPress لإنشاء megamenu على مدونتك
• بعض النصائح لإنشاء قوائم حديثة لمدونتك
• 6 WordPress الإضافات لإدارة الفئات والفئات الفرعية في مدونتك

خاتمة

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

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

ولكن في غضون ذلك ، أخبرنا عن ملف تعليقات والاقتراحات في قسم مخصص.

...