تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات

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

مقالات,آموزش,ترفند , وردپرس

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

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

 

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

 

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

 

1. افزودن قابلیت تصویر شاخص در قالب وردپرس

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

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

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

 

2. ساخت اسلایدر در فایل 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/>',
));

4. نمایش اسلایدر در سایت

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

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

حالا کافیست کد های جاوا اسکریپ زیر را دانلود کرده و به قالب سایتتان اضافه کنید.

دانلود فایل های js

برای قرار دادن جاوا اسکریپت در قالب کد زیر را در بخش head سایت قرار دهید:

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

موفق باشید

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=41911
کلمات کلیدی پست :
مطالب مرتبط
8,650ریست وردپرس با افزونه WordPress Reset تاریخ : 2017/04/17
4,036آموزش تغییر آدرس نویسنده در وردپرس تاریخ : 2019/04/29
3,248محدود کردن نویسنده در مشاهده مطالب دیگر نویسندگان در وردپرس تاریخ : 2019/06/2
3,508استفاده از www یا بدون www در وردپرس تاریخ : 2019/10/26
5,768غیرفعال کردن ذخیره آدرس آی پی در نظرات وردپرس تاریخ : 2018/04/30
4,396افزودن شماره تلفن و اسکایپ با قابلیت برقراری ارتباط در وردپرس تاریخ : 2019/05/13
4,996ایجاد پاورقی شناور در وردپرس بدون استفاده از افزونه تاریخ : 2019/11/23
4,432آموزش هماهنگ سازی قالب با ووکامرس تاریخ : 2019/11/2
6,988آموزش ایجاد سوالات متداول به صورت آکاردئون در وردپرس تاریخ : 2018/06/23
8,022حذف بخش خوش آمدگویی از پیشخوان وردپرس تاریخ : 2017/09/15
7,118ایجاد لیست کلمات ممنوعه در وردپرس تاریخ : 2017/01/17
15,485آموزش طراحی منو افقی برای وردپرس تاریخ : 2013/11/27
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
indiegogo
sourceforge
profile webmaster
profile webmaster
profile
profile check
آرشیو
checker list
سئو سایت
تبلیغات