همراهان گرامی وبمستر98، موضوع امروز آموزش وردپرس آموزش قرار دادن مطالب در اسلایدر بدون استفاده از افزونه می باشد. در واقع قصد داریم بدون استفاده از افزونه های مختلف آخرین مطالب سایت وردپرسی خود را در اسلایدر نمایش دهیم. شما به کمک کدهای امروز دیگر برای ساخت یک اسلایدشو نیازی به هزینه کردن ندارید و می توانید یک اسلایدشو جذاب و زیبا بسازید. همان طور که می دانید اسلایدرهای زیبا در جذب بازدیدکنندگان بسیار موثر می باشد و موجب زیبایی قالب وردپرس و سایتتان می گردد. حال برای آشنایی با کدها در ادامه همراه ما باشید.
آموزش قرار دادن مطالب در اسلایدر بدون استفاده از افزونه
در واقع امروزه افزونه های اسلایدر زیادی وجود دارند که هر کدام دارای خصوصیات خاصی هستند اما با این وجود اگر قرار باشد برای هر کاری در سایت از افزونه استفاده نماییم سرعت سایت کاهش می یابد و در نهایت منجر به افت رتبه و سئو می گردد. پس بهتر است از طریق آموزش زیر و با بهره گیری از قطعه کدهای زیر بتوانیم اسلایدرهای زیبا برای سایت ایجاد نماییم.
آموزش قرار دادن مطالب در اسلایدر بدون استفاده از افزونه
افزودن قابلیت تصویر شاخص در قالب وردپرس
ابتدا قبل از ساخت اسلایدرها باید بررسی کنیم که قالب وردپرس ما از تصویر شاخص پشتیبانی می کند یا خیر. با اینکه اکثر قالب ها از چنین امکانی برخوردار هستند اما اگر قالب شما از تصویر شاخص پشتیبانی نمی کند باید قالب خود را به این امکان مجهز نمایید. برای اینکار به هاست بروید و فایل functions.php را پیدا کنید (در پوشه قالب)
حالا قطعه کد زیر را قرار می دهیم.
php؟>
}((‘if ( function_exists( ‘add_theme_support
;(‘add_theme_support( ‘post-thumbnails
مشخص کننده طول و عرض تصویر در اسلایدر //;(set_post_thumbnail_size( 260, 220, true
{
<?
ساخت اسلایدر در فایل 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’
;((
نمایش اسلایدر در سایت
این قسمت آخرین بخش برای اضافه کردن اسلایدر می باشد. باید قطعه کد زیر را در قسمتی که می خواهید اسلایدر نمایش داده شود قرار دهید.
<“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” > </a>
<a href”#” id=”rightNav” > </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
{
در نهایت فایل را ذخیره سازی نمایید و با بارگذاری مجدد می بینید که اسلایدشو جذاب و زیبایی برای شما ایجاد شده است.
آموزش قرار دادن مطالب در اسلایدر بدون استفاده از افزونه
خب دوستان این هم از آموزش امروز. امیدوارم مطالب این بخش برایتان مفید بوده باشد.
ممنون از همراهی شما با این بخش از آموزش وردپرس. در صورت هر گونه سوال لطفا سوال خود را در قسمت نظرات مطرح بفرمایید. همچنین اگر قصد خرید قالب وردپرس برای سایت خود از یک منبع معتبر را دارید میتوانید به دسته بندی قالب وردپرس در سایت وبمستر98 مراجعه بکنید.
