كيفية إضافة WordPress المنشور السابق التالي مع صورة مصغرة

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

من الشائع رؤية WordPress المنشور السابق التالي مع صورة مصغرة وعنوان أسفل المنشور الفردي أو في الجزء العلوي اعتمادًا على تصميم السمة.

WordPress Next Previous Post مع مثال على الصورة المصغرة

على سبيل المثال في واحدة من أكثر موضوعات مجلة WordPress مبيعًا - صحيفة ، يمكنك رؤية المنشور الفردي به ترقيم صفحات مع صورة مصغرة كما هو موضح في الصورة أدناه:

تمثل الصورة أعلاه مثالًا جيدًا على مشاركة واحدة في WordPress مع ترقيم الصفحات السابق الذي يحتوي على صورة مصغرة.

بنهاية البرنامج التعليمي لتطوير WordPress ، يجب عليك بسهولة إضافة الكود الذي أنشأناه إلى مكون WordPress الإضافي أو السمة الخاصة بك وعرض مشاركة WordPress السابقة السابقة مع صورة مصغرة كما هو موضح في Newspaper WordPress theme.

التالي رمز ترقيم صفحات WordPress السابق

باختصار ، مقتطفتا الشفرة المهمتان اللتان تحتاجان إلى الحصول عليهما هما مقتطف يحصل على المنشور السابق أو التالي والآخر يسترد الصورة المميزة للمنشور المحدد (إما بجانب أو سابق)

للتوضيح في هذا البرنامج التعليمي ، سنستخدم موضوع Twenty Seventeen الافتراضي WordPress والذي هو المفضل لدي لعدد من الأسباب ؛ أحد الأسباب هو بساطته.

سيعمل هذا الرمز بالتأكيد عبر جميع سمات WordPress أو المكونات الإضافية الأخرى. لذلك في البداية ، تم تثبيت السمة وتفعيلها مع نشر منشور واحد عينة.

ابدء

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

تتمثل الخطوة الأولى في تحديد موقع الملف single.php في قالبك لأنه الملف حيث سنضيف الكود أسفل the_content () وداخل الحلقة.

بعد تحديد موقع ملف single.php ، فإن الخطوة التالية هي إنشاء متغيرين $next و $prev اللذين يتم تخصيصهما لوظيفتين أساسيتين في WordPress ؛ get_next_post () و get_previous_post () على التوالي كما هو موضح في مقتطف الشفرة أدناه:

 <؟ php
$ prev = get_previous_post () ؛
$ next = get_next_post () ؛
؟>

هاتان الوظيفتان متشابهتان في طريقة عملهما ؛ تسترد الوظيفة السابقة الوظيفة السابقة بينما تسترد الوظيفة التالية الوظيفة التالية objects .

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

نحتاج الآن إلى الحصول على عنوان المنشور السابق والصورة المصغرة وكذلك التأكد من أننا نلفهما في a href tag مع الرابط الثابت ذي الصلة الذي يساعد في جعل الروابط قابلة للنقر:

 <a href="<؟php echo get_permalink( $prev-> ID)؛؟> ">

<؟ php echo application_filters ('the_title'، $ prev-> post_title)؛ ؟>

<؟ php echo get_the_post_thumbnail ($ prev-> ID، 'thumbnail')؛ ؟>

</a>

بعد ذلك ، نحصل على عنوان المنشور التالي والصورة المصغرة ونلتف أيضًا بعلامة href والرابط الثابت للنشر التالي كقيمة علامة href:

 <a href="<؟php echo get_permalink( $next-> ID)؛؟> ">

<؟ php echo application_filters ('the_title'، $ next-> post_title)؛ ؟>

<؟ php echo get_the_post_thumbnail ($ next-> ID، 'thumbnail')؛ ؟>

</a>

حتى هذه النقطة ، لدينا الكود الذي يعمل والذي يمكنه عرض WordPress المنشور السابق التالي مع صورة مصغرة. يجب أن يكون الرمز الكامل حتى هذه الخطوة كما هو موضح أدناه:

 <؟ php

$ prev = get_previous_post () ؛
$ next = get_next_post () ؛

// عنوان الوظيفة السابقة والصورة المصغرة

؟>

<؟ php echo get_the_post_thumbnail ($ prev-> ID، 'thumbnail')؛ ؟>

<a href="<؟php echo get_permalink( $prev-> ID)؛؟> ">

<؟ php echo application_filters ('the_title'، $ prev-> post_title)؛ ؟>

</a>

<؟ php

// عنوان المشاركة التالية والصورة المصغرة

؟>

<؟ php echo get_the_post_thumbnail ($ next-> ID، 'thumbnail')؛ ؟>

<a href="<؟php echo get_permalink( $next-> ID)؛؟> ">

<؟ php echo application_filters ('the_title'، $ next-> post_title)؛ ؟>

</a>

<؟ php

أضف هذا الرمز إلى ملف single.php من هروب HTML بعلامات فتح وإغلاق PHP المناسبة وقم بتحديث الملف ثم تحقق من التغييرات في الواجهة الأمامية.

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

التصميم WordPress السابق التالي آخر

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

 <div class = "clearfix">

<؟ php

$ prev = get_previous_post () ؛

$ next = get_next_post () ؛

// عنوان الوظيفة السابقة والصورة المصغرة

؟>

<div class = "post-box prevPost">

<a href="<؟php echo get_permalink( $prev-> ID)؛؟> ">

<؟ php echo application_filters ('the_title'، $ prev-> post_title)؛ ؟>

<؟ php echo get_the_post_thumbnail ($ prev-> ID، 'thumbnail')؛ ؟>

</a>

</div>

<؟ php

// عنوان المشاركة التالية والصورة المصغرة

؟>

<div class = "post-box nextPost">

<a href="<؟php echo get_permalink( $next-> ID)؛؟> ">

<؟ php echo application_filters ('the_title'، $ next-> post_title)؛ ؟>

<؟ php echo get_the_post_thumbnail ($ next-> ID، 'thumbnail')؛ ؟>

</a>

</div>

</div>

<؟ php

بعد إضافة فئات divs يمكننا الآن تطبيق الأنماط باستخدام CSS كما هو موضح أدناه:

 * {
  تحجيم الصندوق: مربع الحدود ؛
} 

.صندوق بريد {
  تعويم: اليسار؛
  العرض: 50٪؛
}

.clearfix :: بعد {
  المحتوى: ""؛
  واضحة على حد سواء؛
  جدول العرض؛
}
.post-box.prevPost img {
    أقصى عرض: 40٪ ؛
    الارتفاع: تلقائي ؛
}
.post-box.nextPost img {
    أقصى عرض: 40٪ ؛
    الارتفاع: تلقائي ؛
}

استنتاج

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

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

 <؟ php

$ prev_ = get_previous_post () ؛

إذا (! فارغ ($ prev)):؟>

    <a href="<؟php echo get_permalink( $prev-> ID)؛؟> ">

        <؟ php echo application_filters ('the_title'، $ prev_post-> post_title)؛ ؟>

    </a>

<؟ php endif؛ ؟>

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

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