WordPress mövzularında bir slayd panel menyusunu necə əlavə etmək olar

Bu yaxınlarda istifadəçilərimizdən biri naviqasiya menyusunu jQuery slayd panel menyusu ilə necə əvəz edə biləcəklərini soruşdu. Sürgülü panel menyusu mobil saytlarda istifadəçi təcrübəsini böyük dərəcədə artırmaq üçün istifadə edilə bilər. Bu yazıda WordPress mövzularında bir slayd panel menyusunu necə əlavə edəcəyinizi göstərəcəyik.

Standart WordPress mövzusunda kaydırıcıyı panel menyusu

Qeyd: Bu orta səviyyəli bir dərsdir və HTML və CSS haqqında kifayət qədər bilik tələb edir.

Varsayılan menyunu WordPress-də sürüşmə panel menyusu ilə əvəz edin

Burada məqsəd, kompüterlərdəki istifadəçilər üçün temanın standart menyusunu qoruyarkən kiçik ekranlarda istifadəçilərə bir slayt panel menyusunu göstərməkdir. portátiles və masa üstü tam menyunu görə bilərsiniz. İşə başlamazdan əvvəl bir çox fərqli WordPress mövzularının olduğunu bilmək vacibdir və daha sonra bir az CSS ilə məşğul olmalı olacaqsınız.

Etdiyiniz ilk şey, Notepad kimi kompüterinizdə düz mətn redaktoru açmaq və yeni bir fayl yaratmaqdır. Bu kodu kopyalayın və yapışdırın:

 
 (funksiya ($) {
 $ ('# keçid'). keçid (
 funksiya () {
 $ ('# popout'). canlandırın ({sol: 0}, 'yavaş', funksiya () {
 $ ('# keçid'). html ('yaxınlığında');
         });
     }, 
     function() {
         $('#popout').animate({ left: -250 }, 'slow', function() {
             $('#toggle').html('WordPress mövzularında bir slayd panel menyusunu necə əlavə etmək olar 1');
 });
 }
 );
 }) (jQuery);
 

Example.com-u öz domen adınızla əvəz edin və eyni zamanda temanızı aktual mövzu qovluğu ilə əvəz edin. Bu faylı masaüstünüzdə slidepanel.js olaraq qeyd edin. Bu kod sürüşmə panel menyusunu dəyişdirmək üçün jQuery istifadə edir. Ayrıca keçid effektini canlandırır.

Filezilla kimi bir FTP müştərisini açın və veb saytınıza qoşun. Sonra tematik qovluğunuza gedin və bir js qovluğunuz varsa açın. Tema qovluğunuzda js qovluğu yoxdursa, onda birini yaratmalı və slidepanel.js faylını js qovluğuna yükləməlisiniz.

Növbəti addım bir menyu simgesini dizayn və ya tapmaqdır. Ən çox istifadə olunan menyu simvolu üç sətirdən ibarət olan bir simdir. Photoshop ilə birini yarada və ya bir çox mövcud google şəkillərindən birini tapa bilərsiniz. Bu dərs üçün 27x23px menyu simgesini istifadə edirik. Menyu işarənizi yaratdıqdan və ya tapdıqdan sonra menyu.png adını dəyişdirin və tema qovluğunuzdakı şəkillər qovluğuna yükləyin.

Növbəti addım WordPress-də slayd paneli üçün javascript faylını növbələşdirməkdir. Əsasən, bu kodu kopyalayın və temanınızın funksiyaları.php faylına yapışdırın.

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

İndi hər şey qurulduğundan, mövzunun standart menyusunu dəyişdirməlisiniz. Ümumiyyətlə, əksər mövzular mövzu başlığı.php faylında naviqasiya menyularını göstərir. Header.php faylını açın və buna bənzər xətti tapın: