Mobil qurğular üçün hazır cavabverici WordPress menyusunu necə yaratmaq olar

Mobil qurğular üçün cavab verən WordPress menyusu yaratmaq istəyirsiniz? Mobil istifadəçilər artıq bir çox saytlarda masa üstü istifadəçilərdən üstündür. Bir özelleştirilebilir bir mobil menyu əlavə etmək, istifadəçilərin veb saytınızı asanlaşdırır. Bu yazıda mobil qurğular üçün hazır bir cavabdeh WordPress menyusunu necə asanlıqla yaratmağınızı göstərəcəyik.

Mobil cihazlara uyğunlaşan bir WordPress menyusu yaradın

Bu dərin bir dərsdir. Həm yeni başlayanlar üçün əlavə etmə metodunu (heç bir kodlaşdırma), həm də daha inkişaf etmiş istifadəçilərimiz üçün kodlaşdırma metodunu göstərəcəyik.

Bu təlimatın sonunda sürüşmə açılan menyu, açılan açılan menyu və keçid açılan menyunun necə qurulacağını öyrənəcəksiniz.

Hazırsınız? Başlayaq.

Video dərs

WPBeginner-ə abunə olun

Videonu bəyənmirsinizsə və ya daha çox təlimata ehtiyacınız varsa, oxuyun.

Metod 1: Bir plugin istifadə edərək WordPress-də cavab verən bir menyu əlavə edin

Xüsusi kodlaşdırma tələb etmədiyi üçün bu üsul daha asandır və yeni başlayanlar üçün tövsiyə olunur.

Bu metodda mobil ekranda sürüşən bir hamburger menyusu yaradacağıq.

Cavablı Menyu Plugin Demo

Etdiyiniz ilk şey, Cavablandıran Menyu plaginini quraşdırmaq və aktivləşdirməkdir. Daha çox məlumat üçün, WordPress plaginini necə quraşdıracağımızı addım-addım təlimatımıza baxın.

Aktivləşdirildikdən sonra plugin, WordPress idarəetmə çubuğunuza "Cavablandırıcı Menyu" etiketli yeni bir menyu əlavə edəcəkdir. Bunun üzərinə tıklayarak plagin konfiqurasiya səhifəsinə aparırsınız.

Cavablı menyu parametrləri

Əvvəlcə ekranın genişliyini daxil etməlisiniz, bu anda plagin cavab verən menyunu göstərməyə başlayacaqdır. Varsayılan bir çox saytlarda işləməli olan 800 px.

Bundan sonra, cavab verən menyunuz üçün istifadə etmək istədiyiniz menyunu seçməlisiniz. Hələ bir menyu yaratmamısınızsa, ziyarət edərək birini yarada bilərsiniz Görünüş »Menyular. Ətraflı təlimatlar üçün naviqasiya menyusunu WordPress-də necə əlavə etmək barədə təlimatımıza baxın.

Ekrandakı son seçim, cari cavabsız menyunuz üçün CSS sinfi təmin etməkdir. Bu, plugin'in cavabsız menyusunu kiçik ekranlarda gizlətməyə imkan verəcəkdir.

Tıklamağı unutmayın "Seçimləri yeniləyin" parametrlərinizi saxlamaq üçün düyməsini basın.

İndi veb səhifəsinə daxil ola bilərsiniz və fəaliyyət menyusunu görmək üçün brauzerinizin ekranının ölçüsünü dəyişə bilərsiniz.

Cavablı Menyu Plugin Demo

Cavab verən menyu plagin, cavab verən menyunuzun davranışını və görünüşünü dəyişdirməyə imkan verən bir çox digər seçim ilə gəlir. Plugin konfiqurasiya səhifəsində bu seçimləri araşdıra və lazım olduqda tənzimləyə bilərsiniz.

Metod 2: Bir plagin istifadə edərək açılan seçim menyusu əlavə edin

Cavablı bir menyu əlavə etmənin başqa bir yolu açılan seçim menyusunu əlavə etməkdir. Bu üsul heç bir kodlaşdırma bacarığı tələb etmir, buna görə yeni başlayanlar üçün tövsiyə olunur.

Cavablı seçim menyusu

Ediləcək ilk şey, Cavablı Menyu plaginini quraşdırmaq və aktivləşdirməkdir. Daha çox məlumat üçün, WordPress plaginini necə quraşdıracağımızı addım-addım təlimatımıza baxın.

Aktivləşdirildikdən sonra ziyarət etməlisiniz Görünüş »Cavablı seçin plugin parametrlərini konfiqurasiya etmək.

Menyu parametrlərini seçin

"Mövzu yerlərini aktivləşdir" bölməsinə aşağıya fırlanmalısınız. Varsayılan olaraq, plugin bütün mövzu yerlərində aktivdir. Bunu müəyyən bir mövzu yeri üçün seçərək aktivləşdirərək dəyişə bilərsiniz.

Dəyişikliklərinizi saxlamaq üçün Bütün Parametrləri Saxla düyməsini vurmağı unutmayın.

İndi veb səhifəsinə daxil ola bilərsiniz və fəaliyyət seçimində cavab menyusunu görmək üçün brauzer ekranının ölçüsünü dəyişə bilərsiniz.

Metod 3: Keçid effekti ilə cavab verən mobil dostluq menyusu yaradın

Mobil ekranlarda menyunun göstərilməsində ən çox istifadə olunan üsullardan biri də keçid effektinin istifadəsidir.

Bu metod WordPress sənədlərinizə xüsusi kod əlavə etməyinizi tələb edir. Daha əvvəl bunu etməmisinizsə, veb parçaları WordPress-ə yapışdırmaqla bağlı təlimatımıza baxın.

Əvvəlcə notepad kimi bir mətn redaktoru açmalı və bu kodu yapışdırmalısınız.

( 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);
 
 

İndi bu faylı masaüstünüzde naviqasiya.js olaraq qeyd etməlisiniz.

Sonra, bu faylı WordPress saytınızdakı / wp-content / themes / your-theme-dir / js / qovluğa yükləmək üçün bir FTP müştəri açmalısınız.

Tema qovluğunuzu indiki mövzu qovluğu ilə əvəz edin. Tema qovluğunuzda js qovluğu yoxdursa onu yaratmaq lazımdır.

JavaScript faylı yüklədikdən sonra növbəti addım WordPress saytınızın bu JavaScript-i yüklədiyinə əmin olmaqdır. Mövzunun funksiyaları.php faylına aşağıdakı kodu əlavə etməlisiniz.

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

İndi naviqasiya menyusunu WordPress mövzusuna əlavə etməliyik. Adətən naviqasiya menyusu bir mövzunun header.php faylına əlavə olunur.