ورود عضویت ویژه
مشهدهاست
برای خرید سزار قیمت پیشنهادی خود را فقط با شماره 09333023200 تلگرام نمائید.
خانه / طراحی و توسعه وب / پایگاه وردپرس / آموزش وردپرس / آموزش ساخت آخرین مطالب متحرک در وردپرس

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

12345
آموزش ساخت آخرین مطالب متحرک در وردپرسبازبینی توسط باران مهرانگیز(سردبیر بخش طراحی و توسعه) در ۰۹-۱۲-۱۳۹۲امتیاز: 5.0آموزش ساخت آخرین مطالب متحرک در وردپرسحتما شما تا بحال با آخرین مطالب متحرک در سایت های مختلف برخورد کرده اید که زیبایی خاصی به صفحه ی شما می دهند و در جلب رضایت بازدید کننده ...

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

CSS-Edit

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

3

برای شروع ابتدا محل انتخاب دقیق قرار گرفتن آخرین اخبار را انتخاب کنید.برای انتخاب دقیق می توانید از گزینه ی Inspect element در کلیک راست مرورگر کمک بگیرید و سپس فایل header.php و style.css را از بخش ویرایشگر کدهای پوسته انتخاب کنید.

برای شروع ابتدا شما را با تگ marquee آشنا می کنم.این تگ برای دادن تحرک به متون استفاده می شود و آنها را از سمتی به سمت دیگر منتقل می کند.دز زیر پارامتر های این دستورالعمل و توضیحات آنها را مشاهده می کنید:

direction :جهت حرکت متون را نشان می دهد.(چپ به راست یا بالعکس)

scrollamount:  رعت حرکت متون

onmouseover: (تابعی که داده خواهد شد را با حرکت موس بر روی متون اعمال می کند)

onmouseout : (تابعی که داده خواهد شد را با حرکت موس از روی متون اعمال می کند)

برای شروع از یک تگ marquee کمک می گیریم .(در زیر مثالی از یک تگ marquee را می بینید)

حال باید برای این حلقه ی تکرار و آخرین مطالب را تعریف کنیم آن هم بین یاز و بسته ی marquee. برای این کار شما را با حلقه ی تکرار در php آشنا می کنم:

در نهایت باید حلقه ی تکرار را به کد marquee اضافه کنیم که آماده ی آنرا در زیر به همراه دو تابع stop  و start می بینید:

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

حال باید به طراحی و زیبا سازی و از همه مهمتر تعیین ابعاد کد در css بپردازیم.بدین منظور سند style.css را می گشاییم و با توجه به آی دی های استفاده شده در فایل header به طراحی آن می پردازیم.البته اگر از کد آماده ی بالا استفاده کردید می توانید از کد css زیر هم استفاده کنید:

 

 

 

QR: آموزش ساخت آخرین مطالب متحرک در وردپرس
مرجع : سزار
لینک کوتاه : http://www.3zar.ir/?p=23232
Processing your request, Please wait....
  • دیدگاهتان را فقط در رابطه با همین موضوع ثبت کنید, در غیر اینصورت پاسخ داده نخواهد شد.
  • اگر سوالتان به بررسی سایت مربوط می شود حتما آدرس سایت را ذکر کنید.
  • استفاده از نام های تبلیغاتی و آدرس سایت ها غیر مرتبط, باعث عدم تایید و پاسخ به دیدگاه می شود.
  • دیدگاه‌های کاربران 24 نظر

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

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

      • رضا نصرالهی

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

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

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

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

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

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

      • VIP

        سلام
        الان دسترسی به سیستمم ندارم که خدمتون اعلام کنم و با گوشی پاسخگوی شم هستم ولی تابعی که استفاده کردم این بود :

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

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

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

      • رضا نصرالهی

        از کد زیر استفاده کنید :

        بین دو تگ marqee

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

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

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

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

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

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

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

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

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

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

        سلام
        این کد برای متن و لینکدار کردن است :

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

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

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

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

    *


    *

    سفارش تبلیغ

    برای عضویت در خبرنامه پیامکی سزار کافیست عدد 3 را به شماره 500020409 پیامک کنید ! آخر هفته ها پیامک های خوشمزه ما رو رایگان بخونید !