Aslında yapmaya çalıştığım şey yan panelimde olan bileşenleri masaüstü cihazlar için ayrı, mobil cihazlar için ayrı şekilde göstermek. Siteme masaüstü cihazlar üzerinden giren ziyaretçilerim için bir metin bileşeni içerisinde reklam gösterirken, bu bileşenin siteme mobil cihazlar üzerinden giren ziyaretçilerime görünmemesini ve bunun yerine başka bir bileşenin, mesela sosyal medya hesaplarımı linklediğim bileşenimin görünmesini istiyorum.
Yani yan panelime eklediğim bir bileşen, siteme masaüstü cihazlardan giren ziyaretçiler tarafından görünsün ancak mobil cihazlardan girin ziyaretçiler için görünmesin gibi. Bunu da bileşen bazlı yapmak istiyorum. Yan panelime eklediğim bir çok bileşen var. Eklediğim bileşenlerden sadece bazılarını mobil cihazlarda gizlemek isterken bazılarının normal, her türlü cihazdan siteye girişlerde görünmeye devam etmesini istiyorum. Bunu nasıl yapabilirim?
WordPress bileşenleri mobilde gizleme, bileşen sadece masaüstü cihazlarda görünsün, mobilde görünmesin veya tam tersi veya mobilde ve tablet cihazlarda görünsün ancak masaüstü cihazlarda görünmesin gibi 3 farklı cihaz opsiyonunda da istediğiniz şekilde farklı kombinasyonları uygulamanıza olanak sağlayacak
Ve bunu da bileşen bazlı, yani istediğiniz herhangi bir bileşeni veya bileşenleri (tek tek) bu şekilde mobilde gizle – sadece masaüstünde göster vs. gibi ayarları yapmanıza olanacak sağlayacak oldukça hafif bir kod yapısına sahip, ücretsiz bir wordpress eklentisi mevcut.
1- O da ücretsiz bir eklenti olan Widget Options eklentisi. Öncelikle eklentiyi wordpress sitenize yükleyin ve etkinleştirin. (Eğer wordpress eklentileri nasıl yüklenir bilmiyorsanız, kendi blogumda bu konuyu daha önce anlatmıştım. Şuradan o anlatımıma ulaşabilirsiniz.)
2- Eklentiyi wordpress sitenize yükledikten sonra Görünüm >> Bileşenler sekmesine gidin. Ardından ekranın sağ tarafında yan panelleriniz içerisinde bulunan aktif bileşenleriniz içerisinden, hangi bileşeni mobil cihazlarda gizlemek istiyorsanız, o bileşnin üzerine tıklayarak geniş görünümde açılmasını sağlayın.
3- Tıkladığınızda bileşenin en altında ekstra bir ayar bölümünün açıldığını göreceksinizdir. Aynen hemen alttaki ekran görüntüsünde olduğu gibi:
WordPress bileşenleri mobilde gizle seçenekleri
İşte, bu kısma yeni gelen bu özellikler yüklediğimiz Widget Options eklentisinin bileşenlere kattığı yeni özellikler aslında.
4- Bileşenleri mobilde gizlemek, yani sadece tablet ve masaüstü cihazlarda gösterme veya tam tersi veya bu 3 farklı seçeneğin tüm kombinasyonları için bu ayarlar kısmında üstteki resimde de işaretlediğim yer olan göz iconunun hemen sağında yer alan mobil iconuna tıklamanız gerekmekte.
5- Bu seçeneğe tıkladıktan sonra sizin de karşınıza hemen üstteki resimde olan ayarlar kısmı gelecektir. Bu ayarlar kısmı açılır açılmaz Hide/Show seçeneği varsayılan olarak “Hide on checked devices” seçili olarak gelecektir. Bunun türkçesi ise “seçili olan cihazlarda gizle” Yani bu da alttaki seçeneklerde seçili olan cihazlarda bu bileşeni gizle demek.
6- Bu kısmın atlndan ise hangi bileşeniniz için bu ayarı yapıyorsanız, o bileşenin hangi cihazlarda gizleneceğinizi seçiyorsunuz. (Hide on checked devices seçeneğinin sizde de seçili olduğunu varsayıyorum)
Mesela ben ara – site içi arama bileşenimi örnek olması için mobile ve tablet seçeneğini seçerek bu eklentiye, bu ara bileşenini mobil ve tablet cihazlarında gizle, sadece sitemi masaüstü cihazlardan ziyaret eden kullanıcılara göster olarak set etmiş oldum.
Eğer siz bileşenleri mobilde gizlemek isterseniz, buradan benim seçtiğim gibi sadece mobile seçneğini seçip, ardından da kaydet butonuna tıklayarak bileşen ayarlarını kaydedebilirsiniz. Böylece ayarını yaptığınız bileşeniniz sadece sitenizi mobil cihazlarla ziyaret eden kullanıcılara görünmeyecektir.
Burada yer alan ayarlar ile istediğiniz kombinasyonları siteniz için uygulayabilirsiniz aslında. Bileşenleri masaüstü cihazlarda gizle sadece mobil cihazlarda göster veya bileşenleri masaüstü cihazlarda ve mobilde gizle, sadece tablet cihazlarda göster vs. gibi itiyacınıza göre bir çok kombinasyon uygulayabilirsiniz.
Veya tam tersi bir mantık ile, Hide/Show ayarını “hide on cheked devices” seçmek yerine, “show on checked devices” seçerek, yani sadece işaretlediğim cihaz türlerinde bu bileşeni göster şeklinde de ilerleyebilirsiniz. Bu seçeneği seçtiğinizde de bileşeninizin hangi cihazlarda görünmesini istiyorsanız, alttan o cihazları işaretliyorsunuz. İşaretlemediğiniz cihazda otomatik olarak bileşen gizleniyor.
Yeri gelmişken bu eklentinin diğer ayarlarından da bahsedeyim;
Diğer Özellikler 1: Ayarını yapmak istediğiniz bileşenin üzerine tıkladığınızda, bileşenin alt kısmında bu eklenti ile birlikte gelen ayarlar ilk açıldığında karşınıza varsayılan olarak göz iconunun olduğu ayarlar sekmesi gelecektir.
Bu sekmeden ise bileşen bazı o bileşenin hangi sayfalarda gizleneceğini, hangi sayfalarda gösterimde kalacağını da seçebiliyorsunuz. Yani bu cihaz bazlı bileşen gizlemekten ziyade direkt sayfa bazlı bileşen gizleme özelliği aslında. Bileşenleri sadece seçtiğim sayfalarda göster veya seçtiğim sayfalarda gizle gibi.
Aynı zamanda bu filtrelemeyi kategori, taxonomy ve sayfa yapısı bazlı da yine bu kısımdan pekala yapabiliyorsunuz.
Diğer Özellikler 2: Diğer bir özelliği ise; mobile iconunun hemen yanında yer alan hizalama iconuna tıkladığınızda karşınıza çıkan bileşen bazlı hizlama seçeneği. Yani ayarını yaptığınız bileşeni ücretsiz sürümünde buradan tüm cihazlar için sağa yasla – sola yasla veya ortala gibi ayarları set edebiliyorsunuz.
Eklentinin ücretli versiyonunda ise bunu cihaz bazlı da yapabiliyorsunuz. Yani bir bileşeni mobil cihazlarda sağa yasla, aynı bileşeni ise masaüstü cihazlarda ortala, tabletler de ise sola yasla gibi. Eğer bu tür bir fonksiyona ihtiyacınız varsa eklentinin ücretli sürümünü de değerlendirebilirsiniz.
Diğer Özellikler 3: Bir de eğer üye bazlı bir wordpress sitenizde varsa da, bileşenleri sadece üyelere göster veya üye olmayanlar bileşenleri göremesin gibi bir fonksiyon arıyorsanız da yine bu eklenti istediğiniz fonksiyonu sağlıyor.
Bu işleve de roles iconuna tıklayarak ulaşabiliyorsunuz. (Sondan bir önceki icon)
Burada da zaten iki seçenek mevcut. Show only for logged-in users (sadece giriş yapmış kullanıcılara göster) ve show only for logged-out users (sadece giriş yapmamış kullanıcılara, yani normal ziyaretçilere göster) gibi.
Diğer Özellikler 4: Son özellik olarak ise en sağ kısımda bulunan ayarlar iconuna tıkladığınızda bileşen bazlı başlığı gizleme işlevinin karşınıza çıktığını göreceksinizdir. Burada ayrıca bileşene özel css class ve id atamaları da yapabiliyorsunuz.
Dip Not: Biliyorsunuz responsive temalarda masaüstünde genelde içeriğin sağ kısmında görünen yan paneller mobil görünümde içeriğin en altına sarkıyor. Yani o şekilde bir sayfa yapısı oluşuyor. Böyle olunca da yan paneller mobil görünümde ziyaretçi odağından çok uzakta kalıyor.
Dolayısı ile de görüntülenme potansiyelleri çok fazla düşüyor. Bu tür durumlarda da mobil index’in öncelikli olduğu ve mobil site hızının oldukça kritik olduğu bir SEO dünyasında da mobil site hızını arttımak için bu fonksiyonu ben de tüm wordpress sitelerimde bileşen bazlı kullanıyorum aslında.
Yani aklınızzda olsun; bu konu aynı zamanda mobil site hızı konusunda site bazlı uygulanabilecek küçük ama etkili yöntemlerden de birtanesi.