Sayfa değiştirdiğinde header.php tekrar yüklenmesin

28-11-2014, 17:07:29

Arkadaşlar sitede header.php her sayfada var her sayfa değiştiğinde tekrar yüklenmesin, bunun sayfa gezilirken yenilenmemesini nasıl sağlayabilirim, öyle bir şey vardı sanırım ?

Örnek: http://www.pirenko.com/samba/

bu sitedeki sol menü sabit kalıyor, yükleniyor efekti zaten internette paylaşılmış bir kod, youtube sayfa geçiş efekti, ancak şu yüklenmeme olayı nasıl oluyor onu çözemedim, şimdiden teşekkürler.

28-11-2014, 17:17:29

#2

chnyrdkl

Takipteyim.

28-11-2014, 17:20:50

#3

~~Budweiser~~

Üyeliği durduruldu

Takipdetim

04-12-2014, 09:33:46

#4

SkyGhostAir

Güncel... yok mu bilen birisi.

04-12-2014, 10:04:30

#5

jebias

Ajax ile yapılıyor hocam. Mesala Twenty Fourteen temasında, sidebar'dan bir linke tıklanınca sayfa yenilenmeden içeriğin değişmesi için;

Bu şekilde istediğiniz kısımın ID'sini bulun, çünkü; sadece o eleman'ın içindeki linklere tıklanınca gerçekleşmesini istiyoruz.

Daha sonra içeriğin bulunduğu, yani değişen kısımı bulun;

Şimdi elimizde 2 adet ID var. #primary-sidebar içinden bir linke tıklanınca #content kısmı değişecek. Kodlara geçelim;

footer.php'ye <?php wp_footer(); ?>'nın hemen üstüne ekleyin;

<div id="yukleniyor" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.6);color:#fff;font-size:26px;text-align:center;padding-top:250px;">Yükleniyor...</div>

	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script>
		$('#primary-sidebar').find('a').click(function(){ //#primary-sidebar içindeki bir a tag'ına tıklanınca yakaladık
			var link = $(this).attr('href'); //a etiketinin gideceği link'ı aldık

			history.pushState(null, null, link); // adres barındaki linkin değişmesini sağladık

			$.icerikDegistir(link); // aldığımız link değeriyle fonksiyonumuzu çağırdık

			return false; // a linkinin belirtilen adrese gitmesini engellemek için
		});

		$.icerikDegistir = function(link){ // fonksiyonumuz link parametresi alıyor
			$('#yukleniyor').fadeIn(); // yükleniyor div'imizi gösterdik
			var yeni_icerik = link + ' #content > *'; // link parametresinin sonuna #content > * ekliyor, çünkü sadece #content'in içeriğini almak istiyoruz
			$('#content').load(yeni_icerik, function(){
				$('#yukleniyor').fadeOut(); // yükleniyor div'imizi gizledik, çünkü yüklenme işlemi tamamlandı
			}); // belirttiğimiz içeriği #content'in içine yükledik
		}

		window.onpopstate = function(event) {// tarayıcıdan geri butonuna basıldığında içeriğin değişmesi için
		  	$.icerikDegistir(document.location);
		};
	</script>

04-12-2014, 12:49:27

#6

SkyGhostAir

jebias adlı üyeden alıntı: mesajı görüntüle

Ajax ile yapılıyor hocam. Mesala Twenty Fourteen temasında, sidebar'dan bir linke tıklanınca sayfa yenilenmeden içeriğin değişmesi için;

Bu şekilde istediğiniz kısımın ID'sini bulun, çünkü; sadece o eleman'ın içindeki linklere tıklanınca gerçekleşmesini istiyoruz.

Daha sonra içeriğin bulunduğu, yani değişen kısımı bulun;

Şimdi elimizde 2 adet ID var. #primary-sidebar içinden bir linke tıklanınca #content kısmı değişecek. Kodlara geçelim;

footer.php'ye <?php wp_footer(); ?>'nın hemen üstüne ekleyin;

