آموزش ساخت اسلایدر آخرین مطالب با تصویر شاخص در وردپرس

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

نحوه قرار دادن آخرین مطالب به صورت اسلایدر وردپرس

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

افزونه Recent posts slider

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

قابلیت ها و امکانات افزونه :

1. قرار دادن تصویر مطلب به عنوان تصویر شاخص
2. قابلیت تغییر تصویر اسلایدر
3. قابلیت تنظیم سرعت تغییر اسلایدر
4. قابلیت انتخاب و تنظیم تعداد مطالب نمایش داده شده در اسلایدر
5. تنظیم نمایش نامحدود مطالب
6. قابلیت تغییر قالب اسلایدر به وسیله ی css
7. و …

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

<?php if (function_exists('rps_show')) echo rps_show(); ?>

افزونه ساخت اسلایدر SLIDER REVOLUTION

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

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

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

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

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

در اخر اسلایدری را که ساخته اید را ذخیره کرده و و به قسمت slide editor تیک قسمت تصویر برجسته را زده و آن را ذخیره می کنیم .

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

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

افزونه ی نمایش آخرین مطالب سایت همراه تصویر بند انگشتی

اگر میخواهید آخرین مطالب سایت شما با تصاویر بند انگشتی به صورت اسلایدر نمایش داده شود میتوانید از این افزونه استفاده کنید یکی از افزونه های پیشرفته و حرفه ای که در این زمینه فعالیت می کند افزونه ی wp Special Recent Posts Pro می باشد شما با چنین افزونه ای می توانید آخرین مطالب سایت را به همراه تصویر بند انگشتی نمایش دهید .

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

اگر مایل بودید تنظیمات این افزونه را تغییر دهید از قسمت پیشخوان وردپرس بر روی تنظیمات کلیک کرده و سایر تنظیمات افزونه را انجام دهید توجه داشته باشید شما از قسمت ابزارک ها و هم از زیر منوی تنظیمات افزونه Special Recent Posts PRO می توانید به تنظیمات افزونه دسترسی داشته باشید و تمام تغییرات را در جهت شخصی سازی به کار بگیرید .

نکته : شما باید هر چند وقت یک بار به قسمت  Special Recent Posts PRO از زیر منوی تنظیمات مراجعه کرده و در تب Cache Settings گزینه ی Empty Cache Folder را بزنید تا با این کار پوشه ی کش افزونه که برای جلوگیری از دیر لود شدن سایت تصاویر بند انگشتی را کش می کند ، را خالی کنید .

افزونه WP Latest Posts

یکی از بهترین افزونه هایی که شاید بتوان از آن برای نمایش آخرین نوشته های موجود در سایت استفاده کرد افزونه ی WP Latest Posts می باشد . تنها باید این افزونه را نصب و فعال سازی نمود سپس به بخش مدیریتی آن مراجعه و تنظیمات دلخواه را انجام دهید و سپس شورت کدی را که افزونه در اختیار شما قرار می دهد را در هر جایی که مایلید قرار دهید . موضوع اسلایدر تا حد زیادی به سلیقه شما بستگی دارد از جمله معدود اسلایدر هایی که میتوان گفت با اکثر سلایق همخوانی دار افزونه فوق می باشد امکاناتی مانند ایجاد اسلایدر مطالب دسته بندی خاص نیز جزو ویژگی های این افزونه به حساب می آید با هم به بررسی ویژگی های این افزونه میپردازیم .

برخی از قابلیت ها و ویژگی های این افزونه :

• قابلیت نمایش جدیدترین مطالب در اسلایدر
• امکان نمایش جدیدترین نوشته های سایت با دسته بندی خاص
• قابلیت نمایش مطالب جدید و تازه در حالت گرید و شبکه ای
• امکان نمایش خلاصه ای از نوشته های جدید
• دارای چندین تم گرافیکی زیبا و ظاهری جذاب
• دارای ابزارک برای نمایش در ستون کناری سایت
• قابلیت نمایش جدیدترین مطالب بر اساس تاریخ
• پشتیبانی از کد کوتاه و توابع php خود افزونه جهت نمایش در پوسته
• دارای محیط تنظیمات و مدیریتی حرفه ای
• و…

