So erstellen Sie mit Owl Carousel ein „Recent Post“-Karussell

Wie die meisten von Ihnen wissen, verfügt WordPress über ein Widget „Neueste Beiträge“, das die Titel Ihrer neuesten Beiträge in eine Seitenleiste zieht und sie mit dem vollständigen Beitrag verknüpft. Das Problem dabei ist, dass das Widget „Letzte Beiträge“ sehr einschränkend ist. Was, wenn Sie etwas Eleganteres und mit etwas mehr Funktionalität brauchen? Was ist zum Beispiel, wenn Sie das vorgestellte Bild und einen Auszug aus einem benutzerdefinierten Beitragstyp abrufen möchten? Es gibt definitiv einige Plugins, die diese Dinge tun, wie z. B. Advanced Recent Posts oder Recent Posts Widget Extended. Tatsächlich gibt es viele großartige Plugins zum Anzeigen von Beiträgen, und einige ermöglichen es Ihnen sogar, sie so zu gestalten, dass sie zu Ihrem Thema passen.

Das Abfragen von Beiträgen ist jedoch eigentlich eine ziemlich einfache Sache, und wenn Sie den DIY-Weg gehen, wird fast immer garantiert, dass Sie genau das bekommen, was Sie wollen, und dass Ihr Karussell so gestaltet wird, dass es perfekt zu Ihrem Thema passt.

In diesem Artikel zeige ich Ihnen, wie Sie mit der beliebten JavaScript-Bibliothek Owl Carousel ein „Recent Posts“-Karussell erstellen.

Lass uns anfangen. Wenn Sie sich die Beispiele auf der Owl Carousel-Site ansehen, werden Sie als Erstes bemerken, dass ihre Beispiele für eine einfache HTML-Site geschrieben wurden. Damit Owl Carousel in WordPress funktioniert, müssen Sie die Dinge etwas anders machen.

Zuerst müssen Sie die Dateien von der Owl Carousel-Site herunterladen oder sie von Github forken. Sobald Sie die Dateien lokal haben, sollten Sie die Haupt-CSS-Datei zum /css/ Ihres Designs hinzufügen. Diese Datei ist owl.carousel.min.css. Es gibt dort eine weitere CSS-Datei für ein Design, und zwar owl.theme.default.min.css . Es ist keine erforderliche Datei, daher werde ich sie in diesem Tutorial nicht verwenden.

Nach dem Hochladen in Ihr Design sollte der Pfad zur Datei etwa so aussehen:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

Sie müssen auch die JS-Dateien einschließen

Wenn Ihr Child-Theme noch keinen /js/ hat, erstellen Sie jetzt einen. Fügen Sie dann owl.carousel.min.js zum Verzeichnis /js/ Ihres Themes hinzu, sodass es ungefähr so ​​aussieht: /wp-content/themes/your-theme/js/owl.carousel.min.js .

Als nächstes müssen Sie eine jQuery hinzufügen, die Ihr Karussell initialisiert und steuert

Dieser Code konfiguriert Ihre spezifischen Bedürfnisse des Karussells. Wenn Sie noch keine JS-Datei haben, die andere Skriptkonfigurationen steuert, erstellen Sie eine settings.js -Datei und legen Sie sie im gleichen /js/ wie oben ab. Das sollte in etwa so aussehen: /wp-content/themes/your-theme/js/settings.js .

Als Nächstes fügen Sie der gleichen JavaScript-Datei den folgenden Code hinzu und speichern ihn. Dieser Code ruft das Karussell auf und teilt ihm mit, wie viele Elemente verwendet werden sollen, ob eine Schleife ausgeführt werden soll oder nicht, welche Art von Navigation verwendet werden soll und wie auf unterschiedliche Gerätegrößen reagiert werden soll.

(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);


Sie müssen sich registrieren und alle neu hinzugefügten Dateien in die Warteschlange einreihen. Wenn Sie bereits eine settings.js oder custom.js hatten, sollte diese bereits in Ihrem Design eingereiht sein. Da Sie jedoch mindestens zwei neue Dateien ( owl.carousel.min.css und owl.carousel.min.js ) hinzufügen, müssen Sie die functions.php Ihres Themes öffnen und sie ordnungsgemäß zu Ihrem Theme hinzufügen. Es sollte in etwa so aussehen:
		


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' );


Der HTML- und PHP-Code, der das Karussell auf Ihrer Seite anzeigt
Dieser Abschnitt kann variieren, je nachdem, wie Ihr Thema eingerichtet ist und wo Sie das Karussell platzieren möchten. Ich werde eine benutzerdefinierte Vorlage verwenden, die ich mit Bootstrap erstellt habe. Ihr erster Schritt hier ist zu bestimmen, wo das Karussell angezeigt werden soll. Wenn Sie es auf Ihrer Homepage haben möchten, sollten Sie nach home.php oder frontpage.php suchen. Der Name variiert von Thema zu Thema, stellen Sie also sicher, dass Sie die Struktur Ihres Themas verstehen und die richtige Datei bearbeiten. Sobald Sie wissen, welche Datei Sie bearbeiten müssen, sollten Sie eine Kopie davon in Ihrem untergeordneten Design erstellen und sicherstellen, dass sie sich in derselben Verzeichnisstruktur befindet. Wenn sich die Datei beispielsweise in einem Verzeichnis namens templates befindet, stellen Sie sicher, dass Sie einen Ordner namens templates am selben Speicherort wie Ihr übergeordnetes Design erstellen.
		


Sobald Sie bereit sind, können Sie Folgendes an der entsprechenden Stelle hinzufügen. In meiner Datei habe ich dies am Ende meiner frontpage.php hinzugefügt, sodass es direkt über der Fußzeile meiner Website angezeigt wird.
<!-- ============ 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 ============ -->


Wenn Sie fertig sind, sollten Sie ein Karussell haben, das das Beitragsbild, den Titel, den Auszug und eine „Mehr“-Schaltfläche zeigt, die Sie mit dem vollständigen Blog-Beitrag verlinkt.
		



		
		
Willst du mehr Design-Tipps? Abonnieren Sie das Layout
		
Wir senden Ihnen einmal pro Woche die neuesten Designs und WordPress-Inhalte direkt in Ihren Posteingang.
		

		
		Ja bitte!