<div id="yukleniyor" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.6);color:#fff;font-size:26px;text-align:center;padding-top:250px;">Yükleniyor...</div>

	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script>
		$('#primary-sidebar').find('a').click(function(){ //#primary-sidebar içindeki bir a tag'ına tıklanınca yakaladık
			var link = $(this).attr('href'); //a etiketinin gideceği link'ı aldık

			history.pushState(null, null, link); // adres barındaki linkin değişmesini sağladık

			$.icerikDegistir(link); // aldığımız link değeriyle fonksiyonumuzu çağırdık

			return false; // a linkinin belirtilen adrese gitmesini engellemek için
		});

		$.icerikDegistir = function(link){ // fonksiyonumuz link parametresi alıyor
			$('#yukleniyor').fadeIn(); // yükleniyor div'imizi gösterdik
			var yeni_icerik = link + ' #content > *'; // link parametresinin sonuna #content > * ekliyor, çünkü sadece #content'in içeriğini almak istiyoruz
			$('#content').load(yeni_icerik, function(){
				$('#yukleniyor').fadeOut(); // yükleniyor div'imizi gizledik, çünkü yüklenme işlemi tamamlandı
			}); // belirttiğimiz içeriği #content'in içine yükledik
		}

		window.onpopstate = function(event) {// tarayıcıdan geri butonuna basıldığında içeriğin değişmesi için
		  	$.icerikDegistir(document.location);
		};
	</script>

Benim bunu uygulamaya çalıştığım site: http://www.muratdinc.com/ yan menü ve header kısmı her zaman aynı kalıyor bunların tekrar tekrar yüklenmesini engellemek istiyorum.

sidebar ve header-silmek-icin id değişmemesi gerekiyor şeklinde ekledim, değişecek olan ise bende main-content onuda ekledim, şu çok güzel çalışıyor ancak sayfa geçişinde ana sayfada bozulma oldu onun nedeni ne olabilir baktım ancak bulamadım ?

Birde hocam ben yükleniyor efekti olarak örnek verdiğim sitedeki efekti kullanmak istiyorum nasıl değiştirmem gerekiyor kodları ? yani yapmak istediğim örnek sitedekinin aynısı.

</div><div id="yukleniyor" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.6);color:#fff;font-size:26px;text-align:center;padding-top:250px;">Yükleniyor...</div>
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script>
      $('#sidebar, #header-silmek-icin').find('a').click(function(){
         var link = $(this).attr('href');
 
         history.pushState(null, null, link);
 
         $.icerikDegistir(link);
 
         return false;
      });
 
      $.icerikDegistir = function(link){
         $('#yukleniyor').fadeIn();
         var yeni_icerik = link + ' #main-content > *';
         $('#main-content').load(yeni_icerik, function(){
            $('#yukleniyor').fadeOut();
         });
      }
 
      window.onpopstate = function(event) {
         $.icerikDegistir(document.location);
      };
   </script>

04-12-2014, 13:49:18

#7

jebias

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Benim bunu uygulamaya çalıştığım site: http://www.muratdinc.com/ yan menü ve header kısmı her zaman aynı kalıyor bunların tekrar tekrar yüklenmesini engellemek istiyorum.

sidebar ve header-silmek-icin id değişmemesi gerekiyor şeklinde ekledim, değişecek olan ise bende main-content onuda ekledim, şu çok güzel çalışıyor ancak sayfa geçişinde ana sayfada bozulma oldu onun nedeni ne olabilir baktım ancak bulamadım ?

Birde hocam ben yükleniyor efekti olarak örnek verdiğim sitedeki efekti kullanmak istiyorum nasıl değiştirmem gerekiyor kodları ? yani yapmak istediğim örnek sitedekinin aynısı.

</div><div id="yukleniyor" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.6);color:#fff;font-size:26px;text-align:center;padding-top:250px;">Yükleniyor...</div>
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script>
      $('#sidebar, #header-silmek-icin').find('a').click(function(){
         var link = $(this).attr('href');
 
         history.pushState(null, null, link);
 
         $.icerikDegistir(link);
 
         return false;
      });
 
      $.icerikDegistir = function(link){
         $('#yukleniyor').fadeIn();
         var yeni_icerik = link + ' #main-content > *';
         $('#main-content').load(yeni_icerik, function(){
            $('#yukleniyor').fadeOut();
         });
      }
 
      window.onpopstate = function(event) {
         $.icerikDegistir(document.location);
      };
   </script>

