WordPress gelistirmek isteyen bazi arkadaslarim icin kucuk bir baslangic konusu hazirlamak istedim.
WordPress gelistirmeye baslarken!..

hazir sistemler olarak adlandirilan cms turu kodlanmis sitemler hakkinda makaleler..
WordPress gelistirmek isteyen bazi arkadaslarim icin kucuk bir baslangic konusu hazirlamak istedim.
Yeni versiyon yayinlandi: [v16 – Yeni] Resim Yükleme scripti – Piclect API v16 (2016)
Piclect API v7 versiyonundan sonra kullanici yorumlari ve onerileri dogrultusunda gelistirdigim yeni surumu sizlere sunuyorum. Bu versiyonun uzun sure isinizi goreceginiz ve kullanimda olacagini umut ediyorum ki biraz dinlenmek benimde hakkim :)
Yeni versiyonda ciddi duzenlemeler yaptim, 2 index hazirladim, bunlari asagida sizlere sunacagim. Ancak en onemli yenilik, upload formu ve artik yuklenen resimleri kendi hostunuzada cekebiliyor olmanizdir. Dilerseniz oncelikle nelerin oldugunu maddeler halinde ekleyelim. Sonrasinda alt basliklara yer verecegim.
Vbulletin 3 versiyonlari icin gelistirdigim Resim yukleme eklentisinin yeni versiyonunu tanitayim.. Bir onceki versiyonun amatorlugunu duzeltip, isimizi kolaylastiracak bir o kadarda yenilik ekledim.
Uygulamanin bu yeni versiyonunda Plupload uygulamasini kullandim. Javascript UI ozelligi sayesinde bir cok tema secenegide hazir geliyor. Hosunuza gitmediyse sitenize ozel tema olusturabilir ve kullanabilirsiniz. Isterseniz sizleri yormadan bu versiyonda neler var yazalim.
Merakla bekledigim ve en iyi wordpress versiyonlarindan biri olacagini dusundugum WordPress 4.0 “Benny” versiyonu bugun itibariyle yayinlandi ve guncellestirmeye sunuldu.
Basit, tarayici duyarli ve hizli bir wordpress temasi icin suanda kuaza.com sitesinde goreceginiz temayi hazirladim. Seo dostu olmasi acisindan dikkat ediyorum. Oneri ve goruslerinize gore temayi gelistirip ucretsiz olarak yayinlamayi dusunuyorum. Ilgilenenlerin dikkatine :)
Yakin zamanda kuaza.com icin gerceklestirecegim proje icin pligg scriptini dusunuyordum ancak sistemi bana cok karmasik ve ugrastirici gelecegini dusundugumden wordpress ile yapma karari aldim. Bu sebeple basladigim eklenti kodlama isinde son isigida gormus oldum. Ilk versiyon olmasina ragmen herseyi dusundum ve eklemeye calistim. Ancak eklenti bu versiyonda kalmayacak devamli gelistirilecek. Buda sizlere guzel haberim olsun.
Eklenti pligg scripti ve digg.com sitesinden esinlenilerek gelistirildi. Link paylasimi ve yazi paylasimi imkani sundugu gibi, paylasimlar icin kullanicinin resim eklemesinede imkan veriyor. Eklentiyi anlatmak yaziyi uzatacagindan kisaca deginip ozelliklerini siralayip gececegim.
Ornek sayfalar:
Makaleci.com icerik onerme sayfasi
Incilizce test sitesi icerik onerme sayfasi
Eklentinin ozellikleri:
Eklenti icin henuz wordpress.org a basvuruda bulundum, resmi yayini beklemeden denemek isteyenler buradan eklentiyi indirerek kurabilirler.. Anlatima ise asagida yer verecegim…
Eklentiyi aktif ettikten sonra bir kac adimda kurulumu yapmaniz gerekli. Bunlari sirasi ile asagida yaziyorum, sirayi bozmadan kurulumu sorunsuz halledebilirsiniz.
<div class="wlops_topcontent"> sayfa 1 [ust]: ilk sayfa ust taraf </div> <div class="wlops_topcontent_step2"> sayfa 2 [ust]: ikinci sayfa ust taraf </div> [wlops_form] <div class="wlops_bottomcontent_step2"> sayfa 2 [alt]: ikinci sayfa alt kisim </div> <div class="wlops_bottomcontent"> sayfa 1 [alt]: ilk sayfa alt taraf </div>
Sayfa basligini dilediginiz gibi girebilirsiniz, benim onerecegim (icerik oner, link oner, yazi gonder v.s). Sonrasinda sayfayi yayinlayin ve acip bakin hersey normal mi ? form ekrani geldimi, geldiyse sonraki adima gecelim.
{{content}} <div class="wlops_devam_linki"><a title="Devamini oku {{post_title}}" href="{{out_redirect_url}}" target="_blank" class="btn btn-readmore wlops_read_more story-title-link story-link" rel="bookmark" itemprop="url"> Kaynak <em>({{out_count}})</em></a> <em>{{direct_source_url}}</em></div> <br /> {{wlops_images}}
<style type="text/css" id="wlops-header-css"> .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btn:focus, .btn:active:focus, .btn.active:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn:hover, .btn:focus, .btn:visited { text-decoration: none; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); color: #222222; } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } a.btn{ text-decoration:none; color:#222222 } .btn-readmore, button.btn-readmore { background: #ddd; border-radius: 2; color: #222222 } .clearfixet{ clear:both; } .wlops_cevre_class{ margin-bottom:10px; width:100% } .yuzdeyuzyap { width: 100%;box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box; } .kategoriklass { clear:both;margin-bottom:10px; width: 100%;box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box; } .inputcevreklass { clear:both; margin-bottom:10px; width: 100%; } .inputcevreklass textarea{ margin-bottom:-5px; height:100px; width: 100%; } .eklemebasarili{ color:#f2f2f2; font-weight:bold; } .eklemebasarili em{ color:#CCD9FF; font-weight:normal; } .eklemebasarili em a:visited{ color:#CCD9FF; font-weight:normal; } .ustbilgicevre{ margin-bottom:10px; background: #F78181; border: 1px solid transparent; border-radius: 2; padding:10px; color: #f2f2f2 } .ustbilgicevre a{ color:#ffffff } .ustbilgicevre a:visited{ color:#ffffff } #Wlops_kligg { display: block; background: #f6f6f6; border-radius: 3px; padding: 15px } #wlops_form { width:100%;display: inline-block; margin: 0 auto; background: #F5F6CE; border-radius: 3px; padding: 15px } .progress { margin:10px auto;position:relative; width:auto; border: 1px solid #ddd; padding: 1px; border-radius: 3px; display:none; } .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } .percent { position:absolute; display:inline-block; top:1px; left:48%; } .hataolustu{ color:#D30221; font-weight:bold; } .upload_resimler_cevre{ width:auto; margin:auto; display:inline-block; } .upload_resimler_tek{ float:left; padding:2px; margin-top:5px; margin-right:5px; border:1px solid #ccc; } .resim_yukleme_alani_cevre{ margin-top:20px; width:100%; } .resim_yukleme_alani_cevre h3{ font-weight:bold; font-size:20px; } .hemenyukle_secmealani{ float:left; } .hemenyukle_buton{ float:right; } .yazi_saga_yasla{ text-align:right; } #wlops_submit{ } .link_text_button_cevre{ float:left; } .wlops_submit{ float:right; margin-top:10px; } .wlops_floatright{ float:right; } .alt_butonlar{ display:inline-block; width:100%; margin:auto; } .wlops_topcontent{ display:none; } .wlops_bottomcontent{ display:none; } .wlops_topcontent_step2{ display:none; } .wlops_bottomcontent_step2{ display:none; } .guvenlik_cevre{ background:#ffffff; } </style>
Ornek kullanim ve ayarlari ile ilgili videolar:
Eklentinin kullanimi ile ilgili test videosu
WordPress sitelerinize resim yükleme özelliği ekleyerek, okuyucu ve kullanıcılarınızın kolayca resim yükleyip paylaşmasını sağlayabilirsiniz. Bunun için ise Trafik yada Hdd derdiniz olmayacak. Bütün bunları piclect.com karşılayacak, size sadece bunun keyfini sürmek düşecek (çok deli cümle kurdum şimdi valla).
Eklenti piclect.com APİ si baz alınarak kodlandı arkadaşlar. Jquery ile sayfa yenilenmeden resimlerinizi hızlıca yükletebilirsiniz. Bunun yanında toplu link alma alanıda çoklu resimlerde kolayca link almaya olanak veriyor. Yüklenen resimler ve koleksiyonlar databasede tutuluyor. Böylece resim yükleyen kullanıcı ID lerini ve resim bilgilerini saklayabiliyorsunuz. Bu özellik sonraki versiyonlarda daha etkili olarak önümüzü çıkacak kesin ornegin gunluk yuklenen resim.
Denemek istiyorsanız aşağıya bakın: Demo 2 (makaleci.com) – Demo 3
[up_piclect]
Eklentiyi artik WordPress.org sayfasindan indirebilirsiniz.
Eklenti için wordpress plugins başvurusu yaptım ancak o zamana kadar beklemek istemeyebilirsiniz. Bunun için burdaki linki kullanarak eklentiyi indirebilir ve kullanabilirsiniz.
Eklenti shortcode mantığı ile çalışıyor arkadaşlar. Yani isterseniz yazı içinde, istersenizde bir sayfa oluşturarak orda gösterebilirsiniz. Sınır yok istediğiniz kadar sayfada kullanabilirsiniz. Ancak önerim tek bir sayfa oluşturarak burada resim yükleme hizmeti vermeniz.
Yazı içinde kullanmanız gereken shortcode etiketi:
[up_piclect]
Eklentinin ilk versiyonu olduğu için yapılacak ve eklenecek özellikleri sonraki versiyonlara bırakıyorum. Eğer eklenti adına güzel yorumlar ve geri dönüşler alırsam yeni versiyonun çıkması uzun sürmeyecektir.
Admin paneli bulunmakta eklentinin, extra bir kod bilgisine gerek kalmadan ayarlarınızı yapabiliyorsunuz yada default gelen tasarımla devam edebiliyorsunuz. sizin tek yapacağınız ise piclect.com/developer üzerinden sitenizi eklemek ve onaylamak. Sonrasında siteniz için upload izni verilmiş olacak, ziyaretçileriniz başka siteye gitmeden resimlerini yükleyebilecek.
Eklentiyle ilgili bir kaç detay:
Eklentinin özelliklerini daha fazla saymama gerek yok, yukarıdan demosunu kullanarak kendinizde test edebilirsiniz :)
Şuanda makaleci.com dada kullandığım bir eklentidir arkadaşlar. Sosyal paylaşım sitelerinde konuların ne kadar paylaşıldığını gösterir. Şuanda desteklenen sosyal paylaşım siteleri: Facebook, google, twitter, linkedin, pinterest,stumbleupon. Ayrıca toplam paylaşım sayısınıda göstererek hepsinde ne kadar paylaşıldığını görebilirsiniz yada ziyaretçilerinize gösterebilirsiniz. Jquery ajax, eklenti, bileşen cache ve ayar sayfasında tema destegide bulunmakta.
Yakin bir zaman da Cyb – ChatBox sohbet eklentisinin tarih problemi ile ilgili bir arkadasima yardim ettim. Bu problemi yasayan, yada yasayacak olan arkadaslara hitaben cozumunu anlatma geregi hissettim kendimde :)