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.
Ş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
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
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..
Öne çıkarılmış görsel resmi içinde aşağıdaki kodu yapıştırabilirsiniz..
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..
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
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..
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..
İş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 |
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
Yorumlar
Yorum Gönderme