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

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

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

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

بداية اذهب الى مجلد الثيم , وقم بانشاء ملف جديد بالاسم 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%;
    }

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