Mobil cihaz kullanımının hatta akıllı telefon kullanımının artması ile web siteleri de yavaş yavaş mobil sürümlerini geliştirmeye başladılar ama hala pek çok site mobil sürüm desteklemediğinden telefonlarımızda çok kötü görünüyor ve bu durum ziyaretçi için pek kullanışlı olmuyor. Bu yazıda bugün bizzat kurulumunu denediğim ve konu tazeyken paylaşmak istediğim MYBB mobil site eklentisini tanıtacağım ve ufak detaylarla da temayı sitenize uyarlamanıza yardım edeceğim.
DİKKAT! Yazı, erişim sağladığınız tarihte güncelliğini yitirmiş olabilir.
Öncelikle bu işlemi yapmadan önce forum sitenizden SQL yedeği alın ardından aşağıdaki bağlantıdan mobil site eklentisini indirin.
Yukarıdaki bağlantıdan eklentiyi indirin ve Türkçe çeviri içinde bu bağlantıdaki dosyayı indirin. Ftp programı ile ftp alanına bağlanıp aşağıdaki şekilde yüklemeleri yapın.
Upload > İnc > Plugins > klasöründeki 2 dosya /public_html/inc/plugins klasörü içine atılacak.
Upload > İmages > içerisindeki mobile isimli klasör /public_html/images klasörü içine atılacak.
Upload > İnc > Languages > English > klasöründeki dosya /public_html/inc/languages/english klasörü içine atılacak.
Ayrıca link ile verdiğim Türkçe çeviri dosyası /public_html/inc/languages/turkish klasörü içine atılacak.
Dosya yüklemeleri bu kadar. Şimdi MYBB forum admin panelinde Eklentiler bölümüne gidip MyBB GoMobile isimli eklentiyi aktif edicez ve sonra MYBB admin panelde Ayarlar bölümüne geçip GoMobile Settings yazan eklenti ayarlarına giriş yapıcaz. Normal şartlarda burada hiç birşeyi değiştirmenize gerek yok ancak isterseniz mobil sitenin görünen adını ilk bölümden değiştirebilir yada ilerleyen süreçte eklentinin yeni temaları olursa 11 yazan yerden yeni tema id numaraları girerek yeni temaları aktif edebilicez..
29 Kasım 2014 – MYBB 1.8 Güncellemesi:
– 2-3 senelik bir eklenti olduğu için Mybb’nin yeni sürümlerinde uyumluluk sorunu çıkabilir ve eklentiyi aktif edemezsiniz. Bu durumlarda eklentinin gomobile.php dosyasını notepad++ ile açıp 46 numaralı satıra gidin. Aşağıdaki ifadeyi bulup 16 yazan yeri 17 yada 18 olarak değiştirin.
"compatibility" => "16*" "compatibility" => "18*"
(Mybb sürümünüz 1.7.x ise 17* olacak, 1.8.x ise 18*, 2.0 sürümü ise 20*..)
– 2-3 senelik bir eklenti olduğu için Mybb 1.8.x forum sisteminde temayı güncellemezseniz yeni mobil üyeliklerde şu hata mesajı ile karşılaşırsınız;
Üyelik kaydınız sistem tarafımdan spam olarak algılanmış olabilir. Eğer bunun bir hata olduğunu düşünüyorsanız lütfen, iletişim bölümünden yönetici ile irtibat kurunuz.
İngilizcesi; Our systems detect that you may be a spammer and therefore you have been denied registration. If you feel this is a mistake, please contact the Administrator. Yapılacak güncelleme şudur;
Admin panelde Mybb Go Mobile şablonlarına gidin, Şablon setleri listesi > Üye profili şablonlar > member_register şablonunu açın ve;
<input type="hidden" name="step" value="registration" />
kodunun hemen üstüne şunu ekleyin;
<input type="hidden" name="regtime" value="{$time}" />
Sonuç şöyle olacak;
<div align="center"><input type="hidden" name="regtime" value="{$time}" /> <input type="hidden" name="step" value="registration" /> <input type="hidden" name="action" value="do_register" /> <input type="submit" class="button" name="regsubmit" value="{$lang->submit_registration}" /> </div>
12 Mart 2015 Güncellemesi: (Yorum yazarı Muhammet)
Uygulamadan faydalanan arkadaşlarımızdan birisi farklı bir sorun yaşamış ve çözümünü bizlerle de paylaşmış. Kendisine teşekkür ederiz.
Arkadaşlar eklentide konularda alıntı yaparken çalışmıyordu. mobile temanızda Şablonlar>Postbit şablonlar>postbit_quote deki kodu koyu olan yeri aşağıdaki gibi yapın sorun düzeliyor. emin olmak için orjinal temanızla kodu karşılaştırabilirsiniz.
<a href="newreply.php?tid={$tid}&replyto={$post['pid']}" class="button">{$lang->gomobile_post_quote}</a>
Eklenti Teması Uyarlama:
Eklentiyi kurup aktif ettikten sonra mobil temada aktif oluyor ve sitenize mobil cihaz ile giren ziyaretçileri mobil sürüm karşılıyor. Eğer elinizde hiç Mobil cihaz yoksa ve sitenizin nasıl göründüğünü merak ederseniz bu bağlantıdaki siteye gidin ve Enter URL yazan kutuya forum sitenizin adresini yazıp GO butonuna basın. Kısa süre sonra sitenizin nasıl göründüğünü örnek simulatörde göreceksiniz.
Eklenti şimdilik çok yeni bu nedenle bir tane tema var ondan başka tema yok ve temada logo kısmı olmadığından çok yavan duruyor ve tabiki forum temanız ile mobil temanın renkleri çok tezat ise mobil sürüm hoşunuza gitmeyebilir. İşte şimdi bu tema yokluğunda mobil temayı nasıl güzelleştirebiliriz onu görücez..
1- Temaya Logo Ekleme:
Mobil cihazlar genelde birbirine yakın ekran genişliğine sahip oluyor bu nedenle mobil sürüme ekleyeceğimiz logonun genişliğini 302 piksel olarak hazırlıyoruz, yüksekliği ise 110 piksel öneriyorum ama isterseniz biraz daha yüksek yapabilirsiniz.
Logoyu belirledikten sonra resim dosyasını kayıt ediyor ve ftp programı aracılığı ile /public_html/images/mobile klasörü içine atıyoruz ve sonra MYBB admin panelinde Şablonlara gidiyoruz.
Şablon yönetimine girdiğinizde en altta mobil tema şablonu MyBB GoMobile Templates‘i göreceksiniz ve hemen üstüne tıklayacaksınız. Şimdi karşınızda temanın şablonları var burada önce Üst Kısım Şablonlarına ardından da Header‘a gireceksiniz.
Header’da değiştirilecek kısım şu;
<div id="logo"> <a href="{$mybb->settings['bburl']}/index.php">{$mybb->settings['gomobile_mobile_name']}</a> </div>
Son hali şu;
<div id="logo"> <a href="{$mybb->settings['bburl']}/index.php"> <img src="/images/mobile/mobile-logo.jpg" border="0"/></a> </div>
Ve kayıt edicez. Bu işlemden sonra Forumunuzun mobil sürümünde kendine özel bir logo olacak ve görüntü belki biraz daha içinize sinecek.
2- Tema Renkleriyle Oynama:
Temanın orijinal rengi mavi ve forumunuzda kullandığınız tema rengi maviye zıt bir renk ise hiç hoşunuza gitmeyebilir bu durumda şunu yapacaksınız.
Temanın tüm renkleriyle oynamak için MYBB forum admin panelinde Temalar‘a tıklayacak ardından en alttaki mobil sürüm temanın adına (MyBB GoMobile) tıklayacaksınız. Burada değiştirilecek en çok birim Global.css yazan css dosyasında yer alıyor. Temanın rengini neredeyse kendi orijinal temanıza %80 uydurmanıza imkan veriliyor ve sonuçta görünüm çok güzel oluyor.
(Global.css tıkla, sağ üstten CSS Düzenleme: Gelişmiş Mod yazısına tıkla.)
Eğer Global.css‘yi karşımıza açtıysak şu css etiketlerini bulup background kodlarını istediğimiz renk kodları ile değiştiriyoruz.
#logo > background: burayı değiştirdiğinizde logonun arkaplan rengini değiştirmiş oluyorsunuz. Eğer telefon ekranı logo genişliğinden fazla ise veya telefon yatay görünümde ise temaya uyacak bir renk seçmek çok iyi olacaktır. Mevcut resim url’sini kaldırmanıza hiç gerek yok kalsın orada.
#menu > background: burayı değiştirdiğinizde logonun tam altındaki bölümün rengi değişecek. Bu kısımda yeni mesaj, yardım, arama gibi seçenekler yer alıyor.
#menu a > color: burayı değiştirdiğinizde hemen bir üstteki backgrounda uygun yazı fontu rengi belirlemiş oluyoruz yani yukarıdaki rengi siyah yaparsanız yazılarında görünmesi için beyaz olması gerekiyor bu durumda bu kısıma #ffffff yazıyoruz ve font rengini beyaz yapıyoruz.
.thead > background ve border-color: bu iki bölüme gireceğimiz renk kodları forumların üst kısımlarının rengini belirliyor ilki ana rengi belirlerken border-color da bu ana rengin alt kenarını farklılaştırıyor. Ben ikisinide aynı renk belirledim böylelikle güzel bir görünüm oldu.
.thead a > color: hemen üstteki değişikliğe bağlı bir değişiklik. Buraya gireceğimiz renk kodu bir üstteki bölümün font rengini değiştirecek yani oraya siyah girdiyseniz buraya beyaz renk kodu gireceksiniz yoksa yazı fontu ile arkaplan rengi tezat kalabilir veya yazılar arkaplanın içinde kaybolabilir.
td.forum_on > background: bu css dosyasındaki son değiştireceğimiz yer burası. Bu değişiklik ile yeni yazı olan forumların açık mavi rengini değiştirmiş olucaz bunun yerine gri tonlarda birşey kullanabilirsiniz örnek: #e1dfdf
Değişiklikleri kaydettiğinizde anasayfa görünümü ve forumlar görünümü epey değişecek.
Şimdi aynı temanın Usercp.css dosyasını açıyoruz ve yine CSS Düzenleme: Gelişmiş Mod yazısına tıklıyoruz.
.usercp_navigation > background: bu dosyada kesinlikle değiştirilmesi gereken tek şey bu. Bu rengi değiştirdiğinizde mobil görünümde kullanıcı paneline girince çıkan mavi renkli kullanıcı paneli rengi değişiyor. Tavsiyem #eeeeee (gri)
Bu kısmıda kayıt ederek geçiyoruz Modcp.css‘ye.. (Yine CSS Düzenleme: Gelişmiş Mod)
.modcp_navigation > background: bu dosyada da yukarıdaki gibi mavi renge sahip mod panelini başka bir renge çeviriyoruz. Burası içinde tavsiyem #eeeeee
İsterseniz Şunları da Değiştirebilirsiniz.
showthread.css > ul.thread_tools li.subscription_add a > background ve border: bu iki bölüm konuların en altında görünen abone ol butonunun arka plan ve kenarlık rengini belirliyor. Tavsiyem #ff0000 (kırmızı)
showthred.css > ul.thread_tools li.subscription_remove a > background ve border: bu iki bölümde bir üstteki buton aktif iken beliren rengi belirliyor. Yani ziyaretçi bu yazıya zaten aboneyse veya abone olursa butonun rengi değişiyor. Orijinal renk soluk pembe gibi birşey değiştirmesenizde olur.
global.css > input.button > backgroud ve color: hızlı cevapta cevapla ve önizle butonlarının arkaplan rengi ile buton fontunun rengini belirliyor.
global.css > a.big_button > background ve color: Konu gönder ve Cevapla butonlarının arkaplan ve font renklerini belirler.
global.css > #panel a > padding: burada normalde 10px yazıyor onu 5px yaparsanız üst menüdeki aşağı taşma yok olur bağlantılar birbirine biraz daha yakın olur. (bknz: düzenlenmiş tema resimlerinden ilk sıradaki)
Daha Fazlası?
Benden bu kadar. Mobil temada daha fazla değişiklik yapmak istiyorsanız kodlar üzerinde deneme yanılma yöntemini kullanabilir yada firefox, chrome tarayıcınıza colorzilla isimli eklentiyi kurup bir yandan da mobil sürümü web tarayıcınıza açarak renklerin kodlarından şablondaki yerlerini bulmayı deneyebilirsiniz.
Son cümlem kafanızı karıştırdıysa boş verin ve yukarıda belirttiğim yerleri değiştirirerek mevcut temayı orijinal temanıza uydurmaya çalışın :))
Eğer tema işinde uzmanlaşır ve birden fazla tema geliştirip kullanmak isterseniz inc > plugins klasöründeki gomobile_theme.xml dosyasını farklı isimle forumunuza tema yükleme kısmından yükleyebilir ve değişikliklerinizi onun üzerinde yapabilirsiniz. Diyelim ki tema çok güzel oldu başkalarıyla paylaşacaksınız o zaman da temayı normal bir tema olarak indirme kısmından xml olarak indirebilirsiniz. Ve eğer birden fazla temanız varsa ve onlardan birini mobil sürümde aktif edecekseniz temanın id numarasını go mobile ayarlarındaki id kısmına girmelisiniz.
Mobil Temaya Ait Örnek Resimler: (Resimlerin Büyük Hali İçin Üzerlerine Tıklayın.)
(Orijinal Tema)
(Yazıda anlattığım değişikliklerden sonraki Tema)
(NOT: Eklenti yazıyı paylaştığımda Beta 4. sürüm idi daha sonra yapılacak geliştirmeleri şimdiden görmem imkansız bu nedenle siz yazıyı okuduğunuzda belki pek çok şey, ayar değişmiş olabilir bu durumda konu altında yorum atarak uyarabilir ve yazıda güncelleme yapmama yardım edebilirsiniz.)
(NOT2: Örnek resimlerdeki site, bu yazıma temel oluşturan forum sitesidir, sürümü 1.6.8’dir ve benim tarafımdan Android 2.3.6 yüklü telefondan çekilmiştir. Ayrıca gomobil uygulamasının çalışırlığı Android cihazın yanında İpod3 ve iphone4 ile de test edilmiştir.)
(NOT3: Yazıyı hazırlamam saatlerimi aldı eğer yazımı başka bir sitede paylaşacak olursanız lütfen içeriği çalmadan sadece bu yazıma bağlantı verin böylelikle emeğe saygı göstermiş ve paylaşımlarımın devamına katkı sağlamış olursunuz. Sevgiler.)
(NOT4: Mobil sürümü bilgisayarınızda görüntülemek istiyorsanız forumunuzda footer bölümüne göz atın orada Mobil Versiyon yazan bir bağlantı bulacaksınız ona tıklayarak mobil sürüme geçebilirsiniz.)
(NOT5: Mobilde güvenlik sorusu için registration security question eklentisini kullanabilirsiniz.
@hakan; Merhaba. Ufak tefek sorunlar yaşadıysanız sorunu buradan yazarsanız yardım etmeye çalışırım. Sıfırdan mybb kurulumu diyorsanız ücretli yapabilirim ama onun içinde bu aralar vakit bulamıyorum. Çoğu iş kalıyor.
i am orilofeskix
and need to help. What can i change theme?
@orilofeskix; Hi! Edit the style file to change the theme.
hocam telefonda tam oldu güzel oldu ama mobilde teşekkür eklentisi görünmüyor.
@ahmet; Merhaba. Eklenti özel bir temaya sahip olduğu için tüm eklentilerinizin mobilde görünmesi için temada düzenleme yapıp eklenti kodlarını temaya dahil etmelisiniz. Genelde [thanksplugin] gibi bir formatta olur kodlar. Doğru kodları bulup eklerseniz mobilde de görünecektir. Tabi birde butonlar var. Butonların konumunu doğru belirlemezseniz eklenti çalışsa da butonlar görünmez.
Problem mit Javascript. Nachricht zu den Einstellungen. Hilfe!
My english is poor :).
@woodiskingser; Hello. What kind of problem?
Help. I am looking for guide
@terwixonse; How can i help you?