كيفية إضافة زر next و Previous لمقالات الووردبريس بسهولة (بدون إضافات) ! ⚡

2٬088

 2018-07-21

 

لاشك أنه قبل دخولك للمقال التالي كانت لديك فكرة أن أزرار Navigation الخاصة بالمقال التالي و السابق أتت أكلها في مدونة أو موقع أحد أصدقائك ، لدور الفعال الذي تضيفه لرفع من نسبة الـ Bounce Rate و كذلك مداخيل الأدسنس ، أو ربما جربت تركيب أحد الأكواد و لم تعمل في قالب الووردبريس الخاص بك أو أن الإضافة التي إستخدمتها لم تكن متجاوبة ، حسنا اليوم سأوفر لك الطريقة الأمثل لتركيب الأزرار بشكل الذي تريد بضمان عملها .

 

ملاحظة : من ضروري قبل القيام بهذه العملية خد نسخة عن القالب المراد تعديله و نسخة كاملة عن موقعك كإحتياط .





 

 

أولا ، قم بالدخول إلى أحد مقالاتك التي كتبتها سابقا أو حاول كتابة واحدة تجريبية إذا لم توجد ، ثم إضغط على زر F12 أو إضغط بالزر الأيمن للفأرة و إختر “Inspect Element” حاول التوجه إلى أخر مكان موجود بعد محتوى المقال كما الظاهر في الصورة أعلاه و حاول أخد إسم الـ class أو الـ id الخاص بالـ Element فمثلا أنا عندي الـ id بإسم ajaro-after-content و يتغير الإسم حسب القالب .

 

 

ثانيا ، نتوجه إلى واجهة الأدمين في الووردبريس الخاص بنا و بالتحديد إلى جهة المظهر -> محرر بالصيغة الإنجليزية Apparence ثم إلى Editor  غالبا يجب البحث عن صفحة تكويد مسمات Single.php أو Single-post.php أو Single-content إذا لم تجدها حاول البحث داخل ملف الـ includes أو inc و تقوم بالدخول له عبر الضغط عليه ، بعد ذلك تقوم بالضغط على زر ctrl و F في لحظة واحدة للقيام بعملية بحث سريعة في الأكود و أدخل كود الـ id أو الـClass السابقة كما ذكرت أنا لدي إسم   ajaro-after-content فكما يظهر في الصورة أعلاه وجدت الـ Class التي أبحث عنها ، ثم قم  بنسخ و لصق الكود التالي تحته كما الظاهر أعلا في المرحلة الأخيرة :



 

<style>

#postTitle{
color: white;
background: #5E89BF;
padding: 35px;
font-size: 23px;
text-align: center;
margin-top: -10px;
border-radius: 6px;
}

.next-article{
color: white;
background: #5E89BF;
font-size: 23px;
text-align: center;
border-radius: 6px;
}
.next-article a{
color: white;
font-family: neosansarabic,Verdana,tahoma;

}

.filter-bleu{background: #5E89BFCC; padding: 35px;border-radius: 6px;}

div.simplesocialbuttons{margin-top: 100px;}
</style>

<?php if (strlen(get_previous_post()->post_title) > 0) { ?>
<?php $prevPost = get_previous_post(); ?>
<div class="next-article" >
<div class="filter-bleu" >
<?php previous_post_link(); ?>
</div>
</div>
<?php } ?>
<br/>
<?php if (strlen(get_next_post()->post_title) > 0) { ?>
<?php $nextPost = get_next_post(); ?>
<div class="next-article" >
<div class="filter-bleu" >
<?php next_post_link(); ?>
</div>
</div>
<?php } ?>

 

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

 

 

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

Premium WordPress Themes Download
Download Best WordPress Themes Free Download
Download Premium WordPress Themes Free
Download WordPress Themes Free
udemy course download free