Dün WPBeginner Kuponlarının lansmanından sonra, tamamen ana WPBeginner sitesi için her şeyi entegre eden ve yine de iyi görünen en iyi tasarımı oluşturmaya odaklandık. Sitemize bir kaydırıcı eklemek istedik, ancak her betiğin bir sınırlaması vardı. Daha sonra 99designs, SitePoint ve Flippa’dan harika Matt Mickiewicz’e (WPBeginner’daki Röportajına bakın) bizi SlideDeck’in (web’deki açık ara en iyi kaydırıcı komut dosyası) yaratıcıları olan Digital Telepathy’deki insanlara yönlendirdiği için teşekkür ederiz. SlideDeck ile biraz oynadık ve çok etkilendik. Yeni başlayanlar için harika çünkü kaydırıcı oluşturmak için kolay sürükle-bırak arayüzünü kullanmanızı sağlayan eksiksiz bir WordPress eklentisi sunuyor. Bununla birlikte, geliştiriciler için de harika çünkü geliştiricilere kendi ihtiyaçlarına göre özelleştirmeleri için ek özgürlük sunan bir jQuery sürümüne sahip. Bu makalede, SlideDeck WordPress Eklentisi ile tek bir kod satırını düzenlemeden WordPress’te nasıl kaydırıcı oluşturabileceğinizi göstereceğiz.
Bu eklenti ile neler yaratabileceğinizi görmek istiyorsanız, işte bir CANLI Demo.
Adım 1. Eklentinin İndirilmesi ve Kurulması
SlideDeck’in Web sitesine gidin ve eklentiyi indirin. ÜCRETSİZ sürümü ve destek ve çok daha fazla özellik sunan PRO sürümü var. Ne zaman yeni bir ürünle çalışsak, her zaman destek sürümünü alıyoruz. Geliştirmemizde birkaç kez takıldık ve destekleri inanılmazdı ve bize yardımcı oldu. PRO sürümünü almanızı şiddetle tavsiye ediyoruz çünkü aşağıdaki gibi harika özellikler içeriyor: Dikey Slaytlar, Dokunmatik Ekran Desteği, Destek, RSS Beslemesi Akıllı Slayt Desteleri, Arka Plan Görüntü Desteği ve çok daha fazlası.
Eklentiyi indirdikten sonra, devam edin ve eklentiyi kurun/etkinleştirin. ( WordPress Eklentisi Kurmak için Adım Adım Kılavuzumuzu izleyin)
Bir Kaydırıcı Oluşturalım
Eklentiyi etkinleştirdikten sonra, SlideDeck adında yeni bir sekme eklendiğini göreceksiniz. Gidelim ve Yeni SlideDeck Ekle’ye tıklayalım. Yazı Yazma Paneline benzeyen bir ekrana yönlendirileceksiniz.
Yaptığımız şey, içeriği slaydımıza eklemek ve ona bir başlık vermekti. Özel bir arka plan görüntüsüne sahip olabilirdik (PRO Özelliği), ancak basitlik uğruna bunu yapmadık. Bu eklentinin kutudan çıktığında neler yapabileceğini göstermek istiyoruz. Bu bizim ilk standart slaytımızdı. Demomuza eklediğimiz bir sonraki slayt dikey bir slayttı (PRO Özelliği). Dikey slaytlar temelde bir slayt içinde birden fazla slayttır. Yukarıdaki resme bakarsanız, Dikey Slayta Dönüştür adlı bir düğme var. Bir sonraki slaytımız için tıkladığımız düğme buydu ve eklenen şey buydu:
Şimdi işlemi istediğiniz kadar slayt için tekrarlayın. Slaytları oluşturmayı tamamladıktan sonra, slaytları sitenizde yayınlamak için SlideDeck Seçeneklerine bakalım. Bunu Slaytları düzenle ekranınızın sağ tarafında göreceksiniz.
Otomatik oynatmayı seçebilir, klavye navigasyonuna izin verebilir, fare kaydırma tekerleği navigasyonuna izin verebilir, animasyon hızını ayarlayabilir, harika görünümlerinden birini seçebilir ve hangi slayttan başlamak istediğinizi seçebilirsiniz. Ayrıca sürükle-bırak ile slaytları yeniden sıralayabilirsiniz. Temanıza eklemeniz için kod içeren bir tema kod parçacığı olduğunu görüyorsunuz. Bunu temanızda istediğiniz yere ekleyebilirsiniz. Bir dakika, SlideDeck’i WordPress’e entegre etmek için tek bir kod satırını bile düzenlemeniz gerekmeyecek dememiş miydik? Evet, bu eğitimde sözlerimize sadık kalacağız. Tek bir kod satırını bile düzenlemeden WordPress’inize nasıl entegre edebileceğinizi gösterelim.
SlideDeck’i WordPress Yazılarına/Sayfalarına Entegre Etme
Yeni Bir Gönderi veya Sayfa Oluşturun. Sağ taraftaki kenar çubuğuna yeni bir SlideDeck kutusu eklendiğini göreceksiniz.
SlideDeck Ekle düğmesine tıklayın. Eklemek istediğiniz Kaydırıcıyı seçin ve gönderiyi Yayınlayın. Gönderiyi yayınladığınızda, kaydırıcınız Klasik Görünüm ile aşağıdaki gibi görünecektir:
Yapışkan bir yazı, tam genişlikte sayfa şablonu veya istediğiniz başka bir şey üzerinde kullanabilirsiniz. Ama durun, burada bitmiyor. Biraz daha ileri gidelim.
Öne Çıkan Gönderiler içeren bir Kaydırıcı Ekleme
Öne çıkan yazı kaydırıcıları blog yazarlarının favorileridir. Bu özelliği çok sayıda blogda görüyoruz, ancak bu kaydırıcıların çoğu kullanıcılar için sınırlı kontrol ile temalara kodlanmış durumda. SlideDeck ile bunu yapmanın ne kadar kolay olduğuna bir göz atalım. En son gönderilerinizi, en popüler gönderilerinizi, öne çıkan gönderilerinizi (sizin seçtikleriniz) göstermenizi sağlayan “Smart SlideDeck” adlı dinamik bir kaydırıcı ekleyebilir, bunu kategoriye göre sıralayabilir, hatta kaydırıcınıza eklemek için başka bir siteden RSS Beslemelerini içe aktarabilirsiniz. Çeşitli görünümleri arasından seçim yapabilir, farklı gezinme türlerini seçebilir ve hemen hemen 5 dakikadan daha kısa bir sürede bir kaydırıcı hazırlayabilirsiniz. Size nasıl yapıldığını gösterelim. Eğitimimizde, Yazılarımızdan Öne Çıkan girişleri görüntüleyeceğiz.
Mevcut gönderilerinize gidin ve 5 gönderi seçin ve kutuyu işaretleyerek bunları Akıllı Slayt Güverteleri’ne ekleyin.
Şimdi, SlideDeck Panelinize gidelim ve Akıllı SlideDeck Ekle’ye tıklayalım. Dış Görünümünüzü Seçin:
Kaç slayt görüntülemek istediğinizi, oynatma seçeneklerini, içerik türünü seçin (Gönderiden Öne Çıkan girişler olarak nasıl sahip olduğumuza bakın). Resim seçenekleri, başlık uzunluğu, alıntı uzunluğu vb. gibi İçerik Ayarlarını seçebilirsiniz. Gezinme Stillerinizi seçin ve Yayınla’ya tıklayın.
Bunun üzerindeki kodu düzenlemeniz gerekir. Kenar Çubuğu, Tema Snippet Kodu’ndan kodu alın ve temanıza yapıştırın. Büyük olasılıkla index.php dosyanızın en üstüne. Örnek bir kod şöyle görünecektir:
<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>
Bu, kaydırıcınızı yalnızca ana sayfanızda görüntüler.
SlideDeck’in gerçekten harika demolarını görmek istiyorsanız, SlideDeck’in web sitesini ziyaret edin ve bir göz atın.
Eklentiyi uyguladıkça eklenti hakkındaki düşüncelerinizi bize bildirin.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
delpihero says
I put <?php if (is_home()) { slidedeck( 72, array( ‘width’ => ‘849px’, ‘height’ => ‘300px’ ) ); } ?>
at the top of index.php and it worked but its at the top, i need it in the middle, so I place the code where I need it and it shows up but the slider does not work so what have I done wrong.
I also tried putting this in another directory library/includes/featured-page-php but that has the same corrupted effect
CaroletteGoodlowWright says
So I am needing help. I have slide deck pro and I would like to customize it at place it in the header next to my logo. but i do not know how to code it properly.
my site is http://www.chrisrogersconstruction.com can you help? I cannot find any help on this issue.
Thanks,
wpbeginner says
@CaroletteGoodlowWright Sure we can help for a fee. We don’t offer free customization as part of our tutorial. Please use the contact form if you are interested in hiring us.
web design thailand says
The pro version of the plugin is a bit expensive but really worth it. We start to use here and we are very happy about it !
EnkShahbazMehdi says
Jason, you can search for “Sticky Trending Bar using JQuery” and u may find it.
Jason says
Great post! Funny how things just appear… I was looking for a good slider.
What is the BAR Plugin you use below?
Editorial Staff says
It’s not a plugin. It’s custom code that we added on our site.
Yönetici
Adriana says
My template came with an integrated slider too. I didn’t know you can take it down and replace it with another slider.
I have to try in my posts so see exactly how it works before replacing my main slider – I guess.
Thank for the tutorial.
S says
Would it be possible to integrate this into the header only and use it to display an array of header images with link to different sections of the website?
I am trying to figure out how to do this but no luck!
Editorial Staff says
Yes it is possible. You would have to create a slider, then edit your header.php file to paste the code. You can use the smart slider option which only shows images… and display your most recent posts … most featured posts etc.
Yönetici
Michele Welch says
Awesome tutorial! I have a slider integrated into my template, but always had issues with it so had to take it down. This definitely seems like a good alternative! Will definitely give it a try.
I think the best part is that you can add it to your posts. This way you have integrated related posts and decrease bounce rates.
Thanks for sharing this application!