آموزش ساخت آخرین مطالب متحرک در وردپرس
حتما شما تا بحال با آخرین مطالب متحرک در سایت های مختلف برخورد کرده اید که زیبایی خاصی به صفحه ی شما می دهند و در جلب رضایت بازدید کننده تاثیر زیادی دارد و از طرفی هم مطالب جدید سایت شما را به دیگران نمایش میدهد.اگر تمایل داشته باشید در این مقاله به آموزش ساخت یک همچین قسمتی در سایت وردپرسی خواهیم پرداخت.
قیل از شروع بد نیست ببینید که درآخر کار به چه چیزی خواهیم رسید:
برای شروع ابتدا محل انتخاب دقیق قرار گرفتن آخرین اخبار را انتخاب کنید.برای انتخاب دقیق می توانید از گزینه ی Inspect element در کلیک راست مرورگر کمک بگیرید و سپس فایل header.php و style.css را از بخش ویرایشگر کدهای پوسته انتخاب کنید.
برای شروع ابتدا شما را با تگ marquee آشنا می کنم.این تگ برای دادن تحرک به متون استفاده می شود و آنها را از سمتی به سمت دیگر منتقل می کند.دز زیر پارامتر های این دستورالعمل و توضیحات آنها را مشاهده می کنید:
direction :جهت حرکت متون را نشان می دهد.(چپ به راست یا بالعکس)
scrollamount: رعت حرکت متون
onmouseover: (تابعی که داده خواهد شد را با حرکت موس بر روی متون اعمال می کند)
onmouseout : (تابعی که داده خواهد شد را با حرکت موس از روی متون اعمال می کند)
برای شروع از یک تگ marquee کمک می گیریم .(در زیر مثالی از یک تگ marquee را می بینید)
[php]<marquee id="marq" direction="right" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()"></marquee>
[/php]
حال باید برای این حلقه ی تکرار و آخرین مطالب را تعریف کنیم آن هم بین یاز و بسته ی marquee. برای این کار شما را با حلقه ی تکرار در php آشنا می کنم:
[php]<?php query_posts(‘showposts=5&orderby=time()’); while ( have_posts() ) : the_post(); ?>کد مورد نظر جهت تکرار
<?php endwhile;?>
<?php wp_reset_query();?>
[/php]
در نهایت باید حلقه ی تکرار را به کد marquee اضافه کنیم که آماده ی آنرا در زیر به همراه دو تابع stop و start می بینید:
[php]<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 زیر هم استفاده کنید:
[php]#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;}
لینک کوتاه : https://3zar.ir/?p=23232
ممنون
ساده، مختصر و مفید 😉
چرا با marquee داره نسلش منقرض میشه
با احترام .هم راحت است.هم سریع ،هم قابل رویت و بارگذاری سریع در همه جا.
پیشنهاد شما چیه دوست عزیز؟
ممنون
رضا جان ممنون خسته نباشید
باز هم ممنون بابت مطالب مفیدتان
سلام.ممنون به خاطر آموزش زیباتون یه سوال داشتم. برای نمایش تاریخ ارسال خبر در بالای وبسایتتون در باکس آخرین خبرها از چه تابعی استفاده کردید؟؟ممنون میشم اگه بگید.
سلام
الان دسترسی به سیستمم ندارم که خدمتون اعلام کنم و با گوشی پاسخگوی شم هستم ولی تابعی که استفاده کردم این بود :
[php]
echo wpp_post_count_by_date(NULL,’post’,’publish’);
[/php]
کار نکرد میشه درستش رو بهم بگید ممنون
سایت خوبی دارید.
بلا میسر تی دس قوربان،
فقط یه سوال چطوری میشه که جای اخرین مطالب یه سری متن های اختصاصی پخش کنه، مثل جریده یا صحیفه؟
ممنون
از کد زیر استفاده کنید :
[php]<marquee id="marq" direction="right" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()">
</marquee>[/php]
بین دو تگ marqee
اااااااااا
سلام چند بار این پیام رو دادم ارسال نمیشه .
چطور میشه مثل قالب مولتی نیوز وقتی موس رو مطلب میره حرکت موقط شه؟ و چطور میشه آیکون کنار هر مطلب بیاد. ممنون میشم راهنمایی کنید.
لینک قالب:
http://www.momizat.com/theme/?theme=multinews
سلام.خسته نباشید.میشه بگید چرا عنوان ها لینک دار نمیشند؟منظورم اینه که با کلیک روشون اون مطلب باز بشه.حتی من تو آدرس تگ a لینک صفحه آخرین مطالب سایتو هم دادم ولی مطالب لینک دار نشدند.میشه لطفا راهنماییم کنید.ممنون.
سلام.درستش کردم.ممنون.
سلام
اگه بخوام بجای آخرین مطالب، تیتر دسته اخبار نمایش داده بشه چیکار کنم؟
یعنی میخوام یک کتگوری خاص به جای آخرین پست ها نمایش داده بشه
ممنون
[code]<?php the_category_rss($type); ?>[/code]
با سلام و تشکر از آموزش خوبتون
بنده در بخش زیباسازی کد رو داخل استایل قرار دادم اما عمل نکرد.
میشه یکم بیشتر توضیح بدید؟
سلام
توضیحات کامل است.شما میتوانیداین کد را در سایدبار خود قرار دهید تا نتیجه را ببینید.
با سلام مجدد
ممنون از پاسختون.
درسته کد اول عمل می کرد.
منظور بنده دومین کده که برای زیبا سازی باید در style.css قرار بگیره.
اون رو توی استایل قرار دادم اما هیچ background برای کد اول ایجاد نشد.
سلام .. خسته نباشید من کد ها رو گذاشتم و نمایش داده شدند ولی مطالب متحرک لینک دار نیستند لطفا رهنمایی کنین چیکار کنم ؟
سلام
این کد برای متن و لینکدار کردن است :
[php]
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
[/php]
خواهش میکنم جواب بدین
عکساشونشون نمیده!