ورود عضویت ویژه
بک لینک
خانه >> طراحی و توسعه وب >> پایگاه وردپرس >> آموزش وردپرس >> آموزش ساخت آخرین مطالب متحرک در وردپرس

آموزش ساخت آخرین مطالب متحرک در وردپرس

12345
آموزش ساخت آخرین مطالب متحرک در وردپرسبازبینی توسط 3zar در 09-12-1392امتیاز: 5.0آموزش ساخت آخرین مطالب متحرک در وردپرسحتما شما تا بحال با آخرین مطالب متحرک در سایت های مختلف برخورد کرده اید که زیبایی خاصی به صفحه ی شما می دهند و در جلب رضایت بازدید کننده ...

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

CSS-Edit

قیل از شروع بد نیست ببینید که درآخر کار به چه چیزی خواهیم رسید:

3

برای شروع ابتدا محل انتخاب دقیق قرار گرفتن آخرین اخبار را انتخاب کنید.برای انتخاب دقیق می توانید از گزینه ی 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?php endwhile;?>
<?php wp_reset_query();?>
</marquee>
</div>

[/php]

*لازم به ذکر است که &nbsp; برای ایجاد فاصله بین تگ ها استفاده می شود.

حال باید به طراحی و زیبا سازی و از همه مهمتر تعیین ابعاد کد در 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;}

[/php]

 

 

 

QR: آموزش ساخت آخرین مطالب متحرک در وردپرس
مرجع : سزار وردپرس
لینک کوتاه : https://3zar.ir/?p=23232

دیدگاه‌های کاربران 24 نظر

  1. ممنون
    ساده، مختصر و مفید 😉

  2. چرا با marquee داره نسلش منقرض میشه

    • رضا نصرالهی

      با احترام .هم راحت است.هم سریع ،هم قابل رویت و بارگذاری سریع در همه جا.
      پیشنهاد شما چیه دوست عزیز؟
      ممنون

  3. رضا جان ممنون خسته نباشید

  4. اکبر قره باغی

    باز هم ممنون بابت مطالب مفیدتان

  5. مسعود شهرزاد

    سلام.ممنون به خاطر آموزش زیباتون یه سوال داشتم. برای نمایش تاریخ ارسال خبر در بالای وبسایتتون در باکس آخرین خبرها از چه تابعی استفاده کردید؟؟ممنون میشم اگه بگید.

    • سلام
      الان دسترسی به سیستمم ندارم که خدمتون اعلام کنم و با گوشی پاسخگوی شم هستم ولی تابعی که استفاده کردم این بود :
      [php]
      echo wpp_post_count_by_date(NULL,’post’,’publish’);
      [/php]

  6. سایت خوبی دارید.

  7. بلا میسر تی دس قوربان،

    فقط یه سوال چطوری میشه که جای اخرین مطالب یه سری متن های اختصاصی پخش کنه، مثل جریده یا صحیفه؟
    ممنون

    • رضا نصرالهی

      از کد زیر استفاده کنید :
      [php]<marquee id="marq" direction="right" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()">
      </marquee>[/php]
      بین دو تگ marqee

  8. اااااااااا

  9. سلام چند بار این پیام رو دادم ارسال نمیشه .
    چطور میشه مثل قالب مولتی نیوز وقتی موس رو مطلب میره حرکت موقط شه؟ و چطور میشه آیکون کنار هر مطلب بیاد. ممنون میشم راهنمایی کنید.
    لینک قالب:
    http://www.momizat.com/theme/?theme=multinews

  10. سلام.خسته نباشید.میشه بگید چرا عنوان ها لینک دار نمیشند؟منظورم اینه که با کلیک روشون اون مطلب باز بشه.حتی من تو آدرس تگ a لینک صفحه آخرین مطالب سایتو هم دادم ولی مطالب لینک دار نشدند.میشه لطفا راهنماییم کنید.ممنون.

  11. سلام.درستش کردم.ممنون.

  12. سلام
    اگه بخوام بجای آخرین مطالب، تیتر دسته اخبار نمایش داده بشه چیکار کنم؟
    یعنی میخوام یک کتگوری خاص به جای آخرین پست ها نمایش داده بشه
    ممنون

  13. با سلام و تشکر از آموزش خوبتون

    بنده در بخش زیباسازی کد رو داخل استایل قرار دادم اما عمل نکرد.
    میشه یکم بیشتر توضیح بدید؟

    • رضافرخی(مدیر ارشد)

      سلام
      توضیحات کامل است.شما میتوانیداین کد را در سایدبار خود قرار دهید تا نتیجه را ببینید.

  14. با سلام مجدد

    ممنون از پاسختون.
    درسته کد اول عمل می کرد.
    منظور بنده دومین کده که برای زیبا سازی باید در style.css قرار بگیره.
    اون رو توی استایل قرار دادم اما هیچ background برای کد اول ایجاد نشد.

  15. سلام .. خسته نباشید من کد ها رو گذاشتم و نمایش داده شدند ولی مطالب متحرک لینک دار نیستند لطفا رهنمایی کنین چیکار کنم ؟

    • رضافرخی(مدیر ارشد)

      سلام
      این کد برای متن و لینکدار کردن است :
      [php]
      <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
      [/php]

  16. خواهش میکنم جواب بدین

  17. عکساشونشون نمیده!

جوابی بنویسید

ایمیل شما نشر نخواهد شدفیلد های ضروری نشانه گذاری شده است. *

*

قبل از نوشتن دیدگاه به نکات مهم زیر توجه کنید


  • - دیدگاه‌هایی مانند: خوب بود، ممنون- سایت خوبی دارید- عالی بود و موارد مشابه تایید نمی‌شود.
  • - دیدگاه‌تان را فقط در رابطه با همین مطلب ثبت کنید، در غیر اینصورت پاسخ داده نخواهد شد.
  • - دیدگاه‌هایی که دارای نام‌های تبلیغاتی با هدف بک‌‌لینک گرفتن هستند تایید نمی‌شوند.