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

إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية – الدرس الثاني عشر , في الدرس السابق تعلمنا كيف نقوم بانشاء الصفحة الرئيسية وتصميمها بناءاً على اضافة اكواد 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.

الزوار قاموا بقراءة ما يلي أيضاً

شروط الدراسة في الخارج – كل ماتحتاج معرفته حول الدراسة فى الخارج

شروط الدراسة في الخارج – كل ماتحتاج معرفته حول الدراسة فى الخارج

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

دراسة هندسة السفن – أفضل جامعات الهندسة البحرية

دراسة هندسة السفن – أفضل جامعات الهندسة البحرية

دراسة الهندسة البحرية هي التخصص الذي يتعامل مع الأمور المتعلقة بتصميم وابتكار وبناء وصيانة السفن البحرية ومعدات الملاحة يركز... قراءة المزيد

افضل التخصصات الجامعية من حيث الراتب

افضل التخصصات الجامعية من حيث الراتب

وفقًا لمركز جامعة جورجتاون للتعليم والقوى العاملة ، اختار 80٪ من الطلاب في الدراسات الجامعية تخصصهم الجامعي بناءً على فرص العمل... قراءة المزيد

تخصصات جامعية لها مستقبل | أفضل 15 تخصص جامعي

تخصصات جامعية لها مستقبل | أفضل 15 تخصص جامعي

في قائمة تخصصات جامعية لها مستقبل, قمنا بتوضيح كل الاساسيات التي يعتمدها الطلاب في اختيارهم لتخصص المستقبل الدراسي, ولذلك قمنا... قراءة المزيد

أهم التخصصات الطبية ذات الإمكانات الأكبر في المستقبل

أهم التخصصات الطبية ذات الإمكانات الأكبر في المستقبل

نقوم بإدراج أفضل التخصصات الطبية ذات الإمكانات الأكبر للتطوير في المستقبل يقول البعض إن التكنولوجيا ستحل محل 80٪ من الأطباء في... قراءة المزيد

تقديم طلب لجوء عن طريق الانترنت

تقديم طلب لجوء عن طريق الانترنت

الكثير الكثير يبحث عن طريقة تقديم طلب لجوء عن طريق الانترنت في كل دول العالم وبالأخص الفئة الشبابية يعانون من مشاكل كثيرة عند توجههم عبر... قراءة المزيد

اخترنا لك المنح التالية للتقديم عليها

وظائف الدكتوراه في تايوان الممولة بالكامل للطلاب الدوليين

وظائف الدكتوراه في تايوان الممولة بالكامل للطلاب الدوليين

تقبل الآن طلبات للحصول على وظائف الدكتوراه في تايوان الممولة بالكامل للطلاب الدوليين يمنح البرنامج منحًا دراسية كل عام لمتابعة دراسة... قراءة المزيد

منحة جامعة Diponegoro الممولة بالكامل للدراسة في أندونيسيا

منحة جامعة Diponegoro الممولة بالكامل للدراسة في أندونيسيا

منحة جامعة Diponegoro أو المعرفة بـ Undip هي دعم مالي مُقدّم للطلاب الدوليين لمتابعة درجة الماجستير التي تقدم العديد من البرامج باللغة... قراءة المزيد

منحة جامعة الأمير سلطان بتمويل كامل | شروط التقديم والقبول

منحة جامعة الأمير سلطان بتمويل كامل | شروط التقديم والقبول

تقدم منحة جامعة الأمير سلطان في كلية علوم الحاسب والمعلومات لعشرة طلاب دوليين في برنامج ماجستير الأمن السيبراني  يفتح معمل الروبوتات... قراءة المزيد

منحة جامعة الملك سعود كاملة التمويل

منحة جامعة الملك سعود كاملة التمويل

يتم اعطاء منحة جامعة الملك سعود لغير السعوديين مزايا المنح الدراسية إذا تم قبولهم في جامعة الملك سعود أيضًا ، إذا كنت من المملكة العربية... قراءة المزيد