برای استعلام یا ارسال سفارش اینجا کلیک کنید.

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

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

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

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

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

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

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

برای این کار ابتدا فایل 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;
}

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

من محمد پورداداش متولد سال ۱۳۶۷ در خدمت شما هستم. طراحی گرافیک و وب مهمترین مسئولیت من بوده و است. سعی خواهم کرد بهتر از همیشه در خدمت شما باشم. خوب بودن به حرف نیست به رفتار نیک و عمل پسندیده است.
در کانال ما عضو شوید و از آخرین اخبار ، محصولات و تخفیف با خبر شوید... کانال تلگرام وبیت

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

علی تنهایی گفته :مشتری
1399-10-10 17:41پاسخ دهید

سلام
ممنون خیلی خوب بود

مجتبی فخرائیان گفته :مشتری
1399-10-7 0:01پاسخ دهید

عالی بود دمت گرم

محمد پورداداش گفته :مدیر سایت
1399-10-7 0:33پاسخ دهید

ممنون وظیفه اس

آخرین نمونه کار ها مشاهده همه

آخرین طرح های اختصاصی اجرا شده