اظهار المقالات في وورد بريس الدرس الرابع عشر

 اظهار المقالات في وورد بريس الدرس الرابع عشر

في هذا الدرس سوف نتعلم كيف نقوم بـ اظهار المقالات في وورد بريس التي قمنا بانشائها في الدرس السابق, وكذلك سنقوم بتخصص اظهار عدد المقالات بناءاً على تصنيف معين .

في الدرس الثاني عشر , قمنا بانشاء كود يظهر لنا المقالات التي نكتبها في موقعنا الالكتروني , وفي الدرس الثالث عشر , قمنا أيضاً بكتابة الكود الذي يمكننا من عمل custom post type  المقالات المخصصة في موقعنا الالكتروني .

تذكرة : قمنا في الدرس السابق بانشاء نوعين من المقالات المخصصة الأول اسمه team والثاني اسميناه locations وقمنا ايضاً بانشاء تصنيف مخصص للمقال المخصص team  اسميناه first_taxonomy . ولكي نقوم باظهار هذه المقالات نقوم بكتابة الكود التالي :

 <div class="container">
<?php  
$wpb_all_query = new WP_Query(array(
                'post_type'=>'team',
                'post_status'=>'publish',
                'first_taxonomy'=>'term_name',
                'posts_per_page'=>6,
                 ));?>
<?php if ( $wpb_all_query->have_posts() ) : ?>
    <div class="row  shadow-sm">
      <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
        <div class="col-lg-3 col-6 ">  
            <div class="card ">
                  <a href="<?php the_permalink(); ?>">
                        <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), ' ' ); ?>
                        <div class="post-image" style="background-image:url('<?php echo $url ?>');"  alt="Card image cap">
                        </div>
                        <h3>  <?php the_title();?> </h3>
                  </a>
            </div> 
          </div>
    <?php endwhile; ?>  
  <!-- end of the loop -->    
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'لم نجد الى الآن مقالات .' ); ?></p> 
<?php endif; ?>
</div> 
</div>

الدروس السابقة :

كما لاحظت في الكود السابق , قمنا باعطاء أمر لاظهار المقالات team , والتي تكون مسجلة تحت التصنيف first_taxonomy , اكتب مكان term_name اسم الادخال في هذا التصنيف.. وهكذا ,يمكنك استخدام الكود لعدد غير محدود من المقالات والتصنيفات في هذه المقالات .. وللحصول على تنسيق عرض المقالات , اضغط هنا للرجوع للدرس الثاني عشر

اما بالنسبة لاظهار المقالات في التي تحمل الاسم locations يمكنك أيضاً استخدام نفس الكود السابق ,

الآن سوف نقوم بكتابة كود يعرض كل المقالات ولكن بامكانية وضع ارقام التنقل بين الصفحات حتى لا يتم عرضها في صفحة واحده او ما يسمى paginations ..

قم بالنظر في الكود التالي :

<div class=" page-list "  > 
       <?php
       $current_page = get_query_var('paged');
       $current_page = max( 1, $current_page );
       $per_page = 20;
       $wpb_all_query = new WP_Query(array(
                       'post_type'=>'locations',
                       'post_status'=>'publish',
                       'posts_per_page' => $per_page,
                       'paged'=> $current_page,
                       'offset'=> $offset,
                       ));?>
                 <?php if ( $wpb_all_query->have_posts() ) : ?>
                 
                     <div class="row  shadow-sm" >
                      <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
                       <div class="col-lg-3 col-6 " >  
                           <div class="card">
                                <a href="<?php the_permalink(); ?>">
                                   <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), ' ' ); ?>
                                       <div class="post-image" style="background-image:url('<?php echo $url ?>');"  alt="Card image cap"></div>
                                               <div class="card-body">
                                                   <h5 class="card-title  "    style="  padding:   0px 0px 0px 0px;" ><?php the_title();?></h5></a>
                                            
                                           </div>
                                         <h5 class=""><a class="btn btn-outline-danger"href="<?php the_permalink();?>">
                                       المزيد   </a></h5>   
                                   </div>
                                 </div>
                               <?php endwhile; ?>
                             </div> 
                         <!-- end of the loop -->    
                       <div class="pagination ">
                               <?php  echo paginate_links( array(
                                   'total'   => $wpb_all_query->max_num_pages,
                                   'current' => $current_page,
                                   'type'          => 'list',
                                   'prev_text' => 'السابق',
                                   'next_text' => 'التالي'
                               ));?>
                          </div>
                         <?php endif;
                       wp_reset_postdata();?>
                     </div>

اما عن التنسيق فساترك لك الخيار بعمل لمساتك الخاصة لاظهار المحتوى باكمل وجه ,, راجع الدرس الثاني عشر للاستفادة من أكواد css ..

وهنا يكون قد انتهى الدرس الرابع عشر .

تابع معي الدرس الخامس عشر الذي سنتحدث به عن كيفية انشاء مسار التنقل او ما يسمى breadcrumb  الذي يمكنك اضافته تحت عنوان المقالات لكي تتيح للمستخدمين التنقل بشكل اسهل في موقعك الالكتروني ..