در این مطلب از سایت تصمیم داریم تا به ساخت اسلاید شو متن بپردازیم ، که اخرین مطالب ارسالی سایت در آن نمایش داده شود ، در این مطلب فرا خواهید آموخت که چگونه میشود بدون هیچ افزونه ای اسلاید شو مطلب بصورت متحرک طراحی کنید .
ابتدا باید تصمیم بگیرید که درکدام قسمت قالب سایت خود تصمیم به نمایش این نوار اسلایدر متن دارید ، سپس در طراحی قالب مکان آن را مشخص کنید و سپس اقدام به کد نویسی آن کنید .
قبل ازآموزش بهتر است تا با مفهوم 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>
<?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;}
تنها نکته ای که باقی میماند ، فاصله ی بین تیتر هر مطلب میباشد ، که برای ایجاد فاصله بین هر تیتر باید از استفاده کنید .
نتیجه کار به صورت زیر خواهد شد :
