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

قرار دادن آخرین مطالب در اسلایدشو

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

بسیاری از سایت ها برای نمایش مطالب خود از افزونه استفاده می کنند اما افزونه ها باعث افزایش سرعت بارگذاری صفحه و در اصل سنگین شدن سایت می شوند. ما در این آموزش نشان می دهیم که چگونه آخرین مطالب را در اسلایدشو بدون افزونه داشته باشید.

 

قدم اول:

در ابتدای کار، باید قالب وردپرسی خود را به ویژگی “تصویر شاخص” مجهز کنیم. برای اینکار به سراغ فایل functions.php قالب خود میرویم (در صورتی که قالب شما این فایل را ندارد، خودتان بسازید). سپس کد زیر را داخل آن قرار می دهیم:

<?php
if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 260, 220, true ); // تعیین طول و عرض تصویر
}
?>

قدم دوم:

باید اسلایدشو را در فایل فانکشن تعریف کنیم:

register_sidebar(array(
‘name’ => ‘right’,
‘before_widget’ => ‘<div class=”blockr”><div class=”pat1″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<span>’,
‘after_title’ => ‘</span></div><div class=”iconb”><img src=”/wp-content/themes/GoldMovie.ver2/images/topp.png”></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” >&nbsp; </a>
<a href”#” id=”rightNav” >&nbsp; </a>
</div>
</div>
</div>

فایل را ذخیره کرده و سایت خود را بارگذاری کنید. میبینید که تصاویر بدون هیچگونه ترتیب و افکتی چیده شده اند و شبیه اسلایدر نیستند!!!!!

 

قدم چهارم:

کدهای زیر را در فایل style.css قرار بدهید.

body {

font: 11px tahoma;
margin: 0;
padding: 0;
background: #ccc;
color:#000;
}

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;
}

قدم آخر:

حال می بایست فایل های زیر را در هدر سایت خود برای فراخوانی قرار دهید.

دانلود فایل های جاوا اسکریپت

دانلود تصاویر استفاده شده در اسلایدشو

دانلود فایل

درباره سید حامد حسینی

آقای وردپرس رو با دنیا عوض نمیکنم !

4 دیدگاه

  1. ممنون از مطالب فوق العادتون – من همیشه مطالبتون رو به دقت میخونم – امید وارم موفق باشید .

  2. امیرحسین مددی

    سلام و خسته نباشید
    من وقتی می خام وردپرسرو رو هاست رایگان آپلود کنم این پیام میاد
    unable to connect to backend
    connection abort
    لطفا جواب بدید

    • سلام دوست عزیز،
      اکثر هاست های رایگان دارای مشکلات و محدودیت هایی هستند مثل حداکثرحجم اپلود ویا فرمت فایل اپلودی و ….
      برای رفع مشکل، ابتدا فایل وردپرس رو به چندتا فایل کوچکتر تبدیل کن(مثلا:۱مگابایتی یا ۲مگابایتی) بعد همشونو یکی یکی اپلودکن و تو هاست اکسترک کن
      (فرمت فایل فشرده شده هم باید zip باشه)

      اگر بازهم این کار رو کردی و نشد ایمیل(bazaroozinfo@gmail.com) بده تا هاست رایگان خوب بهت معرفی کنم.
      موفق باشید

ارسال دیدگاه

ایمیل شما منتشر نخواهد شد فیلد های الزامی مشخص شده اند *

*

x

بیشتر بخوانید

نکاتی در راستای سئو مطالب سایت

نکاتی در راستای سئو مطالب سایت

امروزه بهینه سازی مطالب سایت یکی از دغدغه های مدیران هر سایت شده ، برای ...