تبلیغات

تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
وردپرس یا جوملا؟ 0 پاسخ 80 بازدید بهترین وب سرور 0 پاسخ 77 بازدید معرفی سایت و اپ لیلام 4 پاسخ 116 بازدید بهترین cdn 0 پاسخ 96 بازدید 5 ارز دیجیتال برتر برای سرمایه گذاری در سال 2021 2 پاسخ 2790 بازدید فروش سایت تگ تچ 5 پاسخ 1533 بازدید فروش حق امتیاز قالب وردپرس در مارکت ژاکت 9 پاسخ 1568 بازدید دانلود رایگان مجموعه طرح لایه باز قالب پست اینستاگرام 2 پاسخ 111 بازدید قفل قالب BuddyBoss 3 پاسخ 157 بازدید ربات خودکار اینستاگرام چی خوبه 5 پاسخ 628 بازدید

تبلیغات
تبلیغات تبلیغات

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

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

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

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

 

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

 

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

 

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>

موفق باشید

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
دانلود بیش از 5میلیون محصول وردپرسی تنهابا 500 هزارتومان (طرح برد برد) کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=41911
کلمات کلیدی پست :
مطالب مرتبط
2,388ارسال ایمیل به نویسنده هنگام انتشار مطالب بدون افزونه تاریخ : 2019/04/18
4,915مخفی کردن نوشته ها از صفحه ی اصلی در وردپرس تاریخ : 2016/12/23
6,106افزونه اضافه نمودن جستجوگر گوگل در وردپرس WP Google Search تاریخ : 2017/04/15
7,034ویرایش همزمان چند محصول در ووکامرس با افزونه YITH WooCommerce Bulk Product Editing تاریخ : 2017/12/4
6,987اضافه کردن نمایش پیشرفت خواندن نوشته در وردپرس تاریخ : 2017/07/13
3,284۴ تصور اشتباه در استفاده از تگ‌های Hreflang در سئو تاریخ : 2018/11/14
2,980حذف more# از لینک ادامه مطلب وردپرس تاریخ : 2019/02/17
2,244حذف خودکار کاربران وردپرس پس از مدت زمان تعیین شده تاریخ : 2019/04/9
11,672نمایش آخرین مطالب یک سایت در سایت دیگر وردپرسی تاریخ : 2015/08/6
18,249افزونه محاسبه هزینه پروژها با WPCC برای وردپرس تاریخ : 2015/01/9
2,416نمایش مطالب مرتبط در وردپرس با افزونه Related Posts Thumbnails تاریخ : 2019/03/11
3,637ایجاد محدودیت طول عنوان نوشته ها در وردپرس Limit Post Titles تاریخ : 2018/01/17
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات
تبلیغات