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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(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 ، فأنت بحاجة إلى إنشاء واحد.

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

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

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

الآن نحن بحاجة إلى إضافة قائمة التنقل في موقعنا وورد موضوع. عادةً ما تتم إضافة قائمة التنقل في " 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 المتميزة التي سوف تساعدك على القيام بذلك.

1. UberMenu

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

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

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

ستجد من بين أشياء أخرى: 3 قوالب قائمة ، تخطيط سريع الاستجابة ، التوافق مع الأجهزة المحمولة (iPhone ، iPad ، Android) ، دعم اللمس ، إلخ ...

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

2. LMM

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

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

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

3. 8Degree Fly Menu

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

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

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

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

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

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

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

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

وفي الختام

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

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

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

...