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

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

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

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

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

 

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

 

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

 

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>

موفق باشید

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

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

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

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

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=41911
کلمات کلیدی پست :
مطالب مرتبط
5,840نمایش جیمیل در پیشخوان وردپرس با افزونه My GMail تاریخ : 2019/05/31
7,765کد نمایش تبلیغات در بین متن در ادامه مطالب وردپرس تاریخ : 2017/01/16
5,240آموزش نحوه ورود به مدیریت وردپرس تاریخ : 2019/09/30
4,488فعال سازی دکمه افزودن پرونده چند رسانه‌ای در وردپرس تاریخ : 2018/12/7
4,756دو روش برای حذف دسته جمعی پست های وردپرس تاریخ : 2019/02/16
4,268پارک دامنه یا Park Domain چیست؟ آموزش پارک دامین روی هاست تاریخ : 2019/05/23
3,308تغییر آدرس سایت وردپرسی (تغییر دامنه سایت) تاریخ : 2019/06/6
7,116افزودن قابلیت تایید سن در وردپرس با افزونه Age Verify تاریخ : 2017/07/9
7,808ارسال پوش نوتیفیکیشن یا Push Notification در وردپرس تاریخ : 2019/05/20
5,484آموزش اضافه کردن خط جداکننده افقی در وردپرس تاریخ : 2020/09/8
5,280آموزش مدیریت فایل کانفیگ وردپرس تاریخ : 2019/08/15
5,424هفتمین شماره ماهنامه طراحی وب منتشر شد تاریخ : 2014/12/6
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات