موقع المنح الدراسية العربي الأول

القائمة ☰

التسجيل

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

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

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *



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

اضافة خطوط جوجل العربية في ووردبريس في 3 خطوات |Arabic Webfonts

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

تخصيص القالب في ووردبريس customizer الدرس السادس عشر

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

انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر

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

اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php

اضافة عداد تنازلي بموقعك WordPress Countdown Timer في ووردبريس باستخدام جافا سكريبت و php , لربما تستغرب من انك تستطيع انشاء عداد تنازلي في ووردبريس... قراءة المزيد

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

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

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر في الدرس السابق تعلمنا كيف نقوم باظهار المنشورات التي نقوم... قراءة المزيد

انظر المنح التالية

القائمة الشاملة ←

منح ماجستير عبر الإنترنت من مؤسسة عبد الله الغرير وبالتعاون مع جامعة ولاية أريزونا الأمريكية

تقدم مؤسسة عبدالله الغرير للتعليم بالتعاون مع جامعة ولاية أريزونا الأمريكية مجموعة منح دراسية عبر الانترنت للطلاب العرب

زمالات ICUB في رومانيا للعلماء ممولة بالكامل

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

قمة الشرق الأوسط المتوسط التدريبي في سويسرا

قمة الشرق الأوسط المتوسط التدريبي في سويسرا , تم إطلاق القمة الصيفية بواسطة Università della Svizzera Italiana في

كورسات تمريض اون لاين لتحسين تجربة المرضى في المستشفيات

في دورة كورسات تمريض اون لاين ، ستقوم بتحليل المشكلات التشغيلية التي تواجهها المستشفيات ومعرفة كيفية معالجتها. سوف

STUDYSHOOT ©