كيفية إنشاء مكتبة "آخر مشاركة" باستخدام Owl Carousel

كما يعلم معظمكم ، يأتي WordPress مع أداة "المشاركات الأخيرة" التي ستسحب عناوين مشاركاتك الأخيرة إلى شريط جانبي وربطها بالمشاركة الكاملة. تكمن المشكلة في ذلك في أن أداة "المشاركات الحديثة" محدودة للغاية. ماذا لو كنت بحاجة إلى شيء أكثر أناقة وقليل من الوظائف؟ على سبيل المثال ، ماذا لو كنت تريد سحب الصورة المميزة ومقتطفًا ، ومن نوع منشور مخصص؟ هناك بالتأكيد بعض المكونات الإضافية التي ستفعل هذه الأشياء ، مثل المنشورات الحديثة المتقدمة أو أداة النشرات الأخيرة الموسعة. في الواقع ، هناك الكثير من المكونات الإضافية الرائعة لعرض المنشورات وبعضها سيسمح لك بتصميمها لتتناسب مع موضوعك.

ومع ذلك ، فإن الاستعلام عن المنشورات هو في الواقع أمر سهل للغاية ، وسيضمن لك السير في مسار DIY دائمًا حصولك على ما تريده بالضبط وأن دائرتك سيتم تصميمها لتلائم المظهر الخاص بك تمامًا.

في هذه المقالة ، سأوضح لك كيفية إنشاء مكتبة "المشاركات الأخيرة" باستخدام مكتبة Owl Carousel JavaScript الشهيرة.

هيا بنا نبدأ. إذا كنت تراجع الأمثلة الموجودة على موقع Owl Carousel ، فإن أول شيء ستلاحظه هو أن الأمثلة الخاصة بهم مكتوبة لموقع HTML عادي. لكي تعمل Owl Carousel في WordPress ، سيتعين عليك القيام بالأشياء بشكل مختلف قليلاً.

أولاً ، تحتاج إلى تنزيل الملفات من موقع Owl Carousel أو تقسيمها من Github. بمجرد حصولك على الملفات محليًا ، ستحتاج إلى إضافة ملف CSS الرئيسي إلى دليل /css/ السمة الخاصة بك. هذا الملف هو owl.carousel.min.css. يوجد ملف CSS آخر هناك لموضوع وهو owl.theme.default.min.css . إنه ليس ملفًا مطلوبًا ، لذلك لن أستخدمه في هذا البرنامج التعليمي.

بمجرد التحميل إلى السمة الخاصة بك ، يجب أن يبدو المسار إلى الملف كما يلي:
/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 نفسه وحفظه. هذا الرمز هو ما يجعل الاتصال بالمنصة ويخبره بعدد العناصر التي يجب استخدامها ، وما إذا كان سيتم تكرارها أم لا ، ونوع التنقل الذي يجب استخدامه ، وكيفية الاستجابة لأحجام الأجهزة المختلفة.

(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 ) ، فستحتاج إلى فتح ملف jobs.php الخاص بالقالب وإضافتهما 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 ============ -->


عند الانتهاء ، يجب أن يكون لديك دائري يعرض الصورة المميزة للمنشور ، والعنوان ، والمقتطف ، وزر "المزيد" الذي يربطك بمنشور المدونة الكامل.
		



		
		
هل تريد المزيد من النصائح حول التصميم؟ اشترك في التخطيط
		
سنرسل أحدث تصميم ومحتوى WordPress مباشرة إلى صندوق الوارد الخاص بك ، مرة واحدة في الأسبوع.
		

		
		نعم من فضلك!