Şu anda Görüntülemektesiniz;  WordPress Bloglar İçin Ücretsiz Mobil Tema Eklentisi “WPSmart”
Tarih: 
Google Özel Arama Yükleniyor..
YukarıİletişimYazıya Yorum Gönder!
facebook share twittershare

Wordpress Bloglar İçin Ücretsiz Mobil Tema Eklentisi

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: 15 Nisan 2016

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. 

WPTOUCH | WordPress Mobile Pack | Jetpack

———————————————-

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.

Ş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.

Sonuç;

 Anasayfa ve sol açılır menü..

Wordpress Bloglar İçin Ücretsiz Mobil Tema Eklentisi  Wordpress Bloglar İçin Ücretsiz Mobil Tema Eklentisi

Tekil konu üst ve alt görünüm..

Wordpress Bloglar İçin Ücretsiz Mobil Tema Eklentisi  Wordpress Bloglar İçin Ücretsiz Mobil Tema Eklentisi

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:http://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.

facebook share twittershare

    tuncay 11 Ağustos 2016, 10:01

    merhabalar. değerli paylaşımın için çok teşekkür ederim. kayserihavaalani.com sitemizde iframe yolu ile uçak ve otobüs bileti satışı yapmaktayız, iframe i yerleştirdim masaüstünde gayet sorunsuz çalışmakta fakat wptouch kurduğum mobil sitede sayfaya tam sığmıyor iframe boyutlarıyla oynasamda düzeltemedim bukonuda bana yardımcı olursanız çok memnun kalırım. şimdiden çok teşekkür ederim

    zodoc 06 Ekim 2016, 18:26

    Çok içi geldi kontrol edersin :) teşekkürler dostum. askerlik-sorgulama.com

    dadaş25 17 Ekim 2016, 16:45

    erinmemiş ayrıntılı tek tek yazmışsınız. teşekkürler. hakikaten çok faydalı bilgiler. henüz denemedim ama eminim bir çok kişi faydalanmıştır. ne diyeyim Allah razı olsun

    Lordiz 18 Ekim 2016, 20:59

    @tuncay; Merhaba. İframe ile çekilen sayfanın genişliği 800 piksel ise, onu mobile sığdırmak için; kaynak siteyi değiştirmeli (iframe sitede düzenleme yetkiniz olacak), verileri farklı bir yolla çekmeli yada iframe sayfanın 400-500 piksel kısmını kırpmalı, dışarda bırakmalısınız.. Son seçenek olarak da iframe sayfayı iframe olarak çağırmak yerine bağlantı verebilirsiniz. Eğer iframe ile çekilen sayfada mobil uyumluluk olsaydı zaten iframe için bir değer atadığınızda kendiside ona göre ufalır, sayfaya sığardı. 

    @zodoc; Rica ederim.

    @dadaş25; Rica ederim. Sizden de Allah razı olsun.

Üyeliksiz Yorum Bırak

Sorularınıza gelen cevapları görmek için sayfayı CTRL+D tuşları ile Yer İmlerine eklemeyi unutmayın.





Reklamlar
 

Son Yazılar

TEKNOTV Videolar

Son Yorumlar
Unutulmaz
 

Reklam
 

Reklam
 

Reklam
 

Reklam
 

Reklam
 

© 2016 Lordiz.com