Kategori: Hazır Sistemler(CMS)

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:

1. Link paylasimi: Herhangi bir sitede bulunan kaliteli icerikleri sitenizde paylasmaniza olanak tanir. Bu bolum icin daha cok digg.com dan esinlendim ve benim diger eklentim olan kpst ‘i guncelleyerek birbiri ile etkilesim halinde olmasini sagladim.Paylasilan linklere sitenizden giden kullanicilar sisteminizde kaydedilir. Boylece kac kisi cikis yapti ve linki ziyaret etti hem gorebilir, hemde ziyaretcilere gosterebilirsiniz.
   Link paylasimi yaparken dil kodlamasi farkli olan sayfalarida rahatlikla ekleyebilirsiniz. Ornegin çin yada rusca site linklerini paylastiginizda karakter hatasi yasamazsiniz.
   Bir link eklemek icin devam ettiginizde, baslik, aciklama ve etiket bilgileri otomatik cekilir, kullanici isterse bu bilgileri duzenleyerek sisteme gonderebilir.
   Link gonderilirken varligi kontrol edilir, calismiyorsa uyari cikartiriz.
   Daha once ayni link paylasilmis ise yine uyari cikartiriz.
2. Makale paylasimi: Normal sekilde kullanicilarinizin yada ziyaretcilerinizin sitenize yazi eklemesini saglayabilirsiniz. Yaziya ait resim yada resimler yukletebilirsiniz.
3. Her iki sekilde de kullanici statusune bakilarak ekleme yada beklemeye alma islemleri uygulanir. Ornegin yaziyi gonderen ziyaretci yada abone ise yazi bekliyor olarak yayinlanmadan panelde bekletilir. Tabi link paylasimlarinda konu link olarak etiketlenir.
   Admin, editor ise direk olarak standart yazi olarak link ve makale paylasimlari yayina alinir, sitede gosterilir aninda. Yazar statusundeki kullanicilarin ekledikleri yazilarda yayina alinir ancak tek fark ile, ekledigi yazi link olarak belirtilir ve link turu yazilarda otomatik olarak sitedeki sorgulardan kaldirilir. bir nevi on inceleme ile herkesin gozu onune serilir diyelim.
4. Resim yukleme: Her iki sekilde de gonderize birden fazla resim ekleyebilirsiniz. Eklenen resimler yazi ile iliskilendirilecegi icin isterseniz kolayca yazi sayfasinda, belirleyeceginiz yerde listeletebilirsiniz.
   Ilk yuklenen resim “once cikarilan resim” olarak belirlenecektir. Ayni anda birden fazla resim yukleyebilirsiniz, ayrica yazinizi gondermeden tekrar tekrar farkli resimler yukleyebilirsiniz, her sekilde de resimler yazi ile iliskilendirilecek ve wordpress guvencesi ile saklanacaktir.
5. Eklenti tema yapisi: Eklenti ile gelen ozelliklerden bir taneside wlops paylasimlarda ozel tema yapisini kullanabiliyor olmanizdir. Ornegin resimleri yazinin ustune alabilir, yada resimler listeleymeyebilirsiniz. Devamini oku linki ekleyebilir, cikis sayisini gosterebilirsiniz. Her yazi icin farkli bir tema yapisi girebilirsiniz yada adminden default tema yapisi olusturarak isinizi kolaylastirabilirsiniz.
6. KS Total shared counter post: Bu eklenti yazinizin sosyal paylasim sitelerinde ne kadar paylasildigini gostermenizi saglar. Eger wlops eklentisi ile beraber aktiflestirirseniz otomatik olarak kaynak link varmi diye kontrol eder ve varsa kaynak link icin sosyal paylasim istatistiklerini sizlere gosterir. Ayrica bu eklentide guncellestirme yaptim, paylasim linki v.s gibi bolumler ekledim, cikis sayisinida bu eklenti kismindan gosterebilirsiniz.
7. Ana sayfada yada diger sayfalarda isterseniz basliga tiklanildigi gibi direk kaynak linke gidilmesini saglayabilirsiniz. bunu yaziya ozel yapabileceginiz gibi default bir ayar belirleme sansinizda bulunuyor.
8. ReCaptcha: Guvenlik kontrolu ile spam iceriklerden ve botlardan korunabilirsiniz. Eklentiye entegre olarak gelmekte ve admin ayar kismindan public, private key girerek kullanmaya baslayabilirsiniz. Ayrica tema secimi gibi bir ayarida bulunuyor, istediginiz tema rengini kullanabilirsiniz.
9. Dil yapisi: Istediginiz dilde eklentiyi kullanabilirsiniz. Suan icin ingilizce ve turkce cevirileri bulunuyor, katki saglamak isteyenler cevirisi olmayan dillere cevirerek bana gonderebilirler yada kendi sitelerinden paylasabilirler. Siteniz Turkce ise eklenti otomatik olarak turkce kullanima gececektir.
10. v.s v.s cok fazla detazya inmek istemiyorum, her sekilde guclu bir eklenti olusturmaya calistim, eksikleri varsa sonraki versiyonlarda gelistirecegim icin duzeltirim.

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.

1. Eklentiyi aktif ettikten sonra yeni bir sayfa yada yazi olusturmaniz gerekli. Bu sayfa insanlarin sitenize yazi gondermek icin kullanacagi bolumu barindiracak. Yazi yazma alanina asagidaki kodlari yapistirarak kaydedin:

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

2. ikinci adim olarak guvenlik kismini halledelim. Bunun icin oncelikle wlops ayar sayfasini acalim (ayarlari duzenle), goreceginiz gibi en ustde reCAPTCHA bilgileri icin alan bulunmakta. Dogal olarak bostur :) Siteniz icin public key ve private key anahtarlarini olusturmaniz ve buraya girmeniz gerekli. Bunun icin tiklayin: https://www.google.com/recaptcha/admin#createsite uyeliginiz yoksa yeni bir tane alin ve ayni sayfaya tekrar giderek sitenizi ekleyin. Sonrasinda Public key ve private key kodlarinin bulundugu bir sayfa cikacak karsiniza. O kodlari alarak Wlops ayar kisminda bulunan yerlerine yazin (yapistirin). Kaydedip ilk adimda olusturdugunuz sayfaya tekrar bakin. reCAPTCHA calisiyor mu ? sonraki adima gecebiliriz artik.
3. Kendinize ozel tema yapisi olusturabilirsiniz yada default gelen ayni sayfada goreceginiz “ornek tema” kismindaki kodlari alarak kullanabilirsiniz. Benim makaleci.com da kullandigim tema yapisi asagidadir, isteyenler bunu kullanabilirler.

   {{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}}

4. Kurulum tamamlandi, artik sitenizde bu eklentiyi sorunsuzca kullanabilir yada kullandirabilirsiniz. Ancak ozellestirmek isterseniz ayarlari kurcalayabilirsiniz :) Eklenen yazilara ozel tema ve diger turlu ayarlari yapabilirsiniz. bunun icin yazi duzenleme alaninda wlops ayarlari kismini kullanabilirsiniz. Eger sizde gorunmuyorsa en ustde ekran secenekleri kismindan wlops ayarlari bolumunu isaretleyin.
5. Eger css kismi bos ise asagidakileri yapistirin ve kaydedin, yoksa sekilsiz gorunur:

   <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