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

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

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

 

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

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

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

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

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

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

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

<?php
$next = get_next_post(true);
if($next) {
next_post_link('%link',"<span>Next Post</span>", TRUE);
}
$previous = get_previous_post(true);
if($previous) {
previous_post_link('%link',"<span>Prev Post</span>", TRUE);
}
?>

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

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

function posts_link_next($format){
$format = str_replace('href=', 'class="next" href=', $format);
return $format;
}
add_filter('next_post_link', 'posts_link_next');
function posts_link_prev($format) {
$format = str_replace('href=', 'class="pre" href=', $format);
return $format;
}
add_filter('previous_post_link', 'posts_link_prev');

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

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

.pre, .next {
    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;
}
.pre {
    right: initial;
    left: 0;
    border-radius: 0 10px 10px 0;
}
.next span, .pre span {
    transform: rotate(-90deg) translate(-50%,0);
    position: absolute;
    width: 67px;
    text-align: center;
}
.next span {
    left: -1.15em;
}
.pre span {
    right: -0.9em;
}

از آموزش های ما لذت ببرید

مطالب مرتبط

معرفی بهترین هاست های رایگان

معرفی بهترین هاست های رایگان

محبوبیت هاست رایگان در سال‌های اخیر بسیار افزایش‌ یافته است و دلیل آن نیز بسیار ساده است. همه ما چیزهای رایگان را دوست داریم و تا کلمه‌‌ی رایگان به گوشمان می‌خورد نمی‌توانیم جلوی خودمان را بگیریم. این طبیعت انسان است و دقیقا با توجه به همین غریزه ده‌ها شرکت پدیدار شده‌اند تا روی این غریزه […]

نمایش پست قبلی و بعدی همراه با تصویر در وردپرس

نمایش پست قبلی و بعدی همراه با تصویر در وردپرس

در این مقاله از مجموعه آموزش های رایگان وردپرس قصد داریم به شما نحوه قرار دادن نوشته قبلی و بعدی همراه با تصویر در صفحات داخلی وردپرس را آموزش دهیم. این قابلیت می تواند سبب ماندگاری بازدیدکنندگان در سایت شما شود. در ادامه این آموزش با ما همراه باشید. آموزش قرار دادن پست قبلی و […]

طراحی و ساخت سایت موزیک

طراحی و ساخت سایت موزیک

طراحی سایت موزیک و طراحی سایت موسیقی برای موسیقی دان ها و هنرمندان مشغول به کار در زمینه هنر موسیقی، می تواند یکی از بهترین راه ها برای ارتباط با مخاطبان و معرفی هنرمندان در فضای مجازی می باشد.   یک هنرمند با  طراحی سایت موزیک، خیلی ساده و راحت می تواند از طریق اینترنت به […]

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

محصولات ویژه