วิธีสร้างภาพหมุน "โพสต์ล่าสุด" โดยใช้ Owl Carousel

เผยแพร่แล้ว: 2016-05-19

อย่างที่หลายๆ คนทราบ WordPress มาพร้อมกับวิดเจ็ต “โพสต์ล่าสุด” ที่จะดึงชื่อโพสต์ล่าสุดของคุณไปที่แถบด้านข้างและเชื่อมโยงไปยังโพสต์แบบเต็ม ปัญหาคือวิดเจ็ตโพสต์ล่าสุดมีข้อจำกัดอย่างมาก เกิดอะไรขึ้นถ้าคุณต้องการบางอย่างที่หรูหรากว่านี้และมีฟังก์ชันการทำงานที่มากขึ้นอีกเล็กน้อย ตัวอย่างเช่น จะทำอย่างไรถ้าคุณต้องการดึงรูปภาพเด่นและข้อความที่ตัดตอนมา และจากประเภทโพสต์ที่กำหนดเอง มีปลั๊กอินบางตัวที่จะทำสิ่งเหล่านี้ เช่น โพสต์ล่าสุดขั้นสูงหรือวิดเจ็ตโพสต์ล่าสุดแบบขยาย อันที่จริงมีปลั๊กอินที่ยอดเยี่ยมมากมายสำหรับแสดงโพสต์ และบางปลั๊กอินยังช่วยให้คุณสามารถจัดรูปแบบให้เข้ากับธีมของคุณได้

อย่างไรก็ตาม การค้นหาโพสต์นั้นค่อนข้างง่ายจริง ๆ และการไปตามเส้นทาง DIY นั้นรับประกันได้เกือบทุกครั้งว่าคุณจะได้สิ่งที่คุณต้องการอย่างแน่นอน และภาพหมุนของคุณจะได้รับการจัดสไตล์ให้เข้ากับธีมของคุณได้อย่างลงตัว

ในบทความนี้ ฉันจะแสดงวิธีสร้างภาพหมุน "โพสต์ล่าสุด" โดยใช้ไลบรารี JavaScript ของ Owl Carousel ที่เป็นที่นิยม

มาเริ่มกันเลย. หากคุณกำลังตรวจสอบตัวอย่างในไซต์ Owl Carousel สิ่งแรกที่คุณจะสังเกตได้คือตัวอย่างเหล่านี้เขียนขึ้นสำหรับไซต์ HTML ธรรมดา เพื่อให้ Owl Carousel ทำงานใน WordPress คุณจะต้องทำสิ่งต่าง ๆ แตกต่างออกไปเล็กน้อย

ขั้นแรก คุณต้องดาวน์โหลดไฟล์จากเว็บไซต์ Owl Carousel หรือแยกไฟล์จาก Github เมื่อคุณมีไฟล์ในเครื่องแล้ว คุณจะต้องเพิ่มไฟล์ CSS หลักไปยังไดเร็กทอรี /css/ ของธีมของคุณ ไฟล์นั้นคือ owl.carousel.min.css. มีไฟล์ CSS อื่นในนั้นสำหรับธีมและเป็น owl.theme.default.min.css มันไม่ใช่ไฟล์ที่จำเป็น ดังนั้น ฉันจะไม่ใช้มันในบทช่วยสอนนี้

ข้อควรจำ: คุณไม่ควรทำการเปลี่ยนแปลงบนเว็บไซต์จริง แอปพัฒนาในพื้นที่ฟรีของเรา Local จะช่วยให้คุณลดความซับซ้อนของเวิร์กโฟลว์และทดลองกับไซต์ของคุณได้อย่างปลอดภัย ลองวันนี้!

เมื่ออัปโหลดไปยังธีมของคุณแล้ว เส้นทางไปยังไฟล์ควรมีลักษณะดังนี้:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css

คุณต้องรวมไฟล์ JS . ด้วย

หากธีมลูกของคุณยังไม่มีโฟลเดอร์ /js/ ให้สร้างเลย จากนั้น เพิ่ม owl.carousel.min.js ลงในไดเร็กทอรี /js/ ของธีมเพื่อให้มีลักษณะดังนี้: /wp-content/themes/your-theme/js/owl.carousel.min.js

