Owl Carousel kullanarak "Son Gönderi" atlıkarınca nasıl oluşturulur

Çoğunuzun bildiği gibi, WordPress, en son gönderilerinizin başlıklarını bir kenar çubuğuna çeken ve bunları tam gönderiye bağlayan bir “Son Gönderiler” widget'ı ile birlikte gelir. Bununla ilgili sorun, Son Gönderiler widget'ının çok sınırlayıcı olmasıdır. Ya biraz daha zarif ve biraz daha işlevsel bir şeye ihtiyacınız varsa? Örneğin, Öne Çıkan Görseli ve bir alıntıyı ve özel bir gönderi türünden almak isterseniz ne olur? Gelişmiş Son Gönderiler veya Genişletilmiş Son Gönderiler Widget'ı gibi bunları yapacak kesinlikle bazı eklentiler var. Aslında, gönderileri görüntülemek için çok sayıda harika eklenti var ve bazıları onları temanıza uyacak şekilde biçimlendirmenize bile izin veriyor.

Bununla birlikte, gönderileri sorgulamak aslında oldukça kolay bir şeydir ve Kendin Yap rotasına gitmek neredeyse her zaman tam olarak istediğinizi elde ettiğinizi ve atlıkarıncanızın temanıza mükemmel şekilde uyacak şekilde tasarlanacağını garanti eder.

Bu yazıda, popüler Owl Carousel JavaScript kitaplığını kullanarak bir "Son Gönderiler" atlıkarıncasını nasıl oluşturacağınızı göstereceğim.

Başlayalım. Owl Carousel sitesindeki örnekleri incelerseniz ilk fark edeceğiniz şey örneklerin sade bir HTML sitesi için yazılmış olmasıdır. Owl Carousel'in WordPress'te çalışmasını sağlamak için işleri biraz farklı yapmanız gerekecek.

Öncelikle Owl Carousel sitesinden dosyaları indirmeniz veya Github'dan çatallamanız gerekiyor. Dosyaları yerel olarak edindikten sonra, ana CSS dosyasını temanızın /css/ dizinine eklemek isteyeceksiniz. Bu dosya owl.carousel.min.css. Orada bir tema için başka bir CSS dosyası var ve bu owl.theme.default.min.css . Bu gerekli bir dosya değil, bu yüzden onu bu derste kullanmayacağım.

Temanıza yüklendikten sonra dosyanın yolu şöyle görünmelidir:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

Ayrıca JS dosyalarını da eklemeniz gerekir.

Alt temanızın zaten bir /js/ klasörü yoksa devam edin ve şimdi bir tane oluşturun. Ardından, aşağıdaki gibi görünmesi için owl.carousel.min.js temanızın /js/ dizinine ekleyin: /wp-content/themes/your-theme/js/owl.carousel.min.js .

Ardından, atlıkarıncanızı başlatan ve kontrol eden bazı jQuery eklemeniz gerekir.

Bu kod, atlıkarınca için özel ihtiyaçlarınızı yapılandıracaktır. Diğer komut dosyası yapılandırmalarını kontrol eden bir JS dosyanız yoksa, bir settings.js dosyası oluşturun ve onu yukarıdaki gibi aynı /js/ dizinine koyun. Bu şuna benzemelidir: /wp-content/themes/your-theme/js/settings.js .

Ardından, aynı JavaScript dosyasına aşağıdaki kodu ekleyip kaydedeceksiniz. Bu kod, karusele çağrıyı yapan ve ona kaç öğenin kullanılacağını, döngü yapılıp yapılmayacağını, ne tür bir navigasyon kullanılacağını ve farklı cihaz boyutlarına nasıl yanıt verileceğini söyleyen şeydir.

(function($) {
"use strict";

$(document).ready(function() {

$('#blog .owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
dots: false,
nav: true,
navText: ['<i class="fa fa-arrow-left fa-2x"></i>','<i class="fa fa-arrow-right fa-2x"></i>'], //Note, if you are not using Font Awesome in your theme, you can change this to Previous & Next
responsive:{
        0:{
            items:1,
            //nav:true
        },
        767:{
            items:2,
            //nav:false
        },
    }
});
})
})(jQuery);


