Özel alan ekleme resimli anlatım

Evet arkadaşlar evet diye  başlayınca meğerse anlatıma başlamak daha kolay oluyormuş. Şimdi daha iyi anlıyorum spikerlerin  neden evet diye başladıklarını. Daha önceleri yazıya başlamak benim  biçin bir hayli  güç  oluyordu. Nereden  başlasam, nasıl anlatsam gibisinden düşünüp  dururdum. Neyse  konumuza başlayalım artık. Wordpres dersleri üzerine konular  açalı bir kaç  gün oldu  ve  Google’de Wordpres kelimesini  yazdıktan hemen sonra  karşıma  en çok çıkan sonuç  Wordpress özel alan ekleme sorgusuydu. İşin aslı  Özel alanlar  hakkında  pek bilgi sahibi değildim  hatta duymamıştım bile. Bu yüzden şuanda bu konuyu bir  acemiden dinliyorsunuz.

Nasıl eklenir, nasıl kullanılır, nerelere  ekleyebilirim ve ne tür web sitelerinde  kullanışlı olur  gibisinden sorularınıza  kesin cevap alacaksınız  bu konuda. Genelde program indirme sitelerini merak  ederiz  ve WordPress’i nasıl program indirme  sitesine dönüştürebiliriz  gibisinden merak ettiğimiz  konular olmuştur  mutlaka. İlerde  bir indirme  sitesi yapmayı düşünüyorum ve bu özellik  benim de  çok işime yarayacak. Sadece program indirme  siteleri  değil tabi burada  öğreneceğiniz çalışmaları emlak, otomobil ve cep telefonu tanıtımı yapan sitelede de kullanabilirsiniz ha  birde film siteleri de var tabi. Sanırım en iyi  film siteleri örnek olur sizin için. Filmin ismi, yapım tarihi, imdb puanı, oyuncu kadrosu vs.  gibi bilgilerin tamamını  özel alan kullanma sayesinde  kolaylıkla yazılarınıza  ekleyebilirsiniz.  Program indirme  sitesi ve  emlak  sitesi benzeri bir şekilde anlatmak istiyordum ama  en iyisi sinema  sitesi üzerinden anlatmak olacak.

Öncelikle  bu özel alanların kullanımı  size  veri tabanı açısından çok faydalı olacak. Örnek olarak  bir  film sitesinde  veri tabanına  kaydolması gereken bilgiler başlığı, oyuncuları, yapım yılı gibi  özellikler veri tabanına  kaydolması gerekir. Ama başka şekilde  özel alanlara değil de  tablolarıyla  beraber yazı editörünün içine  eklersek eğer tablonun bütün içeriği  veri tabanımıza  kaydolur. buda çok gereksiz  ve  veri tabanında defalarca  tekrar eden bir  saçmalıktır  diyebilirim. Eskiden özel alanlardan haberim olmadığı için web sitemdeki demo, download, detail ve source  butonları bütün html  etiketleri  ile beraber defalarca  veri tabanına kaydolmuş durumda. Bunları  geri  almamın bir ihtimali yok şuan. bütün yaıları  tek tek düzenlemem gerekiyor. Bu yüzden siz bir  web sitesi  açmadan önce  bu tür  detayları  araştırın biraz.

Özel  alanları kullanabilmek için öncelikle yazı  yazma  editörünün oluğu  sayfanın sağ en üst  köşesinde ‘Ekran Tercihleri’ diye bir sekme bulunuyor. Ekran Tercihlerine  tıkladıktan sonra açılan panelden ‘Özel alanları’ işaretlemeniz gerek.

Özel  alanları  etkinleştirdikten sonra  yazı yazma çerçevesinin altında  kullanmaya hazır  olacaktır. Öncelikle  program indirme sitesine  göre  anlatacağım bunu. Daha  sonra  film  siteleri  için ayrıca  bir anlatım yapacağım burada. Yeni özel  alan ekle  butonuna  tıkladığınız  zaman içinde  iki  tane kutunun olduğu bir çerçeve oluşacaktır. Soldaki  kutu  bizim mysql  veri tabanından çekeceğimiz  verinin yani  yazımıza  ait  olan meta data nın ismini  yazacağımız kutudur. Buraya  bir  defa kaydedeceğiniz  meta data  mysql veritabanımıza  kayıt olup  defalarca  aynı  şekilde  kullanabiliriz. Yani  her  yazı  için ayrı  ayrı  download, download1, download2 diye tekrar  etmenize  gerek kalmıyor. Sol kutucuğa  eklediğiniz  değerler mysql  içinde  her yazının yanına  bir  tablo şeklinde  ekleniyor. Download  sitesi  için kullanacağınız  meta data ya  ‘download’  olur  yada ‘indir’  olur. Ben anlatımda  download kelimesini kullanacağım. Ayrıca kendi  sitemde  kullandığım butonlara  göre bir anlatım hazırlıyorum. Download, Kaynak ve Demo olmak üzere  üç tane meta  data ekleyeceğim  özel alanlara. Bu özel alanları eklerken sırf  deneme  amaçlı yapmaya çalışmayın. Çünkü sol tarafta eklediğiniz her kelime  mysql tabanınıza  yükleniyor. Bunları hazırlarken localhostta  deneme yapıyorum o yüzden herhangi bir sıkıntı yok benim için.

