با سلام ، در سری آموزش های وردپرس امروز و در این مطلب می پردازیم به آموزش قرار دادن آخرین مطالب سایت در اسلایدشو که در نوع خوب برای برخی از وب سایت ها از اهمیت زیادی برخردار است.کابران گرامی قبل از هر چیزی این نکته را یادآور شوم که اگر دوست دارید این هک وردپرس و دیگر مطالب مرطبت با این نوع موضوعات را به خوبی روی وب سایت خود پیاده سازید باید کمی با کد های php و فایلهای قالب وردپرس و همچنین فایل های وردپرس آشنایی داشته باشید زیرا اگر اطلاا کافی نداشته باشید با مشکلاتی چون بهم ریختگی ، از بین رفتن مطالب و …. رو برو خواهید شد.
در چنین مواقعی سعی کنید قبل از اعمال هر نوع تغییرات از وبسایت و وردپرس خود یک پشتیبان بگیرید تا در صورت بروز هر نوع مشکل بتوانید سایت را به حالت اولیه برگردانید.
خب می پردازیم به آموزش این جلسه،کاربران گرامی همان طور که میدانید امروزه سایت های زیادی از اسلاید شو استفاده می کنند و هر کدام در این اسلایدر ها اهدافی را دنبال می کنند برای مثال سایتی برای معرفی محصولات ویژه ،برخی معرفی سایت ، برخی آخرین مطالب و … خود را در معرض نمایش کابران قرار می دهند که علاوه بر این مواردی که گفته شد زیبایی خاصی را به وب سایت می بخشد.
امروزه با گشترش مدیریت محتوا افزونه های اسلایدر زیادی ارائه شده اد که هر کدام از خصوصیت های خاصی برخوردار هستند و اگر بنا باشد برای هر کاری از افزونه در سایت استفاده کنید با کاهش سرعت سایت و در نهایت افت رتبه و … مواجه خواهید شد.ما با تمر کز روی این موارد در این مطلب قصد داریم اسلاید شوی آخرین مطالب سایت را در قالب کد ارائه کنیم تا بدون افزونه بتوانید یک اسلایدر زیبا روی وبسایت خود ایجاد و مطالب خود را در معرض دید کابران قرار دهید.
اما نحوه ی قرار دادن آخرین مطالب در اسلایدشو با استفاده از کد:
کابران گرامی برای ایجاد چنین امکانی باید قالب وردپرس شما از تصویر شاخص پشتیبانی بکند هر چند امروزه اکثر قالب ها از چنین امکانی برخوردار هستند اگر پوسته وردپرس شما از تصویر شاخص پشتیبانی نمی کند ابتدا قالب خود را به این امکان مجهز کنید.
خب در ابتدای کار وارد فایل های قالب وردپرس خود شوید و فایل functions.php را پیدا و به حالت ویرایش در آورید اگر چنین فایلی وجود نداشت ایجاد کنید.بعد کد زیر را در آن اضافه کنید.
<?php if ( function_exists( ‘add_theme_support’ ) ) { add_theme_support( ‘post-thumbnails’ ); set_post_thumbnail_size( 260, 220, true ); // تعیین طول و عرض تصویر} ?>
در مرحله بعدی کار باید اسلاید شو را به قالب اضافه کنید جهت این امر کد زیر را در فایل 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> <div class=”iconb”><img src=”/wp-content/themes/GoldMovie.ver2/images/topp.png”></div> ’, ));
خب در مرحله بعدی کار نوبت به نمایش اسلاید شو در سایت می باشد جهت این امر باید کد زیر را در محلی که قصد دارید اسلایدر نمایش داده شود اضافه کنید.
<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>
بعد از اعمال مواردی که در بالا گفته شد فایلها را ذخیره و نتیجه را با یک بارگزاری صفحه وب سایت ببینید.خواهید دید که اسلایدر به هم ریخته است دلیل این کار نداشتن style.css می باشد که از اهمیت زیادی برخوردار است برا این که کار را به خوبی انجام داده باشیم و اسلاید شو آخرین مطالب را در سایت کامل کنید می توانید استایل زیر را در داخل 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;
}
بعد از اضافه کردن کد فوق فایل را ذخیره سازی کنید. و نیجه کار را با یک بارگذاری دیگر ببینید اسلاید شو به خوبی و با ظاهری زیبا ایجاد خواهد شد.
خب به پایان این آموزش و هک وردپرس رسیدیم امید واریم مورد استفاده شما واقع قرار گرفته باشد.
منبع: uptheme مرجع: آموزش وردپرس | قالب وردپرس هاستینگ | قالب وردپرس فروشگاهی | قالب وردپرس شرکتی
