انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر 2022 – 2023.. STUDYSHOOT
الوصول والتواصل معنا STUDYSHOOT

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

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

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

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

بداية اذهب الى مجلد الثيم , وقم بانشاء ملف جديد بالاسم archive.php في حال كنت قد انشأت هذا الملف مسبقاً فلتبدأ معنا بالعمل

أول كود نريد كتابته هو , ترويسة الصفحة , لاظهار اسم المقال او اسم الكاتب أو اسم التصنيف الذي سيُعرض في الصفحة

اليك الكود التالي الذي ستقوم انت بلصقه في صفحة الأرشيف

    <header class="archive-page">
        <div class="container ">
             <?php if ( have_posts() ) : ?>
            <?php the_archive_title( '<h1 class="page-title">', '</h1>' ); the_archive_description( '<p class="taxonomy-description">', '</p >' ); ?>
        <?php endif; ?>

الكود السابق كان لاظهار اسم الارشيف , وكذلك وصف الارشيف

الخطوة التاليه في انشاء صفحة الأرشيف في وورد بريس هي كتابة الكود الذي سيظهر لنا المحتوى .. قم بلصق الكود التالي اسفل الكود السابق مباشرة

<div class="row" >
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="col-lg-4  "><br>
                    <div class="card"> 
                        <a href="<?php the_permalink(); ?>">
                        <?php 
                            if (has_post_thumbnail() ): 
                                $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), ' ' );  ?>
                                <img   src="<?php echo $url ?>" alt="Studyshoot-image"  >
                        <?php endif; ?>
                        <div class="card-body">
                        <h5 class="card-title"> <?php the_title(); ?></h5>
                        </a>
                        
                        <small  >
                            <?php  
                            $categories = get_the_category();
                            $separator = ' ';
                            $output = '';
                            if ( ! empty( $categories ) ) {
                            foreach( $categories as $category ) {
                            $output .= '<a href="' . esc_url( get_category_link( $category->term_id ) ) . '" alt="' .  '" class="badge badge-danger"' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</a>' . $separator;
                            }
                            echo trim( $output, $separator );  } ?>
                        </small> 
                        </div>
                    </div>         
                </div>
            <?php endwhile; endif; wp_reset_postdata(); ?>
        </div>

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

في الكود السابق , قمنا بانشاء ما يسمى post grid لاظهار المقالات أو المحتوى في الموقع في صفحة الأرشيف,

ملاحظة : في نهاية المقال سوف تجد تنسيق الكودات كلها بكود css لكي نعطي جمالية أكثر للصفحة

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

انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر
انظر الرقم 15 , قم بتغيره كما تريد

الآن الخطوة التالية هي القيام بلصق الكود التالي مباشرة اسفل الكود السابق :

<div class="row" >
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="col-lg-4  "><br>
                    <div class="card"> 
                        <a href="<?php the_permalink(); ?>">
                        <?php 
                            if (has_post_thumbnail( ) ): 
                                $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), ' ' );  ?>
                                <img   src="<?php echo $url ?>" alt="Studyshoot-image"  >
                        <?php endif; ?>
                        <div class="card-body">
                        <h5 class="card-title"> <?php the_title(); ?></h5>
                        </a>
                        
                        <small  >
                            <?php  
                            $categories = get_the_category();
                            $separator = ' ';
                            $output = '';
                            if ( ! empty( $categories ) ) {
                            foreach( $categories as $category ) {
                            $output .= '<a href="' . esc_url( get_category_link( $category->term_id ) ) . '" alt="' .  '" class="badge badge-danger"' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</a>' . $separator;
                            }
                            echo trim( $output, $separator );  } ?>
                        </small> 
                        </div>
                    </div>         
                </div>
            <?php endwhile; endif; wp_reset_postdata(); ?>
        </div>

وفي النهاية الصق الكود التالي أيضاً في الاسفل لقفل علامات header و container و كذلك اظهار تذييل الموقع

 </div>
</header>
<?php get_footer(); ?>

المرحلة الأخيرة من إنشاء صفحة الأرشيف في وورد بريس هي كتابة كود css

تستطيع لصق الكود التالي في ملف style.css وكما يمكنك التعديل عليه كما تريد

    .archive-page h5{
        text-decoration: none;
        color: #0a233e;
    }
    .archive-page .card{
        -webkit-box-shadow: 0px 0px 6px 0px rgba(105,9,105,1);
        -moz-box-shadow: 0px 0px 6px 0px rgba(105,9,105,1);
        box-shadow: 0px 0px 6px 0px rgba(105,9,105,1);
    }
    .archive-page img {
        will-change: opacity;  
        height:250px;
        width: 100%;
    }

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

أحدث المواضيع الى الآن

دورة تدريبية مجانية للغة الإنجليزية

دورة تدريبية مجانية للغة الإنجليزية

يوفر برنامج شبكة OPEN دورة تدريبية مجانية للغة الإنجليزية عبر الإنترنت فرصًا تعليمية افتراضية لمعلمي اللغة الإنجليزية والمهنيين... قراءة المزيد

منحة جامعة العلوم التطبيقية في ألمانيا

منحة جامعة العلوم التطبيقية في ألمانيا

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

منحة جامعة بيتس الأمريكية

منحة جامعة بيتس الأمريكية

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

منحة معهد الدوحة للدراسات العليا بقطر

منحة معهد الدوحة للدراسات العليا بقطر

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

منح جامعة Jacobs في ألمانيا

منح جامعة Jacobs في ألمانيا

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

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

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

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