آموزش های وردپرس

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

تشویق کاربران به خواندن سایر مطالب وبسایت، از جمله راه کارهای افزایش بازدید سایت و رشد شما و همچنین بهبود سئوی سایتتان است. اگر کاربران  بتوانند به مطالب سایت بدون جستجو کردن دسترسی داشته باشند برای بهبود رابط کاربری شما نیز بسیار موثر خواهد بود.

یکی از راه های جذب کاربران به خواندن سایر مطالب سایت، ایجاد لینکهای داخلی است که در اغلب نوشته های وردپرس نارنجی این موضوع را به خوبی مشاهده می کنید. راه دیگر نمایش نوشته قبلی و بعدی یک پست در پایان آن مطلب است.

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

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

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

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

اگر قالب مورد استفاده شما این ویژگی را ندارد و یا از وردپرس پیش فرض استفاده می کنید، پیشنهاد می کنم در ادامه با ما همراه باشید.

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

<div id="cooler-nav" class="navigation">

<?php $prevPost = get_previous_post(true);

if($prevPost) {?>

<div class="nav-box previous">

<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>

<?php previous_post_link('%link',"$prevthumbnail <p>%title</p>", TRUE); ?>

</div>
<?php } $nextPost = get_next_post(true);

if($nextPost) { ?>

<div class="nav-box next" style="float:right;">

<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?>

<?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?>

</div>

<?php } ?>

</div><!--#cooler-nav div -->

همانطور که در کدهای بالا می بینید، برای نمایش زیباتر نوشته ها، کلاس های مختلفی فراخوانی شده اند که باید اطلاعات این کلاس ها را برای ایجاد زیبایی هر چه بیشتر به فایل style.css و یا style-rtl.css اضافه کنیم. بنابراین قطعه کد زیر را به فایل سی اس اس خود اضافه نمایید.

#cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}

#cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}

#cooler-nav img{float: left; margin: 0 10px 0 0;}

#cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}

#cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;}

#cooler-nav .next{float: right; width: 250px;}

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

عاطفه نوربخش

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

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

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

۲ دیدگاه

وردپرس نارنجی در جشنواره وب و موبایل ایران شرکت کرده است.به این وب سایت رای دهید
+
بستن