Yukarıdaki resimde de  gördüğünüz gibi özel  alanlarımızın isimlerini  ekledik ve bu isimler  veritabanımıza da kayıt oldu. Sağ tarafta da download, demo ve kaynak kelimelerinin yani meta  anahtarlarının açıklamalarını (link) ekledik. Sıra geldi bu verileri yazı içine çekmeye. WordPress Yönetim paneli > Görünüm > Düzenleyici adresinden  temamızın tekil yazı yani single.php dosyasını açıp  içine  aşağıdaki kodu eklememiz gerekiyor.

<?php if ( get_post_meta( get_the_ID(), 'Download', true ) ) : ?>
    <a href="<?php echo get_post_meta( get_the_ID(), 'Download', true ) ?>" target="_blank">Download
    </a>
<?php endif; ?>

<?php if ( get_post_meta( get_the_ID(), 'Kaynak', true ) ) : ?>
    <a href="<?php echo get_post_meta( get_the_ID(), 'Kaynak', true ) ?>" target="_blank">Kaynak
    </a>
<?php endif; ?>

<?php if ( get_post_meta( get_the_ID(), 'Demo', true ) ) : ?>
    <a href="<?php echo get_post_meta( get_the_ID(), 'Demo', true ) ?>" target="_blank">Demo
    </a>
<?php endif; ?>

Kodları  bu haliyle eklediğiniz  zaman eğer  download, demo ve kaynak idelerine  ait  veri var  ise  a elementleri  arasında  göster  demek oluyor. Ayrıca hedef olarak  _blank  yani linkler yeni sekmede  açılsın olarak belirledik. Siz  isterseniz  nofollow  yada  dofollow  gibi özellikler  ekleyerek bu bağlantıların tamamının nasıl olacağını belirleyebilirsiniz herhangi bir eklentiye  ihtiyaç duymadan. Deneme  olarak bu şekilde  ekleyip  açtığım sayfada linkler  aşağıdaki gibi  göründü.

Burası sadece bir denemedir  yazdığım makalenin yazısı ve üstünde de Download, Kaynak ve Demo linkleri var. Linklerimin kırmızı olmasının sebebi tema ile  kaynaklı olan bir durum. Mouse ile Kaynak yazısının üstüne geldiğimde link olduğu için altında hemen çigi  göründü. Şimdi sıra geldi bunlara  Css  kodları eklemeye. Bu şekilde  pek bir işe yarayacağa benzemiyor. Aşağıdaki php kodlarının tamamını  div  class=”butonlar” adlı çerçeveye aldık ve her  butonada  ayrı bir id  belirledik. Butonların üzerinde  yazan Download, Demo ve Kaynak yazılarını Css kodlardan değiştirebilirsiniz. Ayrıca dilerseniz  Font Awesome kodlarını da ekleyip ikonlu buton olarak ta kullanabilirsiniz.

Php veri çağırma kodu : 

Single.php  dosyasının içinde  istediğiniz herhangi bir yere ekleyin.

<div class="butonlar">
<?php if ( get_post_meta( get_the_ID(), 'Download', true ) ) : ?>
   <li id="downloadCerceve"><a href="<?php echo get_post_meta( get_the_ID(), 'Download', true ) ?>" target="_blank">Download </a></li>
<?php endif; ?>
<?php if ( get_post_meta( get_the_ID(), 'Kaynak', true ) ) : ?>
   <li id="kaynakCerceve"><a href="<?php echo get_post_meta( get_the_ID(), 'Kaynak', true ) ?>" target="_blank">Kaynak</a></li>
<?php endif; ?>
<?php if ( get_post_meta( get_the_ID(), 'Demo', true ) ) : ?>
    <li id="demoCerceve"><a href="<?php echo get_post_meta( get_the_ID(), 'Demo', true ) ?>" target="_blank">Demo</a></li>
