قرار دادن آخرین مطالب در اسلایدشو

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

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

قدم اول:

در ابتدای کار، باید قالب وردپرسی خود را به ویژگی “تصویر شاخص” مجهز کنیم. برای اینکار به سراغ فایل functions.php قالب خود میرویم (در صورتی که قالب شما این فایل را ندارد، خودتان بسازید). سپس کد زیر را داخل آن قرار می دهیم:

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

قدم دوم:

باید اسلایدشو را در فایل فانکشن تعریف کنیم:

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>

فایل را ذخیره کرده و سایت خود را بارگذاری کنید. میبینید که تصاویر بدون هیچگونه ترتیب و افکتی چیده شده اند و شبیه اسلایدر نیستند!!!!!

قدم چهارم:

کدهای زیر را در فایل style.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;
}

قدم آخر:

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

دانلود فایل های جاوا اسکریپت

دانلود تصاویر استفاده شده در اسلایدشو