نمایش آخرین مطالب در اسلایدر بدون افزونه

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

•  افزودن قابلیت تصویر شاخص در قالب 
  در ابتدای کار باید مشخص کنیم و بدانیم که قالب سایت وردپرسی ما می تواند یک تصویر از پست ها را نشان دهد یا خیر ؟  اگر متوجه شدید که قالب شما امکان انجام چنین کاری را ندارد باید وارد قسمت مدیریت هاست خود شده و به فایل functions.php رجوع کنید و درون آن تکه کد زیر را قرار دهید . در صورتی که این فایل را نداشتید آن را ایجاد کرده و کد را درون آن قرار دهید .

<?php
if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 260, 220, true ); // مشخص کننده طول و عرض تصویر در اسلایدر
}
?>

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

register_sidebar(array(
‘name’ => ‘right’,
‘before_widget’ => ‘<div class=”blockr”><div class=”pat1″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<span>’,
‘after_title’ => ‘</span></div><br/><br/><br/>’,
));

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

<div class=”footer_box”>
<div id=’holder’ style=’display:none;’>
<ul id=”text_ads”>
<?php
$my_query = new WP_Query(‘showposts=10&cat=0′); // 10
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li class=’objImgFrame’ >
<a href=”<?php the_permalink() ?>/” title=”<?php the_title(); ?>” class=”image” target=”_blank”>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( array(212,64) );
}
else {
echo ‘<img src=”‘ . get_bloginfo( ‘stylesheet_directory’ ) . ‘/images/no.png” />’;
}
?></a>
<a href=”<?php the_permalink() ?>/” title=”<?php the_title(); ?>” class=”title” target=”_blank”><?php the_title(); ?></a>
</li>
<?php endwhile; ?><?php wp_reset_query(); ?>
</ul>
<div class=”srcoll_nav”>
<a href”#” id=”leftNav” >&nbsp; </a>
<a href”#” id=”rightNav” >&nbsp; </a>
</div>
</div>
</div>

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

ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
}

div.footer_box {
width:980px;
float:right;
margin-right:50px;

position:relative
}
ul#text_ads {
width:980px;
float:right;
margin:10px -5px 10px 0;
}
.objImgFrame {
float: right;
width: 228px;
height: 200px;
margin: 0px 15px 0px 0px;
border-radius: 5px;
box-shadow: 0px 0px 8px #000;
}

.objImgFrame .image {

width:227px;
height:146px;
float:right;
}
.objImgFrame .image img {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px 5px 0 0;
width:227px;
height:146px;
float:right;
}.objImgFrame .image img:hover {
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.objImgFrame .title {
margin-top:8px;
text-align:center;
width:215px;
float:right;
color:#000;
font-weight:bold;
}
.objImgFrame .descript {
width:210px;
float:right;
margin:5px 5px 0 0;
color:#000;
font-weight:normal;
}
.objImgFrame a {
transition-property:color;
transition-duration:1s;
-moz-transition-property:color;
-moz-transition-duration:1s;
-webkit-transition-property:color;
-webkit-transition-duration:1s;
-o-transition-property:color;
-o-transition-duration:1s;
}

.simple_slider_hover {
cursor:pointer;
cursor:hand
}
.simple_slider_disabled {
opacity : 0.2;
filter: alpha(opacity=20);
zoom: 1;
}
#leftNav {
width:23px;
height:85px;
background:url(images/text_ads_arrow.png) no-repeat 0 0;
position:absolute;
top:65px;
left:-40px;
}
#leftNav:hover {
background-position:0 -85px;
}
#rightNav {
width:23px;
height:85px;
background:url(images/text_ads_arrow.png) no-repeat -23px 0;
position:absolute;
top:65px;ا
right:-30px;
}
#rightNav:hover {
background-position:-23px -85px;
}

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

با دیگر آموزش های وردپرس سایت دیجی وردپرس همراه باشید