ساخت اسلایدر مطالب در وردپرس با افزونه و بدون افزونه

ساخت اسلایدر مطالب در وردپرس با افزونه و بدون افزونه

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

ساخت اسلایدر مطالب در وردپرس با افزونه :

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

افزونه Master Slider

افزونه های رایگان زیادی هستند که این کار را برای شما انجام می دهند و نام این افزونه رایگان که ما برای شما مشخص کرده ایم به نام مستر اسلایدر می باشد که می توانید این افزونه رایگان را در سایت مخزن وردپرس دریافت کنید و بر روی سایت خود استفاده کنید ، این افزونه کاملا ریسپانسیو بوده و شما می توانید خیلی خوب به کمک این افزونه یک اسلایدر چندین تصویره داشته باشید

ساخت اسلایدر مطالب در وردپرس با افزونه و بدون افزونه

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

افزودن قابلیت اسلایدر در وردپرس با کد نویسی 

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

<?php 
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 320, 200, 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/>',
));

نمایش اسلایدر در سایت :

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

<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" >  </a>
<a href"#" id="rightNav" >  </a>
</div>
</div>
</div>

CSS نویسی برای نمایش بهتر اسلایدر :

خب بریم سر وقت CSS نویسی ، چون که این اسلایدری که ما الان برای شما کد نویسی کرده ایم در سایت شما و مکانی که مشخص کرده اید نمایش داده می شود ولی شکل و شمایل درستی ندارد که بتوان به عنوان یک اسلایدر نمایش داده شود حالا باید کمی در آن با CSS نویسی بر روی آن تغییراتی انجام دهیم تا شکل آن بهتر شود و برای این کار شما باید وارد بخش نمایش > ویرایشگر پرونده پوسته خود شوید و کد زیر را در قسمت head سایت یا همان head قالب خود اضافه کنید

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

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

<script type='text/javascript' src='آدرس فایل جاوا'></script>

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

موفق و پیروز باشید.