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

القائمة ☰

التسجيل

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

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


شارك هذه الفرصة مع الأصدقاء

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

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

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

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



شارك هذه الفرصة مع الأصدقاء

اترك تعليقاً

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

جائزة الأمير سلطان بن عبدالعزيز العالمية بقيمة 133000 دولار أمريكي

جائزة الأمير سلطان بن عبدالعزيز للباحثين والمنظمات من حول العالم في الابتكارات العلمية التي تعمل على تقديم حلول

جائزة الملك فيصل بقيمة 200,000 في المجالات الفكرية والعلمية

يُعدُّ الاحتفال السنوي بتسليم جائزة الملك فيصل للفائزين بها من أبرز جوانب نشاط مؤسسة الملك فيصل الخيرية التي

STUDYSHOOT ©