Bahsettiğiniz eklenti hakkında bilgim yok. Sitenizdeki sorun; Anasayfada ve Altsayfalarda body'nin class'ının değişmesi. Sayfa yenilenmeyince doğal olarak Anasayfadaki class'lar kalıyor ve CSS'i bozuyor. Şu şekilde değiştirirsen kodları sorun çıkmayacaktır, sayfanın body class'larını alıp aktif sayfaya atıyor.

<div id="yukleniyor" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.6);color:#fff;font-size:26px;text-align:center;padding-top:250px;">Yükleniyor...</div>

	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script>
		$('#primary-sidebar').find('a').click(function(){ //#primary-sidebar içindeki bir a tag'ına tıklanınca yakaladık
			var link = $(this).attr('href'); //a etiketinin gideceği link'ı aldık

			history.pushState(null, null, link); // adres barındaki linkin değişmesini sağladık

			$.icerikDegistir(link); // aldığımız link değeriyle fonksiyonumuzu çağırdık

			return false; // a linkinin belirtilen adrese gitmesini engellemek için
		});

		$.icerikDegistir = function(link){ // fonksiyonumuz link parametresi alıyor
			$('#yukleniyor').fadeIn(); // yükleniyor div'imizi gösterdik
			var yeni_icerik = link + ' #content > *'; // link parametresinin sonuna #content > * ekliyor, çünkü sadece #content'in içeriğini almak istiyoruz
			$('#content').load(yeni_icerik, function(response){
				
				var regex = /<body class="(.*?)"/ig;
				var classList = regex.exec(response);
				
				$('body').attr('class', classList[1]);

				$('#yukleniyor').fadeOut(); // yükleniyor div'imizi gizledik, çünkü yüklenme işlemi tamamlandı
			}); // belirttiğimiz içeriği #content'in içine yükledik
		}

		window.onpopstate = function(event) { // tarayıcıdan geri butonuna basıldığında içeriğin değişmesi için
		  	$.icerikDegistir(document.location);
		};
	</script>

04-12-2014, 14:49:38

#8

SkyGhostAir

jebias adlı üyeden alıntı: mesajı görüntüle

Bahsettiğiniz eklenti hakkında bilgim yok. Sitenizdeki sorun; Anasayfada ve Altsayfalarda body'nin class'ının değişmesi. Sayfa yenilenmeyince doğal olarak Anasayfadaki class'lar kalıyor ve CSS'i bozuyor. Şu şekilde değiştirirsen kodları sorun çıkmayacaktır, sayfanın body class'larını alıp aktif sayfaya atıyor.

<div id="yukleniyor" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.6);color:#fff;font-size:26px;text-align:center;padding-top:250px;">Yükleniyor...</div>

	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script>
		$('#primary-sidebar').find('a').click(function(){ //#primary-sidebar içindeki bir a tag'ına tıklanınca yakaladık
			var link = $(this).attr('href'); //a etiketinin gideceği link'ı aldık

			history.pushState(null, null, link); // adres barındaki linkin değişmesini sağladık

			$.icerikDegistir(link); // aldığımız link değeriyle fonksiyonumuzu çağırdık

			return false; // a linkinin belirtilen adrese gitmesini engellemek için
		});

		$.icerikDegistir = function(link){ // fonksiyonumuz link parametresi alıyor
			$('#yukleniyor').fadeIn(); // yükleniyor div'imizi gösterdik
			var yeni_icerik = link + ' #content > *'; // link parametresinin sonuna #content > * ekliyor, çünkü sadece #content'in içeriğini almak istiyoruz
			$('#content').load(yeni_icerik, function(response){
				
				var regex = /<body class="(.*?)"/ig;
				var classList = regex.exec(response);
				
				$('body').attr('class', classList[1]);

				$('#yukleniyor').fadeOut(); // yükleniyor div'imizi gizledik, çünkü yüklenme işlemi tamamlandı
			}); // belirttiğimiz içeriği #content'in içine yükledik
		}

		window.onpopstate = function(event) { // tarayıcıdan geri butonuna basıldığında içeriğin değişmesi için
		  	$.icerikDegistir(document.location);
		};
	</script>