Eklenen tüm yeni dosyaları kaydetmeniz ve sıraya koymanız gerekir. Zaten bir settings.js veya custom.js , temanızda zaten kuyruğa alınmış olmalıdır. Ancak, en az iki yeni dosya eklediğiniz için ( owl.carousel.min.css ve owl.carousel.min.js ), temanızın functions.php dosyasını açmanız ve bunları temanıza uygun şekilde eklemeniz gerekir. Bunun gibi bir şeye benzemeli:
		


add_action( 'wp_enqueue_scripts', 'yourtheme_scripts');
function yourtheme_scripts(){
wp_enqueue_script('owl.carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '1.0.0', true );
wp_enqueue_script('settings', get_template_directory_uri() . '/js/settings.js', array(), '1.0.0', true );
}

function yourtheme_styles() {
wp_register_style('owl-carousel', get_template_directory_uri() .'/css/owl.carousel.css', array(), null, 'all' );
wp_enqueue_style( 'owl-carousel' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_styles' );


Döngüyü sayfanızda görüntüleyecek HTML ve PHP
Bu bölüm, temanızın nasıl kurulduğuna ve atlıkarıncayı nereye koymak istediğinize bağlı olarak değişebilir. Bootstrap kullanarak oluşturduğum özel bir şablon kullanacağım. Buradaki ilk adımınız, atlıkarıncanın nerede görünmesini istediğinizi belirlemektir. Ana sayfanızda olmasını istiyorsanız, home.php veya frontpage.php dosyasını aramalısınız. Ad, temadan temaya değişir, bu nedenle temanızın yapısını anladığınızdan ve doğru dosyayı düzenlediğinizden emin olun. Hangi dosyayı düzenleyeceğinizi öğrendikten sonra, onun alt temanızda bir kopyasını oluşturmalı ve aynı dizin yapısında bulunduğundan emin olmalısınız. Örneğin, dosya templates adlı bir dizinde bulunuyorsa, ana temanızla aynı konumda templates adlı bir klasör oluşturduğunuzdan emin olun.
		


Gitmeye hazır olduğunuzda, uygun yere aşağıdakileri ekleyebilirsiniz. Dosyamda, bunu frontpage.php altına ekledim, böylece sitemin altbilgisinin hemen üstünde görüntülenecek.
<!-- ============ BLOG CAROUSEL START ============ -->
<section id="blog">
  <div class="container">
     <div class="row"> <!-- this is the carousel’s header row -->
        <div class="col-sm-12 text-center">
           <h5>Recent posts</h5>
           <h1>Blog</h1>
        </div>
     </div>
     <div class="row"> <!-- this row starts the carousel-->
        <div class="col-sm-12">
           <div class="owl-carousel">
              <!-- query the posts to be displayed -->
              <?php $loop = new WP_Query(array('post_type' => 'post', 'posts_per_page' => -1, 'orderby'=> 'ASC')); //Note, you can change the post_type to a CPT and set the number to pull and order to display them in here. ?>
              <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                 <div class="recent-post"> <!-- I don’t have any unique css here, just needed to make sure every recent post gets wrapped as a block element.  However, you may want to add your own css here... -->
                    <?php
<a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
          <p><a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">More</a></p>
</div> <!-- End the Recent Post div -->
              <?php endwhile; ?>
           </div> <!-- End the Owl Carousel div -->
        </div> <!-- End the recent posts carousel row -->
        <div class="row"> <!-- start of new row for the link to the blog -->
           <div class="col-sm-12 text-center">
              <a href="blog.html" class="btn btn-primary">Read All Posts</a>
           </div>
        </div>
     </div> <!-- End blog button row -->
</section>  <!-- ============ RECENT POSTS CAROUSEL END ============ -->


Bitirdiğinizde, gönderinin öne çıkan resmini, başlığını, alıntısını ve sizi tam blog gönderisine bağlayan bir “Diğer” düğmesini gösteren bir atlıkarıncanız olmalıdır.
		



		
		
Daha fazla tasarım ipucu ister misiniz? Düzene Abone Ol
		
En yeni tasarımı ve WordPress içeriğini haftada bir doğrudan gelen kutunuza göndereceğiz.
		

		
		Evet lütfen!