اذهب إلى المحتوى

كيف تستخدم حلقة التكرار الخاصة بالووردبريس لتنسيق أوّل مقال بطريقة مختلفة


Bilal MOUSSI

القدرة على تعديل حلقة التكرار الخاصة بالووردبريس تمنحك الكثير من التحكم بتصميم ومحتوى موقعك المبني على ووردبريس. دائمًا ما أقوم بإنشاء حلقات تكرار خاصة، أحيانًا عن طريق تعديل حلقة التكرار القياسية وأحيانًا أخرى باستخدام WP_Query لإنشاء حلقات تكرار جديدة بالكامل. ولكن أحيانًا في بعض الحالات أرغب بأخذ الأمور إلى المستوى التالي. أريد أن أقوم بعرض المقال الأول في حلقتي بطريقة مختلفة عن المقالات التي تليه. يمكنني القيّام بهذا لأنني قد أريد إضافة تنسيقات خاصة أو ربما لأنّني أريد عرض محتوًى مختلفًا. مثلًا قد أريد أن أعرض محتوى المقال الأول وفقط المقتطفات بالنسبة للمقالات التي تليه، أو ربما أريد عرض الصورة البارزة للمقال الأول بحجم مختلف عن بقية المقالات، أو مثلًا أريد أن أطبّق كلاسات CSS مختلفة على أوّل مقالٍ. القيام بهذا الأمر سيمكّنك من تسليط الضوء على أحدث مقالاتك، جلب انتباه زوّار موقعك لقراءتها وتشجيعهم للنقر عليها. كما يمكّنك هذا الأمر من تحسين نسق موقعك، عن طريق إنشاء تصميمٍ أكثر تنويعًا.
خلال هذا الدرس سأقوم بتعليمك كيف تستخدم كلاس WP_Query للقيام بذلك. سأريك كيف تقوم بعمل استعلامٍ خاص لكل مقالاتك باستخدام WP_Query ثم بعد ذلك سأريك كيف تقوم بإنشاء استعلام خاص ثانٍ يتم تطبيقه فقط على مقالك الأوّل. خلال المثال الذي سنعمل عليه سأريك أولًا كيف يمكنك القيام بهذا الأمر على نموذج صفحة خاصة باستخدام WP_Query لجعل استعلامين مختلفين يعملان معًا. ثم بعد ذلك سأريك كيف تطبّق هذه التقنيّة على حلقة التكرار القياسية. أخيرًا سأريك كيف تقوم بتعديل نموذج صفحة الأرشيف القياسية واستخدام دالّة pre_get_posts لتغيير حلقة التكرار القياسية.

ما الذي ستحتاجه:

لكي تتمكن من المتابعة طيلة هذا المقال ستكون بحاجة إلى:

  • سكريبت ووردبريس مخصص للتطوير (إيّاك ان تقوم بالتجريب على موقعك مباشرة ما لم تتأكد من أن الكود الذي قمت بكتابته يعمل بشكل جيد).
  • محرر أكواد.

لنبدأ: إنشاء الاستعلام

موقعي الشخصي يحتوي على نموذج خاص من أجل صفحة “كتب”. هذه الصفحة تقوم بعرض المحتوى الذي قمت بإضافته إلى صفحة “كتب” ثم تقوم بتشغيل حلقة التكرار لإخراج جميع كتبي. كل هذا يتم عن طريق استخدام "إضافة مقال خاص". حلقة التكرار الخاصة بك قد تكون مختلفة جدًّا فأنت ربما قد ترغب بتطبيق التالي على مقالات عادية، أو على نموذج صفحة أرشيف، أو حتّى على مقالات مخصصة أو أي شيء قد تريد العمل عليه. إذًا أنت لست مجبرًا على العمل فقط على نموذج صفحة لاستخدام هذه التقنية. يجب عليك فقط التركيز على الطريقة التي تعمل بها حلقة التكرار ثم بعد ذلك يمكنك تطبيق هذه التقنية على موقعك. هذه صورة من صفحتي بحلقة تكرار واحدة تقوم بعرض كل كتبي في شبكة 2*2

1 (1).png

لقد استخدمت بعضًا من البرمجة الكائنية CSS الموجودة بقالبي لإنشاء شبكة 2*2 لعرض جميع كتبي. داخل الحلقة يوجد : العنوان، المقتطفات والصورة البارزة.
إليكم الكود الذي استخدمه

<?php
$args = array(
    'post_type' => 'rmcc_blurb',
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>

    <section class="books list full-width">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class( array( 'book', 'left', 'half' ) ); ?>>

            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <?php if ( has_post_thumbnail() ) { ?>

                <a href="<?php the_permalink(); ?>">

                    <?php the_post_thumbnail( 'medium', array(
                        'class' => 'left',
                        'alt'   => get_the_title()
                        ) );
                    ?>

                </a>

            <?php }?>


            <?php the_excerpt(); ?>

            <div class="button"><a href="<?php the_permalink(); ?>">Explore the Book</a></div>

        </article>

        <?php endwhile; ?>

        <?php wp_reset_postdata(); ?>

    </section>

<?php } ?>

