WordPress Ürün Sayfası Yapımı (Videolu Anlatım var)

WordPress Ürün Sayfası Yapımı

WordPress İçin Katolog Yapımı

İlan sitelerinde görmüşsünüzdür. ürüne ait resimler olur, yan tarafında da ürün bilgileri gösterilir bizde buna benzer bir ürün sayfası oluşturacağız. vakit kaybetmeden hemen başlayalım..

Öncelik 2 tane eklenti kurmamız gerekiyor bu eklentiler cpt ui ve advanced custom fields pro eklentisidir, advanced custom fields pro eklentisi wordpress aramalar bölümünde çıkmaz o yüzden burdan indirebilirsiniz. diğer eklenti çıkıyor onu aramalar bölümünden aratarak indirin..

Eklentileri kurduktan sonra yan tarafta menülerini göreceksiniz. öncelikle cpt ui eklentisine tıklıyoruz burda karşımıza çıkan 3 inputa oluşturacağımız alanın adını yazıyoruz..

cpti ui alan ekleme

şimdi aşağı doğru iniyoruz ve has archive kısmını true olarak seçiyoruz. oluşturacağımız menüye
ikon eklemek isterseniz aşağıdaki menu icon bölümünden kodunu girebilirsiniz, wordpress in kendi
 icon kütüphanesi bulunuyor bu linkten ulaşabilirsiniz.

daha sonra aşağıdaki add post type butonuna basarak kaydediyoruz. yanda özel bir menü
oluştuğunu göreceksiniz.
ben daha önce eklediğim için bu sefer ismini araba koydum tabi isterseniz sile de biliyorsunuz.
bu bölüme ekle diyerek bir konu ekleyelim..

Konumuzu ekledikten sonra kurduğumuz diğer eklentiyi açıyoruz yan menüde
özel alanlar diye yazar burda 5 tane alan oluşturuyoruz bu alanların 3 nün alan tipi metin olucak
diğer 2 alandan birini seçim olarak ayarlıyoruz. bunu ayarladığımız zaman aşağıda seçimler
diye bir bölüm açılıyor aşağıda resim olarak gösterdim aynı şekilde yapın..

diğer alanımızıda galeri olarak seçiyoruz..

Sayfayı biraz aşağı indirdiğinizde konum diye bir alan göreceksiniz. burayı yazı tipi ve bizim
oluşturduğumuz araba kısmını seçiyoruz. daha sonra yandaki bölümden yayımla diyerek kaydedin..

şimdi araba bölümündeki oluşturduğunuz konuyu düzenleyin burada aşağıda yeni alanları
göreceksiniz, içlerine değerleri girip kaydedin

Bunu da yaptıktan sonra kullandığımız tema dosyasını açıyoruz, wp-content -> themes -> temanız  
 burda single.php dosyasının aynısını kopyalıyoruz ve ismini single-araba.php olarak kaydediyoruz.
 yani oluşturduğumuz alanın ismini veriyoruz. bu şekilde yaptığımız zaman bize özel bir sayfa oluyor.
 burada yapıcağımız değişiklikler diğer sayfaları etkilemiyecek. bur da get_header() ve get_footer()
fonksiyonu haricindeki herşeyi silin. kendimiz özel tema yapacağız. 

Tabi bunun için ben bootstrap kütüphanesini kullanıcam boostrap kütüphanesini burdan 
indirebilirsiniz. bize lazım olan css klasörü içindeki boostrap.min.css dosyası bu dosyayı
 temanın ana dizinine atın.

Daha sonra header.php dosyasını açın aşağıda verdiğim kodu </head> kodunun hemen üstüne
 yapıştırın. 

<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/bootstrap.min.css';?>">

Şimdi single-araba.php dosya içinde kodlarımızı yazmaya başlayabiliriz. aşağıdaki kodları
get_header ve get_footer fonksiyonları arasına yapıştırın

<div class="row"> 

<div class="col-lg-8"> 

</div>

<div class="col-lg-4"> 

</div>

</div>

Burada yaptığımız işlem 8 ve 4 genişliğinde kolon oluşturmaktır. 4 genişliğinde kolon yan menü
oluyor. şimdi bu 4 genişliğindeki kolonun içine aşağıda kodları yapıştırıyoruz

 <div class="card"> 
       <ul class="list-group list-group-flush"> 
          <li class="list-group-item"><strong>Code : </strong> <?php the_field("code");?></li>
           <li class="list-group-item"><strong>marka : </strong> <?php the_field("marka");?></li>
           <li class="list-group-item"><strong>Model : </strong> <?php the_field("model");?></li>
           <li class="list-group-item"><strong>durum : </strong> <?php the_field("durum");?></li>
       </ul>
     </div>

Yukarıdaki kodlarda advanced custom fields da oluşturduğumuz alanları
çağırdık the_field("marka") fonksiyonu ile çağırabiliyoruz, fonksiyon içine alanın ismini
belirtmemiz yeterli güzel gözüksün diye bootstrap card ve ul, li yapısı içine aldım. isterseniz
arabalar içinde oluşturduğumuz konuyu görüntüleyerek nasıl göründüğüne bakabilirsiniz..

tema içini komple sildiğimiz için konuları gösteren kodlarda silindi aşağıdaki kodları col-lg-8 classı
içine yapıştırırsanız konular gelicektir..

 <?php if(have_posts()) : while(have_posts()) : the_post();?>
       
         <h3><?php the_title();?></h3>
        <?php the_content();?>

     <?php endwhile; endif;?>

Öne çıkarılmış görsel resmi içinde aşağıdaki kodu yapıştırabilirsiniz..

<?php if(has_post_thumbnail()):?>
    
        <img src="<?php the_post_thumbnail_url();?>" alt="">
    
    <?php endif;?>