<?php endif; ?>
</div>

 Bu da butonlarımızın Css kodları : 

Temanızın style.css dosyasının içine  aşağıdaki kodları  ekleyin yada kendinize  göre düzenledikten sonra ekleyin. Kendi sitemde kullandığım butonların Css kodları bunlar.

.butonlar {
  width:100%;
  height:55px;
  padding:0.1%;
  margin: 0 auto;
  position:relative;
  display:block;
}
li#downloadCerceve, li#kaynakCerceve, li#demoCerceve{
  width:32%;
  height:50px;
  overflow:hidden;  
  cursor: pointer;
  overflow:hidden;
  border: 1px solid #63be80;
  background: #63be80;
  margin:0.2%;
  list-style:none;
  float:left;
  padding: 7px 0px 15px 0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63be80', endColorstr='#63be80');
  background: -ms-linear-gradient(top, #63be80 0%, #63be80 50%, #63be80 51%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #63be80), color-stop(50%, #63be80), color-stop(51%, #63be80));
  background: -moz-linear-gradient(top, #63be80 0%, #63be80 50%, #63be80 51%);
  background: -o-linear-gradient(top, #63be80 0%, #63be80 50%, #63be80 51%);
  background: linear-gradient(top, #63be80 0%, #63be80 50%, #63be80 51%);
  -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 1px 2px #515151;
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 1px 2px #515151;
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 1px 2px #515151;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #3c734d;
  font: bold 24px Century Gothic, Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  outline: none;
  text-align:center;
  vertical-align: middle;
}
#downloadCerceve:hover, #kaynakCerceve:hover, #demoCerceve:hover{
   border-color: #60b87c;
   background: #60b87c;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60b87c', endColorstr='#60b87c');
   background: -ms-linear-gradient(top, #60b87c 0%, #60b87c 50%, #60b87c 51%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #60b87c), color-stop(50%, #60b87c), color-stop(51%, #60b87c));
   background: -moz-linear-gradient(top, #60b87c 0%, #60b87c 50%, #60b87c 51%);
   background: -o-linear-gradient(top, #60b87c 0%, #60b87c 50%, #60b87c 51%);
   background: linear-gradient(top, #60b87c 0%, #60b87c 50%, #60b87c 51%);
   color: #3c734d;
}

#downloadCerceve a, #kaynakCerceve a, #demoCerceve a   {
   width:200px;
   height:50px;
   position:relative; 
   margin-top:-35px; 
   float:left;
   opacity:0;   
}
#downloadCerceve:before  {
  content: 'Download';   
}
#kaynakCerceve:before {
  content: 'Kaynak';  
}
#demoCerceve:before {
  content: 'Demo';  
}

Buraya  kadar eğer sorunsuz bir şekilde yaptıysanız butonlarınızın görüntüsü aşağıdaki resim gibi görünecektir.

Sanırım buraya  kadar anlattıklarımızı  dikkatlice  okuduysanız  Wordpress temasına özel alanların nasıl eklendiğini  az çok anlamışsınızdır.

Sidebara  Ekleme : 

Özel  alan kodlarını illa yazı içine eklemelisiniz  diye bir  şart yok. Mesela WordPress.org  sitesinde  dikkat ettiyseniz eğer Tema Download linkleri  yazı içine  değil de sidebar  bölümüne  eklenmiş. Hatta buna benzer bir kaç tane site de görmüştüm. Farz edelim ki bir download  sitesi  değil de  hem makale  yayını yapan hem de ara  sıra program, tema, oyun gibi indirilebilir  içerikler paylaşımı yaptığınız  bir siteniz var benim gibi.

Demo ve download butonlarının yazı içinde değilde WordPress.org benzeri sidebarda olmasını istiyorsanız  eğer bunun için  bu kodları  olduğu gibi sidebar bölümüne  ekleyebilirsiniz. Bu kodları kullanırsanız  eğer hangi yazıya  özel alan eklemiş iseniz sadece o yazıda  butonlar  görünecektir. Sayfalarda ve yazılarda  bu kodlarla  herhangi bir sorun çıkmıyor. Yalnız ana sayfada butonlar  gözüküyor. Bu bana  biraz mantıksız  gelse de  durumu anlamış değilim. Şu an için sidebarda sadece  bu yazı için download butonları görünüyor ve bu  buton da bir tek bu yazıda ve ana sayfada  görünüyor. Eğer birkaç tane  yazıya  daha eklersem ana sayfada hangi buton çıkacak ? Bunu denemek bile istemiyorum.

Ana sayfada butonların görünmemesi  için başka  yollar var elbette. Mesela  anasayfa için özel bir  sidebar oluşturup sadece o sidebarı ansayfa için kullanırsanız  eğer sorun kalmayacaktır. Buradaki yazımızda nasıl sidebar  diğer bir deyişle  widget alanları oluşturmayı  öğrenebilirsiniz.

Widget alanı oluşturmak  tabi ki son çare değil. Bu konuda biraz daha araştırma yaptıktan sonra ana sayfada  sorun çıkarmayan bir tanesini de bulduk sizler için.

<div class="butonlar">
<?php $ozelalan = get_post_meta(get_the_ID(), 'Download', true); ?>
<?php if ( $ozelalan && is_single() ): ?>
<li id="downloadCerceve"><a href="<?php print $ozelalan; ?>" target="_blank">Download </a></li>	 
<?php endif; ?>
<?php $ozelalan = get_post_meta(get_the_ID(), 'Kaynak', true); ?>
<?php if ( $ozelalan && is_single() ): ?>
<li id="kaynakCerceve"><a href="<?php print $ozelalan; ?>" target="_blank">Kaynak</a></li>	 
<?php endif; ?>
<?php $ozelalan = get_post_meta(get_the_ID(), 'Demo', true); ?>
<?php if ( $ozelalan && is_single() ): ?>
<li id="demoCerceve"><a href="<?php print $ozelalan; ?>" target="_blank">Demo</a></li>	 
<?php endif; ?>
</div>

Film sitesi benzeri açıklama  bölümü hazırlamak :

Film sitesi içinde  fazladan bir  özelik eklemenize gerek yok. Yapmanız  gereken eklediğiniz özel alanlara göre  aşağıdaki kodları çoğaltmak.  Ben rastgele bir kaç tane  bölüm ekledim yapım yılı, senarist, yapımcı ülke, yönetmen tür, filmin açıklaması şeklinde. Bunun gibi isterseniz  bir  program için açıklama  bölümü oluşturun isterseniz  film detayları  girin.

<div class="sinema">
<?php if ( get_post_meta( get_the_ID(), 'Konu', true ) ) : ?>
   <li>Filmin bilgisi ve konusu :<?php echo get_post_meta( get_the_ID(), 'Konu', true ) ?></li>
<?php endif; ?>
<?php if ( get_post_meta( get_the_ID(), 'OrjinalAdi', true ) ) : ?>
   <li>Orjinal Adı :<?php echo get_post_meta( get_the_ID(), 'OrjinalAdi', true ) ?></li>
<?php endif; ?>
<?php if ( get_post_meta( get_the_ID(), 'YapimciUlke', true ) ) : ?>
   <li>Yapımcı Ülke :<?php echo get_post_meta( get_the_ID(), 'Yapimciulke', true ) ?></li>
<?php endif; ?>
<?php if ( get_post_meta( get_the_ID(), 'Tarih', true ) ) : ?>
   <li>Yapım yılı ve gösterim tarihi :<?php echo get_post_meta( get_the_ID(), 'Tarih', true ) ?></li>
<?php endif; ?>
<?php if ( get_post_meta( get_the_ID(), 'Yonetmen', true ) ) : ?>
   <li>Yönetmen :<?php echo get_post_meta( get_the_ID(), 'Yonetmen', true ) ?></li>
<?php endif; ?>
<?php if ( get_post_meta( get_the_ID(), 'Senarist', true ) ) : ?>
   <li>Senarist :<?php echo get_post_meta( get_the_ID(), 'Senarist', true ) ?></li>
<?php endif; ?>
<?php if ( get_post_meta( get_the_ID(), 'Tur', true ) ) : ?>
   <li>Türü :<?php echo get_post_meta( get_the_ID(), 'Tur', true ) ?></li>
<?php endif; ?>
</div>

Son olarak bir  forumda  rastladığım soru  üzerine  bu kodu da paylaşmak istedim. Bu  bölümleri  kullanarak  resim ekleme diye bir  soru sormuştu bir arkadaş. Aşağıdaki kodu kullanarak resimler de ekleyebilirsiniz.

<?php if ( get_post_meta( get_the_ID(), 'resim', true ) ) : ?>
    <a href="<?php echo get_post_meta( get_the_ID(), 'resim', true ) ?>" rel="bookmark">
        <img class="resim" src="<?php echo get_post_meta( get_the_ID(), 'resim', true ) ?>" alt="<?php the_title(); ?>" />
    </a>
<?php endif; ?>