Popüler blog sistemlerinden WordPress için, ücretli, ücretsiz birçok mobil tema ve eklenti mevcut. Fakat bunların bir kısmı eksikler, hatalar, bir kısmı da gereksiz reklamlar içerdiğinden insanın mobil uyumla uğraşası gelmiyor, sitelerimizde mobil cihaz uyumundan mahrum kalıyor.
İşte bu yazıda konumuz mobil uyum olacak ve WordPress scriptli siteniz için kullanabileceğiniz en basit, en kullanışlı ücretsiz eklenti ile tanışacaksınız. Adı WP Smart olan eklentiyi kısa sürede kuracak, ayarlarını yapacak ve artık sizde sitenizi mobil cihazlara uyarlamış olacaksınız.
GÜNCELLEME: 1 Şubat 2017
Yazımda tanıttığım eklenti 2 yıldır güncellenmiyor. Eğer ki eklentiden memnun kalmazsanız diğer eklenti mobil temalara da göz atabilirsiniz.
Hadi başlayalım..
Öncelikle konuyu netleştirelim. Tanıtacağım eklenti sadece WordPress scriptinde çalışıyor. WordPress scripti kullanmıyorsanız kendi scriptinize özel bir eklenti yada tema bakmanız gerekiyor. Eğer WordPress scripti kullanıyorsanız hemen admin paneline giriş yapıyor ve WPSmart eklentisinin kurulumuna başlıyorsunuz.
Wp Admin’de Eklentiler > Yeni Ekle menüsünden eklenti adını aratın.
Wp Smart Mobile Theme Plugin.
(Geliştiricinin WPSmart olduğu) Doğru eklentiyi bulduysanız, Şimdi Kur bağlantısı ile eklenti kurulumunu yapıp, ardından eklentiyi aktifleştirin.
Eklentiyi aktifleştirdiyseniz şimdi Wp Admin’de sol menüden WPSmart başlığına tıklayın.
Karşınıza WPSmart Mobile ayarları gelecek. Dört sekmeden oluşan ayarlar sayfasında mobil temanın birçok detayını ayarlayabilir, üç hazır temadan size uygun olanı kullanmaya başlayabilir ve sağ üstte yer alan Preview bağlantısı sayesinde, mobil temanızdaki değişiklikleri mobil cihaz olmadan rahatlıkla, anlık olarak takip edebilirsiniz.
Settings sekmesi;
Site title bölümünden mobil temada logo kullanmadığınızda görünecek başlığı belirleyebilirsiniz. Eğer logo kullanmayacaksanız kısa tutmanızda yarar var.
Site logo bölümünden mobil temanıza logo yükleyebilirsiniz. Logo küçük boyutlandırıldığından 250×50 piksel bir logo kullanmanızı tavsiye ederim. Daha büyük yükseklikler otomatik küçüleceğinden görünüm kötü olabilir.
General bölümünde üç seçenek var. İlk seçenek tikli ise mobil görünüm üst menüde arama opsiyonu aktif olur. İkinci seçenek tikli ise mesajlara yorum gönderme aktif olur. Üçüncü seçenekdeki açılır menüden ise, anasayfa görünümüne son konular yerine hazır bir sayfayı sabitleyebilirsiniz. (Eğer none kalırsa anasayfada son konular görüntülenir.)
Post Settings bölümünde beş seçenek var. İlk seçenek tikli ise konularda yazar ve tarih, ikinci seçenek tikliyse konularda etiketler, üçüncü seçenek tikliyse konularda kategori ismi, dördüncü seçenek tikliyse anasayfada thumbnail görseli, beşinci seçenek tikliyse anasayfa veya konularda “öne çıkan” görseli görüntülenir.
(Dördüncü seçeneği işaretlediğinizde konularda thumbnail kullanıyorsanız bu görseller görünüyor. Görselleri yazıya upload etmediyseniz tabiki hiçbir görsel çıkmıyor. Aynı şekilde beşinci seçeneği işaretlediğinizde konularda featured kullanıyorsanız bu görsel çıkıyor. Bu görselinde yazıya upload edilmiş olması gerekiyor.)
Eğer anasayfada yazılara eklenen ilk resim görünsün istiyorsanız yada sizin belirlediğiniz bir özel alan kodundaki görsel çıksın istiyorsanız mobil temada ufak bir düzenleme yapmanız gerekiyor. Yapılacak düzenlemeyi yazının son kısmında düzenlemeler bölümünde bulabilirsiniz.
Analytics bölümünü biliyorsunuzdur. Bu bölümden kişisel analytics hesabınızı ekleyebilir yada başka bir takip kodunuz varsa onu kullanabilirsiniz. Bu sayede mobil temanın ziyaret sayısını da hesaptan kaçırmamış olursunuz.
Advertising bölümüde tahmin ettiğiniz gibi mobil temada reklam yayınlamanıza imkan veriyor. İsterseniz Adsense seçeneği ile Google Adsense reklamlarınızı yayınlıyor, isterseniz custom seçeneğinden kendi reklam kodlarınızı ekliyorsunuz. Reklamların sayfadan taşmaması için 200~210 piksel genişliği aşmamanızı öneririm.
Themes sekmesi;
Themes sekmesinde üç hazır tema bulunuyor. Bu temalar arasında en kullanışlı olanı sorarsanız ben WPSmart Classic derim. Siz isterseniz diğerlerinden birini de kullanabilirsiniz.
Appearance sekmesi;
Bu sekmede beş seçenek bulunuyor ve tamamen mobil temanın görünümünü ilgilendiriyor. İsterseniz temanın yazı stilini değiştirebiliyor yada ufak renk ayarlamaları yapabilirsiniz.
Menu sekmesi;
“Enable drop-down pages/links menu” seçeneğini tikleyerek mobil sol açılır menüyü aktif edebilir ve istediğiniz kategori, sayfa bağlantılarını sol menüde yayınlayabilirsiniz. Bu bölümün rahat kullanımı için Wp Admin’de Görünüm > Menüler altından hazır menü oluşturmanızı öneririm. Daha sonra oradan oluşturduğunuz menüyü bu bölümdeki Available Menus altından bulup seçebilirsiniz.
Herhangi bir değişiklik yaptığınızda sağ üstteki Save All Changes butonunu kullanmayı unutmayın!
Ufak Düzenlemeler!
Tüm ayarlamaları tamamladığınızda mobil temanız hazır olacak. Fakat bazı ufak hatalar, eksikler yok değil. Şimdi sizlerle bunları paylaşıcam. Başlık başlık paylaşacağım düzenleme önerilerini uygulayarak, mobil temanızı daha iyi hale getirebilir ve bazı ufak hatalarını da ortadan kaldırabilirsiniz. Eğer şablon düzenleyebiliyorsanız kesinlikle uygulamanızı öneririm.
Temada yakınlaştırma özelliğini kapıyoruz;
WPSmart’ın şuanki sürümü mobil cihazlarda yakınlaştırma hareketine izin veriyor. Bu nedenle de içerik veya üst menüde bozulmalar olabiliyor. Aşağıdaki kodu (/wp-content/plugins/wpsmart-mobile/themes/base/) base-header.php dosyasında gerekli alana ekleyerek bu sorunu halledebilirsiniz.
base-header.php dosyasını açın ve;
<meta name="viewport" content="initial-scale=1"/>
olan bölümü..
<meta name="viewport" content="initial-scale=1 user-scalable=no"/>
olarak değiştirin.
Temayı tablet uyumlu hale getiriyoruz;
WPSmart şuanki sürümüyle tablet bilgisayarlarla uyumlu değil. Anasayfaya baktığınızda içerik solda toplu olarak görünüyor. Bizde (/wp-content/plugins/wpsmart-mobile/themes/classic/) style.css dosyasında birkaç düzenleme yaparak bu sorunu hallediyoruz.
Style.css‘de;
article .entry-header‘ı bulun bu hale getirin.
article .entry-header { overflow: hidden; vertical-align: top; width: 100%; }
article .entry-image‘ı bulun,
width: 75px;
değerini
width: 90px;
olarak değiştirin.
article .entry-title‘ı bulun altına şunu ayrıca ekleyin;
article .entry-title2 { font-size: 16px; font-weight: bold; width: 70%; color: #444444; word-wrap: normal; }
Ve bu değerin çalışması için temanızın index.php şablonundaki <h1 class=”entry-title”> girdisini <h1 class=”entry-title2“> olarak değiştirin. Eğer anasayfada resimler gösterilmeyecekse %70 değerini %90-95 kafanıza göre değiştirin.
Şimdi style.css dosyasını host alanına gönderin. Artık temanız tabletlerle de uyumlu. (Tabi anlatım Classic teması için geçerli. Diğer iki temadan birini kullanıyorsanız düzenleme biraz daha farklı sonuçlar verebilir.)
Anasayfada istediğimiz kadar son konu;
WPSmart temalarında normalde WP Admin’de ayarladığınız kadar son konu görüntüleniyor. Diyelimki masaüstü sürümde son 5 konu görünsün diye ayarladıysanız, mobil sürümde de son 5 konu görünecek ve belki bu durum hoşunuza gitmeyecek. Hemen aşağıda paylaştığım düzenlemeyi yaparsanız mobil sürümün anasayfasında sizin istediğiniz kadar son konu görünmesini sağlayabilirsiniz. Yani masaüstü sürüm anasayfasında son 5 konu görünüyorsa mobil sürüm anasayfasında son 10 yada 15 konu görünecek.
WPSmart’ın mobil tema klasöründen (/wp-content/plugins/wpsmart-mobile/themes/classic/) index.php şablonunu çekin ve;
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
kodunu bulup üstüne şunu ekleyin..
<?php query_posts($query_string . "&posts_per_page=10"); ?>
Ve index.php’yi host alanındaki yerine geri upload edin. (Anasayfada son 10 konu yerine 7 yada 15 konu görünsün istiyorsanız 10 rakamını değiştirmeyi unutmayın.)
Anasayfada konulardan görseller;
Eğer mobil temanızın anasayfasında konulardan görseller görünsün istiyorsanız iki seçeneğiniz bulunuyor. Ya konulara thumbnail görseli yükleyeceksiniz yada aşağıda anlatacaklarımı yaparak konulardaki ilk resimleri anasayfaya çekeceksiniz.
Öncelikle mobil tema klasöründen yine (/wp-content/plugins/wpsmart-mobile/themes/classic/) index.php‘yi çekin.
<div class="entry-image" style="<?php if( $post_image_src != '' ): ?>background-image:url(<?php echo $post_image_src ?>);<?php endif; echo ! wps_get_option( 'show_thumbnails' ) ? 'display:none' : null ?>"></div>
kodunu, şununla değiştirin;
<div class="entry-image"><img src="<?php echo thumbnail() ?>" /></div>
Ve şimdide mobil tema klasöründen (/wp-content/plugins/wpsmart-mobile/themes/classic/) functions.php dosyasını çekip şablondaki boş sıraya şu kodu ekleyin;
function thumbnail() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "http://www.siteadresi.com/thumbnail.png"; } return $first_img; };
Kodu ekledikten sonra siteadresi.com yazan yere ftp’nize atacağınız bir thumbnail görselinin yolunu girin. Bunu yaptığınızda, eğer konu içeriğinde bir resim bulunmuyorsa anasayfada standart olarak bu görsel çıkacak.
Footer düzenleme;
Eklenti yapımcısı footer yani mobil temanın en alt bölümünü biraz fazla şişirmiş. Buradaki içeriği daha düzenli hale getirmek istiyorsanız mobil tema klasöründen (/wp-content/plugins/wpsmart-mobile/themes/base/) base-functions.php dosyasını çekin ve 228. satırdan sonraki içeriği istediğiniz gibi düzenleyin.
Tema Türkçeleştirme;
Mobil temadaki ingilizce kısımların bazılarını Türkçeleştirmek istiyorsanız;
(/wp-content/plugins/wpsmart-mobile/themes/classic/) index.php
ve
(/wp-content/plugins/wpsmart-mobile/themes/base/) base-functions.php
şablonlarına göz atın.
Sayfalarda yorumlara izin verme;
WPSmart’ın orijinalinde sayfalarda yorumlara izin verilmemiş. Eğer sayfalarda yorumlar görünsün ve yorum gönderilsin istiyorsanız mobil tema klasöründen (/wp-content/plugins/wpsmart-mobile/themes/classic/) page.php dosyasını çekin ve..
<?php endwhile; ?>
kodunun hemen üstüne..
<?php comments_template( '', true ); ?>
kodunu ekleyin.
Menü desteği ekleme;
Masaüstü temanız eski temalardan ise, menü desteği yoksa admin panelinde Görünüm > Menüler seçeneğini göremeyebilirsiniz. Bu nedenle de mobil temada menüyü düzenleyemezsiniz. Menüler seçeneğini görebilmek için masaüstü temanızın functions.php dosyasında uygun yere aşağıdaki kodu ekleyin.
add_action( 'init', 'theme_menus' ); function theme_menus() { register_nav_menus( array( 'menu-1' => __( 'Top menu' ), 'menu-2' => __( 'Head menu' ) ) ); }
Videolar için;
Yazılarınıza gömdüğünüz videoların düzgün görüntülenmesi için aşağıdaki komutları mobil temanızın style.css dosyasında uygun yere ekleyin.
iframe, object, embed { max-width: 100%; }
Sonuç;
Anasayfa ve sol açılır menü..
Tekil konu üst ve alt görünüm..
Notlar:
1. Düzenlemeler tamamen bana ait. Düzenlemelerde mobil classic teması baz alındığından diğer iki temada düzenleme yapıyorsanız kod farklılıklarına dikkat etmelisiniz.
2. Yazıyı yayınladığımda eklentinin sürümü 1.0.4 idi. Daha sonra çıkacak sürümler ile ayarlar ve şablonlarda bazı değişiklikler olabilir, yapılan düzenlemeler geçersiz hale gelebilir. Eklenti güncellemesi yapacak olursanız bu hususu göz önünde bulundurun. Eğer eklentinin direk indirme bağlantısı gerekirse hemen aşağıda bulabilirsiniz.
WPSmart: https://wordpress.org/plugins/wpsmart-mobile/
3. Konuya dair sorularınız varsa veya yazının güncelliğini yitirdiğini düşünüyorsanız yorum panelinden mesaj gönderebilirsiniz.
@Lordiz, Hocam yeri burasimi bilmiyorum ama size bir sorum olucak # isaretini wp menulere ozel baglanti olarak koydugumuzda drow down menu hover olarak meydana cikiyor. Yani menu mause uzirine gelince hemen beliriyor. ben bunu uzerine tiklayarak yapilmasini istiyorum ve sadece bir menude istiyorum. ozel baglanti vererek. bunu nasil yaparim? simdiden zamaniniz icin cok tesekkur ederim
@Ferhat ONAL; Benim bildiğim açılır menülerde # karakteri kullanırsanız tıklanmaz yapmış olursunuz. Css’den üstüne gelince açılacak şekilde ayarlı ise üstüne mouse gelince aşağı doğru açılır. Tıklanarak açılması için css’den değiştirmeniz gerek yada javascript sisteminde birşeyler yapmanız gerek. O konuda şuan aklımda bir çözüm yok.
yazıdan örnek: Öncelikle mobil tema klasöründen yine (/wp-content/plugins/wpsmart-mobile/themes/classic/) index.php‘yi çekin. tamam ftp den buraya kadar geldim. bu dosyayı buldum. fakat açıp da içince değişiklik yapamıyorum.farklı kaydet diye indiriyorum. indirip buraya geri nasıl atacağım.bunu da açıklarsanız bu vesile ile benim gibi acemilere daha da kolaylık olur. teşekkürler.
@recai köz; Söylediğim konuma Filezilla veya cuteftp ile host alanından bağlanacaksınız. Dosyayı bilgisayara indirdikten sonra Notepad++ ile açıp, düzenleyip, ftp yolu ile aynı konuma geri atacaksınız.
Merhaba, mobil telefonda menü görünmüyor niye acaba?
Menüyü görünür yaptım bir ana menü de atadım ama menü sekmesi açılır olmuyor
@Erhan; Merhaba. Farklı bir mobil tarayıcıdan deneme yaptınız mı? Menü tanımladıysanız açılması gerekir fakat eski telefonların bazılarında menü desteklenmiyor yada lightbox gibi bir eklenti varsa onun kodları ile çakışma yapabiliyor.