لینک قبلی / بعدی

آیا می خواهید لینک های بعدی / قبلی را در وردپرس اضافه کنید؟

لینک های بعدی و قبلی لینک های پویایی هستند که به کاربران امکان مشاهده پست بعدی یا قبلی را می دهند. در این مقاله، ما به شما نشان خواهیم داد که چگونه به راحتی لینک های بعدی و قبلی را در وردپرس اضافه کنید.

مهمترین کاربرد این نوع لینک ها، افزایش بازدید نوشته های شما و تجربه بهتر کاربر هنگام استفاده از سایت شماست.

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

در این روش شما باید فایل های قالب وردرس خود را ویرایش کنید. باید با استفاده از یک سرویس گیرنده FTP یا با استفاده از برنامه مدیریت فایل در کنترل پنل میزبانی وردپرس خود به وب سایت وردپرس خود متصل شوید.

پس از اتصال، باید به پوشه /wp-content/themes/your-current-theme/ بروید.

اکنون، باید فایل single.php را پیدا کنید. این فایلی است که مسئول نمایش موارد تک پست در وب سایت شما است.

برخی از تم های وردپرس ممکن است به فایل های دیگری در فایل single.php اشاره کنند. این فایل ها قطعات قالب نامیده می شوند و در داخل پوشه template-parts قالب وردپرس شما قرار دارند.

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

<?php the_post_navigation(); ?>

اکنون می توانید تغییرات خود را ذخیره کرده و از وب سایت خود دیدن کنید تا لینک های بعدی / قبلی را در عمل مشاهده کنید.

تگ قالب بالا به سادگی لینک پست های بعدی و قبلی را با عنوان پست به عنوان متن لینک دار نشان می دهد. اما نمی گوید که اینها پیوندهای مقالات بعدی و قبلی هستند. بیایید کمی این مورد را تغییر دهیم و زمینه ای در مورد این لینک ها در اختیار کاربران قرار دهیم. ما این کار را با افزودن پارامترهای موجود برای تگ قالب the_post_navigation انجام خواهیم داد.

به سادگی کد زیر را به جای کدی که قبلا اضافه کردیم قرار دهید:

<?php the_post_navigation( array(
'prev_text' => __( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>

اکنون می توانید تغییرات خود را ذخیره کرده و پیش نمایش وب سایت خود را مشاهده کنید.

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

<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>

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

<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'in_same_term' => true, 
'taxonomy' => __( 'category' ),
) );
?>

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

استایل دهی به پیوندهای بعدی / قبلی در وردپرس

اکنون که نحوه افزودن پیوندهای بعدی / قبلی را در وردپرس آموختیم، بیایید نگاهی به نحوه صحیح استایل دادن به آنها بیاندازیم. به طور پیش فرض، وردپرس به طور خودکار چندین کلاس CSS پیش فرض را به لینک های پیمایش پست اضافه می کند. می توانید از این کلاس های CSS در قالب وردپرس خود برای استایل دادن به این لینک ها استفاده کنید.

در اینجا چند کد CSS وجود دارد که می توانید به تم خود اضافه کنید.

.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}

.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}

.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}

این CSS اصلی به سادگی پیوندهای بعدی و قبلی را در کنار یکدیگر اما در طرف های مختلف یک خط نمایش می دهد. همچنین می‌توانید پیوندهای ناوبری خود را با افزودن رنگ پس‌زمینه، افکت hover و موارد دیگر زیبا تر کنید.

.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}

افزودن لینک های بعدی / قبلی به صفحات (برگه ها) در وردپرس

به طور معمول، لینک های ناوبری پست برای پست های وبلاگ در وردپرس استفاده می شود. به این دلیل که آن موارد به ترتیب زمانی معکوس منتشر می شوند. از طرف دیگر، صفحات وردپرس به طور کلی به ترتیب زمانی منتشر نمی شوند.

با این حال، برخی از کاربران ممکن است نیاز به نمایش پیمایش صفحه داشته باشند تا کاربران بتوانند صفحه بعدی را به راحتی پیدا کنند.

خوشبختانه، می توانید از همان کدی که قبلاً برای صفحات استفاده می کردیم استفاده کنید. با این تفاوت که، باید کد را در قالب page.php اضافه کنید.

<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>

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

آیا می خواهید پیوندهای بعدی و قبلی خود را قابل توجه تر کنید؟ تصاویر ساده ترین راه برای جلب توجه کاربران و جذاب تر کردن این لینک ها هستند.

ابتدا باید کد زیر را به فایل functions.php تم وردپرس خود اضافه کنید.

function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();

if ( $next_post || $prev_post ) : ?>

<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->

<?php endif;
}

این کد به سادگی تابعی را ایجاد می کند که پست های بعدی و قبلی را با تصاویر شاخص نمایش می دهد. در مرحله بعد، باید تابع ()wpb_posts_nav را به فایل single.php تم خود اضافه کنید، جایی که می خواهید لینک ها را نمایش دهید.

اگر تم شما قبلاً لینک های بعدی و قبلی را دارد، میتوانید خطی را که حاوی تابع ()the_post_navigation است پیدا کرده و آن را حذف کنید و کد بالا را جایگزین آن کنید.

<?php wpb_posts_nav(); ?>

پس از افزودن کد، فراموش نکنید که تغییرات خود را ذخیره کنید و از وب سایت خود دیدن کنید تا پیوندها را در عمل مشاهده کنید.

همانطور که میبینید، متوجه شوید که این پیوندها چندان زیبا به نظر نمی رسند. بیایید با افزودن چند CSS سفارشی به آن‌، استایلش را تغییر دهیم.

.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}

.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}

.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}

.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}

.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}

.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}

.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}

.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}

اکنون می توانید تغییرات خود را ذخیره کرده و از وب سایت خود دیدن کنید تا لینک های بعدی و قبلی را با تصاویر کوچک مشاهده کنید.

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