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

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

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

دوستان عزیز در ابتدای این راه باید قابلیت تصویر شاخص را به قالب وردپرس خود اضافه نمائیم.برای این منظور باید همانند همیشه به سراغ فایل function.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>

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

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

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

دانلود فایل های مورد نظر

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