ถัดไป คุณต้องเพิ่ม jQuery ที่เริ่มต้นและควบคุมวงล้อของคุณ

รหัสนี้จะกำหนดค่าความต้องการเฉพาะของคุณของม้าหมุน หากคุณยังไม่มีไฟล์ JS ที่ควบคุมการกำหนดค่าสคริปต์อื่นๆ ให้สร้างไฟล์ settings.js และใส่ไว้ในไดเร็กทอรี /js/ เดียวกันกับด้านบน ที่ควรมีลักษณะดังนี้: /wp-content/themes/your-theme/js/settings.js

ถัดไป คุณจะต้องเพิ่มโค้ดต่อไปนี้ลงในไฟล์ JavaScript เดียวกันและบันทึก รหัสนี้เป็นสิ่งที่ทำให้เรียกไปยังภาพหมุนและบอกจำนวนรายการที่จะใช้ ไม่ว่าจะวนซ้ำหรือไม่ ใช้การนำทางประเภทใด และวิธีตอบสนองต่อขนาดอุปกรณ์ต่างๆ

หมายเหตุ: สำหรับบทช่วยสอนนี้ ฉันยังใช้ Font Awesome เพื่อใส่ไอคอนลูกศรบนภาพหมุน หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Font Awesome โปรดดูบทความนี้

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




คุณจะต้องลงทะเบียนและจัดคิวไฟล์ใหม่ที่เพิ่มเข้ามา หากคุณมี settings.js หรือ custom.js อยู่แล้ว ก็ควรจัดคิวไว้ในธีมของคุณแล้ว อย่างไรก็ตาม เนื่องจากคุณกำลังเพิ่มไฟล์ใหม่อย่างน้อยสองไฟล์ ( owl.carousel.min.css และ owl.carousel.min.js ) คุณจะต้องเปิด functions.php ของธีมและเพิ่มลงในธีมของคุณอย่างเหมาะสม ควรมีลักษณะดังนี้:
		




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




HTML และ PHP ที่จะแสดงภาพหมุนบนหน้าของคุณ


ส่วนนี้อาจแตกต่างกันไปตามวิธีการตั้งค่าธีมของคุณและตำแหน่งที่คุณต้องการวางภาพหมุน ฉันจะใช้เทมเพลตที่กำหนดเองซึ่งฉันสร้างโดยใช้ Bootstrap ขั้นตอนแรกของคุณที่นี่คือการกำหนดตำแหน่งที่คุณต้องการให้ภาพหมุนปรากฏขึ้น หากคุณต้องการให้มันอยู่ในหน้าแรกของคุณ คุณควรมองหา home.php หรือ frontpage.php ชื่อจะแตกต่างกันไปในแต่ละธีม ดังนั้นตรวจสอบให้แน่ใจว่าคุณเข้าใจโครงสร้างของธีมและแก้ไขไฟล์ที่ถูกต้อง เมื่อคุณทราบแล้วว่าต้องแก้ไขไฟล์ใด คุณควรทำสำเนาของไฟล์นั้นในธีมลูกของคุณและตรวจสอบให้แน่ใจว่าไฟล์นั้นอยู่ในโครงสร้างไดเร็กทอรีเดียวกัน ตัวอย่างเช่น หากไฟล์อยู่ในไดเร็กทอรีชื่อ templates ตรวจสอบให้แน่ใจว่าคุณได้สร้างโฟลเดอร์ชื่อ templates ในตำแหน่งเดียวกับธีมหลักของคุณ
		




เมื่อคุณพร้อมที่จะไป คุณสามารถเพิ่มสิ่งต่อไปนี้ในตำแหน่งที่เหมาะสม ในไฟล์ของฉัน ฉันเพิ่มสิ่งนี้ไว้ที่ด้านล่างของ frontpage.php เพื่อให้แสดงอยู่เหนือส่วนท้ายของไซต์ของฉัน


<!-- ============ 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 ============ -->




เมื่อเสร็จแล้ว คุณควรมีภาพหมุนที่แสดงรูปภาพเด่น ชื่อเรื่อง ข้อความที่ตัดตอนมา และปุ่ม "เพิ่มเติม" ที่เชื่อมโยงคุณไปยังโพสต์บล็อกฉบับเต็ม