يمكنك ملاحظة حلقة التكرار خاصتي تحتوي على معامل واحد ألا وهو نوع المقال post type. إذًا فإن ما ستعرضه هذه الحلقة هو فقط المقالات من النوع المدخل. كما سيتم عرض المقالات حسب الأحدث. لكن ما نريد القيام به هو عرض المقال الأول بطريقة مختلفة، للقيام بذلك يلزمنا:

القيام بإنشاء حلقة تكرار خاصة بأول مقال

لعرض أوّل مقال بطريقة مختلفة سنحتاج لإنشاء حلقة تكرار منفردة تقوم بعرض ذلك المقال فقط. للقيام بذلك سنحتاج الى معاملين، واحد لنوع المقال والاخر لعدد المقالات الذي سيكون posts_per_page حيث سيتم جعل قيمته 1. ابدأ بعمل نسخة ثانية من حلقة التكرار لديك بحيث يكون لديك حلقتا تكرار داخل ملف نموذجك، كلا الحلقتين تستخدمان
WP_Query. الان عدّل المعاملات للحلقة الأولى بحيث يصبح الكود لديك كما يلي:

$args = array(
    'post_type' => 'rmcc_blurb',
    'posts_per_page' => 1
);

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

<article id="post-<?php the_ID(); ?>" <?php post_class( 'book' ); ?>>

    <div class="left one-third">

        <?php if ( has_post_thumbnail() ) { ?>

            <a href="<?php the_permalink(); ?>">

                <?php the_post_thumbnail( 'medium', array(
                    'class' => 'left',
                    'alt'   => get_the_title()
                    ) );
                ?>

            </a>

        <?php }?>

    </div>

    <div class="right two-thirds book-excerpt">

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <?php the_excerpt(); ?>

    </div>

    <div class="clear">
        <?php the_content(); ?>
    </div>

</article>

ستلاحظ أن هناك كودًا إضافيًّا للمحتوى، وأنّني قد أضفت أيضًا عنصر div لتنسيق النسق، طبعًا أذكّرك أنّني استخدم ملف التنسيق الموجود مسبقًا في قالبي. إليك كيف يظهر أول مقال في صفحتي الآن:

2 (2).png

كل شيء يبدو جيدًّا. لابدّ أنّك قد انتبهت أنّني قد قمت بنزع الزر الذي يأخذك لصفحة قراءة الكتاب، السبب في ذلك يعود إلى كون محتوى المقال ظاهر الآن ولكنّني قمت بتعويض ذلك إلى زر لشراء الكتاب الذي أخذناه من محتوى المقال.

تعديل حلقة التكرار للمقالات اللاحقة:

لكن هناك مشكلة. إليك صورة من أول مقال والمقالات التّي تليه:

3.png

حاليًا أوّل مقال يتم تكراره مرّتين، يتم عرضه في الحلقة التي كانت موجودة في البداية كما يتم عرضه في الحلقة الجديدة التي قمنا بإنشائها. لإصلاح هذا المشكل سيتوجّب عليّ إضافة معامل جديد offset لحلقة التكرار الثانية. هذا المعامل يطلب من ووردبريس تجاهل عدد محدد من المواضيع لعدم عرضها. في حالتي هذه قمت بعرض أوّل مقال بطريقة مختلفة في حلقة التكرار الأولى، لذا سأقوم بتجاهل أول مقال في الحلقة الثانية. ملاحظة: عند استخدامك لهذه التقنية يجب أن تتساوى القيمة المحددة لمعامل posts_per_page في أوّل حلقة مع القيمة المحدّدة لمعامل offset في الحلقة الثانية. في الحلقة التكرارية الثانية سأقوم بتعديل الكود ليصبح بالشكل التالي:

$args = array(
    'post_type' => 'rmcc_blurb',
    'offset' => 1
);

الآن عندما أقوم بتحديث الصفحة ستجد أنّ أوّل مقالٍ لم يعد يعرض مرّتين.

4.png

ذلك جيّد! الآن وقد أكملت هذا الجزء، أكون قد أنشأت صفحة خاصة تحتوي على حلقتي تكرار إحداهما تقوم بعرض محتوى إضافي لأول مقال.

تطبيق هذه التقنية على حلقة التكرار القياسية

