إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية – الدرس الثاني عشر

 إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية – الدرس الثاني عشر

إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية – الدرس الثاني عشر , في الدرس السابق تعلمنا كيف نقوم بانشاء الصفحة الرئيسية وتصميمها بناءاً على اضافة اكواد html و css , ولكن اليوم سوف نقوم بعمل المزيد في php , وسنعتمد في التنسيق على بعض كلاسات Bootstrap الذي تتيح لنا اضافة محتوى جميل.

اذا كنت لم تقرأ الدرس السابق اضغط هنا 

وفي هذا الدرس سوف نتعلم كيفية اظهار المقالات التي قمنا بنشرها في موقعنا في صفحاتنا , أو في الشريط الجانبي للمقالات .. على سبيل المثال قمت بنشر المقالة رقم واحد واثنين وثلاثة وأربعة وخمسة … الخ , اريد للزائرين أن يروا هذه المقالات مع الصورة التي وضعتها في كل مقال عند الدخول للموقع في الصفحة الرئيسية , وبناءا عليه , ستكون خطة العمل الآن كالتالي :

  1. سنتعلم كيفية اعطاء الأمر لوورد بريس من خلال كود سنقوم بكتابته باظهار المقالات كلها او عدد معين من المقالات .
  2. سنتعلم كيف نقوم بتنسيق هذه المقالات لتظهر كل اربع مقالات مثلا في صف واحد وهذا ما يسمى Display post Grid,, في الشاشات ذات العرض الكبير , ومقالين في كل صف للشاشات ذات العرض الصغير . 
  3. وقبل كل ذلك سوف نتعلم كيف يمكننا صناعة Shortcode  أو الكود المختصر في وورد بريس لكي نقوم باستخدامه في محرر وورد بريس متى نشاء .

مقال آخر سيفيدك :

العمل: إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية

  • أولا اذهب الى مجلد الثيم , قم بانشاء مجلد جديد ضمن مجلد الثيم واعطيه الاسم sections ..بعد انشاءه قم بانشاء ملف جديد ضمن هذا المجلد section وقم بتسمية الملف الجديد post-grid.php

الآن اذهب الى ملف function.php  والصق الكود التالي :

function  my_postgrid_shortcode( $attr ) {
    ob_start();
   	 	get_template_part('sections/post', 'grid');
    return ob_get_clean();
}
add_shortcode( 'postgrid', 'my_postgrid_shortcode' );

بالنسبة لشرح الكود السابق :

قمنا بعمل وظيفة في البداية اسميناها my_postgrid_shortcode وتستطيع تسميتها ما تشاء ولكن اذا غيرت الاسم, احرص على تغييره ايضاُ في السطر الأخير من الكود ..ثم اخبرنا وورد بريس بهذه الوظيفة أن يقوم بجلب محتويات الملف الذي قمنا بانشاءه في مجلد sections والذي اعطيناه الاسم post-grid … انتهى , اصبح الآن لدينا كود مختصر وهو postgrid . وسنستخدمه على الشكل التالي [postgrid].

الخطوة التاليه هي الذهاب الآن الى ملف post-grid.php  وكتابة الكود التالي :

 <div class="container">
<?php  
$wpb_all_query = new WP_Query(array(
                'post_type'=>'post',
                'post_status'=>'publish',
                'posts_per_page'=>4,
                 ));?>
<?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>

في الكود السابق سنقوم بشرحه كالتالي :

 <div class="container">
<?php  
$wpb_all_query = new WP_Query(array( هنا قمنا بانشاء استعلام وحددنا الطلب بالمصفوفة التي ستظهر لنا نوع المقالات كما ترى في الاسف 
                'post_type'=>'post',
                'post_status'=>'publish',
                'posts_per_page'=>4, عدد المقالات التي تريد اظهارها في الصفحة الواحدة
                 ));?> انتهى الاستعلام هنا 
<?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>

الآن نحتاج قبل النهاية الى اضفاء التنسيق الخاص بنا

انظر الكود التالي وقم بلصقه في style.css …..

.container a{
text-decoration: none;
}
.container h3 {
font-size:15px;
font-weight:600;
color:green;
padding:20px  10px 10px 10px;
text-decoration: none;
}
.container h3:hover{
font-size:15px;
font-weight:600;
color: black;
text-decoration: none;
}
.card {
height: 250px;
width: 100%;
}
.post-image{
height: 120px;  
width: 100%;  
background-repeat: no-repeat;
background-position: center;  
background-size: cover;
}

اقرأ أيضاً في دروس سابقة :

الآن اصبحت قابلة للاستخدام , اذهب وقم بانشاء صفحة مثلا , والصق الكود المختصر فيها كما قلنا سابقاً , لتجد أن المقالات قد ظهرت بالفعل بالنسق الذي نريد , ولا تنسى من الخيار في الكود السابق تستطيع اظهار عدد أكبر من المقالات ,

الى هنا نكون قد أنهينا هذا الدرس , تستطيع أن تقوم بالتعديل على الكود كما تريد , واعادة استخدامه , ولاتنسى , هناك دائما الطابع الفني الذي يجب أن تتعلمه حتى تتعلم أمور اكبر لتفعلها في css .. انا اقوم باعطاءك الفكرة الأولية لتقوم انت لاحقاً بالتعديل على تنسيقها كما تريد

في الدروس القادمة سوف نشرح كيفية عرض على سبيل المثال 20 مقالة في صفحة واحده مع امكانية السماح للزائرين بالتنقل من خلال ترقيم صفحات المنشورات وهذا ما يسمى pagination .

تابعنا في الدروس القادمة

الدرس القادم  تابع من هنا بعنوان , كيفية انشاء مقال مخصص في وورد بريس , او ما يسمى Custom post type.