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

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

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

<?php
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 260, 220, true ); // تعیین طول و عرض تصویر
}
?>

خب بعد از اضافه کردن قابلیت تصویر شاخص نوبت به ایجاد اسلایدر در فایل function.php می باشد برایاین کار کد زیر را در فایل فانکشن اضافه کنید.

register_sidebar(array(
'name' => 'right',
'before_widget' => '<div class="blockr"><div class="pat1">',
'after_widget' => '</div>',
'before_title' => '<span>',
'after_title' => '</span></div><div class="iconb"><img src="/wp-content/themes/GoldMovie.ver2/images/topp.png"></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>

تا به این جا کار 90 درصد خوب پیش رفته و الان شما می توانید وبسایت و صفحات را رفریش کنید تا نتیجه را مشاهده کنید.بااین کار می بینید که اسلایدر خیلی جالب به نظر نمیرسه و از افکت و … خبری نیست زیرا هنوز استایلی برای آن تعریف نشده و حالت و افکتی به خود نگرفته است که ما در زیر stily.css در نظر گرفتیم می تانید ان را در فایل استایل قالب خود اضافه کنید تا اسلایدر آخرین مطالب در وردپرس کامل شود.اگر با کد نویسی stile.css آشنایی دارید می توانید سفارشی سازی کنید.

body {

font: 11px tahoma;
margin: 0;
padding: 0;
background: #ccc;
color:#000;
}

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;
}

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

منبع: uptheme  مرجع: آموزش وردپرس