Son olarak advanced custom fields içinde oluşturduğumuz galeri alanını çekmemiz gerekiyor.
bu alan bir dizi halinde geldiği için döngüye sokuyoruz, tabi advanced custom fields in kendi sitesinde
 galeri ile ilgili kodlar mevcuttur oradan da bakabilirsiniz..

<?php 
$images = get_field('resim');
if( $images ): ?>
    <ul class="row list-unstyled mt-3">
        <?php foreach( $images as $image ): ?>
            <li class="col-lg-3">
                <a href="<?php echo esc_url($image['url']); ?>">
                     <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                </a>
                <p><?php echo esc_html($image['caption']); ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Yukardaki kodlar galeri kodlarıdır burda yapmanız gereken sadece get_field() kısmı içine
 oluşturduğumuz alanın ismini yazıyoruz
ben resim ismini vermiştim o yüzden resim yazdım. sayfada görünmesini istediğiniz yere ekleyin.

Burada çıkan resimlere tıkladığımızda resmin büyük boyutu gözüküyor yalnız sayfa
yenilenerek farklı sayfada
açılıyor bunu dinamik yapmak için magnific popup kullanabiliriz.
bu eklentiyi buradan indirebilirsiniz. dosya içinde bize lazım olan dist klasörü içindeki 
jquery.magnific-popup.js ve magnific-popup.css dosyasıdır.

Bu dosyaları temanın ana dizinine magnific adında bir klasör oluşturup onun içine atın daha sonra
dosyaları çağırmamız gerekiyor tabi bu dosyaların çalışabilmesi için jquery kütüphaneside
lazım burdan jquery kütüphanesini indirebilirsiniz

dosyaları çağırmak için aşağıdaki kodları header.php dosyası içindeki </head> kodu üstüne yapıştırın

<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/magnific/magnific-popup.css';?>">
<script src="<?php echo get_template_directory_uri() . '/magnific/jquery-3.4.1.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri() . '/magnific/jquery.magnific-popup.js';?>"></script>

Burda ne yaptık öncelikle get_template_directory_uri() fonksiyonu ile tema dizinine ulaştık
ve dosyamızın yolunu yazarak
dosyları çağırmış olduk. bu dosyaların haricinde birde mangnific klasörü içinde script.js adında
bir klasör oluşturun bu klasörün içinede aşağıdaki kodları yapıştırın..

$('.gallery-item').magnificPopup({
  type: 'image',
  gallery:{
    enabled:true
  }
});

Tabi bu klasörü de çağırmamız gerekiyor. bunu çağırmak için footer.php dosyasını açın ve
 </body> kısmının hemen üstüne aşağıdaki kodu yapıştırın bu dosyayı footer.php de çağırmamız
 gerekli çünkü konu devamında gösterildiği için resimler header.php de çağrılınca çalışmıyor..

<script src="<?php echo get_template_directory_uri() . '/magnific/script.js';?>"></script>

İşlemimiz bittimi tabiki hayır baya uzun oldu demi bende farkındayım yazıya dökünce böle çok
 uzun ve sıkıcı birşey oluyor ama bazen insanlara hazır kodlar lazım olabiliyor. o yüzden böle
 bir makale hazırladım ayrıca aşağıda videolu anlatımı da yaptım ne kadar kolay olduğunu video'da
göreceksiniz. şimdi devam edelim son olarak yapmamız gereken işlem single-araba.php içinde
oluşturduğumuz galeri kodlarının içindeki a href linkine

gallery-item adında bir class atamak, işlem
 bukadar.





Sayfayı yenileyip resimlere tıkladığınızda magnific popup ın çalıştığını göreceksiniz.
single-araba.php dosyasındaki kodların tamamı aşağıdaki gibi olucaktır..

<?php
/**
 * The template for displaying all single posts.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Aeroblog
 */
get_header(); ?>

      
<div class="row"> 

<div class="col-lg-8"> 
    
    <?php if(has_post_thumbnail()):?>
    
        <img src="<?php the_post_thumbnail_url();?>" alt="">
    
    <?php endif;?>
    
    <?php 
$images = get_field('resim');
if( $images ): ?>
    <ul class="row list-unstyled mt-3">
        <?php foreach( $images as $image ): ?>
            <li class="col-lg-3">
                <a href="<?php echo esc_url($image['url']); ?>" class="gallery-item">
                     <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                </a>
                <p><?php echo esc_html($image['caption']); ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>
    
     <?php if(have_posts()) : while(have_posts()) : the_post();?>
       
         <h3><?php the_title();?></h3>
        <?php the_content();?>

     <?php endwhile; endif;?>
  
 
</div>

<div class="col-lg-4">  

<div class="card"> 
<ul class="list-group list-group-flush"> 
  <li class="list-group-item"><strong>Code : </strong> <?php the_field("code");?></li>
   <li class="list-group-item"><strong>marka : </strong> <?php the_field("marka");?></li>
   <li class="list-group-item"><strong>Model : </strong> <?php the_field("model");?></li>
   <li class="list-group-item"><strong>durum : </strong> <?php the_field("durum");?></li>
</ul>
</div>
</div>
</div>
<?php get_footer();

Sayfanın son hali aşağıdaki gibi olacaktır..

Bu dersimizde anlatıcaklarım bukadardı videolu  anlatımı aşağıdan izleyebilirsiniz. sormak istediğiniz
sorular varsa lütfen bize yorumlarda yazın yada sorabilir.com üzerinden de sorularınızı sorabilirsiniz
herkese iyi çalışmalar..

Youtube Kanalımız : http://bit.ly/2PjNlaX

Wordpress Ürün Sayfası Yapımı Videolu Anlatım