learndl learndl triboon

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

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

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

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

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

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

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

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

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

به این مطلب امتیاز دهید

امتیاز کلی : 5 / 5. تعداد آرا : 2

اولین نفر باید که به این مطلب امتیاز میدهید

وبیت این پست توسط نگارش شده است.

اسم من محمد پورداداش هست و متولد سال 1367 در خدمت شما هستیم . تخصص من طراحی گرافیک و کدنویسی وب است و سعی خواهم کرد بهترین خدمات را به شما وبمستران و گرافیست های عزیز ارائه کنم. به ترس هات غلبه کن تا در زندگی همیشه پیروز باشی.

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 3 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود
  • مجتبی فخرائیانمشتری 7 دی 1399 پاسخ

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

    • محمد پورداداشمدیر سایت[ در پاسخ به مجتبی فخرائیان ] 7 دی 1399 پاسخ

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

  • علی تنهاییمشتری 10 دی 1399 پاسخ

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

همکاران وبیت