ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

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

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

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

 

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

 

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

 

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

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=41911
کلمات کلیدی پست :
مطالب مرتبط
4,940نمایش پیغام به نویسندگان در صفحه افزودن نوشته تاریخ : 2019/04/17
7,108آموزش هماهنگ سازی قالب با ووکامرس تاریخ : 2019/11/2
16,072آموزش افزودن دکمه ادامه مطلب در وردپرس تاریخ : 2019/08/3
7,452استفاده از یک برگه خاص به عنوان صفحه اصلی وردپرس تاریخ : 2019/04/4
7,672نحوه رفع مشکل نصب نشدن افزونه وردپرس تاریخ : 2019/05/13
11,072آموزش مسدود کردن آی پی در وردپرس تاریخ : 2019/06/28
5,632رفع خطای Cannot modify header information در وردپرس تاریخ : 2018/12/9
15,660عملیات درون‌ ریزی در وردپرس تنها با یک کلیک با افزونه One Click Demo Import تاریخ : 2019/04/14
9,921نمایش موقعیت کنونی کاربران در وردپرس با افزونه Breadcrumb تاریخ : 2017/12/9
5,764نمایش تاریخ عضویت کاربر در وردپرس تاریخ : 2019/02/27
5,268نمایش مطالب دسته خاص به صورت لیست بازشو در وردپرس تاریخ : 2019/05/10
10,192آموزش افزایش سرعت وردپرس با نصب افزونه WP-FFPC تاریخ : 2019/07/5
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file