حتما شما تا بحال با آخرین مطالب متحرک در سایت های مختلف برخورد کرده اید که زیبایی خاصی به صفحه ی شما می دهند و در جلب رضایت بازدید کننده تاثیر زیادی دارد و از طرفی هم مطالب جدید سایت شما را به دیگران نمایش میدهد.اگر تمایل داشته باشید در این مقاله به آموزش ساخت یک همچین قسمتی در سایت وردپرسی خواهیم پرداخت.
قیل از شروع بد نیست ببینید که درآخر کار به چه چیزی خواهیم رسید:
برای شروع ابتدا محل انتخاب دقیق قرار گرفتن آخرین اخبار را انتخاب کنید.برای انتخاب دقیق می توانید از گزینه ی Inspect element در کلیک راست مرورگر کمک بگیرید و سپس فایل header.php و style.css را از بخش ویرایشگر کدهای پوسته انتخاب کنید.
برای شروع ابتدا شما را با تگ marquee آشنا می کنم.این تگ برای دادن تحرک به متون استفاده می شود و آنها را از سمتی به سمت دیگر منتقل می کند.دز زیر پارامتر های این دستورالعمل و توضیحات آنها را مشاهده می کنید:
direction :جهت حرکت متون را نشان می دهد.(چپ به راست یا بالعکس)
scrollamount: رعت حرکت متون
onmouseover: (تابعی که داده خواهد شد را با حرکت موس بر روی متون اعمال می کند)
onmouseout : (تابعی که داده خواهد شد را با حرکت موس از روی متون اعمال می کند)
برای شروع از یک تگ marquee کمک می گیریم .(در زیر مثالی از یک تگ marquee را می بینید)
|
1
2
|
<marquee id="marq" direction="right" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()">
</marquee>
|
حال باید برای این حلقه ی تکرار و آخرین مطالب را تعریف کنیم آن هم بین یاز و بسته ی marquee. برای این کار شما را با حلقه ی تکرار در php آشنا می کنم:
|
1
2
3
4
|
<?php query_posts('showposts=5&orderby=time()'); while ( have_posts() ) : the_post(); ?>
کد مورد نظر جهت تکرار
<?php endwhile;?>
<?php wp_reset_query();?>
|
در نهایت باید حلقه ی تکرار را به کد marquee اضافه کنیم که آماده ی آنرا در زیر به همراه دو تابع stop و start می بینید:
|
1
2
3
4
5
6
7
8
|
<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>
|
*لازم به ذکر است که برای ایجاد فاصله بین تگ ها استفاده می شود.
حال باید به طراحی و زیبا سازی و از همه مهمتر تعیین ابعاد کد در css بپردازیم.بدین منظور سند style.css را می گشاییم و با توجه به آی دی های استفاده شده در فایل header به طراحی آن می پردازیم.البته اگر از کد آماده ی بالا استفاده کردید می توانید از کد css زیر هم استفاده کنید:
|
1
2
3
4
5
6
7
8
9
|
#news{background:url(http:
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;}
|
منبع: سزار
