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

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

ابتدا باید تصمیم بگیرید که درکدام قسمت قالب سایت خود تصمیم به نمایش این نوار اسلایدر متن دارید ، سپس در طراحی قالب مکان آن را مشخص کنید و سپس اقدام به کد نویسی آن کنید .

قبل ازآموزش بهتر است تا با مفهوم marquee آشنا شویم ، تگ marquee در واقع در جهت متحرک سازی متون کاربرد دارد ، که همین متحرک سازی باعث جذاب شدن قالب سایت شما خواهد شد .

direction : جهت حرکات متون را نمایش میدهد به اینصورت که از چپ به راست باشد یا راست به چپ .

onmouseout : تابع را با حرکت موس روی متن ها اجرا میکند .

در اول کار باید از تگ marquee استفاده کنید که ما در زیر یک مثال از این نوع تگ برای شما آورده ایم.

<marquee id="marq" direction="right" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()">
</marquee>

حالا باید از حلقه ی تکرار php  استفاده کنید و آخرین مطالب سایت را در آن قرار دهید (کد نمایش آخرین مطالب) ، به کد زیر توجه فرمایید.

<?php query_posts('showposts=5&orderby=time()'); while ( have_posts() ) : the_post(); ?>
کد مورد نظر جهت تکرار
<?php endwhile;?>
<?php wp_reset_query();?>

همین ، کار پایان یافت و باید فقط marquee را هم به حلقه ی تکرار اضافه نمایید که همراه با شروع و استپ خواهد بود .

<div id="news">
<marquee id="marq" direction="right" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()">
<?php query_posts('showposts=4&orderby=time()'); while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?php endwhile;?>
<?php wp_reset_query();?>
</marquee>
</div>

خب کد تا اینجا به پایان رسیده است ، اما برای زیبا سازی آن هم باید استایلی مطابق با سلیقه خود به آن دهید . که ما به صورت زیر اقدام میکنیم.

#news{background:url(https://www.3zar.ir/wp-content/uploads/2014/02/3zar.ir_me-recovered.png) no-repeat right;
width:100%; height:28px;
float:right;
background-color:#333;
}
#marq{width:30%; height:27px;float:right;margin-right:111px;}

#marq a{text-decoration:none;color:#fff;}
#marq a:hover{color:#F09;}

تنها نکته ای که باقی میماند ، فاصله ی بین تیتر هر مطلب میباشد ، که برای ایجاد فاصله بین هر تیتر باید از    استفاده کنید . 

نتیجه کار به صورت زیر خواهد شد :



موفق باشید.