Neler yeni

Hoşgeldin Ziyaretçi

Kayıt olarak forumumuzdan dosya indirebilir,bilgi sahibi olabilir,daha iyi bir şekilde yararlanabilirsin.

Şimdi kayıt ol

WordPress'te Menüyü Slayt Paneli Olarak Değiştirme Nasıl Yapılır?

wordpresstr

W
Administrator
125
13 Kas 2020
WordPress'te Varsayılan Menüyü Slayt Paneli Menüsü ile Değiştirme
Buradaki amaç, temamızın varsayılan menüsünü korurken daha küçük ekranlarda kullanıcılara bir slayt paneli menüsü göstermektir, böylece dizüstü ve masaüstü bilgisayarlardaki kullanıcılar tam menüyü görebilir. Başlamadan önce, birçok farklı WordPress teması olduğunu bilmek önemlidir ve daha sonra biraz CSS ile uğraşmanız gerekecek.
Yapmanız gereken ilk şey, bilgisayarınızda Not Defteri gibi bir düz metin düzenleyicisi açmak ve yeni bir dosya oluşturmaktır. Bu kodu kopyalayıp yapıştırın:
1
2
3
4
5
6
7
8
9
10
11
12
13
14		(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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14		(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);


Değiştir example.com kendinizinkilerle alan adı ve aynı zamanda yerine your-theme gerçek tema dizinine sahip. Bu dosyayı masaüstünüze slidepanel.js olarak kaydedin. Bu kod, bir slayt paneli menüsünü değiştirmek için jQuery'yi kullanır. Ayrıca geçiş efektini de canlandırır.

Filezilla gibi bir FTP istemcisi açın ve web sitenize bağlanın. Ardından, tema dizininize gidin ve bir js klasörü varsa açın. Tema dizininizde js klasörü yoksa, bir tane oluşturmanız ve slidepanel.js dosyasını js klasörüne yüklemeniz gerekir.

Bir sonraki adım, bir menü simgesi tasarlamak veya bulmaktır. En sık kullanılan menü simgesi, üç satırlı olandır. Photoshop kullanarak bir tane oluşturabilir veya google'daki birçok mevcut görüntüden birini bulabilirsiniz. Bu eğitim için 27x23px menü simgesi kullanıyoruz. Menü simgenizi oluşturduğunuzda veya bulduğunuzda, bunu menu.png olarak yeniden adlandırın ve tema dizininizdeki resimler klasörüne yükleyin.

Sonraki adım, WordPress'te slayt paneli için javascript dosyasını kuyruğa almaktır . Temel olarak bu kodu kopyalayıp temanızın functions.php dosyasına yapıştırın .

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

Artık her şey ayarlandığına göre, temanızın varsayılan menüsünü değiştirmeniz gerekiyor. Genellikle, çoğu tema, temanın header.phpdosyasında gezinme menülerini görüntüler . header.phpDosyayı açın ve buna benzer satırı bulun:

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

Buradaki amaç, slayt paneli menünüzü daha küçük ekranlarda görüntülemek için temanızın gezinme menüsünü HTML koduyla sarmalamaktır. Bunu bir <div id="toggle">ve ile saracağız <div id="popout">. Bunun gibi:

1
2
3
4		<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'u kendi alan adınızla ve temanızı tema dizininizle değiştirin. Değişikliklerinizi kaydedin.
Son adım, daha büyük ekranlara sahip kullanıcılar için menü simgesini gizlemek ve daha küçük ekranlara sahip kullanıcılara görüntülemek için CSS kullanmaktır . Menü simgesinin konumunu ve kaydırma panelinin görünümünü de ayarlamamız gerekiyor. Bu CSS'yi kopyalayıp temanızın stil sayfasına yapıştırın.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47		@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%;
}
}
Temanızın gezinme menüsünün farklı CSS sınıfları kullanıyor olabileceğini ve bu CSS stiliyle çakışabileceğini unutmayın
 
Cevap yazmak için giriş yap yada kayıt ol.
Üst