Sadece içeriklerden ana sayfaya geçerken çalışıyor hocam, birde sadece #sidebar kısmını etkiliyor #header-silmek-icin ve #sidebar kısmını etkilemesi gerekiyordu, şöyle ekledim:

<div id="yukleniyor" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.6);color:#fff;font-size:26px;text-align:center;padding-top:250px;">Yükleniyor...</div>
 
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script>
      $('#header-silmek-icin, #sidebar').find('a').click(function(){ //#primary-sidebar içindeki bir a tag'ına tıklanınca yakaladık
         var link = $(this).attr('href'); //a etiketinin gideceği link'ı aldık
 
         history.pushState(null, null, link); // adres barındaki linkin değişmesini sağladık
 
         $.icerikDegistir(link); // aldığımız link değeriyle fonksiyonumuzu çağırdık
 
         return false; // a linkinin belirtilen adrese gitmesini engellemek için
      });
 
      $.icerikDegistir = function(link){ // fonksiyonumuz link parametresi alıyor
         $('#yukleniyor').fadeIn(); // yükleniyor div'imizi gösterdik
         var yeni_icerik = link + ' #main-content > *'; // link parametresinin sonuna #content > * ekliyor, çünkü sadece #content'in içeriğini almak istiyoruz
         $('#main-content').load(yeni_icerik, function(response){
             
            var regex = /<body class="(.*?)"/ig;
            var classList = regex.exec(response);
             
            $('body').attr('class', classList[1]);
 
            $('#yukleniyor').fadeOut(); // yükleniyor div'imizi gizledik, çünkü yüklenme işlemi tamamlandı
         }); // belirttiğimiz içeriği #content'in içine yükledik
      }
 
      window.onpopstate = function(event) { // tarayıcıdan geri butonuna basıldığında içeriğin değişmesi için
         $.icerikDegistir(document.location);
      };
   </script>

05-12-2014, 19:38:01

#9

jebias

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Sadece içeriklerden ana sayfaya geçerken çalışıyor hocam, birde sadece #sidebar kısmını etkiliyor #header-silmek-icin ve #sidebar kısmını etkilemesi gerekiyordu, şöyle ekledim:

<div id="yukleniyor" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.6);color:#fff;font-size:26px;text-align:center;padding-top:250px;">Yükleniyor...</div>
 
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script>
      $('#header-silmek-icin, #sidebar').find('a').click(function(){ //#primary-sidebar içindeki bir a tag'ına tıklanınca yakaladık
         var link = $(this).attr('href'); //a etiketinin gideceği link'ı aldık
 
         history.pushState(null, null, link); // adres barındaki linkin değişmesini sağladık
 
         $.icerikDegistir(link); // aldığımız link değeriyle fonksiyonumuzu çağırdık
 
         return false; // a linkinin belirtilen adrese gitmesini engellemek için
      });
 
      $.icerikDegistir = function(link){ // fonksiyonumuz link parametresi alıyor
         $('#yukleniyor').fadeIn(); // yükleniyor div'imizi gösterdik
         var yeni_icerik = link + ' #main-content > *'; // link parametresinin sonuna #content > * ekliyor, çünkü sadece #content'in içeriğini almak istiyoruz
         $('#main-content').load(yeni_icerik, function(response){
             
            var regex = /<body class="(.*?)"/ig;
            var classList = regex.exec(response);
             
            $('body').attr('class', classList[1]);
 
            $('#yukleniyor').fadeOut(); // yükleniyor div'imizi gizledik, çünkü yüklenme işlemi tamamlandı
         }); // belirttiğimiz içeriği #content'in içine yükledik
      }
 
      window.onpopstate = function(event) { // tarayıcıdan geri butonuna basıldığında içeriğin değişmesi için
         $.icerikDegistir(document.location);
      };
   </script>

Bir sorun görünmüyor hocam, siteye uygularmısın; bakayım bir?