لكن ماذا لو كانت صفحتك تعمل باستخدام حلقة تكرار قياسية؟ إن كانت هذه هي حالتك، يمكنك تعديل ملف النموذج الذي تعمل عليه تلك الصفحة فقط بإضافة استعلام إضافي باستخدام WP_Query. لن تكون بحاجة لكتابة استعلامين جديدين.
هناك خطوتان لهذه التقنية:

  1. إضافة استعلام إضافي لملف نموذجك باستخدام WP_Query.
  2. في ملف الدوال الخاص بقالبك (functions.php) استخدم pre_get_posts لتعديل حلقة التكرار القياسية لهذا النوع من الملفات لكي تقوم بتجاوز المقال الأول.

إضافة الاستعلام الإضافي

بداية قم بفتح ملف النموذج الذي ترغب بتعديله. يمكنه أن يكون أي نموذج أرشيف تريده. في حالتنا هذه إن كنت أستخدم النموذج القياسي لعرض المقالات المخصصة من نوع كتب، فإن الملف سيكون اسمه archive-rmcc_book.php. قبل حلقة التكرار الرئيسية أضف الحلقة الإضافية باستخدام WP_Query. ستقوم بهذا بطريقة مشابهة لما قمنا به سابقا عن طريق نسخ وتعديل محتوى الحلقة الرئيسية، ولكن بوضعها داخل استعلام منشئ بواسطة WP_Query. لا تنسى أنه سيتوجب عليك إضافة معامل post_type مع إعطائه قيمة نوع المقالات التي تريدها، حتى ولو كنت تستخدم نموذج لعرض هذا النوع من المقالات فقط. قم بحفظ ملفك وستلاحظ أنّ المقال الأول سيعرض مكرّرًا مثلما حدث معنا في المثال الذي عملنا عليه.

تجاوز المقال الأول في الاستعلام الرئيسي:

لا يمكنك التعديل مباشرة على معاملات الإستعلام الرئيسي في ملف الأرشيف. عوضًا عن ذلك سيتوجب عليك استخدام معلق “hook ” للقيام بهذا التعديل. افتح ملف functions.php (في حالة كان قالبك لا يحتوي على ذلك الملف فقم بإنشائه) ثم أضف الكود التالي:

<?php
$args = array(
    'post_type' => 'rmcc_blurb',
    'posts_per_page' => 1
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>

    <section class="books first wide-box">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class( 'book' ); ?>>

            <div class="left one-third">

                <?php if ( has_post_thumbnail() ) { ?>

                    <a href="<?php the_permalink(); ?>">

                        <?php the_post_thumbnail( 'medium', array(
                            'class' => 'left',
                            'alt'   => get_the_title()
                            ) );
                        ?>

                    </a>

                <?php }?>

            </div>

            <div class="right two-thirds book-excerpt">

                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

                <?php the_excerpt(); ?>

            </div>

            <div class="clear">
                <?php the_content(); ?>
            </div>

        </article>

        <?php endwhile; ?>

        <?php wp_reset_postdata(); ?>

    </section>
<?php } ?

ستلاحظ أن هناك ثلاثة وسوم شروط مستخدمة. واحد للتحقق أننا لسنا في شاشة المدير، الآخر للتحقق أن الاستعلام الرئيسي يعمل، أمّا الأخير فللتحقّق أنّنا في صفحة الأرشيف الخاصة بالمقالات المخصصة التي نريد التعديل عليها. وسمِّ الشرط الذي ستحتاجه من أجل مقالاتك الخاصة (أو تصنيفات أو أي شيء تريد العمل عليه) يمكنك أن تجده في دليل الووردبريس للمطوّرين WordPress Codex. قم بحفظ ملف الدّوال خاصتك وستلاحظ أنّ مقالتك الأولى تعرض باستخدام حلقة التكرار التي أضفتها أما باقي المقالات اللاحقة فتعرض باستخدام حلقة التكرار الرئيسية.

اقتباس

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

WP_Query تسمح لك بلفت الانتباه الى أحدث مقالاتك

باستخدام هذه التقنية، يمكنك استعمال كلاس WP_Query لعرض محتوًى إضافي لأحدث مقالاتك، أو تنسيقها بطريقة مختلفة. كما رأيت في مثالنا الذي عملنا عليه، لقد استخدمنا هذه التقنية لجعل كتابي الأخير يظهر بطريقة بارزة مقارنة بباقي الكتب. يمكنك تطبيق هذه التقنية على حلقة تكرار خاصة قمت بإنشائها باستخدام كلاس WP_Query على حلقة تكرار قياسية في ملفات نماذج قالبك (مهما كان القالب الذي تستخدمه). بمجرد القيّام بهذا فإنّ آخر مقال لك سيكون ظاهرًا ويلفت انتباه قرّائك لقراءته.

ترجمة -وبتصرّف- للمقال How to Use the WordPress Loop to Style Your First Post Differently لصاحبه Rachel McCollin


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...