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

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

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

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

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

 

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

 

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

 

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
کلمات کلیدی پست :
مطالب مرتبط
7,556دور زدن تحریم نقشه گوگل در دامنه IR تاریخ : 2018/06/14
4,620تغییر نامک downloads در افزونه Easy Digital Downloads تاریخ : 2020/04/29
5,504ایجاد فاصله زمانی بین ارسال پست و آپدیت RSS تاریخ : 2017/03/3
4,680آموزش افزودن برچسب انرژی به محصولات ووکامرس تاریخ : 2019/07/8
3,576نمایش مطالب دسته خاص به صورت لیست بازشو در وردپرس تاریخ : 2019/05/10
3,380محدود کردن نویسنده در مشاهده مطالب دیگر نویسندگان در وردپرس تاریخ : 2019/06/2
4,944افزودن نقش کاربری در وردپرس بدون استفاده از افزونه تاریخ : 2020/02/8
7,148آموزش ایجاد سوالات متداول به صورت آکاردئون در وردپرس تاریخ : 2018/06/23
4,736آموزش افزودن دکمه گوگل پلاس به وردپرس تاریخ : 2019/10/2
28,927آموزش نصب قالب وردپرس روی هاست تاریخ : 2016/07/6
11,068غیر فعال کردن افزونه های وردپرس در PhpMyAdmin تاریخ : 2018/04/27
6,476تفاوت نوشته و برگه در وردپرس چیست؟ تاریخ : 2019/05/4
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات