اضافه کردن پست قبلی بعدی وردپرس

آموزش اضافه کردن پست قبلی بعدی به ادامه مطلب وردپرس

شاید در برخی سایت ها دیده باشید که وبمستر در ادامه مطلب دکمه های برای رفتن به پست های بعدی یا قبلی اضافه میکند.
اضافه کردن پست قبلی بعدی خیلی به سئو سایت شما و بالارفتن نرخ کلیک کمک می کند.
به شما پیشنهاد میکنم این پست از سایت وبیت رو دنبال کنید چرا که خیلی ارزشمنده.

چگونه دکمه های قبلی و بعدی رو اضافه کنیم ؟

ما برای اینکه شما در این زمینه راحت باشید برخی قطعه کدهایی آماده کرده ایم.
که شما با کپی این کدها در بخش های قالب وردپرس خود می توانید این کار رو آسان کنید.
قبل از هرکاری مثل همیشه از پوسته وردپرس خود حتما بکاپ تهیه کنید.

خوب بریم برای آموزش این کار..

برای این کار ابتدا فایل single.php پوسته وردپرس خود را ویرایش کنید.
کد زیر را در این فایل پیدا کنید.

( البته میشه هرجایی از فایل گذاشت ولی شاید پیدا کردن کدهای دیگه برای شما سخت باشه )

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

خوب کدهای زیر رو قبل از کد بالا کپی کنید و فایل رو ذخیره نمایید.

<?php
$vebeetnext = get_next_post(true);
if($vebeetnext) {
next_post_link('%link',"<span>پست بعدی</span>", TRUE);
}
$vebeetpre = get_previous_post(true);
if($vebeetpre) {
previous_post_link('%link',"<span>پست قبلی</span>", TRUE);
}
?>

پس فایل فانکشن functions.php قالب را ویرایش کنید و کد های زیر را در آخر همین فایل کپی و فایل رو ذخیره کنید.

همچنین میتوانید به جای کلمه پست هر کلمه ای که دوست دارید بگذارید مثل ” آهنگ بعدی ” یا فیلم ” قبلی ” …

function posts_link_next_vebeet($format){
$format = str_replace('href=', 'class="vebeetnext" href=', $format);
return $format;
}
add_filter('next_post_link', 'posts_link_next_vebeet');
function posts_link_prev_vebeet($format) {
$format = str_replace('href=', 'class="vebeetpre" href=', $format);
return $format;
}
add_filter('previous_post_link', 'posts_link_prev_vebeet');

خوب شما موفق شدید که این امکان رو به قالب وردپرس خود اضافه کنید.

حالا شما متن پست بعدی و پست قبلی در ادامه مطلب پست های خود را دارید،
ولی این متن ها ساده و در دیدرس کاربر نیستند، پس باید به این لینک ها استایل خوبی بدهیم.
برای این کار کافیست فایل style.css پوسته خود را ویرایش کنید و کد های زیر را در آخر این فایل بگذرید.
کد ها رو کپی کنید و فایل رو ذخیره کنید سپس یک cntrl + 5 بزنید یا کش خود را پاک کنید

.vebeetpre, .vebeetnext {
    position: fixed;
    height: 85px;
    top: 50%;
    z-index: 9;
    transform: translate(0,-50%);
    width: 36px;
    right: 0;
    border-radius: 10px 0 0 10px;
    color: #fff;
    background: #323232;
}
.vebeetpre {
    right: initial;
    left: 0;
    border-radius: 0 10px 10px 0;
}
.vebeetnext span, .vebeetpre span {
    transform: rotate(-90deg) translate(-50%,0);
    position: absolute;
    width: 67px;
    text-align: center;
}
.vebeetnext span {
    left: -1.15em;
}
.vebeetpre span {
    right: -0.9em;
}

از آموزش های ما لذت ببرید
نویسنده : محمد پورداداش