كيفية إضافة قائمة لوحة الشرائح في ثيمات ووردبريس

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

قائمة لوحة الشرائح في سمة  ووردبريس الافتراضية

ملاحظة: هذا برنامج تعليمي للمستوى المتوسط ​​ويتطلب معرفة كافية بـ HTML و CSS.

استبدال القائمة الافتراضية بقائمة لوحة الشرائح في  ووردبريس

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

أول شيء عليك القيام به هو فتح محرر نص عادي على جهاز الكمبيوتر الخاص بك ، مثل 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 الخاص بك ، واستبدله أيضًا بدليل السمة الفعلي الخاص بك. احفظ هذا الملف كملف slidepanel.js على سطح المكتب. يستخدم هذا الرمز jQuery لتبديل قائمة لوحة الشرائح. كما أنه ينشط تأثير التبديل.your-theme

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

الخطوة التالية هي تصميم أو العثور على رمز القائمة. رمز القائمة الأكثر استخدامًا هو الرمز المكون من ثلاثة أسطر. يمكنك إنشاء واحدة باستخدام Photoshop أو العثور على واحدة من العديد من الصور الموجودة من google. في هذا البرنامج التعليمي ، نستخدم رمز قائمة بحجم 27 × 23 بكسل. بمجرد إنشاء رمز القائمة أو العثور عليه ، أعد تسميته إلى menu.png وقم بتحميله إلى مجلد الصور في دليل السمات.

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

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

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

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

الهدف هنا هو التفاف قائمة التنقل الخاصة بموضوعك برمز HTML لعرض قائمة لوحة الشرائح على الشاشات الأصغر. سنقوم بلفه في <div id=”toggle”>و <div id=”popout”>. مثله:

<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>

استبدل example.com باسم المجال الخاص بك وموضوعك بدليل السمة الخاص بك. احفظ التغييرات.

الخطوة الأخيرة هي استخدام 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 مختلفة ، وقد تتعارض مع نمط CSS هذا. ومع ذلك ، يمكنك استكشاف هذه المشكلات وإصلاحها باستخدام أداة Chrome Inspector لمعرفة فئات css المتعارضة داخل ورقة الأنماط الخاصة بك. العب مع CSS لتتناسب مع أسلوبك واحتياجاتك.

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

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

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

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

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