Masaüstü ve Mobil Cihazlarda Farklı Reklam Gösterimi İçin Kodlar – WordPress

Tulpar Av > Diğer > Wordpress > Masaüstü ve Mobil…

Son güncelleme: 9 Haziran 2021

Yayınlanma Tarihi: 08 Haziran, 2021
Güncellenme Tarihi: 9 Haziran 2021
Masaüstü ve Mobil Cihazlar İçin Farklı Reklam Kodu


Site sahipleri için özellikle en önemli konulardan birisi de reklam gösterimidir. Google Adsense her ne kadar duyarlı reklam kodları verse bile bazen reklamın boyutları ekran dışına taşabiliyor ve bu durum site sahiplerini tatmin etmeyebiliyor. Bu sebeple her iki cihazda da farklı reklam kodları gösterebilmeniz için sizlere eklentisiz ve basit CSS + HTML kombinasyonu ile oluşturulmuş bir kod dizilimi vereceğim.

Öncelikle style.css dosyamıza giderek en alta aşağıdaki CSS kodlarını ekleyelim. (Ek CSS eklentisi kullanıyorsanız oraya da ekleyebilirsiniz.)

Style.css Dosyasına Eklenecek Kod:

/*Masaüstü ziyaretçilerine reklam gösterim kodu*/
.masaustu-reklam{

}
.mobil-reklam{
 display: none;
}

@media only screen and (min-width: 240px) and (max-width: 480px) {
/*Mobil ziyaretçilerine reklam gösterim kodu*/
.masaustu-reklam{
 display: none;
}
.mobil-reklam{
 display: inline !important;
}

}

İkinci işlem ise mobil-reklam ve masaustu-reklam olarak iki adet div tanımladık. Yukarıdaki kodlarla masaüstü ziyaretçilerine mobil reklamların gösterilmemesini, mobil cihaz kullanan ziyaretçilerin ise masaüstü reklamlarını görmemesini sağladık. Evet masaustu-reklam divine bir kod tanımlamadık ancak mobil-reklam divine “display: none;” kodu ekleyerek gösterilmesini engelledik. Mobil ziyaretçiler için reklam gösterim kodunu da tam tersi şekilde yaptık yani şöyle masaustu-reklam “display: none;”…

Evet tanımlama işlemlerimiz bittiğine göre reklamı eklemek istediğimiz yerlere aşağıdaki kod yardımıyla konumlandırabiliriz. Örnek olarak bir yazı içinde başlıktan sonra gelmesini istiyorsak content-single.php dosyasına görseldeki gibi kodları yerleştirmeliyiz.

Masaüstü ve Mobil Cihazlar İçin Farklı Reklam Gösterimi


Kendi kullandığım temanın yazı içi başlığının kodu “do_action( ‘generate_after_entry_title’ );
?>
” bu şekilde bitiyor. Başlıktan sonra reklamların gelmesi için kodları bu şekilde yerleştirdim. Sizler dilediğiniz bölümlere yerleştirebilirsiniz.

Reklamları Göstermek İçin Kodlar:

<div class="masaustu-reklam">

 "Masaüstü kullanıcılarınıza göstermek istediğiniz reklam kodunu buraya yazın." 

</div>
          
<div class="mobil-reklam">

"Mobil kullanıcılarınıza göstermek istediğiniz reklam kodunu buraya yazın."       

</div>

Bu kodları ekledikten sonra üstteki kod masaüstü ziyaretçilerinize, alttaki kod ise mobilden giriş yapan ziyaretçilerinize reklamları gösterecektir.

Bu gönderi ne kadar faydalı oldu?

Ortalama puanı 0 / 5. Oy sayısı: 0

 20 görüntüleme

Konu Hakkında Görüşlerini Yaz